/* Prototype du 11/10 (?pourquoi=apple), concept A : le moment « $0 a month. »
   La section est haute, sa scène collée en haut de l'écran ; --q (0 → 1, posé
   par proto-zero.js) déroule la scène :
     0    → .12  « $0 a month. » s'allume, la ligne de dessous suit ;
     .08  → .18  le mur des apps monte, ligne à ligne ;
     .20  → .80  chaque app est barrée à son tour, son prix roule jusqu'à $0 ;
     .84  → .94  le mur s'efface, « All in the theme. » arrive, la coche se dessine.
   Sans script (--q absent = 1) : tout est posé, barré, lisible. */
@property --q { syntax: "<number>"; inherits: true; initial-value: 1; }
.pz {
  --pz-course: 200svh;
  height: calc(100svh + var(--pz-course));
  margin: clamp(8px, 2vw, 24px) 0 clamp(24px, 4vw, 48px);
}
.pz-scene {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: calc(72px + 8px) 0 32px; gap: clamp(14px, 2.4svh, 26px);
}
/* La ligne géante. */
.pz-zero {
  --a: clamp(0, calc(var(--q) / .1), 1);
  margin: 0; font-family: var(--f-titre); font-weight: 800; font-stretch: 125%;
  font-size: clamp(56px, min(11vw, 15svh), 168px); line-height: .92; letter-spacing: -.04em;
  color: color-mix(in srgb, var(--noir) calc(var(--a) * 100%), #D2D2D2);
  filter: blur(calc((1 - var(--a)) * 8px));
  scale: calc(.94 + .06 * var(--a));
}
.pz-zero-m { font-size: .42em; letter-spacing: -.02em; }
.pz-sous {
  --b: clamp(0, calc((var(--q) - .05) / .08), 1);
  margin: 0; max-width: 30em; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; color: var(--noir);
  opacity: var(--b); translate: 0 calc((1 - var(--b)) * 12px);
}
/* Le mur : deux colonnes au bureau, une au téléphone. */
.pz-mur {
  --fin: clamp(0, calc((var(--q) - .84) / .08), 1);
  list-style: none; margin: clamp(6px, 1.4svh, 18px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); column-gap: 64px;
  width: min(100%, 744px); text-align: left;
  opacity: calc(1 - var(--fin) * .88); filter: blur(calc(var(--fin) * 3px));
}
.pz-app {
  /* --v : la ligne monte ; --x : elle est barrée (son tour dans .20 → .80). */
  --pas: calc(.6 / var(--pz-n));
  --v: clamp(0, calc((var(--q) - .08 - var(--k) * .008) / .06), 1);
  --x: clamp(0, calc((var(--q) - .2 - var(--k) * var(--pas)) / (var(--pas) * .7)), 1);
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: clamp(7px, 1.25svh, 12px) 0; border-bottom: 1px solid #ECECEC;
  font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25;
  opacity: var(--v); translate: 0 calc((1 - var(--v)) * 18px);
}
.pz-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, #B4B4B4 calc(var(--x) * 100%), var(--noir)); font-weight: 500; min-width: 0; }
.pz-prix { position: relative; flex: none; display: inline-flex; font-variant-numeric: tabular-nums; font-weight: 600; color: color-mix(in srgb, #B4B4B4 calc(var(--x) * 100%), var(--noir)); }
/* Le prix roule : l'ancien monte et s'efface, « $0 » arrive par en dessous,
   à l'accent, dès que le trait a fini de passer. */
.pz-prix-c { position: relative; display: inline-block; text-align: right; }
.pz-prix-v, .pz-prix-z { display: inline-block; }
.pz-prix-v { --r: clamp(0, calc((var(--x) - .6) / .4), 1); translate: 0 calc(var(--r) * -.9em); opacity: calc(1 - var(--r)); }
.pz-prix-z { --r: clamp(0, calc((var(--x) - .6) / .4), 1); position: absolute; right: 0; translate: 0 calc((1 - var(--r)) * .9em); opacity: var(--r); color: var(--pp-acc, #992CFF); }
.pz-prix-m { opacity: .7; }
/* Le trait : il barre la ligne de gauche à droite. */
.pz-trait {
  position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--noir);
  transform-origin: left center; scale: var(--x) 1; opacity: calc(1 - clamp(0, calc((var(--x) - .7) / .3), 1) * .65);
}
/* La fin. */
.pz-fin {
  --f: clamp(0, calc((var(--q) - .86) / .07), 1);
  margin: clamp(10px, 2svh, 22px) 0 0; display: inline-flex; align-items: center; gap: .32em;
  font-family: var(--f-titre); font-weight: 800; font-stretch: 125%; letter-spacing: -.03em;
  font-size: clamp(28px, 3.4vw, 50px); line-height: 1; color: var(--noir);
  opacity: var(--f); translate: 0 calc((1 - var(--f)) * 22px); filter: blur(calc((1 - var(--f)) * 6px));
}
.pz-coche { display: grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--pp-acc, #992CFF); color: #FFFFFF; scale: calc(.6 + .4 * var(--f)); }
.pz-coche svg { width: .7em; height: .7em; }
.pz-coche path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--q) - .9) / .05), 1)); }

@media (max-width: 720px) {
  .pz { --pz-course: 230svh; }
  .pz-mur { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .pz-app { font-size: 15px; padding: clamp(5px, 1svh, 9px) 0; }
  .pz-zero { font-size: clamp(64px, 24vw, 104px); }
  .pz-zero-m { display: block; font-size: .34em; margin-top: .12em; }
  .pz-sous { font-size: 15px; max-width: 22em; }
  .pz-fin { font-size: clamp(26px, 8vw, 34px); }
}
@media (max-height: 700px) and (max-width: 720px) {
  .pz-app { font-size: 14px; padding: 4px 0; }
  .pz-zero { font-size: clamp(56px, 19vw, 80px); }
}