/* Tangram : saynètes animées de la page « Coulisses »
   Chaque argument est illustré par une mini-interface en HTML/CSS qui se joue en boucle
   quand elle entre à l'écran : quelques Ko pour les huit, au lieu d'une vidéo par argument. */
.scene{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  container-type:inline-size;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(156,156,205,.45), transparent 60%),
    linear-gradient(160deg,#EFEDF7,#E6E3F2);
  border-bottom:1px solid rgba(47,41,81,.06);
  user-select:none; -webkit-user-select:none;
}
.sc{position:absolute; inset:0; font-size:clamp(8px,3.25cqw,20px); color:#2F2951; display:grid; place-items:center;}
.sc *{box-sizing:border-box;}
.ui-card{background:#fff; border-radius:.9em; box-shadow:0 .1em .2em rgba(47,41,81,.08), 0 1.2em 2.2em -1.2em rgba(47,41,81,.45); padding:1em;}
.ui-label{display:block; font-size:.62em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9C9CCD; margin-bottom:.45em;}
.sk{height:.55em; border-radius:.3em; background:#E7E5F3; margin-bottom:.5em;}
.sk.w80{width:80%;} .sk.w70{width:70%;} .sk.w50{width:50%;} .sk.w40{width:40%;}
.chip{display:inline-flex; align-items:center; gap:.35em; font-size:.72em; font-weight:800; padding:.4em .75em; border-radius:99em; background:#2F2951; color:#fff; white-space:nowrap;}
.chip.ok{background:#E3F6EC; color:#12784A;}
.chip.yl{background:#F6B700; color:#2F2951;}
.cur{
  position:absolute; width:1.5em; height:1.5em; z-index:5; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 11h-7.5L8 21z' fill='%232F2951' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  filter:drop-shadow(0 .15em .2em rgba(0,0,0,.25));
}
.art{
  background:
    radial-gradient(circle at 72% 30%, #FFD86B 0 7%, rgba(255,216,107,0) 7.6%),
    radial-gradient(90% 60% at 18% 108%, #44499C 0 60%, transparent 61%),
    radial-gradient(80% 55% at 78% 112%, #6E2383 0 60%, transparent 61%),
    radial-gradient(70% 40% at 48% 100%, #797BB9 0 60%, transparent 61%),
    linear-gradient(180deg,#F7A873 0%,#F3C89B 45%,#E9D8C4 100%);
}

/* ---- 1. zéro ligne de code ---- */
.sc-code{grid-template-columns:1fr auto 1fr; gap:.9em; padding:0 1.6em;}
.sc-code .adm, .sc-code .site{width:100%; min-width:0;}
.sc-code .inp{border:.12em solid #6E2383; border-radius:.5em; padding:.5em .6em; font-size:.82em; font-weight:700; height:2.4em; white-space:nowrap; overflow:hidden; margin-bottom:.9em; box-shadow:0 0 0 .25em rgba(110,35,131,.12);}
.sc-code .caret{display:inline-block; width:.1em; height:1.05em; background:#6E2383; vertical-align:-.15em; margin-left:.08em; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.sc-code .lnk{color:#F6B700; font-weight:800; font-size:1.3em;}
.sc-code .site{padding:0; overflow:hidden;}
.sc-code .bar{height:1.5em; background:#F4F3EE; display:flex; align-items:center; gap:.3em; padding:0 .6em;}
.sc-code .bar i{width:.45em; height:.45em; border-radius:50%; background:#D9D5EC;}
.sc-code .pg{padding:.9em 1em 1em;}
.sc-code h4{margin:0 0 .6em; font-size:1.05em; font-weight:800; letter-spacing:-.02em; min-height:1.3em; white-space:nowrap; overflow:hidden;}
.sc-code .ph{height:3.2em; border-radius:.5em; margin-top:.7em;}
.sc-code .chip{position:absolute; left:50%; bottom:1em; transform:translate(-50%,1em) scale(.8); opacity:0;}
.run .sc-code .chip{animation:popc 7s both;}
@keyframes popc{0%,42%{opacity:0; transform:translate(-50%,1em) scale(.8);} 48%,94%{opacity:1; transform:translate(-50%,0) scale(1);} 100%{opacity:0; transform:translate(-50%,0) scale(1);}}

/* ---- 2. compression ---- */
.sc-compress .ui-card{width:72%; display:grid; grid-template-columns:auto 1fr; gap:.9em 1em; align-items:center;}
.sc-compress .thumb{width:4.6em; height:4.6em; border-radius:.6em;}
.sc-compress .nm{font-size:.72em; font-weight:700; color:#6A6485; margin-bottom:.15em;}
.sc-compress .wt{font-size:2em; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;}
.sc-compress .track{grid-column:1/-1; height:.7em; border-radius:99em; background:#EFEDF7; overflow:hidden;}
.sc-compress .fill{height:100%; width:100%; border-radius:99em; background:#6E2383;}
.sc-compress .chips{grid-column:1/-1; display:flex; gap:.5em; min-height:1.8em;}
.sc-compress .chip{opacity:0; transform:scale(.7);}
.run .sc-compress .fill{animation:shrink 7s both;}
.run .sc-compress .chip{animation:pop 7s both;}
.run .sc-compress .chip + .chip{animation-delay:.25s;}
@keyframes shrink{0%,14%{width:100%; background:#6E2383;} 50%,100%{width:5%; background:#2FB872;}}
@keyframes pop{0%,52%{opacity:0; transform:scale(.7);} 58%,94%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1);}}

/* ---- 3. blocs réordonnables ---- */
.sc-blocks .stack{position:relative; width:64%;}
.sc-blocks .row{display:flex; align-items:center; gap:.7em; height:3.2em; padding:0 .9em; margin-bottom:.6em; background:#fff; border-radius:.7em; box-shadow:0 .1em .2em rgba(47,41,81,.08), 0 .8em 1.4em -1em rgba(47,41,81,.35); font-size:1em;}
.sc-blocks .row:last-child{margin-bottom:0;}
.sc-blocks .grip{width:.7em; height:1.1em; background:radial-gradient(circle,#B9B4D2 38%,transparent 42%) 0 0/50% 33.33%; flex:none;}
.sc-blocks .ic{width:1.7em; height:1.7em; border-radius:.4em; flex:none; display:grid; place-items:center; color:#fff; font-size:.8em; font-weight:800;}
.sc-blocks .t{font-size:.8em; font-weight:800; flex:none; width:3.6em;}
.sc-blocks .row .sk{flex:1; margin:0;}
.sc-blocks .cur{right:-1.6em; bottom:-1.2em;}
.run .sc-blocks .r1, .run .sc-blocks .r2{animation:down 7s both;}
.run .sc-blocks .r3{animation:lift 7s both; position:relative; z-index:2;}
.run .sc-blocks .cur{animation:curdrag 7s both;}
@keyframes down{0%,30%{transform:none;} 46%,92%{transform:translateY(3.8em);} 100%{transform:translateY(3.8em); opacity:0;}}
@keyframes lift{
  0%,16%{transform:none; box-shadow:0 .1em .2em rgba(47,41,81,.08), 0 .8em 1.4em -1em rgba(47,41,81,.35);}
  22%{transform:scale(1.04) rotate(-1.5deg); box-shadow:0 1.4em 2em -1em rgba(110,35,131,.6);}
  46%{transform:translateY(-7.6em) scale(1.04) rotate(-1.5deg); box-shadow:0 1.4em 2em -1em rgba(110,35,131,.6);}
  54%,92%{transform:translateY(-7.6em); box-shadow:0 0 0 .15em #F6B700, 0 .8em 1.4em -1em rgba(47,41,81,.35);}
  100%{transform:translateY(-7.6em); opacity:0;}
}
@keyframes curdrag{
  0%{transform:translate(0,0); opacity:0;}
  6%{opacity:1;}
  16%,22%{transform:translate(-25em,-2.6em);}
  46%,54%{transform:translate(-25em,-10.2em); opacity:1;}
  66%,100%{transform:translate(-18em,-6em); opacity:0;}
}

/* ---- 4. retouche photo ---- */
.sc-retouch{padding:1.1em 1.4em 3.9em; place-items:stretch; cursor:ew-resize;}
.sc-retouch .frame{position:relative; border-radius:.8em; overflow:hidden; box-shadow:0 1.2em 2.2em -1.2em rgba(47,41,81,.55);}
.sc-retouch .art{position:absolute; inset:0;}
.sc-retouch .before{filter:saturate(.35) brightness(.78) contrast(.85);}
.sc-retouch .after{clip-path:inset(0 85% 0 0);}
.sc-retouch .bar{position:absolute; top:0; bottom:0; left:15%; width:.18em; margin-left:-.09em; background:#fff; box-shadow:0 0 .4em rgba(0,0,0,.3);}
.sc-retouch .bar::after{content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.1em; height:2.1em; border-radius:50%; background:#fff; color:#2F2951; font-weight:800; font-size:.8em; display:grid; place-items:center; box-shadow:0 .2em .6em rgba(0,0,0,.3);}
.sc-retouch .lb{position:absolute; top:.6em; font-size:.6em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(47,41,81,.6); padding:.3em .6em; border-radius:99em;}
.sc-retouch .lb.a{left:.6em;} .sc-retouch .lb.b{right:.6em;}
.sc-retouch .sliders{position:absolute; left:1.4em; right:1.4em; bottom:.9em; display:grid; grid-template-columns:repeat(3,1fr); gap:1em;}
.sc-retouch .sl span{display:block; font-size:.56em; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#6A6485; margin-bottom:.5em;}
.sc-retouch .sl div{position:relative; height:.28em; border-radius:99em; background:#CFCBE4;}
.sc-retouch .sl i{position:absolute; top:50%; left:30%; width:.95em; height:.95em; margin:-.475em 0 0 -.475em; border-radius:50%; background:#6E2383; border:.15em solid #fff; box-shadow:0 .1em .3em rgba(0,0,0,.25);}
.run .sc-retouch:not(.manual) .after{animation:wipe 7s both ease-in-out;}
.run .sc-retouch:not(.manual) .bar{animation:wipebar 7s both ease-in-out;}
.run .sc-retouch .sl i{animation:knob 7s both ease-in-out;}
.run .sc-retouch .sl:nth-child(2) i{animation-delay:.2s;}
.run .sc-retouch .sl:nth-child(3) i{animation-delay:.4s;}
@keyframes wipe{0%,8%{clip-path:inset(0 85% 0 0);} 45%,62%{clip-path:inset(0 12% 0 0);} 95%,100%{clip-path:inset(0 85% 0 0);}}
@keyframes wipebar{0%,8%{left:15%;} 45%,62%{left:88%;} 95%,100%{left:15%;}}
@keyframes knob{0%,8%{left:30%;} 45%,62%{left:72%;} 95%,100%{left:30%;}}

/* ---- 5. référencement ---- */
.sc-seo{align-content:center; gap:.8em; padding:0 2em;}
.sc-seo .search{width:100%; display:flex; align-items:center; gap:.6em; background:#fff; border-radius:99em; padding:.65em 1em; font-size:.82em; font-weight:600; box-shadow:0 .1em .2em rgba(47,41,81,.08), 0 .8em 1.4em -1em rgba(47,41,81,.35); white-space:nowrap; overflow:hidden;}
.sc-seo .loupe{width:.9em; height:.9em; border:.17em solid #9C9CCD; border-radius:50%; position:relative; flex:none;}
.sc-seo .loupe::after{content:""; position:absolute; right:-.42em; bottom:-.3em; width:.45em; height:.17em; background:#9C9CCD; border-radius:1em; transform:rotate(45deg);}
.sc-seo .res{width:100%; opacity:0; transform:translateY(.8em);}
.sc-seo .url{font-size:.62em; font-weight:600; color:#6A6485; display:flex; align-items:center; gap:.5em; margin-bottom:.4em;}
.sc-seo .url i{width:1.5em; height:1.5em; border-radius:50%; background:conic-gradient(from 45deg,#6E2383 25%,#F6B700 0 37%,#797BB9 0 62%,#9C9CCD 0);}
.sc-seo .ttl{font-size:.98em; font-weight:800; color:#44499C; margin-bottom:.5em; letter-spacing:-.01em;}
.sc-seo .checks{display:flex; flex-wrap:wrap; gap:.4em; width:100%;}
.sc-seo .chip{opacity:0; transform:scale(.7);}
.run .sc-seo .res{animation:rise 7s both;}
.run .sc-seo .chip{animation:popseo 7s both;}
.run .sc-seo .chip:nth-child(2){animation-delay:.3s;} .run .sc-seo .chip:nth-child(3){animation-delay:.6s;} .run .sc-seo .chip:nth-child(4){animation-delay:.9s;}
@keyframes rise{0%,36%{opacity:0; transform:translateY(.8em);} 44%,95%{opacity:1; transform:none;} 100%{opacity:0;}}
@keyframes popseo{0%,50%{opacity:0; transform:scale(.7);} 55%,82%{opacity:1; transform:scale(1);} 87%,100%{opacity:0; transform:scale(1);}}

/* ---- 6. mobile, sobre, performant ---- */
.sc-mobile{align-content:center; gap:.7em;}
.sc-mobile .dev{width:78%; height:11.5em; background:#fff; border:.35em solid #2F2951; border-radius:.9em; overflow:hidden; box-shadow:0 1.2em 2.2em -1.2em rgba(47,41,81,.55);}
.sc-mobile .top{height:1.4em; background:#F4F3EE; display:flex; align-items:center; justify-content:space-between; padding:0 .6em;}
.sc-mobile .top b{width:2.6em; height:.45em; border-radius:1em; background:#2F2951;}
.sc-mobile .top i{width:1.1em; height:.45em; border-radius:1em; background:#CFCBE4;}
.sc-mobile .in{padding:.6em; display:flex; flex-wrap:wrap; gap:.45em; align-content:flex-start;}
.sc-mobile .tile{flex:1 1 5.4em; height:3.6em; border-radius:.45em;}
.sc-mobile .tile:nth-child(1){background:#6E2383;} .sc-mobile .tile:nth-child(2){background:#797BB9;} .sc-mobile .tile:nth-child(3){background:#F6B700;} .sc-mobile .tile:nth-child(4){background:#9C9CCD;} .sc-mobile .tile:nth-child(5){background:#44499C;} .sc-mobile .tile:nth-child(6){background:#6B3F90;}
.sc-mobile .lbl{position:relative; height:1.6em; width:100%;}
.sc-mobile .lbl .chip{position:absolute; left:50%; top:0; transform:translateX(-50%);}
.sc-mobile .lbl .chip + .chip{opacity:0;}
.run .sc-mobile .dev{animation:squeeze 7s both cubic-bezier(.65,0,.2,1);}
.run .sc-mobile .lbl .chip{animation:lblA 7s both;}
.run .sc-mobile .lbl .chip + .chip{animation-name:lblB;}
@keyframes squeeze{0%,14%{width:78%; border-radius:.9em;} 40%,62%{width:27%; border-radius:1.5em;} 88%,100%{width:78%; border-radius:.9em;}}
@keyframes lblA{0%,22%{opacity:1;} 30%,74%{opacity:0;} 82%,100%{opacity:1;}}
@keyframes lblB{0%,26%{opacity:0;} 34%,70%{opacity:1;} 78%,100%{opacity:0;}}

/* ---- 7. historique ---- */
.sc-history .ui-card{width:74%; padding:.7em; position:relative;}
.sc-history .v{position:relative; display:flex; align-items:center; gap:.7em; padding:.6em .7em; border-radius:.6em;}
.sc-history .dot{width:.75em; height:.75em; border-radius:50%; border:.15em solid #CFCBE4; background:#fff; flex:none;}
.sc-history .v1 .dot{background:#2FB872; border-color:#2FB872;}
.sc-history .tx{flex:1; min-width:0;}
.sc-history .tx b{display:block; font-size:.74em; font-weight:800;}
.sc-history .tx span{display:block; font-size:.62em; font-weight:600; color:#6A6485; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sc-history .bt{font-size:.6em; font-weight:800; padding:.45em .8em; border-radius:99em; border:.12em solid #CFCBE4; color:#2F2951; flex:none;}
.sc-history .cur{right:1em; bottom:-1em;}
.sc-history .toast{position:absolute; left:50%; bottom:.9em; transform:translate(-50%,1.2em); opacity:0;}
.run .sc-history .cur{animation:curhist 7s both;}
.run .sc-history .v2{animation:pick 7s both;}
.run .sc-history .v2 .bt{animation:press 7s both;}
.run .sc-history .v2 .dot{animation:dotOn 7s both;}
.run .sc-history .v1 .dot{animation:dotOff 7s both;}
.run .sc-history .toast{animation:toast 7s both;}
@keyframes curhist{0%{transform:translate(0,0); opacity:0;} 8%{opacity:1;} 30%,40%{transform:translate(-2.2em,-7.3em); opacity:1;} 55%,100%{transform:translate(1em,-4em); opacity:0;}}
@keyframes pick{0%,36%{background:transparent;} 42%,94%{background:#EFEDF7;} 100%{background:transparent;}}
@keyframes press{0%,33%{transform:none; background:transparent; color:#2F2951; border-color:#CFCBE4;} 36%{transform:scale(.9);} 40%,94%{transform:none; background:#6E2383; color:#fff; border-color:#6E2383;} 100%{background:transparent;}}
@keyframes dotOn{0%,38%{background:#fff; border-color:#CFCBE4;} 44%,94%{background:#2FB872; border-color:#2FB872;} 100%{background:#fff; border-color:#CFCBE4;}}
@keyframes dotOff{0%,38%{background:#2FB872; border-color:#2FB872;} 44%,94%{background:#fff; border-color:#CFCBE4;} 100%{background:#2FB872; border-color:#2FB872;}}
@keyframes toast{0%,44%{opacity:0; transform:translate(-50%,1.2em);} 50%,90%{opacity:1; transform:translate(-50%,0);} 96%,100%{opacity:0; transform:translate(-50%,0);}}

/* ---- 8. publication en un clic ---- */
.sc-publish{align-content:center; gap:1.1em;}
.sc-publish .site{display:flex; align-items:center; gap:.5em; background:#fff; border-radius:99em; padding:.45em .9em; font-size:.72em; font-weight:700; color:#6A6485; box-shadow:0 .1em .2em rgba(47,41,81,.08);}
.sc-publish .site i{width:.6em; height:.6em; border-radius:50%; background:#CFCBE4;}
.sc-publish .site span + span{display:none;}
.sc-publish .wrapb{position:relative;}
.sc-publish .pb{position:relative; overflow:hidden; min-width:9.5em; text-align:center; font-size:1.15em; font-weight:800; color:#fff; background:#2F2951; padding:.8em 1.8em; border-radius:99em; box-shadow:0 1em 1.6em -1em rgba(47,41,81,.7);}
.sc-publish .pb::before{content:""; position:absolute; inset:0; background:#6E2383; transform:scaleX(0); transform-origin:left;}
.sc-publish .pb span{position:relative; display:block;}
.sc-publish .pb .l2{position:absolute; inset:0; display:grid; place-items:center; opacity:0;}
.sc-publish .cur{right:-2.4em; bottom:-2.6em;}
.sc-publish .bit{position:absolute; left:50%; top:50%; width:.9em; height:.9em; margin:-.45em; opacity:0; clip-path:polygon(0 0,100% 50%,0 100%);}
.run .sc-publish .pb{animation:pbtn 7s both;}
.run .sc-publish .pb::before{animation:pfill 7s both;}
.run .sc-publish .pb .l1{animation:l1 7s both;}
.run .sc-publish .pb .l2{animation:l2 7s both;}
.run .sc-publish .cur{animation:curpub 7s both;}
.run .sc-publish .site i{animation:live 7s both;}
.run .sc-publish .bit{animation:burst 7s both;}
@keyframes curpub{0%{transform:translate(0,0); opacity:0;} 6%{opacity:1;} 18%,24%{transform:translate(-4.2em,-2.9em); opacity:1;} 36%,100%{transform:translate(0,0); opacity:0;}}
@keyframes pbtn{0%,19%{transform:none; background:#2F2951;} 22%{transform:scale(.93);} 26%,54%{transform:none; background:#2F2951;} 58%{transform:scale(1.08); background:#2FB872;} 64%,94%{transform:none; background:#2FB872;} 100%{background:#2F2951;}}
@keyframes pfill{0%,24%{transform:scaleX(0); opacity:1;} 54%{transform:scaleX(1); opacity:1;} 58%,100%{transform:scaleX(1); opacity:0;}}
@keyframes l1{0%,54%{opacity:1;} 57%,96%{opacity:0;} 100%{opacity:1;}}
@keyframes l2{0%,56%{opacity:0;} 60%,94%{opacity:1;} 100%{opacity:0;}}
@keyframes live{0%,56%{background:#CFCBE4; box-shadow:none;} 60%,94%{background:#2FB872; box-shadow:0 0 0 .3em rgba(47,184,114,.25);} 100%{background:#CFCBE4;}}
@keyframes burst{0%,56%{opacity:0; transform:translate(0,0) rotate(0) scale(.4);} 60%{opacity:1;} 78%{opacity:1;} 86%,100%{opacity:0; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.2);}}

@media (prefers-reduced-motion:reduce){
  .scene *{animation:none !important;}
  .sc-code .chip,.sc-compress .chip,.sc-seo .chip,.sc-seo .res{opacity:1; transform:none;}
  .sc-code .chip{transform:translate(-50%,0);}
  .sc-compress .fill{width:5%; background:#2FB872;}
  .sc-retouch .after{clip-path:inset(0 50% 0 0);} .sc-retouch .bar{left:50%;}
}