/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — les références.
   Un ruban de panneaux dans le noir, deux chiffres, rien d'autre.
   ═══════════════════════════════════════════════════════════════ */

.pzf {
  --blanc: #FAFAF8;
  --noir: #050505;
  --encre: #08090B;
  --or: #D6B875;
  --or-clair: #F4E4BD;
  --gris: #85898F;
  --titre: "Stack Sans Notch", "DM Sans", system-ui, sans-serif;
  --texte: "DM Sans", "Satoshi", system-ui, sans-serif;
  --ressort: cubic-bezier(.22, 1, .36, 1);
  position: relative; display: block; width: 100%; max-width: 100vw;
  background: var(--blanc); color: var(--encre); font-family: var(--texte);
  overflow: hidden; isolation: isolate;
  --enc-h: clamp(22px, 7vw, 32px); --enc-l: clamp(46px, 14vw, 66px);
  padding: clamp(84px, 12vw, 148px) 0 clamp(88px, 13vw, 156px);
}
/* mêmes encoches que partout ailleurs sur le site */
.pzf-enc { position: absolute; left: 50%; z-index: 9; translate: -50% 0;
  width: var(--enc-l); height: var(--enc-h); overflow: visible; pointer-events: none; }
.pzf-enc.haut { top: -4px; }
.pzf-enc.bas { bottom: -1px; }
.pzf-enc polygon { fill: #050505; }
.pzf-enc path { fill: none; stroke: var(--or); stroke-width: 1; stroke-opacity: 0;
  vector-effect: non-scaling-stroke; transition: stroke-opacity 1.2s ease .25s; }
.pzf.vu .pzf-enc path { stroke-opacity: .5; }
.pzf *, .pzf *::before, .pzf *::after { box-sizing: border-box; }
.pzf::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .028; mix-blend-mode: multiply;
}
.pzf-or {
  background-image: linear-gradient(168deg, #C9A34D 0%, #8C6E2B 42%, #D6B875 72%, #9C7C33 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ── titre ───────────────────────────────────────────────────── */
.pzf-haut { position: relative; z-index: 2; text-align: center; padding: 0 clamp(20px, 5vw, 48px); }
.pzf-label { margin: 0 0 clamp(18px, 2.6vw, 26px); font-family: var(--titre); font-weight: 700;
  text-transform: uppercase; letter-spacing: .28em; font-size: clamp(14px, 2.8vw, 19px); color: var(--or); }
.pzf-titre { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.042em; line-height: .92; font-size: clamp(38px, 8.4vw, 88px); }
.pzf-titre span { display: block; }

/* ── le ruban ────────────────────────────────────────────────── */
.pzf-scene { position: relative; z-index: 2; margin-top: clamp(52px, 8vw, 96px);
  perspective: 1800px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.pzf-incline { transform: rotateY(-5deg) rotateX(1.6deg); transform-style: preserve-3d;
  padding: 26px 0; }
.pzf-piste { display: flex; gap: clamp(14px, 1.5vw, 22px); will-change: transform;
  padding-left: clamp(14px, 1.5vw, 22px); }

.pzf-panneau { position: relative; flex: 0 0 auto; overflow: hidden;
  width: clamp(240px, 21vw, 318px); height: clamp(380px, 32vw, 462px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 2.4vw, 34px) clamp(18px, 1.8vw, 26px);
  background: #08090B; box-shadow: 0 26px 60px -34px rgba(8,9,11,.7);
  transition: opacity .5s var(--ressort), scale .5s var(--ressort), box-shadow .5s ease;
  user-select: none; }
.pzf-panneau img.pzf-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; filter: saturate(.88) contrast(1.1) brightness(.72); transition: filter .6s ease; }
.pzf-panneau::after {                      /* le fond retombe dans le noir vers le bas */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,11,.4) 0%, rgba(8,9,11,.08) 30%, rgba(8,9,11,.55) 68%, rgba(8,9,11,.92) 100%); }
.pzf-panneau::before {                     /* liseré très fin, une touche d'or en haut */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 0 rgba(214,184,117,.42); }
/* le logo prend le centre du panneau quand on l'a */
.pzf-logo { position: relative; z-index: 2; width: 72%; max-width: 200px; max-height: 30%;
  object-fit: contain; filter: drop-shadow(0 2px 18px rgba(0,0,0,.6)); }
.pzf-logo.blanc { filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0,0,0,.6)); }
.pzf-nom { position: relative; z-index: 2; margin: 0; font-family: var(--titre); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.026em; line-height: .98; text-align: center;
  font-size: clamp(21px, 2vw, 30px); color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.75); }
