/* ------------------------------------------------------------------
   Parcours client — section animée partagée (exemples.html + accueil).
   Markup injecté par js/main.js dans #pcMount. Palette autonome.
   Animations en transform/opacity uniquement.
   ------------------------------------------------------------------ */
.pcw{--pc-cream:#EDE6D8;--pc-cream2:#E8E0D0;--pc-orange:#E8541F;--pc-ink:#141414;--pc-accent:#8B5CF6;--pc-accent2:#6D28D9;
  text-align:center;overflow-x:clip}
.pc-head{padding-top:8px}
.pc-head h2{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.025em;margin:0;color:var(--ink)}
.pc-head p{color:var(--ink-soft);margin-top:14px;font-size:16.5px}

/* -------- scène -------- */
.pc-stage{position:relative;width:100%;max-width:560px;aspect-ratio:10/9;margin:48px auto 0;overflow:hidden}
.pc-flyer,.pc-phone{position:absolute;left:50%;top:50%;height:78%;aspect-ratio:1024/1536;
  transform:translate(-50%,-50%);will-change:transform,opacity;
  transition:transform .95s cubic-bezier(.42,0,.2,1),opacity .7s ease}
.pc-flyer>img,.pc-phone>img{display:block;width:100%;height:100%;object-fit:contain}
.pc-flyer{filter:drop-shadow(0 30px 44px rgba(0,0,0,.45))}
.pc-phone{filter:drop-shadow(0 30px 46px rgba(0,0,0,.5))}

/* choreographie par phase (offsets réglables) */
.pc-stage{--fx:0%;--px:250%;--fs:1;--ps:.9;--fo:1}
.pc-flyer{transform:translate(-50%,-50%) translateX(var(--fx)) scale(var(--fs));opacity:var(--fo)}
.pc-phone{transform:translate(-50%,-50%) translateX(var(--px)) scale(var(--ps))}
.pc-stage[data-phase="2"],.pc-stage[data-phase="3"]{--fx:-56%;--fs:.82;--px:56%;--ps:.82}
.pc-stage[data-phase="4"],.pc-stage[data-phase="5"],.pc-stage[data-phase="6"],
.pc-stage[data-phase="7"],.pc-stage[data-phase="8"],.pc-stage[data-phase="9"]{--fx:-56%;--fs:.82;--fo:0;--px:0%;--ps:1.16}

/* barre de scan */
.pc-scan{position:absolute;left:3%;right:3%;top:0;height:14%;opacity:0;pointer-events:none;border-radius:8px;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(233,64,48,0),rgba(233,64,48,.24) 45%,rgba(233,64,48,.46) 50%,rgba(233,64,48,.24) 55%,rgba(233,64,48,0))}
.pc-stage[data-phase="1"] .pc-scan{opacity:1;animation:pcScan 2s ease-in-out both}
@keyframes pcScan{0%{transform:translateY(0)}50%{transform:translateY(560%)}100%{transform:translateY(0)}}

