/* --------------------------------------------------------------------------
   Reset minimal
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Masqué visuellement mais lu par Google et les lecteurs d'écran
   (on n'utilise PAS display:none, qui retirerait le contenu de l'accessibilité) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;          /* pas de scroll natif : on gère tout au scroll JS */
  background: #000;
  touch-action: none;        /* nos swipes ne sont pas détournés (scroll, pull-to-refresh) */
}

/* --------------------------------------------------------------------------
   Le canvas three.js : plein écran, fixé en fond
   -------------------------------------------------------------------------- */
#scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;            /* enlève l'espace blanc sous les canvas inline */
}

/* --------------------------------------------------------------------------
   Overlay de flou (mode focus) : floute le fond via backdrop-filter
   -------------------------------------------------------------------------- */
#flou-overlay {
  position: fixed;
  inset: 0;
  z-index: 4;                /* au-dessus du canvas, sous le cadre (z-index 5) */
  pointer-events: none;      /* ne bloque rien (scroll, survol du cadre) */
  background: rgba(15, 15, 15, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.45s ease,
              -webkit-backdrop-filter 0.45s ease,
              background 0.45s ease;
}

/* Mode focus : survol du cadre -> le fond se floute (+ légère teinte) */
body.cadre-focus #flou-overlay {
  background: rgba(15, 15, 15, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   HUD : titre du projet + compteur (minimal / typographique)
   -------------------------------------------------------------------------- */
#hud {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 10;
  color: #fff;
  font-family: system-ui, sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);  /* lisible sur fond clair ou foncé */
  pointer-events: none;       /* le HUD ne bloque pas les clics/scroll */
}

#hud-title {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* fondu géré par JS lors du changement de vidéo */
}

#hud-counter {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;   /* chiffres de largeur fixe : pas de saut */
}

.hud-sep {
  margin: 0 6px;
  opacity: 0.7;
}

/* Caractères "brouillés" pendant l'effet scramble (titre, compteur, menu) */
.dud {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Flèches de navigation gauche / droite (minimal / typographique)
   -------------------------------------------------------------------------- */
.nav-arrow {
  position: fixed;
  top: 0;
  z-index: 10;

  /* zones cliquables : toute la hauteur, 15% de la largeur de chaque côté.
     Visuellement invisibles : c'est le curseur custom qui montre la flèche. */
  width: 15vw;
  height: 100vh;
  height: 100dvh;            /* mobile : hauteur réelle (tient compte de la barre d'URL) */

  background: none;
  border: none;
}

#nav-prev { left: 0; }
#nav-next { right: 0; }

/* chevrons des boutons masqués : le curseur custom prend le relais */
.nav-arrow svg {
  display: none;
}

/* --------------------------------------------------------------------------
   Curseur custom
   -------------------------------------------------------------------------- */
/* On ne cache le curseur natif (et on n'affiche le nôtre) que sur les écrans
   à pointeur fin (souris). Sur tactile, on ne fait rien. */
@media (hover: hover) and (pointer: fine) {
  html { cursor: none; }   /* cursor s'hérite -> cache le natif partout */
}
@media (hover: none), (pointer: coarse) {
  #cursor { display: none; }        /* pas de curseur custom au doigt */
  .nav-arrow { cursor: pointer; }
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;                 /* point d'ancrage : son origine = la position souris */
  height: 0;
  z-index: 100;
  pointer-events: none;     /* ne bloque jamais les clics dessous */
  opacity: 0;               /* caché tant que la souris n'a pas bougé */
  will-change: transform;
}

/* Le rond : centré sur l'origine via les marges négatives (PAS via transform,
   pour laisser transform libre pour la rotation + l'étirement). */
.cursor-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: #000;
  will-change: transform;
}

/* Les chevrons : centrés aussi, mais ne se déforment jamais (restent droits). */
.cursor-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-icon .chev {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;               /* cachés par défaut */
  transition: opacity 0.2s ease;
}

/* On affiche le bon chevron selon le mode porté par #cursor (géré en JS). */
#cursor[data-mode="prev"] .chev-left  { opacity: 1; }
#cursor[data-mode="next"] .chev-right { opacity: 1; }