.pzf-nom span { display: block; }
/* Via Luminis : pas de logo, alors on soigne la lettre */
.pzf-nom.classe { font-family: var(--titre); font-weight: 300; text-transform: uppercase;
  letter-spacing: .34em; line-height: 1.5; font-size: clamp(16px, 1.42vw, 21px);
  padding: clamp(14px, 1.2vw, 18px) 0; text-indent: .34em;
  border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.pzf-nom.classe span + span { color: var(--or-clair); }
.pzf-panneau i { position: absolute; z-index: 2; bottom: clamp(20px, 2vw, 28px);
  width: 24px; height: 1px; background: rgba(255,255,255,.28); }

.pzf-panneau.compte { background: #0A0B0D; }
.pzf-panneau.compte::after { background: radial-gradient(70% 55% at 50% 46%, rgba(214,184,117,.16), transparent 72%); }
.pzf-panneau.compte::before { box-shadow: inset 0 0 0 1px rgba(214,184,117,.34); }
.pzf-panneau.compte .pzf-nom { font-size: clamp(44px, 4.4vw, 66px); }
.pzf-panneau.compte em { position: relative; z-index: 2; font-style: normal; margin-top: 14px;
  font-family: var(--titre); font-weight: 600; text-transform: uppercase; letter-spacing: .26em;
  font-size: clamp(10px, 1vw, 12px); color: rgba(255,255,255,.55); }

@media (hover: hover) and (min-width: 900px) {
  .pzf-scene:hover .pzf-panneau { opacity: .48; }
  .pzf-scene .pzf-panneau:hover { opacity: 1; scale: 1.02;
    box-shadow: 0 30px 70px -30px rgba(8,9,11,.8); }
  .pzf-scene .pzf-panneau:hover img.pzf-fond { filter: saturate(1.05) contrast(1.08) brightness(.9); }
}

/* ── les chiffres ────────────────────────────────────────────── */
.pzf-chiffres { position: relative; z-index: 2; display: flex; justify-content: center;
  margin: clamp(64px, 9vw, 116px) auto 0; padding: 0 clamp(20px, 5vw, 48px);
  max-width: 1000px; }
.pzf-bloc { flex: 1 1 0; text-align: center; padding: 0 clamp(16px, 3vw, 44px); }
.pzf-bloc + .pzf-bloc { border-left: 1px solid rgba(8,9,11,.14); }
.pzf-bloc b { display: block; font-family: var(--titre); font-weight: 800; letter-spacing: -.045em;
  line-height: .92; font-size: clamp(46px, 8.2vw, 98px); }
.pzf-bloc span { display: block; margin-top: clamp(12px, 1.6vw, 20px); font-family: var(--titre);
  font-weight: 600; text-transform: uppercase; letter-spacing: .26em;
  font-size: clamp(10.5px, 1.15vw, 13px); color: #6E727A; }

/* ── téléphone : on glisse au doigt ──────────────────────────── */
@media (max-width: 899px) {
  /* le ruban défile tout seul aussi sur téléphone : c'est la boucle
     d'animation qui le fait avancer, plus le défilement natif */
  .pzf-scene { perspective: none; overflow: hidden; }
  .pzf-incline { transform: none; padding: 0; }
  .pzf-piste { gap: 14px; padding: 0 16px; }
  .pzf-panneau { width: 76vw; max-width: 340px; height: 92vw; max-height: 420px; }
  .pzf-nom { font-size: clamp(26px, 7.4vw, 34px); }
  .pzf-panneau.compte .pzf-nom { font-size: clamp(50px, 15vw, 70px); }
  .pzf-chiffres { flex-direction: column; gap: clamp(40px, 9vw, 56px); }
  .pzf-bloc + .pzf-bloc { border-left: 0; border-top: 1px solid rgba(8,9,11,.14);
    padding-top: clamp(40px, 9vw, 56px); }
}

/* ── apparitions ─────────────────────────────────────────────── */
.pzf-r { opacity: 0; transform: translateY(20px); }
.pzf-r.vu { opacity: 1; transform: none;
  transition: opacity .95s var(--ressort), transform .95s var(--ressort); }
.pzf-r[data-d="1"].vu { transition-delay: .1s }
.pzf-r[data-d="2"].vu { transition-delay: .2s }
@media (prefers-reduced-motion: reduce) {
  .pzf-r { opacity: 1 !important; transform: none !important; }
}