/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — la vitrine.
   Logo, titre, vidéo, catégories, logos. Rien d'autre.
   La signature, c'est le liseré champagne qui passe DERRIÈRE la vidéo.
   ═══════════════════════════════════════════════════════════════ */

.pzv {
  --or: #D6B875;
  --or-vif: #F4E4BD;
  --argent: #E9E9E7;
  --gris: #C8C8C8;
  --titre: "Stack Sans Notch", "DM Sans", system-ui, sans-serif;
  --texte: "DM Sans", "Satoshi", system-ui, sans-serif;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100vw;
  background: #050506;
  overflow: hidden;
  padding: clamp(24px, 4.4vw, 54px) 20px clamp(50px, 9vw, 92px);
  font-family: var(--texte);
  text-align: center;
}
.pzv *, .pzv *::before, .pzv *::after { box-sizing: border-box; }

/* grain, presque imperceptible */
.pzv-grain { position: absolute; inset: -40%; z-index: 1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Le halo doré remontait au-dessus du logo et se lisait comme un faisceau.
   On le supprime : la lumière ne vient plus que du liseré, derrière l'encart. */
.pzv-souffle { display: none; }
.pzv-dedans { position: relative; z-index: 3; width: 100%; max-width: 1080px; margin: 0 auto; }

/* ── logo ────────────────────────────────────────────────────── */
.pzv-logo { display: block; height: auto; margin: 0 auto;
  width: clamp(122px, 33vw, 168px); filter: brightness(1.06); }
/* Barre retirée : plus rien au-dessus du logo. Pour la remettre,
   supprimer « display: none » ci-dessous. */
.pzv-barre { display: none; }

/* ── titre ───────────────────────────────────────────────────── */
.pzv-titre { margin: clamp(26px, 4.6vw, 44px) 0 0; font-family: var(--titre); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.028em; line-height: 1.0;
  font-size: clamp(33px, 9.4vw, 72px); }
.pzv-titre span { display: block; }
.pzv-arg {
  background-image: linear-gradient(172deg, #A9ACB0 0%, #FFFFFF 30%, #E6E6E4 56%, #B4B7BA 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.pzv-or {
  position: relative;
  background-image: linear-gradient(172deg, #9C8148 0%, #E4C88C 26%, #F8EFDA 50%, #C8A96A 74%, #E9D5A5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.pzv-sous { margin: clamp(20px, 3.6vw, 30px) 0 0; font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; font-size: clamp(11.5px, 3.1vw, 15px);
  color: rgba(233,233,231,.6); }

/* ── la scène : vidéo + liseré ───────────────────────────────── */
.pzv-scene { position: relative; margin: clamp(52px, 9vw, 92px) auto 0;
  width: 100%; max-width: 620px; }
@media (min-width: 900px) { .pzv-scene { max-width: 860px; } }
.pzv-trace { position: absolute; left: -22%; right: -22%; top: -14%; bottom: -14%;
  z-index: 1; pointer-events: none; overflow: visible; }
.pzv-trace path { fill: none; stroke-linecap: round; }
.pzv-trace .halo { stroke: rgba(214,184,117,.5); stroke-width: 10; filter: blur(14px); }
@media (max-width: 767px) {
  /* La trace ne doit jamais remonter jusqu'au titre : on borne sa boîte. */
  .pzv-trace { left: -34%; right: -34%; top: -12%; bottom: -30%; }
  .pzv-trace .halo { stroke-width: 14; filter: blur(16px); stroke: rgba(214,184,117,.6); }
  .pzv-trace .fil { stroke-width: 1.8; }
}
.pzv-trace .fil  { stroke: var(--or-vif); stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(244,228,189,.9)) drop-shadow(0 0 16px rgba(214,184,117,.55)); }

.pzv-cadre { position: relative; z-index: 2; border-radius: clamp(22px, 5vw, 28px); overflow: hidden;
  aspect-ratio: 16 / 10; background: #0b0b0d;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 34px 90px rgba(0,0,0,.78), 0 1px 0 rgba(255,255,255,.14) inset;
  transition: border-color 1.1s ease, box-shadow 1.1s ease; }
.pzv-cadre.eclaire {
  border-color: rgba(244,228,189,.62);
  box-shadow: 0 34px 90px rgba(0,0,0,.78), 0 1px 0 rgba(255,255,255,.2) inset,
              0 0 46px rgba(214,184,117,.3), 0 0 120px rgba(214,184,117,.16);
}
.pzv-cadre img, .pzv-cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pzv-cadre[data-vide="1"]::after { content: attr(data-media); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .2em;
  color: rgba(255,255,255,.28);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px), #0c0c10; }
/* la lumière qui se diffuse derrière le cadre quand le fil passe */
.pzv-diffusion { position: absolute; inset: -6%; z-index: 0; border-radius: 40px; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease; filter: blur(38px);
  background: radial-gradient(closest-side, rgba(214,184,117,.4), transparent 72%); }
.pzv-scene.eclairee .pzv-diffusion { opacity: 1; }

.pzv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4;
  width: clamp(54px, 13vw, 76px); height: clamp(54px, 13vw, 76px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(233,233,231,.55);
  background: rgba(10,10,12,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .45s, background .45s, scale .45s cubic-bezier(.16,1,.3,1); }
.pzv-play::after { content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid rgba(255,255,255,.96); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@media (hover: hover) {
  .pzv-play:hover { border-color: var(--or-vif); background: rgba(214,184,117,.14); scale: 1.04; }
}

/* ── catégories ──────────────────────────────────────────────── */
.pzv-cat { margin: clamp(66px, 11vw, 96px) 0 0; font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .24em; font-size: clamp(10px, 2.8vw, 12.5px);
  color: var(--gris); line-height: 1.9; }
.pzv-cat i { font-style: normal; color: var(--or); margin: 0 .55em; }

/* ── marquee ─────────────────────────────────────────────────── */
.pzv-marquee { margin: clamp(34px, 6vw, 50px) auto 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
.pzv-piste { display: flex; width: max-content; align-items: center;
  animation: pzv-glisse 26s linear infinite; will-change: transform; }
@keyframes pzv-glisse { from { transform: translate3d(0,0,0) } to { transform: translate3d(-33.3333%,0,0) } }
/* les logos gardent leurs couleurs d'origine, on ne joue que sur l'opacité */
.pzv-piste img { height: clamp(24px, 6.4vw, 34px); width: auto; flex: 0 0 auto;
  margin: 0 clamp(24px, 5.6vw, 34px); opacity: .72;
  transition: opacity .5s ease; }
.pzv-piste img.pzv-vu { opacity: 1; }
@media (min-width: 900px) {
  .pzv-piste { animation-duration: 32s; }
  .pzv-piste img { margin: 0 46px; }
}

/* ── arrivée ─────────────────────────────────────────────────── */
.pzv-e { opacity: 0; transform: translateY(18px); filter: blur(7px); }
.pzv-e.vu { opacity: 1; transform: none; filter: none;
  transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1),
              filter .82s cubic-bezier(.16,1,.3,1); }
.pzv-e[data-d="1"].vu{transition-delay:.1s} .pzv-e[data-d="2"].vu{transition-delay:.22s}
.pzv-e[data-d="3"].vu{transition-delay:.34s} .pzv-e[data-d="4"].vu{transition-delay:.46s}
.pzv-e[data-d="5"].vu{transition-delay:.6s}  .pzv-e[data-d="6"].vu{transition-delay:.74s}
.pzv-e[data-d="7"].vu{transition-delay:.88s}

/* le reflet qui traverse « GAGNER PLUS. » une seule fois */
.pzv-or::after { content: ""; position: absolute; inset: 0 -6%; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%);
  -webkit-background-clip: text; background-clip: text; opacity: 0;
  background-size: 260% 100%; background-position: -60% 0; }
.pzv-or.brille::after { animation: pzv-reflet 1.5s cubic-bezier(.3,.7,.3,1) 1 forwards; }
@keyframes pzv-reflet {
  0% { opacity: 0; background-position: -60% 0 }
  20% { opacity: .9 }
  100% { opacity: 0; background-position: 160% 0 }
}

@media (prefers-reduced-motion: reduce) {
  .pzv-e { opacity: 1; transform: none; filter: none; }
  .pzv-piste { animation: none; justify-content: center; }
  .pzv-or.brille::after { animation: none; }
}