/* La Galerie des Neiges — styles du build complet.
   Palette : nuit #0A1A3C, or #D4AF37, ivoire #F5EFE3, bordeaux #8B2332. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; src: url('../assets/fonts/CormorantGaramond-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; src: url('../assets/fonts/CormorantGaramond-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; src: url('../assets/fonts/PinyonScript-400.woff2') format('woff2'); font-display: swap; }

:root {
  --nuit: #0A1A3C;
  --or: #D4AF37;
  --or-clair: #E8C96B;
  --ivoire: #F5EFE3;
  --bordeaux: #8B2332;
  --noyer-1: #2b1a10;
  --noyer-2: #42291a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; } /* barre custom acte 1 uniquement (F3) */
body {
  background: var(--nuit);
  color: var(--ivoire);
  font-family: 'Cormorant Garamond', Georgia, serif;
  overflow-x: hidden;
}

/* ————— Grain cinéma (~5 %) ————— */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ————— Chargement (A13) ————— */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center;
  background: var(--nuit);
  transition: opacity 700ms ease;
}
.loader.cache { opacity: 0; pointer-events: none; }
.loader .monogramme {
  font-family: 'Pinyon Script', cursive;
  font-size: 3.4rem; color: var(--or);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.loader .barre { width: min(280px, 60vw); height: 2px; background: rgba(212,175,55,0.25); overflow: hidden; }
.loader .barre i { display: block; height: 100%; width: 0%; background: var(--or); transition: width 200ms ease; }
.loader .msg { color: rgba(245,239,227,0.85); font-size: 1.05rem; }

/* ————— Marque fixe (apparaît après l'acte 1) ————— */
.marque {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 50;
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 600ms ease;
}
.marque.visible { opacity: 1; }
.marque.cache { opacity: 0; } /* effacée quand le souffle passe sous elle */
.marque span {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.5rem; color: var(--ivoire);
  text-shadow: 0 2px 18px rgba(212,175,55,0.5);
}

/* ================= ACTE 1 — approche (350vh, canvas scrubbé 1:1) ================= */
.acte1 { position: relative; height: 350vh; }
.acte1-inner {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; background: var(--nuit);
}
/* Une fois l'acte 1 passé, le canvas se cache : il défilait sous le voile
   pendant le fondu et créait une ligne de démarcation qui balayait l'écran.
   visibility:hidden garde la mise en page (aucun saut), soulage le GPU,
   et réapparaît derrière le voile opaque quand on remonte. */
body.apres-acte1 .acte1-inner { visibility: hidden; }
#poster-acte1, #canvas-acte1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#canvas-acte1 { display: block; }

/* Textes overlay (fondus pilotés par le scroll, un à la fois) */
.overlay-texte {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center; pointer-events: none;
  padding: 0 8vw; opacity: 0;
  will-change: opacity;
}
.overlay-texte h1, .overlay-texte h2 {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5rem);
  color: var(--ivoire);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 46px rgba(0,0,0,0.75), 0 0 80px rgba(212,175,55,0.35);
}
.overlay-texte .sous-titre {
  margin-top: 10px;
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(232,201,107,0.95);
  text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.8);
}
/* Petit indice scroll sous le premier texte (s'efface avec le hero au scroll) */
.overlay-texte .indice-scroll {
  margin-top: 30px;
  font-size: clamp(0.68rem, 1.3vw, 0.85rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  text-indent: 0.34em; /* compense le letter-spacing pour un vrai centrage */
  color: rgba(245,239,227,0.72);
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
  animation: souffle-indice 2.6s ease-in-out infinite;
}
@keyframes souffle-indice { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Chevron « continuez » (C7) */
.chevron {
  position: absolute; left: 50%; bottom: 12vh;
  transform: translateX(-50%);
  transition: opacity 500ms ease;
  pointer-events: none;
  animation: flotte 2.2s ease-in-out infinite;
}
.chevron i {
  display: block; width: 26px; height: 26px;
  border-right: 2px solid rgba(212,175,55,0.95);
  border-bottom: 2px solid rgba(212,175,55,0.95);
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.8));
}
.chevron.cache { opacity: 0; animation: none; }
@keyframes flotte { 0%,100% { transform: translate(-50%, 0); opacity: 0.65; } 50% { transform: translate(-50%, 10px); opacity: 1; } }

