@import url("couleurs.css"); /* les couleurs sont dans couleurs.css (partagées avec les pages d'information) */
* { margin: 0; box-sizing: border-box; }

body {
  height: 100vh;
  background: var(--fond, #dcebfa);
  color: var(--texte, #000000);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden; /* la page elle-même ne défile pas: c'est #site qui défile */
}

/* ---------- Effet papier ----------
   Un grain très fin posé par-dessus toute la page (y compris le pastel et l'animation). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none; /* le grain ne bloque jamais le doigt */
  mix-blend-mode: multiply;
  opacity: 0.15; /* augmente pour un papier plus rugueux, baisse pour plus lisse */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================  PAGE 1: L'ÉTOILE  ===================== */
#intro {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Étoile terminée: toute la page disparaît sur place (0,4 s d'attente, 0,8 s de fondu) */
  transition: opacity 0.8s ease-in-out 0.4s;
}
body.fini #intro { opacity: 0; pointer-events: none; }

#consigne {
  margin-top: 2.5vh;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Zone carrée qui contient le canvas et les numéros */
#scene {
  position: relative;
  width: min(100vw, 90vh);
  aspect-ratio: 1;
  margin-top: 0.5vh;
}

#toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none; /* empêche la page de défiler pendant qu'on dessine */
}

/* Les numéros: petits, de la même taille tout le long */
.point {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9pt;
  color: var(--texte, #000000);
  pointer-events: none; /* c'est le canvas qui capte le doigt */
}

/* Bouton "passer": rectangle dessiné à la main, à colorier au pastel pour sauter l'étoile */
#passer {
  position: absolute;
  right: 3vw;
  bottom: 3vh;
  width: min(88vw, 380px);
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#passer canvas {
  display: block;
  width: 100%;
  aspect-ratio: 720 / 200; /* même proportions que le repère interne du JS */
}
#passer p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 9%;
  text-align: center;
  font-size: 9pt;
  line-height: 1.35;
  pointer-events: none; /* le texte ne bloque pas le crayon */
}

/* =====================  PAGE 2: LE SITE  ===================== */
/* #site occupe tout l'écran et défile à l'intérieur de lui-même.
   Au départ il est garé hors de l'écran, à gauche; il glisse en place comme un diaporama. */
#site {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--fond, #dcebfa);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;            /* cache la barre de défilement (Firefox) */
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 1.3s linear 1s;
}
#site::-webkit-scrollbar { display: none; } /* idem pour Chrome / Safari */
body.fini #site { transform: translateX(0); pointer-events: auto; }

/* ---- L'accueil: l'animation reste collée à l'écran pendant que le titre défile ----
   La hauteur de la section = 100vh (l'écran) + la distance pendant laquelle l'animation reste fixe.
   Ici 160vh: l'animation reste fixe pendant 60vh de défilement, le temps que le titre sorte. */
#accueil {
  position: relative;
  height: 160vh;
}

#animation {
  position: sticky;   /* "collé": reste en haut de l'écran tant que la section n'est pas finie */
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;  /* remplit l'écran sans déformer (contain = tout voir, avec des bandes) */
}

/* Le titre n'est PAS collé: il défile normalement avec la page, par-dessus l'animation */
#accueil header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  text-align: center;
  color: #000000;
  opacity: 0;
  transition: opacity 1s ease-out 2.8s; /* le titre apparaît quand le diaporama est arrivé */
}
body.fini #accueil header { opacity: 1; }

#accueil h1 { font-size: 12pt; font-weight: normal; letter-spacing: 0.08em; }
#accueil p  {
  font-family: "MaTypo", Arial, sans-serif; /* ta typographie (voir @font-face plus bas) */
  font-size: 9pt;
}

/* L'adresse courriel, sous le titre: en Arial (lisible: une adresse contient des @ et des points), rouge au survol */
#accueil .courriel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: var(--texte, #000000);
  text-decoration: none;
}
#accueil .courriel:hover,
#accueil .courriel:focus-visible { color: var(--rouge, #e10600); outline: none; }

/* ---- Illustrations: une bande horizontale qui avance avec le défilement vertical ----
   La hauteur de la section est calculée par le JS: elle correspond à la longueur de la bande.
   Le cadre reste collé à l'écran pendant que la bande glisse de gauche à droite. */
#illustrations,
#courtes-animations { position: relative; }   /* les courtes animations fonctionnent exactement pareil */

#illustrations .cadre,
#courtes-animations .cadre {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-bottom: 8vh;   /* remonte les illustrations: plus d'espace avant le titre en bas */
  /* Fond opaque: le "multiply" des images s'applique sur ce papier */
  background: var(--fond, #dcebfa);
}

#piste,
#piste-anim {
  flex: none;
  position: relative; /* le JS le décale avec "left" (voir intro.js) */
  display: flex;
  flex-direction: row-reverse; /* la 1re illustration est à droite; le JS ajoute des copies pour que la bande tourne en boucle */
  gap: 2.5vw;   /* espace entre les illustrations */
}

