/* DIGIMANZÉ — le héros v8 (05/09/2026) : « une promesse, une scène ».
   UN SEUL décor sombre (bokeh chaud, horizon, table en bois en perspective) — celui de la version
   validée par Mathias — et trois objets RÉELS posés dessus, réutilisés d'une scène à l'autre :
   le chevalet acrylique (.tent), la carte papier (.cmini), l'ordinateur portable (.laptop) et le
   téléphone (.phone). Neuf scènes de 5 à 9 s. hero.js pose deux attributs sur .stage :
   data-sc = la scène (0…8), data-k = le palier atteint dans cette scène. Tout le reste est du CSS. */

/* ── le décor, commun aux neuf scènes ──────────────────────────────────── */
.scene{position:relative;min-height:0}
.stage{position:relative;width:100%;max-width:680px;margin:0 auto;aspect-ratio:10/11;border-radius:28px;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 30% 20%,#1d5a6b,transparent 60%),linear-gradient(180deg,#0f2a36 0%,#143b47 55%,#3a2416 100%);
  box-shadow:var(--sh2);isolation:isolate;container-type:inline-size;
  --f9:clamp(9px,1.56cqw,9.9px);--f10:clamp(9.8px,1.74cqw,11px);--f11:clamp(10.6px,1.95cqw,12px);
  --f12:clamp(11.4px,2.15cqw,13.1px);--f13:clamp(12.2px,2.4cqw,14.5px);--f16:clamp(14.5px,2.9cqw,18px);
  --pap:#FBF8F1;--pin:#1B1F1D;--pmu:#6B6F66;--pli:#E6E1D4;--serif:'Fraunces',Georgia,'Times New Roman',serif;
  --a:#0E7C66}
.bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,214,140,0) 70%);filter:blur(1px);animation:bok 9s ease-in-out infinite}
.bokeh i:nth-child(1){width:11cqw;height:11cqw;left:8%;top:12%}.bokeh i:nth-child(2){width:6.5cqw;height:6.5cqw;left:70%;top:8%;animation-delay:-2s}
.bokeh i:nth-child(3){width:15cqw;height:15cqw;left:55%;top:22%;animation-delay:-4s;opacity:.6}
.bokeh i:nth-child(4){width:5cqw;height:5cqw;left:20%;top:38%;animation-delay:-6s}
.bokeh i:nth-child(5){width:9cqw;height:9cqw;left:85%;top:40%;animation-delay:-1s}
@keyframes bok{0%,100%{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-14px) scale(1.08);opacity:1}}
.horizon{position:absolute;left:0;right:0;top:54%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,200,120,.35),transparent)}
.table{position:absolute;left:-10%;right:-10%;bottom:0;height:44%;background:linear-gradient(180deg,#6b3d1e 0%,#4a2812 60%,#33190b 100%);transform:perspective(600px) rotateX(58deg);transform-origin:top;box-shadow:0 -20px 60px rgba(0,0,0,.35)}
.table::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 38px)}