/* Barre dorée fine — acte 1 seulement (F3) */
.progression {
  position: absolute; left: 8%; right: 8%; bottom: 26px; height: 2px;
  background: rgba(212,175,55,0.25);
  transition: opacity 500ms ease;
}
.progression.cache { opacity: 0; }
.progression i { display: block; height: 100%; width: 0%; background: var(--or); }

/* Voile blanc de transition */
.voile-blanc {
  position: fixed; inset: 0; z-index: 40;
  background: #fffdf7;
  opacity: 0; pointer-events: none;
}

/* ================= ACTE 2 — seuil ================= */
/* Fond transparent : la seule couche blanche est le voile fixe (aucune couture).
   Le texte n'apparaît que lorsque le blanc est presque résorbé (piloté en JS). */
.acte2 {
  position: relative; z-index: 10;
  min-height: 58vh; min-height: 58svh;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  text-align: center; padding: 0 8vw;
}
.acte2 h2 {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  color: var(--ivoire);
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 44px rgba(0,0,0,0.6), 0 0 70px rgba(212,175,55,0.35);
  opacity: 0; transform: translateY(26px);
  transition: opacity 900ms ease, transform 900ms ease;
}
.acte2.visible h2 { opacity: 1; transform: none; }
/* Sortie : le texte s'efface quand on descend vers les rayons
   (jamais deux grands manuscrits à l'écran en même temps). */
.acte2.sortie h2 { opacity: 0; transform: translateY(-18px); }

/* ================= ACTE 3 — rayons infinis ================= */
.acte3 { position: relative; z-index: 10; }

/* Couche fond : IMG-D flou + loop CLIP-3 (repli statique si clip absent).
   Opacité pilotée en continu par le scroll de l'acte 2 (aucun pop) — pas de transition CSS. */
.fond-ambiance { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; }
.fond-ambiance img, .fond-ambiance video {
  position: absolute; inset: -4%;
  width: 108%; height: 108%; object-fit: cover;
  filter: blur(14px) brightness(0.55);
  opacity: 0.85;
}
.fond-ambiance video[hidden] { display: none; } /* pas de rectangle noir tant que CLIP-3 est absent */
.fond-ambiance::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(212,175,55,0.10), transparent 70%),
    linear-gradient(180deg, rgba(10,26,60,0.55), rgba(10,26,60,0.75));
}

/* Couche premier plan : IMG-F (branche), parallaxe.
   Opacité pilotée en continu par le scroll (aucun pop) — pas de transition CSS. */
.premier-plan {
  position: fixed; inset: -6%; z-index: 30; pointer-events: none;
  background: url('../assets/img/IMG-F.jpg') center / cover no-repeat;
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0;
  transform: scaleY(-1); /* branche du coin haut → coin bas */
  will-change: transform;
}

/* Ornement de transition entre le seuil et les rayons */
.fil-dor {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 2vh 8vw 0;
  color: rgba(212,175,55,0.8);
  font-size: 0.85rem;
}
.fil-dor::before, .fil-dor::after {
  content: '';
  height: 1px; width: min(160px, 28vw);
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7));
}
.fil-dor::after {
  background: linear-gradient(90deg, rgba(212,175,55,0.7), transparent);
}

/* Message discret dans les rayons (texte 4, une fois) */
.souffle {
  position: relative; z-index: 10;
  text-align: center; padding: 3vh 8vw;
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  color: rgba(245,239,227,0.92);
  text-shadow: 0 2px 22px rgba(212,175,55,0.4);
  opacity: 0; transition: opacity 1s ease;
}
.souffle.visible { opacity: 1; }

