/* Base */
:root {
  color-scheme: dark;
  --blur-end: 14px;   /* force du flou en fin */
  --dim-end: 0.65;    /* assombrissement en fin */
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
html, body { height: 100%; }
body {
  margin: 0;
  background: #000; color: #fff;
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}


/* Zone de scrollytelling: la hauteur définit la "durée" de scrub */


.scrolly { height: 300vh; position: relative; }

/* La scène (vidéo + overlay) est épinglée plein écran et au-dessus tant qu'elle n'est pas finie */
.stage {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  background:#000;
  z-index: 2; /* au-dessus du contenu jusqu’à la fin */
}

/* Vidéo plein cadre + transitions pour l'état "fin" */
.stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block; background: #000;
  transition: filter .5s ease, transform .5s ease, opacity .5s ease;
  will-change: filter, transform;
}

/* Overlay texte centré, qui remonte au scroll */
.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  padding: 6vh 6vw;
  will-change: transform, opacity;
}
.overlay h1 {
  margin: 0 0 1rem 0;
  font-size: clamp(1.8rem, 6vw, 4rem);
  letter-spacing: .02em;
  text-align: center;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.overlay p {
  margin: 0; opacity: .8; text-align: center;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* La section suivante chevauche visuellement la scène,
   mais reste derrière tant que la vidéo est "devant". */
.content {
  position: relative;
  z-index: 1;             /* derrière .stage au départ */
  margin-top: -100vh;     /* chevauchement contrôlé */
  padding-top: calc(100vh + 3rem); /* ajoute 3rem d'espace sous la vidéo */
  background: transparent;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 6rem;
  font-size: 1.3em;
}

.content h2{
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin: 2rem 0 1rem 0;
  text-align: left;
}

.content p {
  text-align: left;
  margin-left: 0;
}

/* ÉTAT: vidéo terminée → flou, recul en arrière-plan, clics libérés */
body.video-ended .stage {
  z-index: 0;             /* passe derrière le contenu */
  pointer-events: none;   /* ne bloque pas les interactions */
}
body.video-ended .stage video {
  filter: blur(var(--blur-end)) brightness(var(--dim-end)) saturate(.9);
  transform: scale(1.05); /* léger scale pour un flou propre sur les bords */
}

.gallery {
  --gap: 16px;
  padding: 4rem min(6vw, 40px);
  background: transparent;
}

.gallery > h2 {
  margin: 0 0 1rem 0;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
}

/* Masonry via colonnes: léger et très fiable */
.masonry {
  column-width: 320px;      /* largeur cible des colonnes */
  column-gap: var(--gap);
}

.masonry .item {
  break-inside: avoid;
  display: block;
  margin: 0 0 var(--gap);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.masonry .item:hover { transform: translateY(-2px); }
.masonry .item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.masonry img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lightbox */
.lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out; /* indique qu’un clic ferme */
}

.lb-backdrop.is-open { display: flex; }

.lb-content {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}

.lb-content img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  height: auto;
}

/* Désactive le scroll du body quand la lightbox est ouverte */
.body-no-scroll { overflow: hidden; }


/* Petits écrans: augmente l’espacement */
@media (max-width: 480px) {
  .gallery { --gap: 12px; padding: 3rem 16px; }
}

/* Fallback accessibilité en cas de motion réduite */
@media (prefers-reduced-motion: reduce) {
  .overlay { position: static; padding: 2rem; }
  .stage { position: static; height: auto; }
  .scrolly { height: auto; }
  .stage video { position: static; width: 100%; height: auto; transition: none; }
  .content { margin-top: 0; padding-top: 0; }
}

/* Dégradé fixe en bas de page pour masquer le vide */
#page-fade-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;                 /* épaisseur du fondu */
  pointer-events: none;         /* ne bloque pas les clics */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.06) 35%,
    rgba(0,0,0,0.18) 65%,
    var(--page-bg, #0b0b0b) 100% /* remplace par la couleur de fond réelle */
  );
  z-index: 8000;                /* sous ton CTA/lightbox si besoin */
}

/* Si ton site a un fond clair, adapte automatiquement via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  #page-fade-bottom {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.5) 100%
    );
  }
}

#ig-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Taille du bouton (cible tactile ≈44px) */
  width: 44px;
  height: 44px;
  padding: 0;

  border-radius: 10px;
  text-decoration: none;

  /* Fond lisible partout */
  background: rgba(0, 0, 0, 0.5);         /* sombre transparent */
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px) saturate(120%); /* retire si tu veux 0 coût GPU */

  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

#ig-btn:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}

#ig-btn:active { transform: translateY(0); }

#ig-btn img {
  /* Taille de l’icône PNG */
  width: 22px;
  height: 22px;
  display: block;
  /* Le PNG est déjà blanc: pas de filtre nécessaire */
  /* object-fit: contain;  // décommente si besoin */
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  #ig-btn { transition: none; }
}

/* Variante plus claire si tu utilises un thème clair par défaut */
@media (prefers-color-scheme: light) {
  #ig-btn {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, .12);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
  }
}

#raph-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));  /* ← passe à gauche */
  right: auto;                                  /* ← enlève l’ancrage droite */
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 55px;
  height: 44px;
  padding: 0;

  border-radius: 10px;
  text-decoration: none;

  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px) saturate(120%);

  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

#raph-btn:hover {
  transform: translateY(-1px);
  background: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}

#raph-btn:active { transform: translateY(0); }

#raph-btn img {
  height: 22px;       /* optionnel si tu veux forcer la taille */
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  #raph-btn { transition: none; }
}

@media (prefers-color-scheme: light) {
  #raph-btn {
    background: rgba(255,255,255,.75);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
  }
}