/* ── le cartouche « n / 9 » et la légende à deux niveaux ───────────────── */
.cartouche{position:absolute;left:3.2%;top:3%;z-index:12;display:flex;align-items:baseline;gap:4px;
  background:rgba(6,12,16,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:6px 12px;
  color:rgba(255,255,255,.7);font:700 clamp(11px,1.95cqw,12.5px)/1 var(--h);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cartouche b{color:#fff;font-weight:800;font-size:1.2em}
.legende{position:absolute;left:3.2%;right:3.2%;bottom:3%;z-index:12;text-align:center;color:#fff;
  background:rgba(6,12,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);border-radius:15px;padding:11px 14px 12px;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.95);transition:opacity .22s ease,transform .22s ease}
.legende.mut{opacity:0;transform:translateY(5px)}
.legende b{display:block;font:800 clamp(15px,2.85cqw,19.5px)/1.2 var(--h);letter-spacing:-.015em}
.legende s{display:block;text-decoration:none;margin-top:5px;font:500 clamp(11.5px,2.05cqw,13.6px)/1.42 var(--b);color:rgba(255,255,255,.86)}

/* ── le chevalet acrylique posé sur la table ───────────────────────────── */
.tent{position:absolute;left:5%;bottom:25%;width:min(30cqw,178px);z-index:6;transform-origin:bottom center;
  transform:perspective(900px) rotateY(16deg) rotateX(4deg) translateY(150%) scale(1);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s;filter:drop-shadow(0 34px 26px rgba(0,0,0,.5))}
.stage[data-sc="0"] .tent{transform:perspective(900px) rotateY(16deg) rotateX(4deg) translateY(0) scale(1);opacity:1}
.stage[data-sc="1"] .tent,.stage[data-sc="2"] .tent{transform:perspective(900px) rotateY(16deg) rotateX(4deg) translateY(0) scale(.6);opacity:0}
.tent-face{position:relative;background:#fff;border-radius:10px;padding:14px 12px 11px;text-align:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 0 0 3px rgba(255,255,255,.35),0 0 0 4px rgba(255,255,255,.12);overflow:hidden}
.tent-face::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 60%);pointer-events:none}
.tent-face::after{content:'';position:absolute;left:12px;right:12px;top:0;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.tent-face b{display:block;font:800 var(--f13)/1 var(--h);color:#141A22;letter-spacing:.14em;text-transform:uppercase}
.tent-face small{display:block;font:500 var(--f9)/1.3 var(--b);color:#5B6572;margin:4px 0 9px}
.tent-face img{width:62%;height:auto;margin:0 auto;display:block;border-radius:4px}
.tent-face span{display:flex;justify-content:center;gap:3px;font:600 calc(var(--f9) * .84)/1 var(--b);color:#5B6572;margin-top:9px;letter-spacing:.05em;white-space:nowrap}
.tent-legs{position:absolute;left:-4px;right:-4px;bottom:-14px;height:14px;background:linear-gradient(180deg,#2b3038,#0f1216);border-radius:3px;transform:perspective(200px) rotateX(-30deg);transform-origin:top;box-shadow:0 6px 10px rgba(0,0,0,.4)}

/* ── la carte papier posée à côté (scène 9) ────────────────────────────── */
.cmini{position:absolute;left:5%;bottom:26%;width:min(40cqw,236px);z-index:6;transform-origin:bottom center;
  background:var(--pap);border-radius:9px;padding:11px 12px 12px;
  transform:perspective(900px) rotateY(15deg) translateY(150%);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s;
  box-shadow:0 30px 30px -16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.06)}
.stage[data-sc="8"] .cmini{transform:perspective(900px) rotateY(15deg) translateY(0);opacity:1}
.cmini>s{display:block;text-decoration:none;font:italic 500 var(--f9)/1.3 var(--serif);color:var(--pmu);margin-bottom:6px}
.cmr{display:flex;align-items:baseline;justify-content:space-between;gap:9px;padding:6px 0;border-top:1px solid var(--pli)}
.cmr b{font:600 var(--f11)/1.25 var(--serif);color:var(--pin)}
.cmr i{font-style:normal;font:700 var(--f11)/1.25 var(--h);color:var(--pin);white-space:nowrap;transition:color .35s,transform .35s}
.stage[data-sc="8"][data-k="3"] #hPrix,.stage[data-sc="8"][data-k="4"] #hPrix{color:#0E7C66;transform:scale(1.14)}
.cmini-legs{position:absolute;left:4px;right:4px;bottom:-11px;height:11px;background:linear-gradient(180deg,#2b3038,#0f1216);border-radius:3px;transform:perspective(200px) rotateX(-30deg);transform-origin:top;box-shadow:0 6px 10px rgba(0,0,0,.4)}

/* ── l'ordinateur portable (scènes 2 et 3) ─────────────────────────────── */
.laptop{position:absolute;left:50%;bottom:22%;width:min(76cqw,452px);z-index:4;
  transform:translate(-50%,150%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s;
  filter:drop-shadow(0 42px 34px rgba(0,0,0,.6))}
.stage[data-sc="1"] .laptop,.stage[data-sc="2"] .laptop{transform:translate(-50%,0);opacity:1}
.lid{background:linear-gradient(158deg,#232a33,#0c1015);border-radius:13px 13px 5px 5px;padding:9px 9px 13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transform-origin:bottom center;
  transform:perspective(1100px) rotateX(-72deg);transition:transform .7s cubic-bezier(.2,.85,.25,1)}
.stage[data-sc="1"] .lid,.stage[data-sc="2"] .lid{transform:perspective(1100px) rotateX(0deg)}
.lscreen{position:relative;aspect-ratio:16/10;border-radius:5px;overflow:hidden;background:var(--white);display:flex;flex-direction:column}
.lbase{position:relative;height:2.6cqw;max-height:15px;margin:0 -5%;background:linear-gradient(180deg,#2d343d,#11151b);
  border-radius:0 0 11px 11px;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);box-shadow:0 14px 24px -8px rgba(0,0,0,.65)}
.lbase::after{content:'';position:absolute;left:43%;right:43%;top:0;height:3px;background:rgba(255,255,255,.14);border-radius:0 0 4px 4px}
.wtop{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:6px 9px;background:var(--sand);border-bottom:1px solid var(--line)}
.wtop i{width:6px;height:6px;border-radius:50%;background:var(--line2);flex:0 0 auto}
.wtop span{margin-left:6px;flex:1;background:var(--white);border-radius:99px;padding:3px 9px;
  font:600 var(--f9)/1.5 var(--b);color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsw{position:absolute;right:9px;top:calc(6.5cqw + 4px);z-index:3;display:flex;gap:4px;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.94);box-shadow:0 10px 20px -10px rgba(0,0,0,.7);opacity:0;transform:translateY(-5px);transition:all .35s}
.stage[data-sc="1"] .wsw{opacity:1;transform:none}
.wsw em{width:clamp(9px,1.9cqw,12px);height:clamp(9px,1.9cqw,12px);border-radius:50%;transition:transform .3s,box-shadow .3s}
.wsw .c0{background:#0E7C66;color:#0E7C66}.wsw .c1{background:#C1552F;color:#C1552F}
.wsw .c2{background:#1F6F8B;color:#1F6F8B}.wsw .c3{background:#C9A24B;color:#C9A24B}
.stage[data-sc="1"][data-k="0"] .c0,.stage[data-sc="1"][data-k="1"] .c1,
.stage[data-sc="1"][data-k="2"] .c2,.stage[data-sc="1"][data-k="3"] .c3{transform:scale(1.4);box-shadow:0 0 0 2px #fff,0 0 0 3.5px currentColor}
.stage[data-sc="1"][data-k="1"] .lscreen{--a:#C1552F}
.stage[data-sc="1"][data-k="2"] .lscreen{--a:#1F6F8B}
.stage[data-sc="1"][data-k="3"] .lscreen{--a:#C9A24B}
.wview{flex:1 1 auto;display:flex;width:300%;transform:translateX(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.stage[data-sc="2"] .wview{transform:translateX(-33.3333%)}
.stage[data-sc="2"][data-k="5"] .wview,.stage[data-sc="2"][data-k="6"] .wview{transform:translateX(-66.6666%)}
.wpan{width:33.3333%;flex:0 0 33.3333%;min-width:0;background:var(--white);display:flex;flex-direction:column}
/* 2 · le site */
.whero{position:relative;height:38%;flex:0 0 auto;overflow:hidden}
.whero img{width:100%;height:100%;object-fit:cover}
.whero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(12,14,13,.72))}
.wtxt{position:absolute;left:13px;right:13px;bottom:9px;z-index:2;color:#fff}
.wtxt b{display:block;font:500 var(--f16)/1 var(--serif);letter-spacing:-.02em}
.wtxt s{display:block;text-decoration:none;font:500 var(--f9)/1.3 var(--b);color:rgba(255,255,255,.86);margin-top:3px}
.wnav{display:flex;gap:10px;padding:9px 13px 0;align-items:center}
.wnav u{height:4px;border-radius:99px;background:var(--line2);text-decoration:none}
.wnav u:first-child{width:32px;background:var(--a);transition:background .5s}
.wnav u:nth-child(2){width:24px}.wnav u:nth-child(3){width:28px}.wnav u:nth-child(4){width:19px}
.wlines{display:grid;gap:6px;padding:11px 13px 0}
.wlines u{height:5px;border-radius:99px;background:var(--line);text-decoration:none}
.wlines u:nth-child(2){width:64%}
.wcta{display:block;margin:auto 13px 13px;padding:9px;border-radius:99px;background:var(--a);color:#fff;text-align:center;
  font:700 var(--f11)/1 var(--h);transition:background .5s,transform .2s;box-shadow:0 12px 22px -14px rgba(0,0,0,.7)}
/* 3 · le formulaire puis le logiciel du patron */
.wform,.wtab{padding:11px 13px 13px;gap:6px}
.wform>b,.wtab>b{display:block;font:700 var(--f13)/1.2 var(--h);color:var(--ink)}
.wtab>s{display:block;text-decoration:none;font:600 var(--f9)/1.3 var(--b);color:var(--slate);margin-bottom:6px}
.wform label{display:block;margin-top:5px}
.wform s{display:block;text-decoration:none;font:700 var(--f9)/1.4 var(--h);color:var(--slate);text-transform:uppercase;letter-spacing:.07em}
.fld{display:block;margin-top:2px;min-height:clamp(22px,4.6cqw,29px);border:1px solid var(--line2);border-radius:8px;
  padding:4px 8px;background:var(--paper);font:600 var(--f11)/1.6 var(--b);color:var(--ink)}
.stage[data-sc="2"][data-k="0"] .f1,.stage[data-sc="2"][data-k="1"] .f1,
.stage[data-sc="2"][data-k="2"] .f2,.stage[data-sc="2"][data-k="3"] .f3{border-color:var(--em);box-shadow:0 0 0 3px var(--emsoft)}
.wconf{margin:8px 0 0}
.stage[data-sc="2"][data-k="4"] .wconf{transform:scale(.96);background:var(--emd)}
.coche{position:absolute;left:50%;top:52%;z-index:4;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%) scale(.7);
  background:var(--em);color:#fff;border-radius:99px;padding:8px 13px;font:800 var(--f11)/1 var(--h);white-space:nowrap;
  opacity:0;transition:all .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 16px 30px -14px rgba(0,0,0,.8)}
.coche svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.stage[data-sc="2"][data-k="4"] .coche{opacity:1;transform:translate(-50%,-50%) scale(1)}
.stage .tr{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:7px 9px;border-radius:8px;
  font:600 var(--f11)/1.3 var(--b);color:var(--ink);border-bottom:1px solid var(--line)}
.stage .tr span:first-child,.stage .tr span:last-child{font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.tnew{background:var(--emsoft);border-bottom-color:transparent;box-shadow:inset 3px 0 0 var(--em);opacity:.25;transition:opacity .5s}
.stage[data-sc="2"][data-k="6"] .tnew{opacity:1}
.badge-sans{position:absolute;right:9px;bottom:9px;z-index:4;background:#141A22;color:#fff;border-radius:99px;
  padding:6px 10px;font:700 var(--f9)/1 var(--h);opacity:0;transform:translateY(6px);transition:all .4s}
.stage[data-sc="2"][data-k="6"] .badge-sans{opacity:1;transform:none}

/* ── le téléphone ──────────────────────────────────────────────────────── */
.phone{position:absolute;right:50%;bottom:15%;width:min(54cqw,290px);z-index:8;
  transform:translate(50%,140%) rotate(0deg);transition:transform .6s cubic-bezier(.2,.8,.2,1),right .55s cubic-bezier(.2,.8,.2,1),width .55s;
  filter:drop-shadow(0 40px 40px rgba(0,0,0,.55))}
.stage[data-sc="0"] .phone{right:5%;bottom:12%;width:min(46cqw,272px);transform:translate(0,0) rotate(-5deg)}
.stage[data-sc="3"] .phone,.stage[data-sc="4"] .phone,.stage[data-sc="5"] .phone,
.stage[data-sc="6"] .phone,.stage[data-sc="7"] .phone{transform:translate(50%,0) rotate(0deg);width:min(50cqw,250px);bottom:13%}
.stage[data-sc="8"] .phone{right:6%;bottom:14%;width:min(48cqw,268px);transform:translate(0,0) rotate(-3deg)}
.shell{position:relative;background:#0b0f14;border-radius:9%/4.6%;padding:3.6%;box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 2px #2a323c}
.shell::before{content:'';position:absolute;left:50%;top:3.6%;width:30%;height:3.4%;background:#0b0f14;border-radius:0 0 14px 14px;transform:translateX(-50%);z-index:9}
.screen{position:relative;aspect-ratio:100/191;border-radius:7%/3.7%;overflow:hidden;background:#000}
.vue{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.vue.est-la{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}

/* 1 · l'appareil photo, le viseur, puis la carte ivoire */
.cam{background:radial-gradient(ellipse at 50% 60%,#1e4a58,#0b1a22 70%);align-items:center;justify-content:center}
.cam-tent{width:44%;transform:scale(.92);opacity:.85;filter:blur(.4px)}
.cam-tent .tent-face{padding:9px 8px 7px}
.cam-tent .tent-face b{font-size:var(--f9)}
.cam-hint{position:absolute;left:0;right:0;top:13%;text-align:center;font:600 var(--f11)/1 var(--b);color:rgba(255,255,255,.75)}
.brk{position:absolute;width:9.5%;height:5%;border:3px solid #67d5af;opacity:0;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.brk.tl{left:11%;top:26%;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.brk.tr{right:11%;top:26%;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.brk.bl{left:11%;bottom:28%;border-right:0;border-top:0;border-radius:0 0 0 6px}
.brk.br{right:11%;bottom:28%;border-left:0;border-top:0;border-radius:0 0 6px 0}
.stage[data-sc="0"][data-k="1"] .brk{opacity:1;left:19%;right:19%;top:32%}
.stage[data-sc="0"][data-k="1"] .brk.tl,.stage[data-sc="0"][data-k="1"] .brk.tr{top:32%;bottom:auto}
.stage[data-sc="0"][data-k="1"] .brk.bl,.stage[data-sc="0"][data-k="1"] .brk.br{bottom:34%;top:auto}
.stage[data-sc="0"][data-k="1"] .brk.tl,.stage[data-sc="0"][data-k="1"] .brk.bl{left:19%;right:auto}
.stage[data-sc="0"][data-k="1"] .brk.tr,.stage[data-sc="0"][data-k="1"] .brk.br{right:19%;left:auto}
.laser{position:absolute;left:19%;right:19%;top:32%;height:3px;background:#67d5af;box-shadow:0 0 14px 3px rgba(103,213,175,.8);opacity:0}
.stage[data-sc="0"][data-k="1"] .laser{animation:laser2 1.1s ease-in-out .15s 1}
@keyframes laser2{0%{opacity:1;top:32%}100%{opacity:1;top:66%}}
.cam-chip{position:absolute;left:50%;bottom:15%;transform:translate(-50%,10px);background:#67d5af;color:#08331a;
  font:800 var(--f12)/1 var(--h);padding:9px 13px;border-radius:99px;opacity:0;transition:all .35s;white-space:nowrap}
.stage[data-sc="0"][data-k="1"] .cam-chip{transition-delay:1.15s;opacity:1;transform:translate(-50%,0)}
.app{position:absolute;inset:0;z-index:2;background:var(--pap);color:var(--pin);display:flex;flex-direction:column;
  transform:translateY(101%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.stage[data-sc="0"][data-k="2"] .app,.stage[data-sc="0"][data-k="3"] .app,.stage[data-sc="0"][data-k="4"] .app{transform:translateY(0)}
.app-top{position:relative;height:26%;padding:0 12px 10px;display:flex;align-items:flex-end;gap:10px;color:#fff;
  background:url(/assets/img/dish.jpg) center 40%/cover no-repeat;flex:0 0 auto}
.app-top::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 35%,rgba(12,14,13,.8) 100%)}
.app-top>*{position:relative}
.app-top b{display:block;font:500 var(--f16)/1 var(--serif);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.app-top small{display:block;font:500 var(--f9)/1.3 var(--b);color:rgba(255,255,255,.85);margin-top:3px}
.lang-toast{position:absolute;right:10px;top:10px;z-index:2;background:#fff;color:var(--pin);font:800 var(--f10)/1 var(--h);
  padding:6px 9px;border-radius:99px;opacity:0;transform:translateY(-6px);transition:all .4s .2s;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.stage[data-sc="0"][data-k="2"] .lang-toast,.stage[data-sc="0"][data-k="3"] .lang-toast,.stage[data-sc="0"][data-k="4"] .lang-toast{opacity:1;transform:none}
.app-cat{padding:11px 13px 2px}
.app-cat b{display:block;font:500 var(--f13)/1.15 var(--serif);color:var(--pin)}
.app-cat s{display:block;text-decoration:none;font:italic 500 var(--f9)/1.3 var(--serif);color:var(--pmu);margin-top:2px}
.app-list{display:grid}
.plat{display:grid;grid-template-columns:14% 1fr auto;gap:9px;align-items:center;padding:7px 13px;border-bottom:1px solid var(--pli);
  opacity:0;transform:translateX(16px);transition:all .45s cubic-bezier(.2,.8,.2,1)}
.stage[data-sc="0"][data-k="2"] .plat,.stage[data-sc="0"][data-k="3"] .plat,.stage[data-sc="0"][data-k="4"] .plat{opacity:1;transform:none}
.plat:nth-child(1){transition-delay:.4s}.plat:nth-child(2){transition-delay:.52s}.plat:nth-child(3){transition-delay:.64s}
.plat img{width:100%;aspect-ratio:1;border-radius:11px;object-fit:cover;display:block;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.plat b{display:block;font:600 var(--f11)/1.2 var(--serif);color:var(--pin)}
.plat s{display:block;text-decoration:none;font:400 var(--f9)/1.3 var(--b);color:var(--pmu);margin-top:2px}
.plat i{font:700 var(--f11)/1 var(--h);font-style:normal;color:var(--pin);white-space:nowrap;font-variant-numeric:tabular-nums}
.app-res{margin:auto 12px 13px;background:#1F5F4B;color:#fff;border-radius:99px;padding:11px;font:700 var(--f12)/1 var(--h);
  display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 12px 24px -12px rgba(31,95,75,.9)}
.app-res svg{width:15px;height:15px}
.stage .bulle{position:absolute;left:3.5%;top:6%;z-index:10;background:#fff;color:#141A22;font:700 var(--f13)/1.25 var(--h);
  padding:11px 14px;border-radius:16px 16px 4px 16px;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  opacity:0;transform:translate(10px,8px) scale(.85);transition:all .35s cubic-bezier(.2,.8,.2,1);max-width:36%}
.stage .bulle::after{content:'';position:absolute;right:-6px;bottom:10px;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
.stage .bulle span{font-size:1.35em;margin-right:6px;vertical-align:-.16em}
.stage[data-sc="0"][data-k="3"] .bulle,.stage[data-sc="0"][data-k="4"] .bulle{opacity:1;transform:none}

/* 4 · la fiche Google */
.v-fiche{background:var(--white)}
.gcover{position:relative;height:23%;flex:0 0 auto;overflow:hidden}
.gcover img{width:100%;height:100%;object-fit:cover}
.gbody{padding:11px 12px;overflow:hidden}
.gbody>b{display:block;font:700 var(--f16)/1.15 var(--h);color:var(--ink)}
.grate{display:flex;align-items:center;gap:5px;margin-top:3px;flex-wrap:wrap}
.grate em{font-style:normal;font:700 var(--f12)/1 var(--h);color:var(--ink)}
.grate u{text-decoration:none;color:var(--gold);font-size:var(--f11);letter-spacing:.06em}
.grate s{text-decoration:none;font:500 var(--f9)/1 var(--b);color:var(--slate)}
.gopen{margin-top:6px;font:700 var(--f10)/1 var(--h);color:var(--em)}
.gh{margin-top:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 0}
.gh>div{display:flex;align-items:center;gap:7px;padding:3px 0;font:500 var(--f10)/1.5 var(--b);color:var(--slate)}
.gh>div>span{width:38%;flex:0 0 auto}
.gh i{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .4s}
.ghsun i{color:var(--alert)}
.stage[data-sc="3"][data-k="2"] .ghsun i,.stage[data-sc="3"][data-k="3"] .ghsun i{color:var(--em)}
.gbadge{text-decoration:none;font:700 var(--f9)/1 var(--h);color:var(--em);background:var(--emsoft);border-radius:99px;
  padding:4px 7px;opacity:0;transform:translateX(-5px);transition:all .35s}
.stage[data-sc="3"][data-k="2"] .gbadge,.stage[data-sc="3"][data-k="3"] .gbadge{opacity:1;transform:none}
.gvign{display:flex;gap:5px;margin-top:9px}
.gvign img{width:calc((100% - 10px) / 3);aspect-ratio:1;border-radius:7px;object-fit:cover}
.gbtns{display:flex;gap:5px;margin-top:10px}
.gbtns span{flex:1;text-align:center;border:1px solid var(--line2);border-radius:99px;padding:6px 3px;font:700 var(--f9)/1.3 var(--h);color:var(--slate)}
.gbtns span:last-child{background:var(--em);border-color:var(--em);color:#fff}

/* 5 · les clients venus de la recherche locale */
.v-clients{background:var(--white);padding:11px 12px}
.sbar{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:99px;padding:7px 11px;background:var(--paper);flex:0 0 auto}
.sbar svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:var(--slate);stroke-width:1.8;stroke-linecap:round}
.sbar span{font:600 var(--f11)/1.4 var(--b);color:var(--ink);white-space:nowrap;overflow:hidden}
.caret{width:1.5px;height:var(--f12);background:var(--em);animation:car 1s steps(2) infinite;flex:0 0 auto}
@keyframes car{50%{opacity:0}}
.stage[data-sc="4"]:not([data-k="0"]) .caret{opacity:0}
.map{position:relative;height:22%;flex:0 0 auto;margin-top:10px;border-radius:10px;overflow:hidden;background:#e8e5dd}
.map svg{width:100%;height:100%}
.road{fill:none;stroke:#cfcbc0;stroke-width:3}
.shore{fill:none;stroke:#0E7C66;stroke-width:1.6;opacity:.5}
.pin{position:absolute;left:24%;top:22%;width:20px;height:20px;color:#0E7C66}
.pin svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.stage[data-sc="4"][data-k="2"] .pin,.stage[data-sc="4"][data-k="3"] .pin,.stage[data-sc="4"][data-k="4"] .pin{animation:pinb 1.1s ease-out infinite}
@keyframes pinb{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(0)}}
.res{margin-top:10px;display:grid;gap:5px}
.res .r{padding:7px 9px;border-radius:9px;border:1px solid transparent;opacity:0;transform:translateY(6px);transition:all .35s}
.stage[data-sc="4"][data-k="2"] .r,.stage[data-sc="4"][data-k="3"] .r,.stage[data-sc="4"][data-k="4"] .r{opacity:1;transform:none}
.res .r:nth-child(2){transition-delay:.1s}.res .r:nth-child(3){transition-delay:.2s}
.res .r b{display:block;font:700 var(--f11)/1.2 var(--h);color:var(--ink)}
.res .r s{display:block;text-decoration:none;font:500 var(--f9)/1.4 var(--b);color:var(--slate);margin-top:1px}
.rmine{background:var(--emsoft);border-color:var(--em)}
.rmine b{color:var(--emd)}

/* 6 · le quiz */
.v-quiz{background:linear-gradient(170deg,#12202a,#0a1015);color:#fff;padding:13px;justify-content:center;gap:9px}
.qtop{display:flex;align-items:flex-start;gap:8px}
.qtop b{flex:1;font:700 var(--f13)/1.2 var(--h)}
.qtop em{font-style:normal;font:800 var(--f11)/1 var(--h);color:#0b0f14;background:var(--mint);border-radius:99px;padding:5px 8px}
.qq{margin:10px 0 0;font:500 var(--f12)/1.4 var(--b);color:rgba(255,255,255,.84)}
.qa{display:grid;gap:7px;margin-top:11px}
.qa span{border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:9px 11px;font:700 var(--f11)/1.2 var(--h);color:#fff;transition:all .3s}
.stage[data-sc="5"][data-k="1"] .bonne{border-color:rgba(255,255,255,.6);transform:scale(1.02)}
.stage[data-sc="5"][data-k="2"] .bonne,.stage[data-sc="5"][data-k="3"] .bonne{background:var(--mint);border-color:var(--mint);color:#0b2c22}
.confetti{position:absolute;left:0;right:0;top:8%;width:100%;height:auto;fill:none;stroke:var(--mint);stroke-width:1.8;
  stroke-linecap:round;opacity:0;transform:scale(.86);transition:all .45s cubic-bezier(.2,.8,.2,1)}
.stage[data-sc="5"][data-k="3"] .confetti{opacity:.9;transform:none}

/* 7 · les avis */
.v-avis{background:var(--pap);color:var(--pin);padding:13px;justify-content:center;align-items:center;text-align:center}
.v-avis>b{font:500 clamp(19px,4cqw,26px)/1 var(--serif)}
.v-avis>p{margin:7px 0 0;font:500 var(--f11)/1.4 var(--b);color:var(--pmu)}
.etoiles{display:flex;justify-content:center;gap:4px;margin:16px 0}
.etoiles i{width:11%;aspect-ratio:1}
.etoiles svg{width:100%;height:100%;fill:none;stroke:#C9A24B;stroke-width:1.8;stroke-linejoin:round;transition:fill .3s,transform .3s}
.stage[data-sc="6"][data-k="1"] .etoiles i:nth-child(-n+1) svg,.stage[data-sc="6"][data-k="2"] .etoiles i:nth-child(-n+2) svg,
.stage[data-sc="6"][data-k="3"] .etoiles i:nth-child(-n+3) svg,.stage[data-sc="6"][data-k="4"] .etoiles i:nth-child(-n+4) svg,
.stage[data-sc="6"][data-k="5"] .etoiles i svg,.stage[data-sc="6"][data-k="6"] .etoiles i svg{fill:#C9A24B;transform:scale(1.1)}
.publier{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;padding:10px 15px;border-radius:99px;
  background:#1B1F1D;color:#fff;font:700 var(--f11)/1 var(--h);opacity:0;transform:translateY(7px);transition:all .4s}
.stage[data-sc="6"][data-k="6"] .publier{opacity:1;transform:none}

/* 8 et 9 · WhatsApp dans le téléphone */
.v-rapport,.v-humain{background:#ECE3D9}
.v-rapport::before,.v-humain::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.5),transparent 45%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.4),transparent 40%)}
.wabar{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:8px;background:#075E54;color:#fff;padding:11% 11px 9px}
.wabar em{width:22px;height:22px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  font-style:normal;font:800 var(--f10)/1 var(--h);color:#08331a;flex:0 0 auto}
.wabar b{font:700 var(--f11)/1.2 var(--h)}
.wabar s{display:block;text-decoration:none;font:500 calc(var(--f9) * .92)/1.2 var(--b);color:rgba(255,255,255,.72);margin-top:1px}
.wafil{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;gap:8px;padding:11px 10px}
.msg{position:relative;max-width:86%;padding:8px 11px 6px;font:500 var(--f11)/1.4 var(--b);color:#141A22;border-radius:14px;
  box-shadow:0 10px 20px -16px rgba(20,26,34,.9);opacity:0;transform:translateY(8px);transition:all .35s}
.msg em{display:block;text-align:right;font-style:normal;font:600 calc(var(--f9) * .92)/1 var(--b);color:#7c8894;margin-top:3px}
.msg u{text-decoration:none;color:#34B7F1}
.msg.out{align-self:flex-end;background:#DCF8C6;border-bottom-right-radius:4px}
.msg.in{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.msg.rap{align-self:flex-start;background:#fff;max-width:100%;border-bottom-left-radius:4px}
.msg.rap>b{display:block;font:700 var(--f12)/1.25 var(--h);color:#141A22}
.stage[data-sc="7"][data-k="1"] .rap,.stage[data-sc="7"][data-k="2"] .rap,.stage[data-sc="7"][data-k="3"] .rap{opacity:1;transform:none}
.barres{display:flex;align-items:flex-end;gap:4px;height:22%;margin-top:10px}
.barres i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#25D366,#0E7C66);height:calc(var(--v) * 100%);
  transform:scaleY(.05);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stage[data-sc="7"][data-k="1"] .barres i,.stage[data-sc="7"][data-k="2"] .barres i,.stage[data-sc="7"][data-k="3"] .barres i{transform:none}
.barres i:nth-child(2){transition-delay:.05s}.barres i:nth-child(3){transition-delay:.1s}.barres i:nth-child(4){transition-delay:.15s}
.barres i:nth-child(5){transition-delay:.2s}.barres i:nth-child(6){transition-delay:.25s}.barres i:nth-child(7){transition-delay:.3s}
.barres i:nth-child(8){transition-delay:.35s}.barres i:nth-child(9){transition-delay:.4s}.barres i:nth-child(10){transition-delay:.45s}
.baxe{display:block;text-decoration:none;margin-top:5px;padding-top:5px;border-top:1px solid #E6E1D4;font:600 var(--f9)/1.3 var(--b);color:#8a929c}
.rl{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.rl li{position:relative;padding-left:13px;font:500 var(--f10)/1.4 var(--b);color:#4b545f;opacity:0;transform:translateX(6px);transition:all .35s}
.rl li::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:#0E7C66}
.stage[data-sc="7"][data-k="2"] .rl li,.stage[data-sc="7"][data-k="3"] .rl li{opacity:1;transform:none}
.rl li:nth-child(2){transition-delay:.12s}.rl li:nth-child(3){transition-delay:.24s}
.stage[data-sc="8"][data-k="1"] .out,.stage[data-sc="8"][data-k="2"] .out,.stage[data-sc="8"][data-k="3"] .out,.stage[data-sc="8"][data-k="4"] .out,
.stage[data-sc="8"][data-k="2"] .in,.stage[data-sc="8"][data-k="3"] .in,.stage[data-sc="8"][data-k="4"] .in{opacity:1;transform:none}

/* ── l'index, hors du cadre sombre ─────────────────────────────────────── */
.idx{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin:16px auto 0;max-width:680px}
.pst{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:9px 3px 12px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;cursor:pointer;font:inherit;color:var(--slate);
  transition:color .25s,border-color .25s,background .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.pst svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pst span{font:700 11px/1.1 var(--h);letter-spacing:-.02em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pst:hover{color:var(--ink);border-color:var(--line2);transform:translateY(-2px)}
.pst.est-active{color:var(--emd);border-color:var(--em);background:var(--emsoft)}
.pg{position:absolute;left:8px;right:8px;bottom:5px;height:2px;border-radius:2px;background:var(--line2);overflow:hidden;opacity:0;transition:opacity .25s}
.pst.est-active .pg{opacity:1}
.pg u{display:block;height:100%;text-decoration:none;background:var(--em);transform:scaleX(0);transform-origin:left}

/* ── écrans étroits ────────────────────────────────────────────────────── */
@media(max-width:960px){
  .stage{max-width:100%;aspect-ratio:4/5;min-height:420px}
  .idx{max-width:100%}
}
@media(max-width:640px){
  .stage{border-radius:22px}
  .stage[data-sc="0"] .phone{width:min(42cqw,220px);right:3%;bottom:13%}
  .phone{width:min(50cqw,240px)}
  .tent{width:min(32cqw,150px);left:3%}
  .cmini{width:min(44cqw,200px);left:3%}
  .laptop{width:min(84cqw,380px)}
  .legende{padding:9px 11px 10px;border-radius:12px}
  .idx{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
    padding:2px 2px 6px;margin-top:14px;-ms-overflow-style:none;scrollbar-width:none}
  .idx::-webkit-scrollbar{display:none}
  .pst{flex:0 0 auto;min-width:78px;min-height:52px;scroll-snap-align:center;padding:9px 10px 13px}
}

/* ── mouvement réduit : la scène 1 est figée carte ouverte, l'index reste cliquable ── */
@media (prefers-reduced-motion:reduce){
  .phone,.laptop,.tent,.cmini,.lid,.app,.vue,.wview{transition:none}
  .bokeh i,.caret,.pin{animation:none}
  .pg{opacity:0!important}
}

/* ── le changement de langue dans la carte (scène 1) ───────────────────── */
.plat.sw b,.plat.sw s,.plat.sw i,.app-cat.sw b,.app-cat.sw s{animation:swp .45s cubic-bezier(.2,.8,.2,1) both}
.plat:nth-child(2).sw b,.plat:nth-child(2).sw s,.plat:nth-child(2).sw i{animation-delay:.07s}
.plat:nth-child(3).sw b,.plat:nth-child(3).sw s,.plat:nth-child(3).sw i{animation-delay:.14s}
@keyframes swp{0%{opacity:0;transform:translateX(9px)}100%{opacity:1;transform:none}}