/* Mur d'étagères — bibliothèque de grand magasin */
.mur { position: relative; z-index: 10; padding: 1vh 4vw 30vh; }
.rayon {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  min-height: 0;
  padding: 0 clamp(8px, 3vw, 40px) 40px;
  margin-bottom: 5vh;
  /* halo chaud + lambris discret derrière les cartels */
  background:
    radial-gradient(62% 88% at 50% 100%, rgba(212,175,55,0.16), transparent 72%),
    linear-gradient(180deg, rgba(20,38,79,0.28), rgba(10,22,52,0.10) 70%, transparent);
  border-radius: 6px;
}
/* Planche en bois massif : arête dorée, veinage, corps en noyer, ombre portée */
.rayon::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(240,214,140,0.75), rgba(240,214,140,0.10) 35%, transparent 55%) top / 100% 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='30'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.30' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.55 0.55 0 0'/%3E%3C/filter%3E%3Crect width='700' height='30' filter='url(%23w)'/%3E%3C/svg%3E") left top / 700px 30px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='30'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.22' numOctaves='3' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.6 0.35 0.35 0.35 0 0'/%3E%3C/filter%3E%3Crect width='420' height='30' filter='url(%23v)' opacity='0.5'/%3E%3C/svg%3E") left top / 420px 30px repeat-x,
    radial-gradient(220px 30px at 18% 60%, rgba(255,225,160,0.07), transparent 70%),
    radial-gradient(300px 30px at 74% 40%, rgba(0,0,0,0.14), transparent 70%),
    linear-gradient(180deg, #5a3a24, #3a2415 38%, #241408 72%, #150b04);
  border-top: 1px solid rgba(232,201,107,0.9);
  border-bottom: 1px solid rgba(0,0,0,0.9);
  box-shadow: 0 28px 46px rgba(0,0,0,0.65), 0 7px 16px rgba(0,0,0,0.6), 0 -12px 30px rgba(212,175,55,0.10);
}
/* Corbeaux sous la planche (gauche + droite) : lèvre or + bois */
.rayon::before {
  content: '';
  position: absolute; left: 5%; right: 5%; bottom: -18px; height: 18px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(232,201,107,0.85), rgba(232,201,107,0.85)) left top / 54px 2px no-repeat,
    linear-gradient(180deg, rgba(232,201,107,0.85), rgba(232,201,107,0.85)) right top / 54px 2px no-repeat,
    linear-gradient(180deg, #4a2f1c, #1c0f06) left 2px / 48px 16px no-repeat,
    linear-gradient(180deg, #4a2f1c, #1c0f06) right 2px / 48px 16px no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.55));
}

/* Cartel de galerie — taille uniforme.
   La photo est présentée comme une vitrine éclairée (fond sombre + spot),
   jamais dans un bloc crème : les fonds blancs deviennent des objets exposés.
   Le cartel sous la vitrine est nu (texte ivoire + prix or entre filets). */
.boite {
  position: relative;
  flex: 0 1 auto;
  width: clamp(180px, 24vw, 310px);
  background: linear-gradient(180deg, rgba(18,34,74,0.78), rgba(10,22,52,0.78));
  border: 1px solid rgba(212,175,55,0.50);
  outline: 1px solid rgba(212,175,55,0.16);
  outline-offset: 4px;
  border-radius: 3px;
  padding: 16px 16px 0;
  box-shadow: inset 0 0 0 1px rgba(6,12,30,0.65), inset 0 1px 0 rgba(255,255,255,0.09),
              0 30px 60px rgba(0,0,0,0.60);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  opacity: 0; transform: translateY(24px);
}
.boite.visible {
  opacity: 1; transform: translateY(0);
  transition: transform 520ms cubic-bezier(.22,.61,.36,1), opacity 520ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.boite:hover, .boite:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(232,201,107,0.85);
  box-shadow: inset 0 0 0 1px rgba(6,12,30,0.65), inset 0 1px 0 rgba(255,255,255,0.10),
              0 28px 55px rgba(0,0,0,0.6),
              0 0 34px rgba(212,175,55,0.40);
  outline: none;
}
.boite:focus-visible { border-color: var(--or-clair); }
.boite .vitrine {
  position: relative;
  height: clamp(200px, 25vh, 290px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(232,201,107,0.24), transparent 58%),
    linear-gradient(180deg, #16294f, #0a1734 70%, #070f24);
  border: 1px solid rgba(212,175,55,0.34);
  border-radius: 2px;
  box-shadow: inset 0 12px 28px rgba(0,0,0,0.60), inset 0 -8px 18px rgba(0,0,0,0.45);
}
.boite .vitrine::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 22px 10px rgba(10,23,52,0.55); /* fond les bords des photos claires */
  border-radius: 2px;
}
.boite img {
  max-width: 88%; max-height: 88%;
  object-fit: contain;
  border-radius: 2px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.6));
  transition: transform 300ms ease;
}
.boite:hover img { transform: scale(1.04); }
.etiquette {
  margin: 0 -16px 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.10), transparent 22%), transparent;
  border-top: 1px solid rgba(212,175,55,0.28);
  color: var(--ivoire);
  padding: 14px 10px 16px;
  text-align: center;
  height: 106px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.etiquette .nom {
  font-size: clamp(0.88rem, 1.2vw, 1.08rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.015em;
  color: var(--ivoire);
  text-shadow: 0 1px 10px rgba(0,0,0,0.8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.etiquette .prix {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(0.92rem, 1.35vw, 1.14rem);
  font-weight: 600;
  color: var(--or-clair);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.etiquette .prix::before, .etiquette .prix::after {
  content: '';
  height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.65));
}
.etiquette .prix::after {
  background: linear-gradient(90deg, rgba(212,175,55,0.65), transparent);
}

/* Ruban de soie bordeaux — importance 5/5 : bandeau fin à bord or, coupe en V.
   Ultra-discret, sans nœud. */
.boite.ruban::before {
  content: '';
  position: absolute; top: -9px; left: 16px; z-index: 2;
  width: 15px; height: 36px;
  background: linear-gradient(180deg, #9a2a3b, var(--bordeaux) 60%, #5f1621);
  border-right: 1px solid rgba(212,175,55,0.8);
  border-radius: 1px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.55);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}
.boite.ruban::after { content: none; }

/* Erreur CSV */
.erreur-csv {
  position: relative; z-index: 10;
  text-align: center; padding: 14vh 8vw;
  font-size: 1.1rem; color: rgba(245,239,227,0.9);
}
.erreur-csv button {
  margin-top: 14px;
  font: inherit; cursor: pointer;
  color: var(--nuit); background: var(--or);
  border: none; border-radius: 3px; padding: 10px 22px;
}

/* ————— Audio : bouton discret ————— */
.audio-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.7);
  background: rgba(10,26,60,0.72);
  color: var(--or);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.audio-btn:hover { box-shadow: 0 0 18px rgba(212,175,55,0.5); transform: scale(1.06); }
.audio-btn[hidden] { display: none; }

/* ————— Curseur custom (desktop, pointeur fin uniquement) ————— */
.curseur {
  position: fixed; left: 0; top: 0; z-index: 120;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.9);
  background: rgba(212,175,55,0.18);
  pointer-events: none;
  transform: translate(-100px, -100px);
  transition: width 200ms ease, height 200ms ease, background 200ms ease, opacity 300ms ease;
  display: none;
  opacity: 0; /* invisible tant que la souris n'a pas bougé (évite l'anneau perdu) */
}
.curseur.actif { opacity: 1; }
@media (pointer: fine) { .curseur { display: block; } }
.curseur.grand { width: 30px; height: 30px; background: rgba(212,175,55,0.30); }

@media (prefers-reduced-motion: reduce) {
  .boite, .boite.visible { transition: opacity 300ms ease; transform: none; }
  .boite:hover, .boite:focus-visible { transform: none; }
  .loader .monogramme, .chevron, .overlay-texte .indice-scroll { animation: none; }
}

@media (max-width: 640px) {
  .mur { padding: 2vh 2vw 24vh; }
  .rayon { gap: 10px; margin-bottom: 4vh; padding: 0 4px 38px; }
  .boite { width: clamp(140px, 40vw, 300px); }
  .boite .vitrine { height: clamp(170px, 24vh, 250px); }
  .etiquette { height: 100px; }
  .etiquette .prix { letter-spacing: 0.04em; gap: 6px; font-size: 0.8rem; }
}