/* ---- Titres des sections (dans ta typographie) ---- */
.titre-section {
  position: absolute;
  z-index: 4;          /* au-dessus de la vidéo qui déborde et des lettres */
  max-width: 92vw;
  font-family: "MaTypo", Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 30px); /* change la taille de tous les titres ici */
  line-height: 1.1;
  color: var(--texte, #000000);
}

/* Où se place chaque titre (en bas de sa section, avec de l'espace au-dessus) */
#legende-illus { left: 4vw; bottom: 4vh; }   /* sous les illustrations, à gauche */
#legende-typo  { left: 4vw; bottom: 4vh; }   /* sous l'étoile, à gauche */
#legende-video { left: 4vw; bottom: 2vh; opacity: 0; } /* apparaît avec le titre de la vidéo (le JS gère) */
#legende-anim  { left: 4vw; bottom: 4vh; }   /* sous les courtes animations, à gauche */

#piste figure,
#piste-anim figure { flex: none; }
#piste img,
#piste-anim video {
  display: block;
  height: 62vh;   /* taille des illustrations et des animations: la largeur s'adapte à leur format */
  width: auto;
  mix-blend-mode: multiply; /* le blanc des images prend la couleur du papier */
}

/* ---- Fin de la page: "retour en haut", puis les mêmes infos qu'en haut + Instagram ---- */
#fin {
  position: relative;
  z-index: 4;            /* au-dessus des lettres qui se promènent */
  min-height: 70vh;
  padding: 12vh 4vw 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8vh;
  text-align: center;
}
#retour-haut {
  font-family: "MaTypo", Arial, sans-serif;   /* ta typographie */
  font-size: clamp(18px, 2.2vw, 30px);        /* même taille que les titres des sections */
  line-height: 1.1;
  color: var(--texte, #000000);
  background: none;
  border: none;
  padding: 0.3em 0.6em;
  cursor: pointer;
}
#retour-haut:hover,
#retour-haut:focus-visible { color: var(--rouge, #e10600); outline: none; }

#fin .infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}
#fin .nom    { font-size: 12pt; letter-spacing: 0.08em; }               /* comme le titre en haut */
#fin .metier { font-family: "MaTypo", Arial, sans-serif; font-size: 9pt; } /* comme en haut */
#fin a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: var(--texte, #000000);
  text-decoration: none;
}
#fin a:hover,
#fin a:focus-visible { color: var(--rouge, #e10600); outline: none; }

/* ---- Typographie: des lettres en étoile qui fuient la souris ----
   Mets ta police dans le dossier "fonts" (voir les noms ci-dessous). Tant qu'elle est absente,
   les lettres s'affichent en Arial. */
@font-face {
  font-family: "MaTypo";
  src: url("fonts/ma-typo.woff2") format("woff2"),
       url("fonts/ma-typo.otf") format("opentype"),
       url("fonts/ma-typo.ttf") format("truetype");
  font-display: swap;
}

#contenu { position: relative; } /* sert de repère à la couche des lettres */
#typo { position: relative; height: 100vh; margin: 35vh 0; } /* la place pour l'étoile + 35vh de vide au-dessus et en dessous */

/* Couche transparente qui couvre toute la page: les lettres peuvent aller partout */
#lettres {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none; /* elle ne bloque jamais la souris */
  --taille-lettre: 32px; /* le JS l'ajuste à la taille de l'étoile */
}
.lettre {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "MaTypo", Arial, sans-serif;
  font-size: var(--taille-lettre);
  line-height: 1;
  color: var(--rouge, #e10600); /* les lettres sont rouges */
  user-select: none;
  will-change: transform;
}
img.lettre { height: var(--taille-lettre); width: auto; } /* si tes lettres sont des images */

/* ---- Sélection: la vidéo prend d'abord tout l'écran, puis dézoome; le titre apparaît dessous ----
   La section est plus haute que l'écran: pendant ce défilement supplémentaire, la scène reste collée à l'écran.
   Ici 160vh = 100vh (l'écran) + 60vh de défilement pendant lesquels la vidéo dézoome (plus petit = plus rapide). */
#selection {
  position: relative;
  height: 160vh;
}
#scene-video {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0 4vw 9vh;   /* remonte la vidéo et son titre: de la place en bas pour le titre cliquable */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Le cadre = la taille normale de la vidéo (celle d'avant). Le JS ajuste --ratio au format réel de ta vidéo. */
#cadre-video {
  background: #000;    /* le fond noir fait partie de la page dès le départ, même avant que la vidéo soit chargée */
  --ratio: 1.7778;
  width: min(92vw, 1100px, calc(78vh * var(--ratio))); /* 1100px max, et toujours assez petit pour laisser la place au titre */
  aspect-ratio: var(--ratio);
}
#cadre-video video {
  background: #000;    /* idem pour la vidéo: elle est noire dès qu'elle apparaît (elle grossit avec le zoom) */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform; /* l'agrandissement est géré par le JS (partie 10) */
}
#selection h2 {
  margin-top: 4vh;
  font-size: 12pt;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0;              /* le JS le fait apparaître quand la vidéo a retrouvé sa taille */
}