/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — les billets d'accès.
   Deux pass, un en aluminium, un en noir liseré d'or.
   ═══════════════════════════════════════════════════════════════ */

.pzb {
  --noir: #050505;
  --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);
  --enc-h: clamp(22px, 7vw, 32px); --enc-l: clamp(46px, 14vw, 66px);
  position: relative; display: block; width: 100%; max-width: 100vw;
  background: var(--noir); color: #fff; font-family: var(--texte);
  overflow: hidden; isolation: isolate;
  /* Le bas était trop généreux : il s'ajoutait au haut de la section des
     fondateurs et creusait un trou de 130 px entre les deux. */
  padding: clamp(80px, 11vw, 138px) 0 clamp(34px, 5vw, 62px);
}
.pzb *, .pzb *::before, .pzb *::after { box-sizing: border-box; }
.pzb::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");
}
.pzb-cadre { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px); }

/* ── titre ───────────────────────────────────────────────────── */
.pzb-haut { text-align: center; margin-bottom: clamp(56px, 8vw, 104px); }
.pzb-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); }
.pzb-titre { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.042em; line-height: .92; font-size: clamp(36px, 7.6vw, 78px); }
.pzb-titre span { display: block; }

/* ── la paire ────────────────────────────────────────────────── */
.pzb-paire { display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 1000px) { .pzb-paire { grid-template-columns: 41% 1fr; align-items: stretch; } }

.pzb-billet { position: relative; display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: scale .55s var(--ressort), box-shadow .55s ease, filter .55s ease;
  padding: clamp(30px, 3.4vw, 46px) clamp(24px, 2.8vw, 40px) clamp(28px, 3vw, 40px);
  min-height: clamp(430px, 46vw, 580px); overflow: hidden; }
.pzb-trait { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4;
  pointer-events: none; overflow: visible; }
.pzb-trait .bord { fill: none; stroke-width: 1; }
.pzb-trait .charge-trait { fill: none; stroke-width: 1.7; stroke-linecap: round;
  opacity: 0; transition: opacity .22s ease; }
.pzb-billet.charge .charge-trait { opacity: 1; }

/* la surcharge : de courts arcs qui filent sur le contour */
.pzb-trait .surcharge { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.pzb-billet.argent .surcharge { stroke: #FFFFFF;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 9px rgba(255,255,255,.55)); }
.pzb-billet.or .surcharge { stroke: var(--or-clair);
  filter: drop-shadow(0 0 4px rgba(244,228,189,1)) drop-shadow(0 0 13px rgba(214,184,117,.9)); }
.pzb-billet.charge .surcharge {
  animation: pzb-file .62s linear infinite, pzb-gresille .11s steps(2, end) infinite; }
@keyframes pzb-file { to { stroke-dashoffset: var(--course); } }
@keyframes pzb-gresille { 0% { opacity: .45 } 100% { opacity: 1 } }
.pzb-billet.argent .charge-trait { stroke: #FFFFFF;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.95)); }
.pzb-billet.or .charge-trait { stroke: var(--or-clair);
  filter: drop-shadow(0 0 5px rgba(244,228,189,.95)) drop-shadow(0 0 14px rgba(214,184,117,.6)); }

.pzb-billet.charge { scale: 1.012; }
.pzb-billet.argent.charge { filter: brightness(1.06); }
.pzb-billet.or.charge { box-shadow: 0 0 44px -12px rgba(214,184,117,.42); }

/* l'onde sous le doigt */
.pzb-pression { position: absolute; z-index: 6; width: 16px; height: 16px; border-radius: 50%;
  translate: -50% -50%; pointer-events: none; opacity: 0; scale: 1;
  transition: opacity .3s ease, scale .3s var(--ressort); }
.pzb-billet.argent .pzb-pression {
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 68%); }
.pzb-billet.or .pzb-pression {
  background: radial-gradient(circle, rgba(244,228,189,.8), rgba(214,184,117,0) 68%); }

/* le flash quand la charge est pleine */
.pzb-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
.pzb-billet.argent .pzb-flash { background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.9), transparent 62%); }
.pzb-billet.or .pzb-flash { background: radial-gradient(circle at 50% 55%, rgba(244,228,189,.6), transparent 62%); }
.pzb-billet.plein .pzb-flash { animation: pzb-eclat .62s ease-out; }
@keyframes pzb-eclat { 0% { opacity: 0 } 14% { opacity: 1 } 100% { opacity: 0 } }
.pzb-billet.plein .pzb-cta { border-color: currentColor; }

