/* Démonstrations : cinq scènes dessinées en HTML/CSS, sans vidéo.
   Toutes les animations d’une scène partagent la même durée (--loop) et
   n’utilisent pas de délai : le minutage est porté par les images clés.
   Cela permet de mettre en pause, et d’afficher une image fixe parlante
   quand l’utilisateur réduit les animations (voir js/demos.js). */

@property --on { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hi { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --done { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.demo { position: relative; container: demo / inline-size; }
.demo-stage { --loop: 12s; --k: 1.2; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--surface); }
.demo-stage *, .demo-stage *::before, .demo-stage *::after { animation-duration: var(--loop); animation-iteration-count: infinite; animation-fill-mode: both; }
.demo:not([data-playing="true"]) .demo-stage *, .demo:not([data-playing="true"]) .demo-stage *::before, .demo:not([data-playing="true"]) .demo-stage *::after { animation-play-state: paused !important; }
.demo[data-static="true"] .demo-stage *, .demo[data-static="true"] .demo-stage *::before, .demo[data-static="true"] .demo-stage *::after { animation-delay: calc(var(--static-at, 0s) * -1) !important; }
.demo-web { --static-at: 1.5s; }
.demo-sw { --static-at: 9.6s; }
.demo-auto { --static-at: 11s; }
.demo-cloud { --static-at: 10.2s; }
.demo-mo { --static-at: 6s; }

.demo-toggle { display: grid; place-items: center; width: 40px; height: 40px; margin: 14px 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); transition: border-color .2s; }
.demo-toggle:hover { border-color: var(--ink); }
.demo-toggle svg { width: 20px; height: 20px; }
.demo-toggle .i-play, .demo[data-intent="paused"] .demo-toggle .i-pause { display: none; }
.demo[data-intent="paused"] .demo-toggle .i-play { display: block; }

.panel { background: var(--white); border-radius: 1.4cqi; box-shadow: 0 0 0 1px rgba(23, 26, 33, .06), 0 1.6cqi 4cqi -2cqi rgba(23, 26, 33, .24); padding: 2cqi; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: .9cqi; margin-bottom: 1cqi; padding-bottom: 1.4cqi; border-bottom: 1px solid #ECEDF0; font-size: calc(1.45cqi * var(--k)); font-weight: 500; color: var(--muted); white-space: nowrap; }
.panel-head svg { width: calc(2.1cqi * var(--k)); height: calc(2.1cqi * var(--k)); flex: none; color: var(--ink); }
.wire { position: relative; height: 2px; background: var(--line); }
.wire i { position: absolute; top: 50%; left: var(--p); width: calc(1.1cqi * var(--k)); height: calc(1.1cqi * var(--k)); background: var(--cobalt); transform: translate(-50%, -50%); }

/* 1. Site vitrine : un même site, trois formats */
.web { position: absolute; inset: 0 0 11cqi; display: flex; align-items: center; justify-content: center; }
.web-device { display: flex; flex-direction: column; width: 84cqi; height: 54cqi; overflow: hidden; background-color: var(--white); border-radius: 1.4cqi; box-shadow: 0 0 0 1px rgba(23, 26, 33, .08), 0 2.4cqi 5cqi -2.4cqi rgba(23, 26, 33, .32); animation-name: webDevice; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.web-bar { display: flex; align-items: center; gap: .7cqi; flex: none; height: 3.4cqi; padding: 0 1.4cqi; background: #F6F6F8; overflow: hidden; animation-name: webBar; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.web-bar i { width: .85cqi; height: .85cqi; border-radius: 50%; background: #D2D4D9; flex: none; }
.web-url { width: 26cqi; height: 1.7cqi; margin-left: 2cqi; border-radius: 1cqi; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.web-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--white); container: screen / size; animation-name: webScreen; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes webDevice {
  0%, 26% { width: 84cqi; height: 54cqi; padding: 0; border-radius: 1.4cqi; background-color: #FFFFFF; }
  34%, 58% { width: 40cqi; height: 56cqi; padding: 1.3cqi; border-radius: 3.4cqi; background-color: #171A21; }
  66%, 90% { width: 22.5cqi; height: 49cqi; padding: .9cqi; border-radius: 3.8cqi; background-color: #171A21; }
  98%, 100% { width: 84cqi; height: 54cqi; padding: 0; border-radius: 1.4cqi; background-color: #FFFFFF; }
}
@keyframes webBar { 0%, 26% { height: 3.4cqi; opacity: 1; } 31%, 92% { height: 0; opacity: 0; } 98%, 100% { height: 3.4cqi; opacity: 1; } }
@keyframes webScreen { 0%, 26% { border-radius: 0; } 34%, 58% { border-radius: 2.2cqi; } 66%, 90% { border-radius: 3cqi; } 98%, 100% { border-radius: 0; } }

.site { height: 100%; padding: 0 6cqi; color: var(--ink); }
.site-nav { display: flex; align-items: center; justify-content: space-between; height: 15cqi; border-bottom: 1px solid #EEEFF2; }
.site-logo { font-size: 6.4cqi; font-weight: 500; letter-spacing: -.05em; }
.site-links { display: none; gap: 3cqi; font-size: 2.2cqi; color: var(--muted); }
.site-burger { display: grid; gap: 1.4cqi; width: 6.5cqi; }
.site-burger i { height: max(1px, .5cqi); background: var(--ink); }
.site-hero { display: flex; flex-direction: column; gap: 5cqi; padding: 6cqi 0; }
.site-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2.6cqi; }
.site-kicker { font-size: 3.6cqi; color: var(--muted); }
.site-title { font-size: 11cqi; font-weight: 500; line-height: 1; letter-spacing: -.055em; white-space: pre-line; }
.site-text { font-size: 3.8cqi; line-height: 1.4; color: var(--muted); }
.site-cta { margin-top: 1cqi; padding: 2.6cqi 4.4cqi; border-radius: 1cqi; background: var(--ink); color: var(--white); font-size: 3.4cqi; font-weight: 500; }
.site-media { order: -1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1.6cqi; background: #DCDDE0; }
.site-media img { width: 100%; height: 100%; object-fit: cover; }
.site-cards { display: grid; grid-template-columns: 1fr; gap: 4cqi; }
.site-card { display: grid; gap: 1.6cqi; font-size: 3.4cqi; font-weight: 500; }
.site-thumb { display: block; aspect-ratio: 16 / 10; border-radius: 1.2cqi; background: #DCDDE0 url('../assets/img/architecture-800.webp') no-repeat; background-size: 280% auto; }
.t1 { background-position: 4% 60%; } .t2 { background-position: 60% 30%; } .t3 { background-position: 100% 90%; }
@container screen (min-aspect-ratio: 11 / 10) {
  .site { padding: 0 4cqi; }
  .site-nav { height: 7.2cqi; }
  .site-logo { font-size: 2.5cqi; }
  .site-links { display: flex; font-size: 1.3cqi; }
  .site-burger { display: none; }
  .site-hero { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 4cqi; padding: 4.4cqi 0; }
  .site-copy { gap: 1.3cqi; }
  .site-kicker { font-size: 1.3cqi; }
  .site-title { font-size: 4.8cqi; }
  .site-text { font-size: 1.45cqi; }
  .site-cta { margin-top: .8cqi; padding: 1.1cqi 1.9cqi; border-radius: .5cqi; font-size: 1.25cqi; }
  .site-media { order: 0; aspect-ratio: 16 / 10.5; border-radius: .7cqi; }
  .site-cards { grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
  .site-card { gap: .8cqi; font-size: 1.3cqi; }
  .site-thumb { border-radius: .5cqi; }
}
@container screen (max-aspect-ratio: 11 / 10) and (min-aspect-ratio: 3 / 5) {
  .site { padding: 0 5cqi; }
  .site-nav { height: 10cqi; }
  .site-logo { font-size: 4.2cqi; }
  .site-links { display: flex; font-size: 2.3cqi; }
  .site-burger { display: none; }
  .site-hero { gap: 4.4cqi; padding: 5cqi 0; }
  .site-copy { gap: 1.9cqi; }
  .site-kicker { font-size: 2.4cqi; }
  .site-title { font-size: 8.2cqi; }
  .site-text { font-size: 2.6cqi; }
  .site-cta { padding: 1.8cqi 3cqi; font-size: 2.4cqi; border-radius: .8cqi; }
  .site-media { aspect-ratio: 16 / 9; }
  .site-cards { grid-template-columns: repeat(2, 1fr); gap: 3cqi; }
  .site-card { font-size: 2.4cqi; gap: 1.2cqi; }
}
.web-formats { position: absolute; left: 0; right: 0; bottom: 3.6cqi; display: flex; justify-content: center; gap: 4.4cqi; font-size: max(12px, 1.75cqi); font-weight: 500; }
.web-formats span, .mo-steps span { position: relative; padding-bottom: 1.6cqi; color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), var(--muted)); animation-timing-function: linear; }
.web-formats span::after, .mo-steps span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; margin-left: -3px; background: var(--cobalt); opacity: var(--on); transform: scale(calc(.3 + var(--on) * .7)); }
.f-desk { animation-name: onDesk; } .f-tab { animation-name: onTab; } .f-phone { animation-name: onPhone; }
@keyframes onDesk { 0%, 28% { --on: 1; } 31%, 93% { --on: 0; } 96%, 100% { --on: 1; } }
@keyframes onTab { 0%, 28% { --on: 0; } 31%, 60% { --on: 1; } 63%, 100% { --on: 0; } }
@keyframes onPhone { 0%, 60% { --on: 0; } 63%, 93% { --on: 1; } 96%, 100% { --on: 0; } }

/* 2. Logiciel métier : une demande et ses statuts */
.sw { position: absolute; inset: 0; padding: 6.5cqi 6cqi; }
.sw-window { display: grid; grid-template-columns: 6.8cqi minmax(0, 1fr); height: 100%; overflow: hidden; background: var(--white); border-radius: 1.6cqi; box-shadow: 0 0 0 1px rgba(23, 26, 33, .06), 0 2.4cqi 5cqi -2.6cqi rgba(23, 26, 33, .3); }
.sw-side { display: flex; flex-direction: column; align-items: center; gap: 2.4cqi; padding-top: 2.6cqi; background: var(--ink); }
.sw-mark { width: 2.6cqi; height: 2.6cqi; margin-bottom: 1.2cqi; border: max(1.5px, .25cqi) solid rgba(255, 255, 255, .9); border-radius: .7cqi; }
.sw-nav { width: 2.6cqi; height: max(2px, .45cqi); border-radius: 1px; background: rgba(255, 255, 255, .28); }
.sw-nav.on { background: var(--white); }
.sw-main { display: flex; flex-direction: column; min-width: 0; padding: 2.4cqi 3.2cqi 2.2cqi; }
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; font-size: calc(1.45cqi * var(--k)); color: var(--muted); }
.sw-search { display: inline-flex; align-items: center; gap: .9cqi; width: 42%; height: 3.6cqi; padding: 0 1.4cqi; border-radius: 1.8cqi; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; overflow: hidden; }
.sw-search svg { width: 1.6cqi; height: 1.6cqi; flex: none; }
.sw-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; margin: 2.8cqi 0 2cqi; }
.sw-title { font-size: calc(2.7cqi * var(--k)); font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.sw-btn { padding: calc(1cqi * var(--k)) calc(1.7cqi * var(--k)); border-radius: .6cqi; background: var(--cobalt); color: var(--white); font-size: calc(1.4cqi * var(--k)); font-weight: 500; white-space: nowrap; }
.sw-tr { display: grid; grid-template-columns: minmax(0, 1fr) 8cqi 13.5cqi; align-items: center; gap: 2cqi; height: calc(6.2cqi * var(--k)); padding: 0 1.4cqi; border-bottom: 1px solid #ECEDF0; font-size: calc(1.55cqi * var(--k)); overflow: hidden; }
.sw-th { height: calc(3.8cqi * var(--k)); border-bottom-color: var(--line); font-size: calc(1.3cqi * var(--k)); color: var(--muted); }
.sw-req { display: flex; flex-direction: column; gap: .3cqi; min-width: 0; }
.sw-req b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-req small { font-family: var(--mono); font-size: calc(1.15cqi * var(--k)); color: var(--muted); }
.sw-who i { display: grid; place-items: center; width: calc(3.1cqi * var(--k)); height: calc(3.1cqi * var(--k)); border-radius: 50%; background: var(--surface); font-size: calc(1.25cqi * var(--k)); font-style: normal; font-weight: 500; }
.sw-st { position: relative; height: calc(3.3cqi * var(--k)); }
.st { display: inline-flex; align-items: center; gap: .8cqi; height: calc(3.3cqi * var(--k)); padding: 0 calc(1.3cqi * var(--k)); border-radius: 99px; font-size: calc(1.3cqi * var(--k)); font-style: normal; font-weight: 500; white-space: nowrap; }
.sw-cycle .st { position: absolute; left: 0; top: 0; }
.st-todo { color: var(--muted); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.st-doing { color: var(--cobalt); background: var(--tint); }
.st-doing::before { content: ""; width: calc(.75cqi * var(--k)); height: calc(.75cqi * var(--k)); background: currentColor; }
.st-done { color: var(--white); background: var(--ink); }
.st-done::before { content: ""; width: calc(.55cqi * var(--k)); height: calc(1cqi * var(--k)); margin: 0 .2cqi .3cqi 0; border: solid currentColor; border-width: 0 max(1.5px, .22cqi) max(1.5px, .22cqi) 0; transform: rotate(45deg); }
.sw-new { animation-name: swRow; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
@keyframes swRow {
  0%, 5% { height: 0; opacity: 0; border-bottom-width: 0; background-color: rgba(238, 241, 255, 1); }
  11% { height: calc(6.2cqi * var(--k)); opacity: 1; border-bottom-width: 1px; background-color: rgba(238, 241, 255, 1); }
  26%, 93% { height: calc(6.2cqi * var(--k)); opacity: 1; border-bottom-width: 1px; background-color: rgba(238, 241, 255, 0); }
  98%, 100% { height: 0; opacity: 0; border-bottom-width: 0; background-color: rgba(238, 241, 255, 0); }
}
.sw-cycle .st-todo { animation-name: stTodo; }
.sw-cycle .st-doing { animation-name: stDoing; }
.sw-cycle .st-done { animation-name: stDone; }
@keyframes stTodo { 0%, 9% { opacity: 0; transform: none; } 12%, 36% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translateY(-35%); } }
@keyframes stDoing { 0%, 36% { opacity: 0; transform: translateY(35%); } 40%, 64% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: translateY(-35%); } }
@keyframes stDone { 0%, 64% { opacity: 0; transform: translateY(35%); } 68%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.sw-foot { display: flex; align-items: center; gap: 1.4cqi; margin-top: auto; padding-top: 2cqi; font-size: calc(1.4cqi * var(--k)); color: var(--muted); }
.sw-team { display: flex; }
.sw-team i { display: grid; place-items: center; width: calc(3cqi * var(--k)); height: calc(3cqi * var(--k)); margin-right: -.8cqi; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--white); color: var(--ink); font-size: calc(1.2cqi * var(--k)); font-style: normal; font-weight: 500; animation-name: swSync; }
@keyframes swSync { 0%, 39% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(49, 91, 255, 0); } 42%, 46% { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(49, 91, 255, 1); } 50%, 67% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(49, 91, 255, 0); } 70%, 74% { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(49, 91, 255, 1); } 78%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(49, 91, 255, 0); } }
.sw-toast { position: absolute; left: 50%; bottom: 3cqi; display: inline-flex; align-items: center; gap: 1cqi; padding: calc(1.2cqi * var(--k)) calc(2cqi * var(--k)); border-radius: 1cqi; background: var(--ink); color: var(--white); font-size: calc(1.5cqi * var(--k)); font-weight: 500; white-space: nowrap; box-shadow: 0 1.6cqi 4cqi -1.6cqi rgba(23, 26, 33, .4); animation-name: swToast; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
.sw-toast svg { width: calc(2cqi * var(--k)); height: calc(2cqi * var(--k)); color: #8FA6FF; }
@keyframes swToast { 0%, 68% { opacity: 0; transform: translate(-50%, 45%); } 72%, 89% { opacity: 1; transform: translate(-50%, 0); } 93%, 100% { opacity: 0; transform: translate(-50%, 0); } }

/* 3. Automatisation : trois e-mails classés tour à tour */
.auto { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) 4cqi 13.5cqi 4cqi minmax(0, .76fr); align-items: center; padding: 7cqi 5cqi; }
.mail { display: grid; grid-template-columns: calc(1cqi * var(--k)) minmax(0, 1fr) auto; align-items: center; gap: 1.2cqi; padding: calc(1.3cqi * var(--k)) 1.2cqi; border-radius: 1cqi; background: rgb(238 241 255 / var(--hi)); font-size: calc(1.45cqi * var(--k)); }
.mail-dot { width: calc(.9cqi * var(--k)); height: calc(.9cqi * var(--k)); background: var(--cobalt); opacity: calc(1 - var(--done)); }
.mail-body { display: flex; flex-direction: column; gap: .2cqi; min-width: 0; opacity: calc(1 - var(--done) * .45); }
.mail-body b { font-weight: 500; }
.mail-body span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-tag { padding: .5cqi 1cqi; border-radius: .6cqi; background: var(--tint); color: var(--cobalt); font-size: calc(1.2cqi * var(--k)); font-weight: 500; white-space: nowrap; opacity: var(--done); transform: translateX(calc((1 - var(--done)) * -25%)); }
.mail-1 { animation-name: mail1; } .mail-2 { animation-name: mail2; } .mail-3 { animation-name: mail3; }
@keyframes mail1 { 0%, 3% { --hi: 0; --done: 0; } 6%, 24% { --hi: 1; --done: 0; } 28%, 93% { --hi: 0; --done: 1; } 97%, 100% { --hi: 0; --done: 0; } }
@keyframes mail2 { 0%, 33% { --hi: 0; --done: 0; } 36%, 54% { --hi: 1; --done: 0; } 58%, 93% { --hi: 0; --done: 1; } 97%, 100% { --hi: 0; --done: 0; } }
@keyframes mail3 { 0%, 63% { --hi: 0; --done: 0; } 66%, 84% { --hi: 1; --done: 0; } 88%, 93% { --hi: 0; --done: 1; } 97%, 100% { --hi: 0; --done: 0; } }
.wire-in i { animation-name: wireIn; animation-timing-function: linear; }
.wire-out i { animation-name: wireOut; animation-timing-function: linear; }
@keyframes wireIn { 0%, 6% { --p: 0%; opacity: 0; } 7% { opacity: 1; } 13% { --p: 100%; opacity: 1; } 14%, 36% { --p: 100%; opacity: 0; } 36.01% { --p: 0%; } 37% { opacity: 1; } 43% { --p: 100%; opacity: 1; } 44%, 66% { --p: 100%; opacity: 0; } 66.01% { --p: 0%; } 67% { opacity: 1; } 73% { --p: 100%; opacity: 1; } 74%, 100% { --p: 100%; opacity: 0; } }
@keyframes wireOut { 0%, 19% { --p: 0%; opacity: 0; } 20% { opacity: 1; } 26% { --p: 100%; opacity: 1; } 27%, 49% { --p: 100%; opacity: 0; } 49.01% { --p: 0%; } 50% { opacity: 1; } 56% { --p: 100%; opacity: 1; } 57%, 79% { --p: 100%; opacity: 0; } 79.01% { --p: 0%; } 80% { opacity: 1; } 86% { --p: 100%; opacity: 1; } 87%, 100% { --p: 100%; opacity: 0; } }
.engine { display: flex; flex-direction: column; align-items: center; gap: .8cqi; padding: 2.4cqi 1cqi; text-align: center; background: var(--white); border-radius: 1.4cqi; box-shadow: 0 0 0 1px rgba(23, 26, 33, .06), 0 1.6cqi 4cqi -2cqi rgba(23, 26, 33, .24); }
.engine-icon { display: grid; place-items: center; width: calc(5.2cqi * var(--k)); height: calc(5.2cqi * var(--k)); margin-bottom: .6cqi; border-radius: 50%; background: var(--ink); color: var(--white); box-shadow: 0 0 0 calc(var(--hi) * .9cqi) rgba(49, 91, 255, .22); animation-name: engine; }
.engine-icon svg { width: 56%; height: 56%; transform: rotate(calc(var(--hi) * 45deg)); }
@keyframes engine { 0%, 12% { --hi: 0; } 15%, 18% { --hi: 1; } 21%, 42% { --hi: 0; } 45%, 48% { --hi: 1; } 51%, 72% { --hi: 0; } 75%, 78% { --hi: 1; } 81%, 100% { --hi: 0; } }
.engine b { font-size: calc(1.45cqi * var(--k)); font-weight: 500; }
.engine > span:last-child { font-size: calc(1.15cqi * var(--k)); line-height: 1.35; color: var(--muted); }
.folder { display: flex; align-items: center; justify-content: space-between; gap: 1cqi; padding: calc(1.3cqi * var(--k)) 1.2cqi; border-radius: 1cqi; background: rgb(238 241 255 / var(--hi)); font-size: calc(1.45cqi * var(--k)); font-weight: 500; }
.count { position: relative; flex: none; width: calc(2.9cqi * var(--k)); height: calc(2.9cqi * var(--k)); }
.count i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: .6cqi; background: var(--surface); font-family: var(--mono); font-size: calc(1.25cqi * var(--k)); font-style: normal; }
.count i:last-child { background: var(--ink); color: var(--white); opacity: var(--done); transform: scale(calc(.6 + var(--done) * .4)); }
.folder-1 { animation-name: folder1; } .folder-2 { animation-name: folder2; } .folder-3 { animation-name: folder3; }
@keyframes folder1 { 0%, 25% { --hi: 0; --done: 0; } 27%, 32% { --hi: 1; --done: 1; } 36%, 93% { --hi: 0; --done: 1; } 97%, 100% { --hi: 0; --done: 0; } }
@keyframes folder2 { 0%, 55% { --hi: 0; --done: 0; } 57%, 62% { --hi: 1; --done: 1; } 66%, 93% { --hi: 0; --done: 1; } 97%, 100% { --hi: 0; --done: 0; } }
@keyframes folder3 { 0%, 85% { --hi: 0; --done: 0; } 87%, 91% { --hi: 1; --done: 1; } 93% { --hi: 0; --done: 1; } 97%, 100% { --hi: 0; --done: 0; } }

/* 4. Données et cloud : des fichiers locaux vers une base partagée */
.cloud { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .92fr) 7cqi minmax(0, 1.25fr); align-items: center; padding: 7cqi 5cqi; }
.cl-file { display: flex; align-items: center; gap: 1.2cqi; padding: calc(1.2cqi * var(--k)) 1.2cqi; border-radius: 1cqi; font-size: calc(1.45cqi * var(--k)); font-weight: 500; }
.cl-file-1 { background: rgb(238 241 255 / var(--hi)); animation-name: clFile; }
@keyframes clFile { 0%, 4% { --hi: 0; } 7%, 38% { --hi: 1; } 42%, 100% { --hi: 0; } }
.cl-ext { padding: .45cqi .8cqi; border-radius: .5cqi; background: var(--surface); font-family: var(--mono); font-size: calc(1.05cqi * var(--k)); font-weight: 400; color: var(--muted); }
.cl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-raw { display: grid; gap: .5cqi; margin-top: 1.4cqi; padding: 1.4cqi; border-radius: .8cqi; background: var(--surface); font-family: var(--mono); font-size: calc(1.12cqi * var(--k)); color: var(--muted); }
.cl-raw span { animation-timing-function: linear; }
.cl-raw span:nth-child(1) { animation-name: raw1; } .cl-raw span:nth-child(2) { animation-name: raw2; } .cl-raw span:nth-child(3) { animation-name: raw3; }
@keyframes raw1 { 0%, 7% { color: #676B74; } 9%, 15% { color: #315BFF; } 17%, 100% { color: #676B74; } }
@keyframes raw2 { 0%, 17% { color: #676B74; } 19%, 25% { color: #315BFF; } 27%, 100% { color: #676B74; } }
@keyframes raw3 { 0%, 27% { color: #676B74; } 29%, 35% { color: #315BFF; } 37%, 100% { color: #676B74; } }
.wire-cloud { margin: 0 1cqi; }
.wire-cloud i { animation-name: wireCloud; animation-timing-function: linear; }
@keyframes wireCloud { 0%, 8% { --p: 0%; opacity: 0; } 9% { opacity: 1; } 15% { --p: 100%; opacity: 1; } 16%, 18% { --p: 100%; opacity: 0; } 18.01% { --p: 0%; } 19% { opacity: 1; } 25% { --p: 100%; opacity: 1; } 26%, 28% { --p: 100%; opacity: 0; } 28.01% { --p: 0%; } 29% { opacity: 1; } 35% { --p: 100%; opacity: 1; } 36%, 100% { --p: 100%; opacity: 0; } }
.cl-shared .panel-head { justify-content: flex-start; }
.cl-ready { display: inline-flex; align-items: center; gap: .5cqi; margin-left: auto; padding: .45cqi 1cqi .45cqi .7cqi; border-radius: 99px; background: var(--ink); color: var(--white); font-size: calc(1.15cqi * var(--k)); animation-name: clReady; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
.cl-ready svg { width: calc(1.5cqi * var(--k)); height: calc(1.5cqi * var(--k)); color: var(--white); }
@keyframes clReady { 0%, 63% { opacity: 0; transform: scale(.85); } 67%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.cl-tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .45fr); align-items: center; gap: 1.4cqi; height: calc(4.6cqi * var(--k)); padding: 0 .8cqi; border-bottom: 1px solid #ECEDF0; font-size: calc(1.35cqi * var(--k)); }
.cl-tr span:first-child { font-family: var(--mono); font-size: calc(1.15cqi * var(--k)); }
.cl-th { height: calc(3.4cqi * var(--k)); border-bottom-color: var(--line); color: var(--muted); font-size: calc(1.2cqi * var(--k)); }
.cl-th span:first-child { font-family: var(--font); font-size: inherit; }
.cl-row { animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
.cl-row-1 { animation-name: clRow1; } .cl-row-2 { animation-name: clRow2; } .cl-row-3 { animation-name: clRow3; }
@keyframes clRow1 { 0%, 14% { opacity: 0; transform: translateX(-5%); } 18%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes clRow2 { 0%, 24% { opacity: 0; transform: translateX(-5%); } 28%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes clRow3 { 0%, 34% { opacity: 0; transform: translateX(-5%); } 38%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.cl-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqi; margin-top: 2cqi; }
.cl-role { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .8cqi; padding: 1.1cqi; border-radius: .9cqi; box-shadow: inset 0 0 0 1px var(--line); font-size: calc(1.2cqi * var(--k)); font-weight: 500; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
.cl-role svg { grid-row: span 2; width: calc(1.9cqi * var(--k)); height: calc(1.9cqi * var(--k)); color: var(--cobalt); }
.cl-role span, .cl-role em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-role em { font-style: normal; font-weight: 400; color: var(--muted); }
.cl-role-1 { animation-name: clRole1; } .cl-role-2 { animation-name: clRole2; } .cl-role-3 { animation-name: clRole3; }
@keyframes clRole1 { 0%, 44% { opacity: 0; transform: translateY(20%); } 48%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes clRole2 { 0%, 50% { opacity: 0; transform: translateY(20%); } 54%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes clRole3 { 0%, 56% { opacity: 0; transform: translateY(20%); } 60%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* 5. Images et motion : image produit, mockup, mouvement */
.mo { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.5cqi 6cqi 12.5cqi; }
.mo-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 1.4cqi; background-color: #E7E9ED; animation-name: moFrame; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes moFrame { 0%, 27% { background-color: #E7E9ED; } 33%, 94% { background-color: #171A21; } 99%, 100% { background-color: #E7E9ED; } }
.mo-product { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); animation-name: moProduct; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes moProduct {
  0%, 27% { transform: translate(-50%, -50%) scale(1); }
  33%, 63% { transform: translate(-6%, -50%) scale(.86); }
  92% { transform: translate(-12%, -47%) scale(1.08); }
  99%, 100% { transform: translate(-50%, -50%) scale(1); }
}
.mo-type { position: absolute; left: 7%; top: 50%; display: flex; flex-direction: column; color: var(--white); font-size: calc(5cqi * var(--k)); font-weight: 500; line-height: 1; letter-spacing: -.05em; animation-name: moType; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.mo-type span + span { color: #8FA6FF; }
@keyframes moType { 0%, 29% { opacity: 0; transform: translate(-8%, -50%); } 36%, 63% { opacity: 1; transform: translate(0, -50%); } 92% { opacity: 1; transform: translate(4%, -50%); } 97%, 100% { opacity: 0; transform: translate(4%, -50%); } }
.mo-timeline { position: relative; flex: none; height: 3cqi; margin-top: 2cqi; animation-name: moTimeline; }
@keyframes moTimeline { 0%, 62% { opacity: .35; } 66%, 94% { opacity: 1; } 98%, 100% { opacity: .35; } }
.mo-track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #C9CCD3; }
.mo-key { position: absolute; top: 50%; width: 1.1cqi; height: 1.1cqi; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.k1 { left: 12%; } .k2 { left: 50%; } .k3 { left: 88%; }
.mo-head { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--cobalt); animation-name: moHead; animation-timing-function: linear; }
@keyframes moHead { 0%, 65% { --p: 0%; } 94% { --p: 100%; } 98%, 100% { --p: 0%; } }
.mo-steps { position: absolute; left: 0; right: 0; bottom: 3.6cqi; display: flex; justify-content: center; gap: 4.4cqi; font-size: max(12px, 1.75cqi); font-weight: 500; }
.mo-steps .s1 { animation-name: onDesk; } .mo-steps .s2 { animation-name: onTab; } .mo-steps .s3 { animation-name: onPhone; }

/* Petits formats : chaque scène se recompose verticalement */
@container demo (max-width: 600px) {
  .demo-stage { --k: 1.9; }
  .demo-sw .demo-stage { aspect-ratio: 1 / 1.02; }
  .sw { padding: 5cqi; }
  .sw-window { grid-template-columns: minmax(0, 1fr); }
  .sw-side, .sw-search, .sw-btn, .sw-who, .sw-th span:nth-child(2), .sw-tr:nth-child(n+5) { display: none; }
  .sw-main { padding: 4cqi 4.4cqi; }
  .sw-tr { grid-template-columns: minmax(0, 1fr) auto; padding: 0 1cqi; }
  .sw-head { margin: 3.4cqi 0 2.6cqi; }
  .sw-cycle { width: calc(13cqi * var(--k)); }
  .sw-cycle .st { left: auto; right: 0; }
  .sw-st { display: flex; justify-content: flex-end; }

  .demo-auto .demo-stage, .demo-cloud .demo-stage { aspect-ratio: auto; }
  .auto, .cloud { position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch; padding: 6cqi; }
  .wire { width: 2px; height: 7cqi; align-self: center; margin: 0; }
  .wire i { left: 50%; top: var(--p); }
  .engine { flex-direction: row; justify-content: center; gap: 2cqi; padding: 3cqi; text-align: left; }
  .engine-icon { margin: 0; }
  .engine > span:last-child { display: none; }
  .cl-raw { display: none; }
  .cl-roles { gap: 1.6cqi; }
  .cl-role { grid-template-columns: minmax(0, 1fr); padding: 1.8cqi; row-gap: .4cqi; }
  .cl-role svg { display: none; }

  .mo { padding: 5cqi 5cqi 15cqi; }
  .mo-type { font-size: calc(4.4cqi * var(--k)); }
  .mo-product { width: 50%; }
  .web-formats, .mo-steps { bottom: 4.6cqi; font-size: 12px; }
}