@charset "UTF-8"; /** * Fast Dictate, animation d'installation des pages de téléchargement. * * Une seule feuille pour les 6 langues : le balisage est injecté par * /js/install-animation.js, qui traduit les libellés d'après . * * La scène est dessinée dans un repère fixe de 400 x 250 px (.ia-inner) que le * JS met à l'échelle (--ia-s) selon la largeur réellement disponible : tout * reste net, rien ne se réaligne à la main. * * Toutes les animations partagent la même durée (--ia-dur) et sont donc * synchronisées entre elles, y compris avec les 3 étapes déjà présentes sur la * page (voir .ia-step plus bas). * * Chronologie, en % de --ia-dur, commune aux deux OS jusqu'à 32% : * 3% la pastille de téléchargement apparaît en haut à droite * 16% clic sur le bouton de téléchargement * 20% le panneau des téléchargements s'ouvre * 30% double-clic sur le fichier * 36% Windows : l'installateur progresse | macOS : le .dmg s'ouvre * * Puis Windows : Puis macOS : * 59% installation terminée 57% l'icône est déposée dans Applications * 67% l'app est prête 66% le dossier Applications s'ouvre * 72% double-clic sur l'app * 79% l'app est prête * 92% fondu, puis la boucle repart (95,5% côté macOS) * * Le dernier temps fort reprend la pastille sombre de l'overlay du produit. */ :root { --ia-dur: 20s; } /* ------------------------------------------------------------------ scène */ .ia-stage { position: relative; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 400 / 250; border-radius: 14px; overflow: hidden; background: linear-gradient(155deg, #f2f4f8 0%, #e7ebf2 100%); border: 1px solid #e5e7eb; -webkit-user-select: none; user-select: none; } .ia-inner { position: absolute; top: 0; left: 0; width: 400px; height: 250px; transform-origin: top left; transform: scale(var(--ia-s, 1)); } .ia-scene { position: absolute; inset: 0; } .ia-scene * { box-sizing: border-box; } /* -------------------------------------------------------------- navigateur */ .ia-browser { position: absolute; left: 8px; top: 10px; width: 384px; height: 232px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06); animation: ia-browser var(--ia-dur) ease-in-out infinite; } .ia-toolbar { position: relative; height: 34px; background: #fbfcfd; border-bottom: 1px solid #eef0f3; } .ia-tdot { position: absolute; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #dfe3e9; } .ia-tdot.ia-d1 { left: 12px; } .ia-tdot.ia-d2 { left: 24px; } .ia-tdot.ia-d3 { left: 36px; } .ia-url { position: absolute; left: 56px; top: 9px; width: 226px; height: 17px; padding: 0 8px; border-radius: 9px; background: #f0f2f5; display: flex; align-items: center; gap: 5px; font-size: 7.5px; color: #9aa3af; letter-spacing: 0.01em; } .ia-url svg { width: 7px; height: 7px; flex: none; } .ia-dlbtn { position: absolute; right: 42px; top: 4px; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #374151; animation: ia-dlbtn var(--ia-dur) ease-out infinite; } .ia-dlbtn > svg { width: 13px; height: 13px; } .ia-badge { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: #10b981; border: 1.5px solid #fff; opacity: 0; animation: ia-badge var(--ia-dur) cubic-bezier(.2, 1.4, .4, 1) infinite; } .ia-ring { position: absolute; inset: -5px; border-radius: 11px; border: 2px solid #10b981; opacity: 0; animation: ia-ring var(--ia-dur) ease-out infinite; } .ia-kebab { position: absolute; right: 15px; top: 11px; display: flex; flex-direction: column; gap: 2px; } .ia-kebab i { display: block; width: 2.5px; height: 2.5px; border-radius: 50%; background: #c6ccd4; } /* Page en arrière-plan, volontairement muette : le regard doit aller en haut à droite, pas dans le contenu. */ .ia-page { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; } .ia-sk { background: #eef1f5; border-radius: 4px; } .ia-sk-title { width: 148px; height: 11px; } .ia-sk-line { width: 100px; height: 6px; background: #f3f5f8; } .ia-sk-card { width: 196px; height: 54px; border-radius: 9px; background: #f7f9fb; border: 1px solid #eef1f5; margin-top: 3px; } /* --------------------------------------------- panneau des téléchargements */ .ia-panel { position: absolute; right: 38px; top: 46px; width: 210px; padding: 9px 10px 10px; background: #fff; border: 1px solid #edeff2; border-radius: 11px; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); transform-origin: top right; opacity: 0; animation: ia-panel var(--ia-dur) cubic-bezier(.2, .8, .3, 1) infinite; } .ia-panel-title { font-size: 7px; font-weight: 700; color: #9aa3af; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 7px; } .ia-file { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px; animation: ia-file var(--ia-dur) linear infinite; } .ia-file-icon { flex: none; width: 26px; height: 26px; border-radius: 6px; background: #eef1f5; color: #6b7280; font-size: 6.5px; font-weight: 700; letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; } .ia-file-name { max-width: 144px; font-size: 8.5px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ia-file-sub { margin-top: 2px; font-size: 7px; font-weight: 600; color: #10b981; } /* ------------------------------------------------ installateur (Windows) */ .ia-installer { position: absolute; left: 60px; top: 56px; width: 280px; background: #fff; border-radius: 11px; overflow: hidden; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20); opacity: 0; animation: ia-installer var(--ia-dur) cubic-bezier(.2, .8, .3, 1) infinite; } .ia-winbar { position: relative; height: 26px; background: #f7f8fa; border-bottom: 1px solid #eef0f3; display: flex; align-items: center; padding: 0 10px; font-size: 8px; font-weight: 600; color: #4b5563; } .ia-winbar .ia-x { position: absolute; right: 9px; top: 8px; width: 9px; height: 9px; color: #b6bcc5; } .ia-winbar .ia-x svg { width: 100%; height: 100%; display: block; } .ia-winbody { padding: 15px 18px 16px; display: flex; flex-direction: column; align-items: center; } .ia-inst-head { display: flex; align-items: center; gap: 10px; align-self: stretch; } .ia-inst-name { font-size: 10px; font-weight: 700; color: #111827; } .ia-inst-ver { margin-top: 1px; font-size: 7.5px; color: #9aa3af; } .ia-bar { position: relative; width: 100%; height: 5px; margin-top: 14px; border-radius: 3px; background: #eef1f5; overflow: hidden; } .ia-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: #1a1a1a; animation: ia-bar var(--ia-dur) ease-in-out infinite; } .ia-inst-labels { position: relative; width: 100%; height: 12px; margin-top: 9px; } .ia-inst-label { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 8px; font-weight: 600; opacity: 0; } .ia-l1 { color: #6b7280; animation: ia-l1 var(--ia-dur) linear infinite; } .ia-l2 { color: #10b981; display: flex; align-items: center; justify-content: center; gap: 4px; animation: ia-l2 var(--ia-dur) cubic-bezier(.2, 1.4, .4, 1) infinite; } .ia-l2 svg { width: 9px; height: 9px; } /* ------------------------------------------------------- fenêtre .dmg (macOS) */ .ia-dmg { position: absolute; left: 55px; top: 43px; width: 290px; height: 164px; background: #fff; border-radius: 11px; overflow: hidden; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20); opacity: 0; animation: ia-dmg var(--ia-dur) cubic-bezier(.2, .8, .3, 1) infinite; } .ia-dmgbar { position: relative; height: 26px; background: #f6f7f9; border-bottom: 1px solid #eef0f3; display: flex; align-items: center; gap: 5px; padding: 0 10px; } .ia-mdot { width: 7px; height: 7px; border-radius: 50%; } .ia-mdot.ia-m1 { background: #ff5f57; } .ia-mdot.ia-m2 { background: #febc2e; } .ia-mdot.ia-m3 { background: #28c840; } .ia-dmg-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 8.5px; font-weight: 600; color: #4b5563; } .ia-dmgbody { position: relative; height: 138px; display: flex; align-items: center; justify-content: center; gap: 90px; background: #fdfdfe; } .ia-dmg-item { position: relative; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ia-dmg-item span { font-size: 8px; font-weight: 500; color: #4b5563; } .ia-dmg-arrow { position: absolute; left: 50%; top: 58px; width: 34px; height: 12px; margin-left: -17px; color: #d5dae1; } .ia-dmg-arrow svg { width: 100%; height: 100%; display: block; } .ia-dmg-app { z-index: 3; animation: ia-drag var(--ia-dur) cubic-bezier(.4, 0, .25, 1) infinite; } /* Le nom s'efface dès que l'icône décolle : pendant le trajet il viendrait chevaucher celui du dossier Applications. */ .ia-dmg-app span { animation: ia-drag-label var(--ia-dur) linear infinite; } .ia-folder { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; } .ia-folder > svg { width: 44px; height: 36px; } .ia-folder-glow { position: absolute; inset: 2px 0; border-radius: 9px; background: rgba(59, 130, 246, 0.16); opacity: 0; animation: ia-folder-glow var(--ia-dur) ease-out infinite; } .ia-drop-check { position: absolute; right: 1px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; background: #10b981; border: 1.5px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; animation: ia-drop-check var(--ia-dur) cubic-bezier(.2, 1.4, .4, 1) infinite; } .ia-drop-check svg { width: 8px; height: 8px; } /* Badge « copie » que macOS accroche au curseur pendant le glissement. */ .ia-copy { position: absolute; left: 11px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: #28c840; border: 1.5px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; line-height: 1; opacity: 0; animation: ia-copy var(--ia-dur) linear infinite; } /* ------------------------------------ dossier Applications ouvert (macOS) */ .ia-apps { position: absolute; left: 55px; top: 43px; width: 290px; height: 164px; background: #fff; border-radius: 11px; overflow: hidden; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20); opacity: 0; animation: ia-apps var(--ia-dur) cubic-bezier(.2, .8, .3, 1) infinite; } .ia-appsbody { position: relative; height: 138px; display: flex; align-items: center; justify-content: center; gap: 20px; background: #fdfdfe; } .ia-app-item { position: relative; width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ia-app-item > .ia-tile, .ia-app-item > span, .ia-app-item > .ia-mtile { position: relative; z-index: 1; } .ia-app-item > span { font-size: 8px; font-weight: 500; color: #4b5563; white-space: nowrap; } .ia-mtile { width: 46px; height: 46px; border-radius: 11px; background: #eef1f5; border: 1px solid #e8ebf0; } .ia-mlabel { width: 28px; height: 5px; border-radius: 3px; background: #eef1f5; } .ia-select { position: absolute; left: -7px; right: -7px; top: -6px; bottom: -5px; border-radius: 9px; background: rgba(59, 130, 246, 0.14); opacity: 0; animation: ia-select var(--ia-dur) ease-out infinite; } .ia-app-fd .ia-tile { animation: ia-launch var(--ia-dur) cubic-bezier(.3, 1.6, .5, 1) infinite; } /* --------------------------------------------------------- tuile de l'app */ .ia-tile { width: 46px; height: 46px; border-radius: 11px; background: #fff; border: 1px solid #eceef1; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ia-tile img { width: 40px; height: 40px; object-fit: contain; } .ia-tile-sm { width: 34px; height: 34px; border-radius: 8px; } .ia-tile-sm img { width: 30px; height: 30px; } /* ------------------------------------------------------ dernier temps fort */ .ia-final { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; opacity: 0; animation: ia-final var(--ia-dur) cubic-bezier(.2, .8, .3, 1) infinite; } .ia-final-app { display: flex; align-items: center; gap: 10px; } .ia-final-name { font-size: 12px; font-weight: 700; color: #111827; } .ia-final-sub { margin-top: 2px; font-size: 8.5px; font-weight: 600; color: #10b981; display: flex; align-items: center; gap: 4px; } .ia-final-sub svg { width: 10px; height: 10px; } .ia-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border-radius: 50px; background: rgba(26, 26, 26, 0.95); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ia-pill-bars { display: flex; align-items: center; gap: 2.5px; height: 17px; } .ia-pill-bars i { display: block; width: 2.5px; height: 4px; border-radius: 99px; background: #fff; animation: ia-wave 0.85s ease-in-out infinite alternate; } .ia-pill-bars i:nth-child(1) { animation-delay: 0s; --ia-h: 8px; } .ia-pill-bars i:nth-child(2) { animation-delay: .09s; --ia-h: 14px; } .ia-pill-bars i:nth-child(3) { animation-delay: .18s; --ia-h: 6px; } .ia-pill-bars i:nth-child(4) { animation-delay: .27s; --ia-h: 17px; } .ia-pill-bars i:nth-child(5) { animation-delay: .36s; --ia-h: 9px; } .ia-pill-bars i:nth-child(6) { animation-delay: .45s; --ia-h: 13px; } .ia-pill-bars i:nth-child(7) { animation-delay: .54s; --ia-h: 7px; } .ia-pill-x, .ia-pill-v { display: flex; align-items: center; justify-content: center; } .ia-pill-x svg { width: 11px; height: 11px; color: rgba(255, 255, 255, 0.6); } .ia-pill-v svg { width: 12px; height: 12px; color: #34d399; } /* ---------------------------------------------------------------- curseur */ .ia-cursor { position: absolute; left: 0; top: 0; width: 15px; height: 21px; z-index: 30; animation: ia-cursor-win var(--ia-dur) cubic-bezier(.45, .05, .2, 1) infinite; } .ia-stage[data-os="macos"] .ia-cursor { animation-name: ia-cursor-mac; } .ia-stage[data-os="macos"] .ia-cursor > svg { animation-name: ia-click-mac; } .ia-stage[data-os="macos"] .ia-browser { animation-name: ia-browser-mac; } .ia-stage[data-os="macos"] .ia-final { animation-name: ia-final-mac; } .ia-cursor > svg { width: 100%; height: 100%; transform-origin: 12% 8%; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.30)); animation: ia-click var(--ia-dur) ease-out infinite; } /* ------------------------------------------------------------- keyframes */ @keyframes ia-browser { 0%, 31% { opacity: 1; filter: blur(0); } 35%, 63% { opacity: .45; filter: blur(1.6px); } 67%, 91% { opacity: 0; filter: blur(3px); } 100% { opacity: 1; filter: blur(0); } } @keyframes ia-badge { 0%, 2.5% { opacity: 0; transform: scale(0); } 5% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 33%, 100% { opacity: 0; transform: scale(.5); } } @keyframes ia-ring { 0%, 3% { opacity: 0; transform: scale(.62); } 4.5% { opacity: .5; transform: scale(.62); } 12% { opacity: 0; transform: scale(1.45); } 12.5% { opacity: 0; transform: scale(.62); } 13.5% { opacity: .5; transform: scale(.62); } 21%, 100% { opacity: 0; transform: scale(1.45); } } @keyframes ia-dlbtn { 0%, 15.4% { background: rgba(15, 23, 42, 0); transform: scale(1); } 16.4% { background: rgba(15, 23, 42, .07); transform: scale(.9); } 18% { background: rgba(15, 23, 42, .07); transform: scale(1); } 24%, 100% { background: rgba(15, 23, 42, 0); transform: scale(1); } } @keyframes ia-panel { 0%, 17.5% { opacity: 0; transform: translateY(-7px) scale(.94); } 20.5%, 31.5% { opacity: 1; transform: translateY(0) scale(1); } 34%, 100% { opacity: 0; transform: translateY(-4px) scale(.97); } } @keyframes ia-file { 0%, 25.5% { background: rgba(15, 23, 42, 0); } 27.5%, 28.9% { background: rgba(15, 23, 42, .035); } 29.4% { background: rgba(15, 23, 42, .09); } 30.4% { background: rgba(15, 23, 42, .035); } 30.9% { background: rgba(15, 23, 42, .09); } 32%, 100% { background: rgba(15, 23, 42, .035); } } /* --- Windows --- */ @keyframes ia-installer { 0%, 32.5% { opacity: 0; transform: scale(.94); } 36%, 63.5% { opacity: 1; transform: scale(1); } 67%, 100% { opacity: 0; transform: scale(.97); } } @keyframes ia-bar { 0%, 36% { width: 0%; background: #1a1a1a; } 52% { width: 68%; background: #1a1a1a; } 57.5% { width: 100%; background: #1a1a1a; } 59% { width: 100%; background: #10b981; } 100% { width: 100%; background: #10b981; } } @keyframes ia-l1 { 0%, 36.5% { opacity: 0; } 38%, 56.5% { opacity: 1; } 58%, 100% { opacity: 0; } } @keyframes ia-l2 { 0%, 58.5% { opacity: 0; transform: scale(.9); } 60.5%, 64% { opacity: 1; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(1); } } /* --- macOS --- */ @keyframes ia-dmg { 0%, 32.5% { opacity: 0; transform: scale(.94); } 36%, 62% { opacity: 1; transform: scale(1); } 65%, 100% { opacity: 0; transform: scale(.97); } } @keyframes ia-apps { 0%, 65.5% { opacity: 0; transform: scale(.96); } 68%, 77% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(.98); } } @keyframes ia-select { 0%, 71.4% { opacity: 0; } 72%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } } @keyframes ia-launch { 0%, 71.8% { transform: scale(1); } 73.5% { transform: scale(1.14); } 76%, 100% { transform: scale(1); } } /* Le navigateur reste en arrière-plan plus longtemps sur macOS : deux fenêtres s'y succèdent avant le dernier temps fort. */ @keyframes ia-browser-mac { 0%, 31% { opacity: 1; filter: blur(0); } 35%, 76% { opacity: .45; filter: blur(1.6px); } 80%, 95% { opacity: 0; filter: blur(3px); } 100% { opacity: 1; filter: blur(0); } } @keyframes ia-final-mac { 0%, 79% { opacity: 0; transform: translateY(12px) scale(.97); } 83%, 92% { opacity: 1; transform: translateY(0) scale(1); } 95.5%, 100% { opacity: 0; transform: translateY(-5px) scale(.99); } } @keyframes ia-drag { /* L'opacité est répétée sur chaque étape : sans cela elle s'interpolerait depuis le début de la boucle et l'icône s'effacerait pendant le trajet. */ 0%, 40.5% { transform: translate(0, 0) scale(1); opacity: 1; filter: drop-shadow(0 0 0 rgba(15, 23, 42, 0)); } 42% { transform: translate(0, -3px) scale(1.08); opacity: 1; filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .22)); } 55% { transform: translate(160px, -3px) scale(1.08); opacity: 1; filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .22)); } 57% { transform: translate(160px, 0) scale(.85); opacity: 1; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .12)); } 58.6% { transform: translate(160px, 3px) scale(.45); opacity: 0; } 64.9% { transform: translate(160px, 3px) scale(.45); opacity: 0; } 65%, 100% { transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes ia-drag-label { 0%, 41% { opacity: 1; } 42.5%, 100% { opacity: 0; } } @keyframes ia-folder-glow { 0%, 54% { opacity: 0; transform: scale(.9); } 56%, 60% { opacity: 1; transform: scale(1); } 63%, 100% { opacity: 0; transform: scale(1.05); } } @keyframes ia-drop-check { 0%, 58% { opacity: 0; transform: scale(.4); } 60%, 62% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(1); } } @keyframes ia-copy { 0%, 42% { opacity: 0; } 43%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } } /* --- curseur --- */ @keyframes ia-cursor-win { 0%, 7% { transform: translate(192px, 200px); } 16% { transform: translate(331px, 22px); } 21% { transform: translate(331px, 22px); } 28% { transform: translate(232px, 84px); } 33% { transform: translate(232px, 84px); } 41% { transform: translate(258px, 196px); } 64% { transform: translate(258px, 196px); } 72%, 100% { transform: translate(192px, 200px); } } @keyframes ia-cursor-mac { 0%, 7% { transform: translate(192px, 200px); } 16% { transform: translate(331px, 22px); } 21% { transform: translate(331px, 22px); } 28% { transform: translate(232px, 84px); } 33% { transform: translate(232px, 84px); } 40.5% { transform: translate(116px, 128px); } 42% { transform: translate(116px, 128px); } 55% { transform: translate(276px, 128px); } 66% { transform: translate(276px, 128px); } 71% { transform: translate(161px, 130px); } 76% { transform: translate(161px, 130px); } 83% { transform: translate(214px, 184px); } 91%, 100% { transform: translate(192px, 200px); } } @keyframes ia-click { 0%, 15.8% { transform: scale(1); } 16.6% { transform: scale(.8); } 17.6% { transform: scale(1); } 28.9% { transform: scale(1); } 29.4% { transform: scale(.8); } 30.1% { transform: scale(1); } 30.6% { transform: scale(.8); } 31.2%, 100% { transform: scale(1); } } /* Même chose, plus le double-clic qui lance l'app depuis Applications. */ @keyframes ia-click-mac { 0%, 15.8% { transform: scale(1); } 16.6% { transform: scale(.8); } 17.6% { transform: scale(1); } 28.9% { transform: scale(1); } 29.4% { transform: scale(.8); } 30.1% { transform: scale(1); } 30.6% { transform: scale(.8); } 31.2%, 71.2% { transform: scale(1); } 71.7% { transform: scale(.8); } 72.4% { transform: scale(1); } 72.9% { transform: scale(.8); } 73.5%, 100% { transform: scale(1); } } @keyframes ia-final { 0%, 67% { opacity: 0; transform: translateY(12px) scale(.97); } 71.5%, 88% { opacity: 1; transform: translateY(0) scale(1); } 92%, 100% { opacity: 0; transform: translateY(-5px) scale(.99); } } @keyframes ia-wave { from { height: 4px; } to { height: var(--ia-h, 12px); } } /* -------------------------------------- les 3 étapes, au rythme de la scène */ .ia-num { background: #111827; color: #fff; } /* Le halo est peint en box-shadow plutôt qu'en padding : la surbrillance déborde du texte sans rien décaler dans la colonne. */ .ia-on .ia-step { border-radius: 10px; background: var(--ia-row, transparent); box-shadow: 0 0 0 9px var(--ia-row, transparent); } .ia-on .ia-step .ia-num { background: var(--ia-num-bg, #e5e7eb); color: var(--ia-num-fg, #9ca3af); } .ia-on .ia-step .ia-step-title { color: var(--ia-title, #6b7280); } .ia-on .ia-step .ia-step-desc { color: var(--ia-desc, #9ca3af); } .ia-on .ia-step-1 { animation: ia-step-1 var(--ia-dur) linear infinite; } .ia-on .ia-step-2 { animation: ia-step-2 var(--ia-dur) linear infinite; } .ia-on .ia-step-3 { animation: ia-step-3 var(--ia-dur) linear infinite; } @keyframes ia-step-1 { 0%, 1% { --ia-row: transparent; --ia-num-bg: #e5e7eb; --ia-num-fg: #9ca3af; --ia-title: #6b7280; --ia-desc: #9ca3af; } 3%, 29% { --ia-row: #f7f8fa; --ia-num-bg: #111827; --ia-num-fg: #fff; --ia-title: #111827; --ia-desc: #6b7280; } 31%, 100% { --ia-row: transparent; --ia-num-bg: #e5e7eb; --ia-num-fg: #9ca3af; --ia-title: #6b7280; --ia-desc: #9ca3af; } } @keyframes ia-step-2 { 0%, 30% { --ia-row: transparent; --ia-num-bg: #e5e7eb; --ia-num-fg: #9ca3af; --ia-title: #6b7280; --ia-desc: #9ca3af; } 33%, 64% { --ia-row: #f7f8fa; --ia-num-bg: #111827; --ia-num-fg: #fff; --ia-title: #111827; --ia-desc: #6b7280; } 66%, 100% { --ia-row: transparent; --ia-num-bg: #e5e7eb; --ia-num-fg: #9ca3af; --ia-title: #6b7280; --ia-desc: #9ca3af; } } @keyframes ia-step-3 { 0%, 65% { --ia-row: transparent; --ia-num-bg: #e5e7eb; --ia-num-fg: #9ca3af; --ia-title: #6b7280; --ia-desc: #9ca3af; } 68%, 90% { --ia-row: #f7f8fa; --ia-num-bg: #111827; --ia-num-fg: #fff; --ia-title: #111827; --ia-desc: #6b7280; } 92%, 100% { --ia-row: transparent; --ia-num-bg: #e5e7eb; --ia-num-fg: #9ca3af; --ia-title: #6b7280; --ia-desc: #9ca3af; } } /* ---------------------------------------------------- mouvement réduit */ @media (prefers-reduced-motion: reduce) { .ia-stage *, .ia-on .ia-step { animation: none !important; } .ia-panel { opacity: 1; transform: none; } .ia-badge { opacity: 1; transform: none; } .ia-cursor { transform: translate(331px, 22px); } .ia-on .ia-step { background: transparent; box-shadow: none; } .ia-on .ia-step .ia-num { background: #111827; color: #fff; } .ia-on .ia-step .ia-step-title { color: #111827; } .ia-on .ia-step .ia-step-desc { color: #6b7280; } }