/* ── billet argent ───────────────────────────────────────────── */
.pzb-billet.argent { color: #0B0C0E;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23b)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(146deg, #F6F7F8 0%, #DEE1E5 28%, #BEC3C9 50%, #F0F1F3 72%, #CBD0D5 100%); }
.pzb-billet.argent .pzb-trait .bord { stroke: rgba(11,12,14,.28); }
/* Le trait de lumière qui balayait les billets a été retiré :
   il passait sur les prix et gênait la lecture. */
.pzb-laser { display: none; }
/* ── billet noir et or ───────────────────────────────────────── */
.pzb-billet.or { color: #fff;
  background:
    radial-gradient(78% 58% at 22% 8%, rgba(214,184,117,.09), transparent 62%),
    linear-gradient(158deg, #131417 0%, #0A0B0D 46%, #060607 100%); }
.pzb-billet.or .pzb-trait .bord { stroke: rgba(214,184,117,.62); }
.pzb-billet.or .pzb-trait circle { fill: var(--or-clair); }

/* ── contenu commun ──────────────────────────────────────────── */
.pzb-marque { position: relative; z-index: 5; margin: 0; font-family: var(--titre); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3em; font-size: clamp(10.5px, 1.05vw, 12px); }
.pzb-billet.argent .pzb-marque { color: rgba(11,12,14,.66); }
.pzb-billet.or .pzb-marque { color: rgba(255,255,255,.5); }
.pzb-nom { position: relative; z-index: 5; margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-family: var(--titre); font-weight: 800; text-transform: uppercase; letter-spacing: -.036em;
  line-height: .95; font-size: clamp(32px, 4.4vw, 56px); }
.pzb-prix { position: relative; z-index: 5; display: inline-flex; align-items: baseline; gap: 12px;
  align-self: flex-start; margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding: clamp(8px, .9vw, 12px) clamp(14px, 1.5vw, 20px); }
.pzb-billet.argent .pzb-prix { background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(11,12,14,.16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pzb-billet.or .pzb-prix { background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(214,184,117,.24);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pzb-prix b { font-family: var(--titre); font-weight: 800; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(38px, 5vw, 62px); }
.pzb-prix span { font-family: var(--titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; font-size: clamp(11.5px, 1.15vw, 14px); }
.pzb-billet.argent .pzb-prix span { color: rgba(11,12,14,.72); }
.pzb-billet.or .pzb-prix span { color: rgba(255,255,255,.62); }
/* ACCÈS À VIE, juste sous le prix, impossible à manquer */
.pzb-vie { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 9px;
  margin: clamp(12px, 1.4vw, 16px) 0 0; padding: 7px 14px;
  border: 1px solid rgba(214,184,117,.45); background: rgba(214,184,117,.07);
  font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .24em;
  font-size: clamp(11px, 1.15vw, 13.5px); color: var(--or-clair); align-self: flex-start; }
.pzb-vie i { width: 5px; height: 5px; border-radius: 50%; background: var(--or-clair);
  box-shadow: 0 0 7px rgba(244,228,189,.9); }
.pzb-billet.or .pzb-prix b { background-image: linear-gradient(168deg, #F7EACA 0%, #D6B875 42%, #B2934F 68%, #F2E2BC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.pzb-perfo { position: relative; z-index: 5; margin: clamp(24px, 2.8vw, 34px) 0; height: 1px; }
.pzb-billet.argent .pzb-perfo { background: repeating-linear-gradient(90deg, rgba(11,12,14,.34) 0 5px, transparent 5px 11px); }
.pzb-billet.or .pzb-perfo { background: repeating-linear-gradient(90deg, rgba(214,184,117,.4) 0 5px, transparent 5px 11px); }

.pzb-atouts { position: relative; z-index: 5; list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(11px, 1.2vw, 15px); }
.pzb-atouts li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.4;
  font-size: clamp(14.5px, 1.4vw, 16.5px); }
.pzb-atouts em { font-style: normal; flex: 0 0 auto; margin-top: .1em; font-size: .92em; font-weight: 700; }
.pzb-billet.argent .pzb-atouts em { color: #0B0C0E; }
.pzb-billet.or .pzb-atouts em { color: var(--or); }

.pzb-fort { position: relative; z-index: 5; margin: clamp(22px, 2.4vw, 30px) 0 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px);
  border: 1px solid rgba(214,184,117,.34); background: rgba(214,184,117,.05);
  font-family: var(--titre); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  line-height: 1.08; font-size: clamp(17px, 1.9vw, 24px); }
.pzb-fort span { display: block; }
.pzb-fort span + span { color: var(--or-clair); }

.pzb-bas { position: relative; z-index: 5; margin-top: auto;
  padding-top: clamp(26px, 3vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pzb-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(11px, 1.1vw, 13px); text-decoration: none; cursor: pointer;
  transition: background .4s ease, color .4s ease, border-color .4s ease; }
.pzb-billet.argent .pzb-cta { border: 1px solid rgba(11,12,14,.45); color: #0B0C0E; }
.pzb-billet.argent .pzb-cta:hover { background: #0B0C0E; color: #F1F2F4; }
.pzb-billet.or .pzb-cta { border: 1px solid rgba(214,184,117,.5); color: var(--or-clair); }
.pzb-billet.or .pzb-cta:hover { background: rgba(214,184,117,.14); border-color: var(--or-clair); }
.pzb-num { font-family: var(--titre); font-weight: 600; letter-spacing: .3em;
  font-size: clamp(10px, 1vw, 11.5px); white-space: nowrap; }
.pzb-billet.argent .pzb-num { color: rgba(11,12,14,.52); }
.pzb-billet.or .pzb-num { color: rgba(255,255,255,.4); }

/* ── mobile ──────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .pzb-billet { min-height: 0; padding: clamp(28px, 7vw, 38px) clamp(22px, 6vw, 30px); }
  .pzb-nom { font-size: clamp(30px, 8.4vw, 40px); }
  .pzb-prix b { font-size: clamp(36px, 10vw, 48px); }
  .pzb-atouts li { font-size: clamp(15px, 4.1vw, 17px); }
  .pzb-bas { flex-direction: column; align-items: stretch; gap: 14px; }
  .pzb-cta { justify-content: center; }
  .pzb-num { text-align: center; }
}

/* ── apparitions ─────────────────────────────────────────────── */
.pzb-r { opacity: 0; transform: translateY(22px); }
.pzb-r.vu { opacity: 1; transform: none;
  transition: opacity .95s var(--ressort), transform .95s var(--ressort); }
.pzb-r[data-d="1"].vu { transition-delay: .14s }
.pzb-r[data-d="2"].vu { transition-delay: .3s }
@media (prefers-reduced-motion: reduce) {
  .pzb-r { opacity: 1 !important; transform: none !important; }
  .pzb-laser { animation: none !important; opacity: 0; }
  .pzb-billet.charge { scale: 1; }
}