/* -------- écran du téléphone (rect calé sur phone.webp) -------- */
.pc-screen{position:absolute;left:14.06%;top:2.67%;width:71.39%;height:94.92%;border-radius:8%/3.7%;overflow:hidden;
  background:#0f1014}
.pc-s{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;transition:opacity .55s ease;will-change:opacity}
.pc-s.slide{transform:translateX(14%);transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.pc-s.on{opacity:1;transform:none}

/* caméra */
.pc-cam{background:#0b0b0e;justify-content:center;gap:11%}
.pc-cam-vf{width:56%;aspect-ratio:1;border-radius:14px;position:relative}
.pc-cam-vf i{position:absolute;width:22px;height:22px;border:2.5px solid rgba(255,255,255,.8)}
.pc-cam-vf i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:7px 0 0 0}
.pc-cam-vf i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 7px 0 0}
.pc-cam-vf i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 7px}
.pc-cam-vf i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 7px 0}
.pc-cam small{color:rgba(255,255,255,.7);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
/* flash */
.pc-flash{background:#fff;transition:opacity .18s ease}

/* jeu Burger House (HTML) */
.pc-game{background:linear-gradient(165deg,#1a1140 0%,#0e0a22 58%,#1b1140 100%);justify-content:flex-start;padding:9% 7% 7%}
.pc-game-brand{font-weight:900;letter-spacing:.02em;color:#fff;font-size:clamp(13px,4.6cqw,17px);line-height:1}
.pc-game-sub{color:var(--pc-orange);font-weight:800;font-size:clamp(8px,3cqw,10px);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.pc-wheel{position:relative;width:86%;margin:7% auto 0;aspect-ratio:1}
.pc-wheel-svg{display:block;width:100%;height:100%;transform-origin:50% 50%;will-change:transform}
.pc-stage[data-phase="5"] .pc-wheel-svg{animation:pcSpin 3s cubic-bezier(.15,.72,.2,1) forwards}
@keyframes pcSpin{from{transform:rotate(0)}to{transform:rotate(1080deg)}}
.pc-ptr{position:absolute;left:50%;top:-5%;width:11%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.pc-game-btn{margin-top:8%;background:var(--pc-orange);color:#fff;font-weight:800;font-size:clamp(9px,3.2cqw,11px);
  letter-spacing:.06em;padding:7% 12%;border-radius:999px;text-transform:uppercase}

/* gagné */
.pc-win{background:rgba(8,6,16,.5)}
.pc-win-card{background:linear-gradient(165deg,#211652,#120c28);border:1px solid rgba(167,139,250,.22);border-radius:14px;padding:7% 9%;transform:scale(.88);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pc-stage[data-phase="6"] .pc-win.on .pc-win-card{transform:scale(1)}
.pc-win-k{display:block;font-size:clamp(8px,3cqw,10px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#F2843F}
.pc-win-card b{display:block;margin-top:4px;font-size:clamp(13px,5cqw,18px);color:#fff}

/* avis */
.pc-avis{background:#faf8f3;gap:9%}
.pc-avis .g{font-weight:700;font-size:clamp(11px,4cqw,14px);color:#3b3746;letter-spacing:.01em}
.pc-stars{display:flex;gap:5%}
.pc-stars svg{width:min(22px,7cqw);height:auto;fill:#f5b301}
.pc-avis small{color:#8b8794;font-size:clamp(8px,3cqw,11px)}

/* réseaux */
.pc-social{background:#faf8f3;gap:7%}
.pc-social .t{font-weight:700;font-size:clamp(11px,4cqw,14px);color:#211c30}
.pc-net{display:flex;align-items:center;gap:8%;background:#fff;border:1px solid #eae4d8;border-radius:11px;
  padding:5% 9%;width:74%;justify-content:center}
.pc-net svg{width:min(18px,6cqw);height:auto}
.pc-net span{font-weight:700;font-size:clamp(9px,3.4cqw,12px);color:#211c30}
.pc-net.ig{color:#C13584}.pc-net.fb{color:#1877F2}

/* qr */
.pc-qr{background:#faf8f3;gap:6%}
.pc-qr .t{font-weight:700;font-size:clamp(11px,4cqw,13px);color:#211c30}
.pc-qr img{width:46%;height:auto;border-radius:7px}
.pc-qr small{font-size:clamp(8px,3cqw,11px);color:#6b6678;padding:0 6%}

/* -------- légende + contrôles -------- */
.pc-legend{position:relative;min-height:96px;max-width:520px;margin:40px auto 0}
.pc-leg{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .5s ease;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.pc-leg.on{opacity:1}
.pc-num{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--action);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.pc-leg span:not(.pc-num){font-size:16px;color:var(--ink-soft);letter-spacing:-.01em}
.pc-controls{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px}
.pc-dots{display:flex;gap:8px}
.pc-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.pc-dots i.on{background:var(--pc-accent);transform:scale(1.25)}
.pc-replay{background:var(--surface-hi);border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:9px 22px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s}
.pc-replay:hover{background:var(--surface-2)}

/* container queries pour dimensionner le contenu d'écran selon la taille du téléphone */
.pc-screen{container-type:inline-size}

/* -------- version statique (reduced-motion) -------- */
.pc-static{display:none}
@media(max-width:640px){
  .pc-head{padding-top:0}
  .pc-stage{max-width:none;aspect-ratio:10/8.4}
  .pc-flyer,.pc-phone{height:82%}
  .pc-legend{min-height:120px;max-width:330px}
  .pc-leg span:not(.pc-num){font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .pc-stage,.pc-legend,.pc-controls{display:none!important}
  .pc-static{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px 20px;margin:48px auto 0;max-width:1080px}
  .pc-mini{margin:0}
  .pc-mini-scr{position:relative;aspect-ratio:1024/1560;border-radius:20px;overflow:hidden;container-type:inline-size;
    background:#0f1014;box-shadow:0 24px 40px -26px rgba(0,0,0,.8);border:6px solid #16171c}
  .pc-mini-scr .pc-s{position:absolute;opacity:1;transform:none;animation:none}
  .pc-mini-scr .pc-wheel-svg{animation:none;transform:rotate(0)}
  .pc-mini figcaption{margin-top:14px;font-size:14px;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:7px}
  .pc-mini .pc-num{border-color:var(--line)}
}