/* Icônes play / pause du curseur (mode focus sur le cadre vidéo) */
.cursor-icon .ic-play,
.cursor-icon .ic-pause {
  position: absolute;
  width: 32px;
  height: 32px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor-icon .ic-play {
  fill: #fff;
  stroke: none;
}
.cursor-icon .ic-pause {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
#cursor[data-mode="play"]  .ic-play  { opacity: 1; }
#cursor[data-mode="pause"] .ic-pause { opacity: 1; }

/* Hamburger animé (mode menu) qui morphe en croix (mode fermer),
   exactement comme le bouton #menu-toggle */
.cursor-icon .cursor-burger {
  position: absolute;
  width: 26px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor-icon .cursor-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#cursor[data-mode="menu"]   .cursor-burger,
#cursor[data-mode="fermer"] .cursor-burger { opacity: 1; }
#cursor[data-mode="fermer"] .cursor-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#cursor[data-mode="fermer"] .cursor-burger span:nth-child(2) { opacity: 0; }
#cursor[data-mode="fermer"] .cursor-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Loader (écran de chargement) + titre d'intro
   -------------------------------------------------------------------------- */
#loader {
  position: fixed;
  inset: 0;                 /* = top/right/bottom/left: 0 */
  z-index: 50;              /* au-dessus de la scène, du HUD et des flèches */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f2;       /* fond clair, dans l'esprit de l'image */
  overflow: hidden;
}

/* L'image de fond du loader : cachée au départ, révélée à 100% (via .reveal) */
.loader-image {
  position: absolute;
  inset: 0;
  background: url("../images/index_background.png") center / cover no-repeat;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 1.2s ease, transform 1.6s ease;
}
#loader.reveal .loader-image {
  opacity: 1;
  transform: scale(1);
}

/* Le titre : deux lignes, cachées puis apparition en blur-in (via .titre) */
.loader-hero {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero {
  font-size: clamp(35px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: #191c1c;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 1.2s ease, filter 1.2s ease;
}
#loader.titre .hero {
  opacity: 1;
  filter: blur(0);
}
/* la 2e ligne apparaît juste après la 1re */
#loader.titre .hero:nth-child(2) {
  transition-delay: 0.25s;
}

/* La barre de progression */
.loader-progress {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 60vw);
  z-index: 3;
  text-align: center;
  transition: opacity 0.5s ease;
}
#loader.reveal .loader-progress {   /* on masque la barre une fois chargé */
  opacity: 0;
}

.loader-bar {
  height: 1px;
  width: 0%;
  background: #191c1c;
  transition: width 0.4s ease;
}

.loader-percent {
  margin-top: 12px;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #191c1c;
  font-variant-numeric: tabular-nums;
}

/* Fondu de sortie de tout le loader (révèle la scène) */
#loader.sortie {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

/* --------------------------------------------------------------------------
   Cadre vidéo central (16:9) — la "vraie" vidéo, par-dessus le fond
   -------------------------------------------------------------------------- */
#cadre {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;                 /* au-dessus du fond, sous le HUD/flèches/curseur */
  width: min(900px, 64vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  /* pointer-events auto : nécessaire pour détecter le survol (curseur + pause).
     Le scroll / swipe continue de fonctionner car ces events remontent (bubble)
     jusqu'à window où on les écoute. */
}

/* portrait / petits écrans : le cadre prend plus de largeur */
@media (max-aspect-ratio: 1 / 1) {
  #cadre { width: 88vw; }
}

/* les deux couches vidéo empilées (crossfade géré en JS via l'opacité) */
.cadre-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* remplit le cadre sans déformer */
}

/* --------------------------------------------------------------------------
   Menu des projets : bouton hamburger + panneau 3D + grille de vignettes
   -------------------------------------------------------------------------- */
/* Réglages de l'effet 3D (à ajuster à l'œil) */
:root {
  --menu-perspective: 1400px;   /* + petit = perspective + marquée */
  --menu-angle-ferme: -90deg;   /* perpendiculaire (sens de pivot inversé) */
  --menu-angle-ouvert: 0deg;    /* ouvert : face à la vue (rotation totale de 90°) */
}

/* Bouton hamburger (bas droite) */
#menu-toggle {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;                  /* au-dessus du panneau du menu */
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
}
#menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* hamburger -> croix quand le menu est ouvert */
body.menu-ouvert #menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-ouvert #menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-ouvert #menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* L'overlay du menu */
#menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  opacity: 0;
  pointer-events: none;         /* fermé : ne capte rien */
  transition: opacity 0.4s ease;
}
body.menu-ouvert #menu {
  opacity: 1;
  pointer-events: auto;
}

.menu-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* perspective sur le PARENT DIRECT de la grille, sinon le rotateX est "à plat" */
  perspective: var(--menu-perspective);
}

/* La grille = le "panneau" qui pivote en 3D */
.menu-grille {
  list-style: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: center;        /* centre les 2 rangées verticalement */
  gap: 1.4vw;
  padding: 5vw;
  background: rgba(18, 18, 18, 0.92);

  transform-origin: center bottom;
  transform: rotateX(var(--menu-angle-ferme));   /* fermé : perpendiculaire */
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.menu-ouvert .menu-grille {
  transform: rotateX(var(--menu-angle-ouvert));  /* ouvert : incliné */
}

/* mobile / portrait : moins de colonnes */
@media (max-aspect-ratio: 1 / 1) {
  .menu-grille { grid-template-columns: repeat(2, 1fr); }
}

/* Une vignette : aperçu vidéo + titre */
.menu-item {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.menu-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.menu-item:hover .menu-thumb {
  transform: scale(1.06);
}
.menu-titre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 12px 10px;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}