/* ════════════════════════════════════════════════════════════════════════
   321smile — animations explicatives (motion design pur, sans vidéo)
   Composants : borne (contreplaqué), imprimante, téléphone, montage, QR.
   Les scènes sont pilotées par animations.js qui fait défiler data-step.
   ════════════════════════════════════════════════════════════════════════ */

.exp-wrap{max-width:780px;margin:6px auto 0;padding:0 22px}
.exp-stage{position:relative;width:100%;aspect-ratio:16/10;border-radius:24px;overflow:hidden;
  background:radial-gradient(130% 120% at 50% -12%,#f2ecfb 0%,#fdf7f2 60%);
  border:1px solid var(--border);box-shadow:0 22px 54px rgba(110,80,160,.13)}

/* légende + progression */
.exp-cap{max-width:780px;margin:16px auto 0;padding:0 22px;text-align:center;min-height:46px}
.exp-cap b{display:block;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  transition:opacity .35s}
.exp-cap small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.exp-dots{display:flex;gap:7px;justify-content:center;margin:14px 0 2px}
.exp-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .3s;cursor:pointer}
.exp-dots i.on{background:linear-gradient(135deg,var(--accent2),var(--accent));width:22px;border-radius:4px}

/* petit flottement d'ambiance */
@keyframes expFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ───────────────────────── BORNE ───────────────────────── */
.booth{position:absolute;width:40%}
.booth__pole{position:absolute;left:50%;bottom:-34%;width:5%;height:42%;transform:translateX(-50%);
  background:linear-gradient(90deg,#16161c,#2d2d36,#16161c);border-radius:3px;z-index:0}
.booth__pole::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:520%;height:7px;background:linear-gradient(90deg,#16161c,#34343f,#16161c);border-radius:4px}
.booth__face{position:relative;z-index:1;width:100%;aspect-ratio:3/2;border-radius:15px;
  background:
    repeating-linear-gradient(96deg,rgba(150,112,58,.045) 0 4px,rgba(150,112,58,0) 4px 16px),
    linear-gradient(135deg,#f3e0ba 0%,#ead0a0 46%,#e0c58d 76%,#efd9ab 100%);
  box-shadow:0 16px 34px rgba(120,85,30,.26),inset 0 2px 6px rgba(255,255,255,.6),
    inset 0 -8px 16px rgba(120,80,20,.14);
  border:1px solid #dcc090;display:flex;flex-direction:column;align-items:center;padding:7.5% 0 0}
.booth__face::before{content:"";position:absolute;inset:0;border-radius:15px;
  background:radial-gradient(68% 44% at 28% 16%,rgba(255,255,255,.42),transparent 60%);pointer-events:none}
/* Objectif : carré garanti (padding-bottom % = base largeur, comme width %) → rond parfait partout */
.booth__cam{width:8%;height:0;padding-bottom:8%;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#3b3b45 0 12%,#101014 36%,#050507 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.35);position:relative}
.booth__cam::after{content:"";position:absolute;top:26%;left:30%;width:18%;height:18%;border-radius:50%;
  background:rgba(130,170,255,.75)}
.booth__screen{margin-top:5.5%;width:75%;aspect-ratio:16/10;border-radius:8px;background:#0d1016;
  box-shadow:inset 0 0 0 3px #07080c,inset 0 6px 16px rgba(0,0,0,.6);
  position:relative;overflow:hidden;display:grid;place-items:center}

/* contenus d'écran (empilés, affichés par étape) */
.scr{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s;text-align:center}
.scr.show{opacity:1}
.scr-tap b{color:#fff;font-weight:700;font-size:min(2.6vw,13px);line-height:1.15}
.scr-tap small{display:block;color:#aeb4c4;font-size:min(1.9vw,9px);margin-top:3px}
.scr-tap .pill{margin-top:7px;display:inline-block;background:linear-gradient(135deg,#ff5c8a,#8b6cf0);
  color:#fff;border-radius:7px;padding:3px 10px;font-size:min(1.9vw,9px);font-weight:700;
  animation:tapPulse 1.3s ease-in-out infinite}
@keyframes tapPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.scr-tap .finger{position:absolute;right:16%;bottom:12%;font-size:min(5vw,22px);
  animation:tapFinger 1.3s ease-in-out infinite}
@keyframes tapFinger{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-6px) rotate(-8deg)}}
.scr-count b{position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:min(9vw,46px);opacity:0}
/* décompte séquencé 3 → 2 → 1 → flash blanc, en boucle (cycle 3,2 s) */
@keyframes cdPop{0%{opacity:0;transform:scale(.5)}8%{opacity:1;transform:scale(1)}
  18%{opacity:1;transform:scale(1.04)}25%{opacity:0;transform:scale(1.3)}100%{opacity:0}}
@keyframes cdFlash{0%,72%{opacity:0}78%{opacity:.95}90%{opacity:0}100%{opacity:0}}
.scene-complet[data-step="1"] .scr-count b,
.scene-seul[data-step="1"] .scr-count b{animation:cdPop 3.2s linear infinite}
.scene-complet[data-step="1"] .scr-count b:nth-child(2),
.scene-seul[data-step="1"] .scr-count b:nth-child(2){animation-delay:.8s}
.scene-complet[data-step="1"] .scr-count b:nth-child(3),
.scene-seul[data-step="1"] .scr-count b:nth-child(3){animation-delay:1.6s}
/* le flash blanc qui conclut le décompte (la photo est prise) */
.scene-complet[data-step="1"] .flash,
.scene-seul[data-step="1"] .flash{animation:cdFlash 3.2s linear infinite}
.scr-live{position:absolute;inset:0;background:
  linear-gradient(135deg,#6a5ae0,#b06ab3 55%,#ff8aa0);opacity:0;transition:opacity .4s}
.scr-live::after{content:"😄";position:absolute;inset:0;display:grid;place-items:center;font-size:min(9vw,40px)}

/* flash */
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}

/* ───────────────────────── MONTAGE / BANDE ───────────────────────── */
/* Montage « classic » : 1 grande photo à gauche + 2 petites empilées à droite (paysage) */
.card{position:absolute;width:22%;aspect-ratio:3/2;border-radius:6px;background:#fff;
  padding:4.5%;display:flex;gap:5%;box-shadow:0 10px 26px rgba(80,50,120,.28);opacity:0;z-index:4;
  transition:all .7s cubic-bezier(.6,.1,.2,1)}
.collbig{flex:1.9;border-radius:3px;display:grid;place-items:center}
.collbig::after{content:"😄";font-size:min(3.6vw,17px)}
.collsm{flex:1;display:flex;flex-direction:column;gap:9%}
.collsm span{flex:1;border-radius:3px}
.g1{background:linear-gradient(135deg,#9b8cf5,#8b6cf0)}
.g2{background:linear-gradient(135deg,#ff9bb3,#ff5c8a)}
.g3{background:linear-gradient(135deg,#7fd8c6,#38b2a0)}

/* ───────────────────────── IMPRIMANTE ───────────────────────── */
.printer{position:absolute;width:30%;z-index:2}
.printer__body{position:relative;width:100%;aspect-ratio:9/5;border-radius:12px;
  background:linear-gradient(135deg,#3a3550,#262235);
  box-shadow:0 14px 30px rgba(40,25,70,.32),inset 0 2px 4px rgba(255,255,255,.12);
  border:1px solid #241f36}
.printer__slot{position:absolute;top:16%;left:12%;width:76%;height:9%;border-radius:4px;
  background:#07060d;box-shadow:inset 0 2px 5px rgba(0,0,0,.8)}
.printer__led{position:absolute;bottom:14%;right:11%;width:7%;aspect-ratio:1;border-radius:50%;
  background:#38d39f;box-shadow:0 0 8px #38d39f;animation:ledBlink 1.6s ease-in-out infinite}
@keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.35}}
.printer__label{position:absolute;bottom:12%;left:11%;font-size:min(2vw,9px);font-weight:700;
  color:#b9b2d6;letter-spacing:.3px}
/* tirage qui sort de la fente */
.print-out{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:76%;aspect-ratio:3/2;
  border-radius:4px;background:#fff;padding:4%;display:flex;gap:5%;
  box-shadow:0 8px 20px rgba(60,35,100,.3);transform-origin:bottom center;
  clip-path:inset(100% 0 0 0);transition:clip-path .9s ease,top .9s ease;z-index:1}

/* ───────────────────────── TÉLÉPHONE ───────────────────────── */
.phone{position:absolute;width:16%;z-index:3}
.phone__body{position:relative;width:100%;aspect-ratio:1/2;border-radius:16px;background:#14121d;
  padding:9% 7%;box-shadow:0 14px 30px rgba(40,25,70,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone__scr{width:100%;height:100%;border-radius:8px;overflow:hidden;position:relative;
  background:#fff;display:flex;flex-direction:column}
.phone__scr .top{background:linear-gradient(135deg,#ff5c8a,#8b6cf0);color:#fff;font-size:min(1.7vw,7px);
  font-weight:700;text-align:center;padding:6% 0}
.phone__grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:7%}
.phone__grid span{border-radius:3px}
.phone__grid span:nth-child(1){background:linear-gradient(135deg,#ff9bb3,#ff5c8a)}
.phone__grid span:nth-child(2){background:linear-gradient(135deg,#9b8cf5,#8b6cf0)}
.phone__grid span:nth-child(3){background:linear-gradient(135deg,#7fd8c6,#38b2a0)}
.phone__grid span:nth-child(4){background:linear-gradient(135deg,#ffd27f,#ffb74a)}
.phone__notch{position:absolute;top:3.5%;left:50%;transform:translateX(-50%);width:26%;height:2.4%;
  background:#000;border-radius:3px}

/* ───────────────────────── QR ───────────────────────── */
.qr{position:absolute;width:15%;aspect-ratio:1;border-radius:10px;background:#fff;z-index:3;
  box-shadow:0 12px 28px rgba(80,50,120,.22)}
.qr svg{position:absolute;inset:9%;display:block}
.qr .lab{position:absolute;bottom:-26%;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:min(2vw,10px);font-weight:700;color:var(--accent)}

/* ───────────────────────── LIEN / FLÈCHE / BADGES ───────────────────────── */
.flow{position:absolute;height:3px;border-radius:3px;z-index:1;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 15px);
  background-size:200% 100%;opacity:0;transition:opacity .4s;animation:flowMove .8s linear infinite}
@keyframes flowMove{to{background-position:30px 0}}
.spark{position:absolute;font-size:min(5vw,24px);opacity:0;transition:opacity .4s;z-index:6;
  animation:sparkPop 1.4s ease-in-out infinite}
@keyframes sparkPop{0%,100%{transform:scale(.8) rotate(-6deg)}50%{transform:scale(1.12) rotate(6deg)}}
.badge{position:absolute;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:5px 11px;font-size:min(2.1vw,11px);font-weight:700;color:var(--ink);
  box-shadow:0 8px 20px rgba(80,50,120,.16);opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s;z-index:6;white-space:nowrap}
.badge.on{opacity:1;transform:translateY(0)}
.badge .d{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent))}

/* photo volante (montage -> téléphone / imprimante) */
.fly{position:absolute;width:17%;aspect-ratio:3/2;border-radius:5px;background:#fff;padding:4%;
  display:flex;gap:5%;box-shadow:0 10px 24px rgba(80,50,120,.26);opacity:0;z-index:5;
  transition:all .8s cubic-bezier(.6,.1,.2,1)}

/* ════════════ SCÈNE : PHOTOMATON COMPLET ════════════ */
.scene-complet .booth{left:37%;top:46%;transform:translate(-50%,-50%);width:40%}
.scene-complet .printer{left:75%;top:66%;transform:translate(-50%,-50%);width:30%;opacity:0;transition:opacity .5s;z-index:5}
.scene-complet .card{left:37%;top:46%;transform:translate(-50%,-50%) scale(.9)}
.scene-complet .flow{left:54%;width:16%;top:52%}
.scene-complet .badge{right:6%;top:9%}
.scene-complet .spark{left:75%;top:38%;transform:translate(-50%,-50%)}

@keyframes flashGo{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
.scene-complet[data-step="0"] .scr-tap{opacity:1}
.scene-complet[data-step="1"] .scr-count{opacity:1}
.scene-complet[data-step="2"] .scr-live,
.scene-complet[data-step="3"] .scr-live,
.scene-complet[data-step="4"] .scr-live,
.scene-complet[data-step="5"] .scr-live{opacity:1}
.scene-complet[data-step="3"] .card{opacity:1;top:30%;transform:translate(-50%,-50%) scale(1)}
.scene-complet[data-step="4"] .printer,
.scene-complet[data-step="5"] .printer{opacity:1}
.scene-complet[data-step="4"] .flow{opacity:1}
.scene-complet[data-step="4"] .card{opacity:1;left:75%;top:66%;transform:translate(-50%,-50%) scale(.5)}
.scene-complet[data-step="5"] .card{opacity:0}
.scene-complet[data-step="5"] .print-out{clip-path:inset(0 0 0 0);top:-42%}
.scene-complet[data-step="5"] .badge{opacity:1;transform:translateY(0)}
.scene-complet[data-step="5"] .spark{opacity:1}

/* ════════════ SCÈNE : PHOTOMATON SEUL ════════════ */
.scene-seul .booth{left:38%;top:50%;transform:translate(-50%,-50%);width:40%}
.scene-seul .phone{right:12%;top:50%;transform:translate(50%,-50%);width:15%;opacity:0;transition:opacity .5s}
.scene-seul .card{left:38%;top:50%;transform:translate(-50%,-50%) scale(.9)}
.scene-seul .flow{left:55%;width:16%;top:50%}
.scene-seul .badge{left:50%;bottom:8%;transform:translateX(-50%)}

.scene-seul[data-step="0"] .scr-tap{opacity:1}
.scene-seul[data-step="1"] .scr-count{opacity:1}
.scene-seul[data-step="2"] .scr-live,
.scene-seul[data-step="3"] .scr-live,
.scene-seul[data-step="4"] .scr-live{opacity:1}
.scene-seul[data-step="3"] .card{opacity:1;top:34%;transform:translate(-50%,-50%) scale(1)}
.scene-seul[data-step="4"] .phone{opacity:1}
.scene-seul[data-step="4"] .flow{opacity:1}
.scene-seul[data-step="4"] .card{opacity:1;left:72%;top:50%;transform:translate(-50%,-50%) scale(.55)}
.scene-seul[data-step="4"] .badge{opacity:1;transform:translateX(-50%) translateY(0)}

/* ════════════ SCÈNE : IMPRIMANTE CONNECTÉE (sans borne) ════════════ */
.scene-connectee .phone{left:17%;top:52%;transform:translate(-50%,-50%);width:16%}
.scene-connectee .qr{left:50%;top:28%;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s}
.scene-connectee .printer{left:76%;top:56%;transform:translate(-50%,-50%);width:28%;z-index:4}
.scene-connectee .flow{left:33%;width:33%;top:54%}
.scene-connectee .fly{left:22%;top:52%;transform:translate(-50%,-50%)}
.scene-connectee .badge{left:50%;bottom:8%;transform:translateX(-50%)}
.scene-connectee .spark{left:76%;top:30%;transform:translate(-50%,-50%)}

.scene-connectee[data-step="0"] .qr{opacity:1}
.scene-connectee[data-step="1"] .badge,
.scene-connectee[data-step="2"] .badge{opacity:1;transform:translateX(-50%) translateY(0)}
.scene-connectee[data-step="2"] .fly{opacity:1}
.scene-connectee[data-step="3"] .fly{opacity:1;left:66%;transform:translate(-50%,-50%) scale(.6)}
.scene-connectee[data-step="3"] .flow,
.scene-connectee[data-step="4"] .flow{opacity:1}
.scene-connectee[data-step="4"] .fly{opacity:0}
.scene-connectee[data-step="4"] .print-out{clip-path:inset(0 0 0 0);top:-42%}
.scene-connectee[data-step="4"] .spark{opacity:1}

/* ════════════ SCÈNE ACCUEIL : 3 MODES ════════════ */
.scene-home .mode{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.scene-home[data-step="0"] .mode0,
.scene-home[data-step="1"] .mode1,
.scene-home[data-step="2"] .mode2{opacity:1}
.scene-home .mode .booth{left:36%;top:48%;transform:translate(-50%,-50%);width:38%}
.scene-home .mode0 .printer{left:74%;top:72%;transform:translate(-50%,-50%);width:27%}
.scene-home .mode0 .print-out{clip-path:inset(0 0 0 0);top:-40%}
.scene-home .mode0 .flow{left:52%;width:16%;top:56%;opacity:1}
.scene-home .mode1 .phone{right:16%;top:48%;transform:translate(0,-50%);width:15%}
.scene-home .mode1 .flow{left:54%;width:14%;top:48%;opacity:1}
.scene-home .mode1 .badge{right:9%;top:16%;opacity:1;transform:none}
.scene-home .mode2 .phone{left:20%;top:50%;transform:translate(-50%,-50%);width:16%}
.scene-home .mode2 .printer{right:18%;top:52%;transform:translate(50%,-50%);width:27%}
.scene-home .mode2 .print-out{clip-path:inset(0 0 0 0);top:-40%}
.scene-home .mode2 .flow{left:36%;width:30%;top:52%;opacity:1}
.scene-home .mode .scr-live{opacity:1}
.scene-home .m-tag{position:absolute;left:50%;top:7%;transform:translateX(-50%);white-space:nowrap;
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 16px;font-weight:800;
  font-size:min(2.4vw,13px);color:var(--ink);box-shadow:0 8px 20px rgba(80,50,120,.14)}
.scene-home .m-tag b{background:linear-gradient(120deg,var(--accent2),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* accessibilité : mouvement réduit → on fige sur une étape représentative */
@media (prefers-reduced-motion: reduce){
  .booth,.phone{animation:none}
  .scr-tap .pill,.scr-tap .finger,.scr-count b,.flash,.printer__led,.spark,.flow{animation:none!important}
  .scr-count b:first-child{opacity:1}
}