/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html, body { overscroll-behavior-y: none; }

:root{
  --header-h: 86px;
  --safe-top: env(safe-area-inset-top, 0px);
}

body {
  background: #0d0d0d; /* même teinte que le gradient fallback */
  color: #f5f5f5;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: calc(var(--header-h) + var(--safe-top));
}

/* ===== Fallback gradient fixé sous le canvas (anti-flash) ===== */
body.has-bg-fallback {
  position: relative;            /* crée un contexte de peinture local */
  isolation: isolate;            /* évite les fuites de compositing */
}
body.has-bg-fallback::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                   /* sous le canvas (#scene) */
  /* Gradient doux qui match ton style */
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(98,88,255,0.18) 0%,
      rgba(20,20,20,0.0) 60%)
    ,
    linear-gradient(180deg, #0f0f12 0%, #0d0d0d 35%, #0b0b0b 100%);
  /* Force un calque GPU persistant pour le fallback lui-même */
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ============ CANVAS BACKGROUND STABLE ============ */
canvas#scene{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;

  /* Hauteur: stable */
  height: 100vh;
}
@supports (height: 100svh) {
  canvas#scene { height: 100svh; }
}
/* Fallback JS au chargement */
canvas#scene{
  height: var(--vh-stable, 100vh);
}

/* Empilement et compositing */
canvas#scene{
  z-index: 0;                 /* au-dessus du fallback, sous le contenu */
  pointer-events: none;

  /* Forçage GPU + stabilité */
  transform: translate3d(0,0,0);           /* meilleur que translateZ(0) sur iOS */
  -webkit-transform: translate3d(0,0,0);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;

  /* Isoler la peinture du canvas pour limiter les flashes cross-layers */
  contain: paint;
  /* Petit trick: opacité non entière garde le layer promu sur certains WebKit */
  opacity: 0.9999;
}

/* Effet flou sur desktop uniquement */
body.contact canvas#scene,
body.work canvas#scene{
  filter: blur(6px) brightness(0.85);
}


/* Contenu au-dessus du canvas */
main { position: relative; z-index: 1; }

/* ============ HEADER (promu GPU pour éviter les pop-in) ============ */
header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100000;
  padding: calc(30px + var(--safe-top)) 40px 20px;
  background: transparent;
  transition: opacity .28s ease, transform .28s ease;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
header.header--hidden{
  opacity: 0; transform: translate3d(0,-12px,0); pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ header{ transition: none; } }

/* NAV */
nav {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto;
}
nav h1 { color: #fff; font-size: 20px; letter-spacing: 2px; text-align: center; flex: 1; }
nav .nav-left, nav .nav-right { display: flex; align-items: center; }
nav .nav-left a, nav .nav-right a{
  margin: 0 10px; color: #aaa; text-decoration: none; font-weight: bold; font-size: 14px;
  transition: color .25s ease;
}
nav .nav-left a.active, nav .nav-left a:hover { color: #fff; }
nav .nav-right img { width: 20px; height: 20px; filter: invert(80%); }

/* ============ GALERIE HOME ============ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin: 20px;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
.gallery-item img:hover { transform: scale(1.05); }

/* ===== PAGE PROJET — LAYOUT VERTICAL ===== */
.work-page {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px 120px;
  text-align: center;
}
.project-hero { margin-bottom: 40px; }
.project-hero h2 { font-size: clamp(28px, 4vw, 48px); color: #fff; margin-bottom: 12px; }
.project-hero p  { color: #fff; font-size: 16px; line-height: 1.7; }

/* Médias centrés en pile */
.media-list { display: flex; flex-direction: column; gap: 40px; }
.media-item { width: 100%; max-width: 900px; margin: 0 auto; }
.media-item img, .media-item video, .figma-embed iframe {
  display: block; width: 100%; height: auto; border: none; border-radius: 0; object-fit: cover;
}

/* FIGMA embed responsive */
.figma-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;
  background: #111; border: 1px solid rgba(255,255,255,0.08); }
.figma-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Iframe responsive (Figma ou autre) */
.embed, .figma-embed { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;
  background: #111; border: 1px solid rgba(255,255,255,0.08); }
@supports (aspect-ratio: 1 / 1) {
  .embed, .figma-embed { height: auto; padding-bottom: 0; aspect-ratio: var(--ratio, 16 / 9); }
}
.embed iframe, .figma-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

/* ============ CONTACT ============ */
.contact-container {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(100vh - var(--header-h)); padding: 20px;
}
.contact-card {
  background: rgba(255, 255, 255, 0); backdrop-filter: blur(10px);
  border-radius: 12px; padding: 40px; max-width: 600px; width: 100%;
  text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.contact-card h1 { font-size: 32px; margin-bottom: 10px; }
.contact-card h2 { font-size: 22px; margin-bottom: 20px; color: #ddd; }
.contact-card p  { color: #ccc; font-size: 16px; line-height: 1.6; }

/* ============ HINT (scroll home) ============ */
#hint{
  position: fixed; bottom: 40px; left: 50%; transform: translate3d(-50%,0,0);
  background: transparent; color: black; padding: 10px 20px; border-radius: 6px;
  font-size: 14px; z-index: 9999; text-align: center; pointer-events: none;
  opacity: 1; transition: opacity .5s ease;
  will-change: opacity, transform;
}
#hint.hide { opacity: 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){ :root{ --header-h: 96px; } }
@media (max-width: 768px){
  :root{ --header-h: 104px; }
  nav { flex-direction: column; text-align: center; gap: 12px; }
  nav h1 { margin: 6px 0; }
  .work-page { padding: 0 16px 120px; }
  .contact-card { padding: 24px; }
}

/* Interactions canvas */
body.work canvas#scene,
body.contact canvas#scene { pointer-events: none; }
body.home canvas#scene   { pointer-events: auto; }

/* Footer */
.site-footer{
  position: fixed; left: 16px; bottom: 16px; z-index: 100000;
  color: #fff; opacity: 0.86; font-size: 12px; letter-spacing: .03em;
  user-select: none; pointer-events: none;
}
@media (max-width: 640px){
  .site-footer{ left: 12px; bottom: 12px; font-size: 11px; }
}

/* ============ PAGE CV (resume) ============ */
body.resume { overflow: hidden; height: 100vh; }
body.resume canvas#scene { pointer-events: auto; filter: none; }

/* Plus d’espace sous le header sur les pages projets */
body.work { --header-h: 132px; }
@media (max-width: 1024px){ body.work { --header-h: 140px; } }
@media (max-width: 768px) { body.work { --header-h: 148px; } }