/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — « Est-ce que c'est pour moi ? »
   Un écran de sélection de point de départ.
   Recto : où j'en suis.   Verso : ce que je peux faire ensuite.
   ═══════════════════════════════════════════════════════════════ */

.pzp {
  --creme: #F5F3EE;
  --encre: #0B0B0D;
  --or: #D6B875;
  --or-clair: #F4E4BD;
  --gris: #8A8880;
  --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(--creme); color: var(--encre); font-family: var(--texte);
  overflow: hidden; isolation: isolate;
}
.pzp *, .pzp *::before, .pzp *::after { box-sizing: border-box; }

/* ── transition depuis le noir, base convexe ─────────────────── */
.pzp-transition { position: relative; z-index: 9; height: clamp(38px, 8vw, 74px);
  margin-top: calc(-1 * clamp(38px, 8vw, 74px)); pointer-events: none; }
.pzp-transition span { position: absolute; left: -6%; right: -6%; top: -220px; height: 260px;
  background: #050506; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.pzp-transition i { position: absolute; left: -6%; right: -6%; top: 34px; height: 2px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(244,228,189,.5), transparent 72%); filter: blur(1px); }
/* l'encoche appartient au noir : elle interrompt la courbe et descend dans le blanc */
.pzp { --enc-h: clamp(22px, 7vw, 32px); }
/* ancrée sur le bord de la section : le bloc de transition est remonté
   hors du cadre, et l'overflow de la section coupait tout sur grand écran */
.pzp-encoche { position: absolute; left: 50%; top: auto; bottom: calc(4px - var(--enc-h));
  translate: -50% 0; overflow: visible;
  width: clamp(46px, 14vw, 66px); height: var(--enc-h); }
.pzp-encoche polygon { fill: #050506; }
.pzp-encoche path { fill: none; stroke: var(--or); stroke-width: 1; stroke-opacity: 0;
  vector-effect: non-scaling-stroke; transition: stroke-opacity 1.2s ease .25s; }
.vu > .pzp-encoche path { stroke-opacity: .55; }
/* l'encoche du bas appartient au noir qui suit : elle remonte dans le blanc */
.pzp-bas { position: relative; z-index: 9; height: 0; pointer-events: none; }
.pzp-bas .pzp-encoche { top: auto; bottom: -1px; }

/* ── fond de l'interface : blanc, rien d'autre ───────────────── */
.pzp-interface { position: relative; z-index: 2; background: var(--creme);
  padding-bottom: clamp(64px, 12vw, 130px); }
/* une lueur douce derrière la jaquette active, qui change avec le choix */
.pzp-lueur { position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(760px, 130vw); aspect-ratio: 1 / 1; translate: -50% -50%;
  transition: background 1s var(--ressort), scale .8s var(--ressort); }
.pzp[data-choix="0"] .pzp-lueur { background: radial-gradient(circle, rgba(150,166,184,.3) 0%, rgba(150,166,184,.09) 42%, transparent 68%); }
.pzp[data-choix="1"] .pzp-lueur { background: radial-gradient(circle, rgba(168,164,152,.28) 0%, rgba(168,164,152,.09) 42%, transparent 68%); }
.pzp[data-choix="2"] .pzp-lueur { background: radial-gradient(circle, rgba(214,184,117,.34) 0%, rgba(214,184,117,.11) 42%, transparent 68%); }
.pzp[data-flip="1"] .pzp-lueur { scale: 1.14; }

/* ── en-tête ─────────────────────────────────────────────────── */
.pzp-haut { position: relative; z-index: 3; padding: clamp(54px, 10vw, 110px) 20px 0; text-align: center; }
.pzp-large { width: 100%; max-width: 1280px; margin: 0 auto; }
.pzp-label { margin: 0 0 clamp(16px, 3.2vw, 24px); font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .26em; font-size: clamp(10px, 2.7vw, 12px); color: var(--gris); }
.pzp-titre { margin: 0; font-family: var(--titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.028em; line-height: .98; font-size: clamp(34px, 9.6vw, 76px); }
.pzp-titre span { display: block; }
.pzp-t2 { background-image: linear-gradient(168deg, #A79E8B 0%, #6E6A62 38%, #B9AE96 70%, #8A8578 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ── la sélection ────────────────────────────────────────────── */
.pzp-select { position: relative; z-index: 3; margin: clamp(38px, 7vw, 68px) auto 0;
  perspective: 1200px; height: clamp(340px, 100vw, 470px); }
@media (min-width: 900px) { .pzp-select { height: 560px; } }
.pzp-fenetres { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; touch-action: pan-y; cursor: grab; }
.pzp-fenetres.tire { cursor: grabbing; }

.pzp-fenetre {
  position: absolute; left: 50%; top: 50%; cursor: pointer; outline: none;
  width: clamp(200px, 66vw, 300px); aspect-ratio: 1 / 1.5; border-radius: clamp(16px, 3.4vw, 22px);
  transform-origin: 50% 50%; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent;
  transition: transform .62s var(--ressort), opacity .62s var(--ressort), filter .62s var(--ressort);
}
@media (min-width: 900px) { .pzp-fenetre { width: 340px; } }

/* le plateau porte la rotation */
.pzp-plateau { position: absolute; inset: 0; border-radius: inherit;
  transform-style: preserve-3d; transition: transform .72s var(--ressort), scale .4s var(--ressort); }
.pzp-fenetre[data-face="verso"] .pzp-plateau { transform: rotateY(180deg); }
.pzp-fenetre.tourne .pzp-plateau { animation: pzp-profondeur .78s var(--ressort); }
@keyframes pzp-profondeur { 0%, 100% { scale: 1 } 46% { scale: 1.05 } }

.pzp-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  container-type: inline-size; background: #14151A;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 44px rgba(11,11,13,.22); transition: box-shadow .62s ease; }
.pzp-face::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 8;
  background: linear-gradient(158deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 48%, rgba(255,255,255,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  transition: background .62s ease;
}
.pzp-verso { transform: rotateY(180deg); }
.pzp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  pointer-events: none; user-select: none;
  transition: filter .62s ease, scale 1.2s var(--ressort); }
.pzp-recto img { filter: contrast(1.08) saturate(1.06); }
.pzp-verso img { filter: blur(2.6px) saturate(.55) brightness(.5); scale: 1.08; }

/* reflet champagne qui traverse le verre pendant la rotation */
.pzp-reflet { position: absolute; inset: -50% -70%; z-index: 7; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 40%, rgba(244,228,189,.42) 47%,
              rgba(255,255,255,.72) 50.5%, rgba(244,228,189,.38) 54%, transparent 62%); }
.pzp-fenetre.tourne .pzp-reflet { animation: pzp-eclat .78s var(--ressort); }
@keyframes pzp-eclat {
  0%   { opacity: 0; translate: -72% 0 }
  20%  { opacity: 1 }
  100% { opacity: 0; translate: 72% 0 }
}

/* ── recto ───────────────────────────────────────────────────── */
.pzp-voile { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,13,.9) 0%, rgba(11,11,13,.62) 26%,
              rgba(11,11,13,.12) 50%, rgba(11,11,13,.42) 84%, rgba(11,11,13,.8) 100%);
  transition: opacity .62s ease; }
.pzp-recto .num { position: absolute; top: 6.2%; transform-origin: 50% 50%;
  transition: scale .62s var(--ressort), color .62s ease; left: 0; right: 0; z-index: 3; text-align: center;
  font-family: var(--titre); font-weight: 700; font-size: 4.4cqw; letter-spacing: .3em;
  color: rgba(255,255,255,.66); transition: color .62s ease; }
.pzp-recto .lib { position: absolute; top: 13%; left: 0; right: 0; z-index: 3; text-align: center;
  padding: 0 3cqw; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: .95; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  transform-origin: 50% 0; scale: 1; transition: scale .62s var(--ressort); }
.pzp-recto .lib span { display: block; white-space: nowrap; }
.pzp-decouvrir { position: absolute; left: 0; right: 0; bottom: 6.5%; z-index: 3; text-align: center;
  font-family: var(--titre); font-weight: 500; text-transform: uppercase;
  font-size: 4.3cqw; letter-spacing: .24em; color: rgba(255,255,255,.55);
  transition: color .5s ease, opacity .5s ease; }
.pzp-fenetre[data-etat="actif"] .pzp-decouvrir { color: var(--or-clair); }
.pzp-fenetre[data-etat="loin"] .pzp-decouvrir { opacity: 0; }

/* ── verso ───────────────────────────────────────────────────── */
.pzp-fumee { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(178deg, rgba(9,10,12,.84) 0%, rgba(9,10,12,.62) 46%, rgba(9,10,12,.9) 100%); }
/* repères d'angle, ils ne croisent jamais le texte */
.pzp-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pzp-hud i { position: absolute; width: 5cqw; height: 5cqw; border: 0 solid rgba(244,228,189,.42); }
.pzp-hud i:nth-child(1) { left: 3.4cqw; top: 3.4cqw; border-left-width: 1px; border-top-width: 1px; }
.pzp-hud i:nth-child(2) { right: 3.4cqw; top: 3.4cqw; border-right-width: 1px; border-top-width: 1px; }
.pzp-hud i:nth-child(3) { left: 3.4cqw; bottom: 3.4cqw; border-left-width: 1px; border-bottom-width: 1px; }
.pzp-hud i:nth-child(4) { right: 3.4cqw; bottom: 3.4cqw; border-right-width: 1px; border-bottom-width: 1px; }

.pzp-contenu { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 8cqw 4.4cqw; color: #fff; }
.pzp-verso .num { font-family: var(--titre); font-weight: 700; font-size: 5cqw;
  letter-spacing: .3em; color: var(--or-clair); }
.pzp-verso .lib { margin: 4cqw 0 0; font-family: var(--titre); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.04em; line-height: .95; font-size: 11.2cqw; color: #fff; }
.pzp-verso .lib span { display: block; }
.pzp-verso .lib span + span { color: var(--or-clair); }
.pzp-intro { margin: 6.6cqw 0 0; max-width: 90cqw; font-size: 5cqw; line-height: 1.56;
  color: rgba(255,255,255,.6); }
.pzp-actes { position: relative; list-style: none; width: 91cqw; margin: 7.8cqw 0 0;
  padding: 6.6cqw 0 0; display: grid; gap: 4.8cqw; border-top: 1px solid rgba(255,255,255,.13); }
.pzp-actes::before { content: ""; position: absolute; left: 50%; translate: -50% 0; top: -1px;
  width: 20cqw; height: 1px; background: linear-gradient(90deg, transparent, var(--or-clair), transparent); }
.pzp-actes li { font-family: var(--titre); font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.26; font-size: 5.2cqw; color: #fff; }
.pzp-cta { margin-top: 7.8cqw; font-family: var(--titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; font-size: 5.2cqw; color: var(--or-clair); }
.pzp-retour { position: absolute; top: 5.4cqw; right: 5.6cqw; z-index: 5; margin: 0;
  padding: 1.6cqw 3cqw; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(255,255,255,.05); cursor: pointer;
  font-family: var(--titre); font-weight: 600; text-transform: uppercase;
  font-size: 3.4cqw; letter-spacing: .2em; color: rgba(255,255,255,.7);
  transition: border-color .4s ease, color .4s ease; }
.pzp-retour:hover { border-color: rgba(244,228,189,.6); color: var(--or-clair); }

/* ── états des jaquettes ─────────────────────────────────────── */
.pzp-fenetre[data-etat="loin"] { opacity: .82; filter: blur(1.4px) saturate(.8) brightness(.7); }
/* le titre participe au passage inactif → actif */
.pzp-fenetre[data-etat="loin"] .pzp-recto .lib { scale: .76; }
.pzp-fenetre[data-etat="loin"] .pzp-recto .num { scale: .8; }
.pzp-fenetre[data-etat="actif"] { opacity: 1; filter: none; }
.pzp-fenetre[data-etat="actif"] .pzp-face {
  box-shadow: 0 30px 70px rgba(11,11,13,.34), 0 0 0 1px rgba(214,184,117,.2), 0 0 34px rgba(214,184,117,.26); }
.pzp-fenetre[data-etat="actif"] .pzp-face::before {
  background: linear-gradient(158deg, rgba(244,228,189,.95), rgba(214,184,117,.4) 44%, rgba(244,228,189,.65)); }
.pzp-fenetre[data-etat="actif"] .pzp-recto img { scale: 1.04; }
.pzp-fenetre[data-etat="actif"]:focus-visible .pzp-face { box-shadow: 0 0 0 2px var(--or-clair); }
@media (hover: hover) {
  .pzp-fenetre[data-etat="loin"]:hover { opacity: 1; filter: blur(0) saturate(.95) brightness(.9); }
  .pzp-fenetre[data-etat="loin"]:hover .pzp-plateau { scale: 1.035; }
}
/* pendant l'ouverture, le reste se retire */
.pzp[data-flip="1"] .pzp-fenetre[data-etat="loin"] { opacity: .62; filter: blur(3.6px) saturate(.6) brightness(.6); }

/* ── indicateur ──────────────────────────────────────────────── */
.pzp-jauge { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: clamp(20px, 3.8vw, 32px) auto 0; }
.pzp-jauge button { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; }
.pzp-jauge i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(11,11,13,.2);
  transition: background .5s ease, width .5s var(--ressort); }
.pzp-jauge button[aria-current="true"] i { width: 26px; border-radius: 999px;
  background: linear-gradient(90deg, var(--or), var(--or-clair)); }

/* ── conclusion ──────────────────────────────────────────────── */
.pzp-fin { position: relative; z-index: 3; text-align: center; padding: clamp(24px, 4.6vw, 58px) 20px 0; }
.pzp-fin .pzp-titre { font-size: clamp(36px, 10.4vw, 84px); }

/* ── le bouton, copie conforme de celui du hero ──────────────── */
.pzp-bouton { position: relative; z-index: 3; display: flex; justify-content: center;
  margin: clamp(14px, 2.8vw, 28px) auto 0; padding: 0 20px; }
.pzp-bouton > a.pzp-clone { position: relative !important; inset: auto !important;
  flex: 0 0 auto; margin: 0 !important; translate: none !important; rotate: none !important;
  opacity: 1 !important; filter: none !important; }

/* ── révélations ─────────────────────────────────────────────── */
.pzp-r { opacity: 0; transform: translateY(24px); }
.pzp-r.vu { opacity: 1; transform: none;
  transition: opacity .95s var(--ressort), transform .95s var(--ressort); }
.pzp-r[data-d="1"].vu{transition-delay:.08s} .pzp-r[data-d="2"].vu{transition-delay:.18s}
.pzp-r[data-d="3"].vu{transition-delay:.28s}

@media (prefers-reduced-motion: reduce) {
  .pzp-r { opacity: 1; transform: none; }
  .pzp-fenetre, .pzp-plateau { transition: none; }
  .pzp-fenetre.tourne .pzp-plateau, .pzp-fenetre.tourne .pzp-reflet { animation: none; }
}