/* Scènes animées de la page Télécharger : reprises du guide d'installation de la bêta
   (~/code/saas/mochi-beta/guide/guide.css), classes et animations préfixées « g- »
   pour ne jamais toucher au reste du site. Ne pas modifier à la main sans le guide. */
.g-scene { --accent: var(--ube); --accent-pale: var(--lavande-pale); --g-trait: rgba(45, 36, 64, .12); --mac-bleu: #0A84FF; --boucle: 6s; }
/* Scène : un morceau d'écran de Mac */
.g-scene { position: relative; aspect-ratio: 16 / 11; background: var(--accent-pale); border-radius: 22px; overflow: hidden; border: 1px solid var(--g-trait); font-size: 14px; line-height: 1.3; }
.g-scene * { animation-duration: var(--boucle); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.g-fen { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(45,36,64,.18), 0 0 0 1px rgba(45,36,64,.08); overflow: hidden; }
.g-fen-barre { height: 30px; background: #F4F2F7; border-bottom: 1px solid var(--g-trait); display: flex; align-items: center; gap: 6px; padding: 0 12px; position: relative; }
.g-fen-barre i { width: 11px; height: 11px; border-radius: 50%; background: #E3DEEA; }
.g-fen-barre.g-sombre { background: #241D34; border-color: rgba(255,255,255,.08); }
.g-fen-barre.g-sombre i { background: rgba(255,255,255,.18); }
.g-titre-fen, .g-adresse { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 13px; color: var(--encre-doux); pointer-events: none; }
.g-adresse { width: 50%; left: 25%; background: #fff; border-radius: 6px; padding: 3px 0; font-weight: 500; }
.g-icone-app { width: 56px; height: 56px; border-radius: 13px; }

/* Curseur */
.g-curseur { position: absolute; width: 26px; height: 26px; z-index: 20; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M5 3v18l5-4.6 3.2 7 3.4-1.5-3.2-6.8H20L5 3Z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.g-curseur::after { content: ""; position: absolute; left: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; }

/* 1 · Télécharger */
.g-navigateur { inset: 7% 8% 22% 8%; }
.g-page { display: grid; justify-items: center; align-content: center; gap: 10px; height: calc(100% - 30px); }
.g-page .g-nom-app { font: 600 22px/1 var(--titre); margin: 0; }
.g-bouton-dl { background: var(--encre); color: #fff; font-weight: 700; font-size: 16px; padding: 12px 26px; border-radius: 12px; animation-name: g-appui1; }
@keyframes g-appui1 { 0%, 34% { transform: scale(1); } 38% { transform: scale(.94); background: #4a3e66; } 44%, 100% { transform: scale(1); } }
.g-dock { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: flex; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,.75); border: 1px solid var(--g-trait); border-radius: 16px; }
.g-dock-app { width: 38px; height: 38px; border-radius: 10px; background: #E6E0EF; }
.g-dock-dl { position: relative; width: 38px; height: 38px; border-radius: 10px; background: #D8E8FF; display: grid; place-items: center; animation-name: g-rebond; }
.g-dock-dl svg, .g-vol svg { width: 22px; fill: none; stroke: var(--mac-bleu); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-dock-dl b { position: absolute; top: -7px; right: -7px; background: #FF3B30; color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; animation-name: g-badge; }
@keyframes g-rebond { 0%, 66% { transform: none; } 71% { transform: translateY(-12px); } 76% { transform: none; } 80% { transform: translateY(-6px); } 84%, 100% { transform: none; } }
@keyframes g-badge { 0%, 70% { opacity: 0; transform: scale(.4); } 76%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.g-vol { position: absolute; left: 50%; top: 55%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.15); opacity: 0; animation-name: g-vol; }
@keyframes g-vol { 0%, 42% { opacity: 0; transform: none; } 46% { opacity: 1; transform: none; } 66% { opacity: 1; transform: translate(95%, 470%) scale(.6); } 70%, 100% { opacity: 0; transform: translate(95%, 470%) scale(.4); } }
.g-c1 { animation-name: g-c1; }
@keyframes g-c1 { 0% { left: 18%; top: 84%; } 30%, 100% { left: calc(50% + 12px); top: calc(42.5% + 58px); } }
.g-c1::after, .g-c2::after, .g-c4::after, .g-c5::after, .g-c6::after, .g-c7::after, .g-c8::after, .g-c9::after, .g-c10::after { animation: inherit; animation-name: none; }
.g-c1::after { animation-name: g-clic1; }
@keyframes g-clic1 { 0%, 33% { opacity: 0; transform: scale(.4); } 37% { opacity: 1; } 46%, 100% { opacity: 0; transform: scale(1.6); } }

/* 2, 3, 4 · Finder */
.g-finder { inset: 8% 7% 10% 7%; }
.g-finder-corps { display: grid; grid-template-columns: 34% 1fr; height: calc(100% - 30px); }
.g-cote { list-style: none; margin: 0; padding: 12px 8px; background: #F7F5FA; border-right: 1px solid var(--g-trait); display: grid; align-content: start; gap: 2px; }
.g-cote li { padding: 7px 10px; border-radius: 7px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cote li.g-actif { background: #E4DFEE; font-weight: 600; }
.g-fichiers { position: relative; padding: 22px; display: flex; gap: 24px; align-items: flex-start; }
.g-fichier { display: grid; justify-items: center; gap: 6px; font-size: 13px; text-align: center; width: 96px; }
.g-icone-zip { width: 50px; height: 60px; border-radius: 6px; background: #EDEAF2; border: 1px solid var(--g-trait); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--encre-doux); }
.g-s2 .g-zip { animation-name: g-zip; }
.g-s2 .g-app { position: absolute; left: 22px; top: 22px; opacity: 0; animation-name: g-apparait2; }
@keyframes g-zip { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; } }
@keyframes g-apparait2 { 0%, 44% { opacity: 0; transform: scale(.7); } 54%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.g-c2 { animation-name: g-c2; }
@keyframes g-c2 { 0% { left: 82%; top: 84%; } 28%, 100% { left: calc(36.2% + 62px); top: calc(8% + 76px); } }
.g-c2::after { animation-name: g-dbl; }
@keyframes g-dbl { 0%, 31% { opacity: 0; transform: scale(.4); } 33% { opacity: 1; transform: scale(.8); } 36% { opacity: 0; transform: scale(1.2); } 37% { opacity: 1; transform: scale(.6); } 42%, 100% { opacity: 0; transform: scale(1.5); } }

.g-s3 .g-depart { animation-name: g-depart; }
@keyframes g-depart { 0%, 34% { opacity: 1; } 38%, 88% { opacity: .35; } 92%, 100% { opacity: 1; } }
.g-fantome { position: absolute; width: 56px; height: 56px; margin: -20px 0 0 -28px; opacity: 0; z-index: 10; animation-name: g-fantome; }
@keyframes g-fantome { 0%, 34% { opacity: 0; left: calc(36.2% + 70px); top: calc(8% + 79px); transform: none; } 38% { opacity: .85; left: calc(36.2% + 70px); top: calc(8% + 79px); } 70% { opacity: .85; left: calc(7% + 44px); top: calc(8% + 55px); transform: scale(.8); } 76%, 100% { opacity: 0; left: calc(7% + 44px); top: calc(8% + 55px); transform: scale(.3); } }
.g-s3 .g-cible { animation-name: g-cible3; }
@keyframes g-cible3 { 0%, 62% { background: transparent; color: inherit; } 66%, 80% { background: var(--mac-bleu); color: #fff; } 86%, 100% { background: transparent; color: inherit; } }
.g-c3 { animation-name: g-c3; }
@keyframes g-c3 { 0% { left: 82%; top: 84%; } 30%, 36% { left: calc(36.2% + 62px); top: calc(8% + 76px); } 70%, 100% { left: calc(7% + 38px); top: calc(8% + 52px); } }

/* 2, 3, 11 · Installation par .dmg (propre au site, absent du guide de la bêta).
   Fenêtre du disque : l'app au quart gauche, la flèche, le dossier Applications au quart droit. */
.g-icone-dmg { border-radius: 12px; }
.g-dossier { width: 56px; height: 46px; }
.g-dmg { inset: 10% 8% 12% 8%; }
.g-dmg-corps { position: absolute; inset: 30px 0 0 0; background: var(--mochi); }
.g-dmg-app, .g-dmg-apps { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.g-dmg-app { left: 25%; }
.g-dmg-apps { left: 75%; }
.g-dmg-apps .g-dossier { height: 56px; }
.g-dmg-fleche { position: absolute; left: 50%; top: 42%; width: 20%; transform: translate(-50%, -50%); fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* 2 · la fenêtre du disque s'ouvre après le double-clic sur le .dmg */
.g-s2 .g-dmg { inset: 22% 5% 8% 30%; opacity: 0; animation-name: g-ouvre2; }
.g-s2 .g-dmg .g-icone-app, .g-s2 .g-dmg .g-dossier { width: 40px; height: 40px; }
.g-s2 .g-dmg-app, .g-s2 .g-dmg-apps { font-size: 11px; }
@keyframes g-ouvre2 { 0%, 42% { opacity: 0; transform: scale(.9); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 3 · on attrape l'app (29 %, 49 %) et on la lâche sur Applications (71 %, 49 %) */
.g-s3 .g-dmg-app { animation-name: g-depart; }
.g-s3 .g-fantome { animation-name: g-fantome-dmg; }
@keyframes g-fantome-dmg { 0%, 34% { opacity: 0; left: 29%; top: 47%; transform: none; } 38% { opacity: .85; left: 29%; top: 47%; } 70% { opacity: .85; left: 71%; top: 47%; transform: scale(.8); } 76%, 100% { opacity: 0; left: 71%; top: 47%; transform: scale(.3); } }
.g-s3 .g-dossier { animation-name: g-survol-dossier; }
@keyframes g-survol-dossier { 0%, 62% { filter: none; transform: none; } 66%, 80% { filter: brightness(.85); transform: scale(1.08); } 86%, 100% { filter: none; transform: none; } }
.g-c3d { animation-name: g-c3d; }
@keyframes g-c3d { 0% { left: 82%; top: 88%; } 30%, 36% { left: calc(29% - 4px); top: 48%; } 70%, 100% { left: calc(71% - 4px); top: 48%; } }
/* 11 · éjecter : clic sur la flèche d'éjection, le disque et son contenu disparaissent */
.g-cote li.g-disque { display: flex; align-items: center; gap: 4px; }
.g-disque span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-ejecter { flex: none; width: 14px; height: 14px; margin-left: auto; fill: var(--encre-doux); }
.g-s11 .g-disque { animation-name: g-ejecte; }
.g-s11 .g-fichiers { animation-name: g-ejecte; }
.g-s11 .g-dossier { width: 56px; height: 56px; }
@keyframes g-ejecte { 0%, 44% { opacity: 1; } 52%, 90% { opacity: 0; } 100% { opacity: 1; } }
.g-c11 { animation-name: g-c11; }
@keyframes g-c11 { 0% { left: 70%; top: 86%; } 30%, 100% { left: calc(36.2% - 30px); top: calc(8% + 152px); } }
.g-c11::after { animation: inherit; animation-name: g-clic11; }
@keyframes g-clic11 { 0%, 37% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 47%, 100% { opacity: 0; transform: scale(1.6); } }

/* Alertes macOS */
.g-alerte { position: absolute; left: 50%; top: 50%; width: min(290px, 64%); transform: translate(-50%, -50%); background: #F6F4F8; border-radius: 16px; padding: 20px 18px 16px; display: grid; justify-items: center; gap: 8px; text-align: center; box-shadow: 0 24px 60px rgba(45,36,64,.28), 0 0 0 1px rgba(45,36,64,.08); z-index: 5; }
.g-alerte .g-icone-app { width: 52px; height: 52px; }
.g-alerte-titre { font-weight: 700; margin: 0; font-size: 14px; }
.g-alerte-texte { margin: 0 0 4px; font-size: 12.5px; color: var(--encre-doux); }
.g-btn-mac { display: block; width: 100%; padding: 7px 10px; border-radius: 8px; background: #E4E1E9; font-weight: 600; font-size: 13px; }
.g-btn-mac.g-principal { background: var(--mac-bleu); color: #fff; }
.g-btn-mac.g-barre-rouge { position: relative; color: #8a8494; }
.g-btn-mac.g-barre-rouge::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #FF3B30; transform: rotate(-4deg); }

.g-s4 .g-alerte { opacity: 0; animation-name: g-alerte4; }
@keyframes g-alerte4 { 0%, 26% { opacity: 0; transform: translate(-50%, -46%) scale(.92); } 32%, 72% { opacity: 1; transform: translate(-50%, -50%); } 78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.g-s4 .g-principal { animation-name: g-presse4; }
@keyframes g-presse4 { 0%, 66% { filter: none; } 68%, 72% { filter: brightness(.82); } 74%, 100% { filter: none; } }
.g-c4 { animation-name: g-c4; }
@keyframes g-c4 { 0% { left: 82%; top: 84%; } 18%, 28% { left: calc(36.2% + 62px); top: calc(8% + 76px); } 56%, 100% { left: calc(50% + 6px); top: calc(50% + 34px); } }
.g-c4::after { animation-name: g-clic4; }
@keyframes g-clic4 { 0%, 19% { opacity: 0; transform: scale(.4); } 21% { opacity: 1; transform: scale(.8); } 24% { opacity: 0; } 25% { opacity: 1; transform: scale(.6); } 29%, 64% { opacity: 0; transform: scale(1.5); } 67% { opacity: 1; transform: scale(.5); } 74%, 100% { opacity: 0; transform: scale(1.6); } }

/* 5 · Menu Pomme */
.g-bureau { position: absolute; inset: 0; }
.g-menubar { height: 30px; background: rgba(255,255,255,.85); border-bottom: 1px solid var(--g-trait); display: flex; align-items: center; gap: 18px; padding: 0 14px; font-size: 13px; }
.g-menubar span:first-of-type { font-weight: 700; }
.g-pomme { width: 17px; fill: var(--encre); padding: 1px; border-radius: 5px; animation-name: g-pomme; box-sizing: content-box; }
@keyframes g-pomme { 0%, 18% { background: transparent; } 22%, 70% { background: rgba(45,36,64,.14); } 74%, 100% { background: transparent; } }
.g-menu-pomme { position: absolute; left: 8px; top: 32px; width: 200px; list-style: none; margin: 0; padding: 6px; background: rgba(250,249,252,.97); border-radius: 10px; box-shadow: 0 14px 40px rgba(45,36,64,.22), 0 0 0 1px rgba(45,36,64,.08); opacity: 0; animation-name: g-menu5; }
.g-menu-pomme li { padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.g-menu-pomme li.g-sep { height: 1px; padding: 0; margin: 4px 6px; background: var(--g-trait); }
.g-menu-pomme .g-cible { animation-name: g-survol5; }
@keyframes g-menu5 { 0%, 21% { opacity: 0; } 24%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes g-survol5 { 0%, 44% { background: transparent; color: inherit; } 48%, 70% { background: var(--mac-bleu); color: #fff; } 100% { background: transparent; } }
.g-reglages.g-mini { left: 26%; right: 6%; top: 24%; bottom: 8%; opacity: 0; animation-name: g-reg5; }
@keyframes g-reg5 { 0%, 74% { opacity: 0; transform: scale(.94); } 80%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.g-reg-corps { display: grid; grid-template-columns: 38% 1fr; height: calc(100% - 30px); }
.g-reg-contenu { position: relative; overflow: hidden; padding: 12px 14px; }
.g-c5 { animation-name: g-c5; }
@keyframes g-c5 { 0% { left: 40%; top: 60%; } 16%, 22% { left: 20px; top: 11px; } 46%, 100% { left: 70px; top: 86px; } }
.g-c5::after { animation-name: g-clic5; }
@keyframes g-clic5 { 0%, 16% { opacity: 0; transform: scale(.4); } 19% { opacity: 1; } 25%, 62% { opacity: 0; transform: scale(1.5); } 65% { opacity: 1; transform: scale(.5); } 72%, 100% { opacity: 0; transform: scale(1.6); } }

/* 6 · Confidentialité et sécurité */
.g-s6 .g-reglages { inset: 7% 5% 7% 5%; }
.g-s6 .g-defile { display: grid; gap: 4px; animation-name: g-defile; }
.g-s6 .g-ligne { margin: 0; padding: 9px 10px; border-radius: 8px; background: #F7F5FA; font-size: 13px; }
.g-s6 .g-rubrique { margin: 10px 0 2px; font-weight: 700; font-size: 13px; }
.g-bloque { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px; border-radius: 10px; background: #EFECF4; display: grid; gap: 10px; box-shadow: 0 -10px 20px #fff; animation-name: g-monte; }
.g-s6 .g-rubrique { position: absolute; left: 16px; bottom: 120px; margin: 0; animation-name: g-monte; }
@keyframes g-monte { 0%, 10% { transform: translateY(160px); } 34%, 100% { transform: none; } }
.g-bloque p { margin: 0; font-size: 13px; }
.g-bloque .g-btn-mac { width: auto; justify-self: start; padding: 7px 16px; background: #fff; border: 1px solid var(--g-trait); animation-name: g-bloque; }
@keyframes g-defile { 0%, 10% { transform: none; } 34%, 100% { transform: translateY(-60px); } }
@keyframes g-bloque { 0%, 50% { background: #fff; } 54%, 60% { background: #DCD8E3; } 62%, 100% { background: #fff; } }
.g-feuille-mdp { position: absolute; left: 50%; top: 50%; width: min(250px, 60%); transform: translate(-50%, -50%); background: #F6F4F8; border-radius: 16px; padding: 18px; display: grid; justify-items: center; gap: 10px; box-shadow: 0 24px 60px rgba(45,36,64,.28), 0 0 0 1px rgba(45,36,64,.08); opacity: 0; animation-name: g-feuille6; z-index: 5; }
.g-feuille-mdp svg { width: 40px; fill: none; stroke: #FF3B30; stroke-width: 1.6; stroke-linecap: round; }
.g-feuille-mdp p { margin: 0; font-weight: 700; font-size: 13px; }
.g-champ { display: flex; gap: 5px; padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--g-trait); width: 100%; min-height: 32px; }
.g-champ i { width: 8px; height: 8px; border-radius: 50%; background: var(--encre); opacity: 0; animation-name: g-point6; }
.g-champ i:nth-child(2) { animation-delay: .08s; } .g-champ i:nth-child(3) { animation-delay: .16s; } .g-champ i:nth-child(4) { animation-delay: .24s; } .g-champ i:nth-child(5) { animation-delay: .32s; } .g-champ i:nth-child(6) { animation-delay: .4s; }
@keyframes g-feuille6 { 0%, 62% { opacity: 0; transform: translate(-50%, -46%) scale(.94); } 67%, 92% { opacity: 1; transform: translate(-50%, -50%); } 97%, 100% { opacity: 0; } }
@keyframes g-point6 { 0%, 72% { opacity: 0; } 76%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.g-c6 { animation-name: g-c6; }
@keyframes g-c6 { 0% { left: 60%; top: 80%; } 10%, 36% { left: 72%; top: 55%; } 50%, 100% { left: calc(39.2% + 70px); top: calc(93% - 46px); } }
.g-c6::after { animation-name: g-clic6; }
@keyframes g-clic6 { 0%, 51% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; } 61%, 100% { opacity: 0; transform: scale(1.6); } }

/* 7 · Ouvrir quand même */
.g-s7 .g-alerte { animation-name: g-alerte7; }
@keyframes g-alerte7 { 0%, 4% { opacity: 0; transform: translate(-50%, -46%) scale(.92); } 10%, 50% { opacity: 1; transform: translate(-50%, -50%); } 56%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.g-s7 .g-principal { animation-name: g-presse7; }
@keyframes g-presse7 { 0%, 42% { filter: none; } 44%, 49% { filter: brightness(.82); } 51%, 100% { filter: none; } }
.g-mochi-saute { position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -50%); opacity: 0; animation-name: g-saute; }
@keyframes g-saute { 0%, 56% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 64% { opacity: 1; transform: translate(-50%, -60%) scale(1.02); } 72% { transform: translate(-50%, -50%) scale(1); } 80% { transform: translate(-50%, -56%); } 88%, 94% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }
.g-c7 { animation-name: g-c7; }
@keyframes g-c7 { 0% { left: 75%; top: 85%; } 30%, 100% { left: calc(50% + 6px); top: calc(50% + 34px); } }
.g-c7::after { animation-name: g-clic7; }
@keyframes g-clic7 { 0%, 41% { opacity: 0; transform: scale(.4); } 44% { opacity: 1; } 51%, 100% { opacity: 0; transform: scale(1.6); } }
.g-s7 .g-c7 { animation-name: g-c7, g-cache7; animation-timing-function: ease-in-out, steps(1); }
@keyframes g-cache7 { 0%, 55% { visibility: visible; } 56%, 100% { visibility: hidden; } }

/* 8 · Connexion */
.g-appli { inset: 7% 16% 7% 16%; background: #2D2440; color: #fff; }
.g-connexion, .g-analyse { display: grid; justify-items: center; align-content: center; gap: 10px; height: calc(100% - 30px); padding: 0 12%; }
.g-con-titre { margin: 0 0 4px; font: 600 18px/1.2 var(--titre); text-align: center; }
.g-saisie { width: 100%; height: 36px; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 0 12px; display: flex; align-items: center; overflow: hidden; }
.g-saisie span { display: block; overflow: hidden; white-space: nowrap; width: 0; }
.g-saisie.g-email span { animation-name: g-tape-email; animation-timing-function: steps(18, end); }
.g-saisie.g-mdp span { animation-name: g-tape-mdp; animation-timing-function: steps(10, end); letter-spacing: 2px; }
@keyframes g-tape-email { 0%, 10% { width: 0; } 38%, 94% { width: 17ch; } 100% { width: 0; } }
@keyframes g-tape-mdp { 0%, 42% { width: 0; } 58%, 94% { width: 12ch; } 100% { width: 0; } }
.g-btn-app { background: var(--accent); color: #2D2440; font-weight: 700; padding: 10px 22px; border-radius: 10px; font-size: 14px; width: 100%; text-align: center; animation-name: g-presse8; }
@keyframes g-presse8 { 0%, 70% { filter: none; transform: none; } 73%, 77% { filter: brightness(.85); transform: scale(.97); } 80%, 100% { filter: none; transform: none; } }
.g-lien { font-size: 12px; color: rgba(255,255,255,.7); text-decoration: underline; }
.g-c8 { animation-name: g-c8; }
@keyframes g-c8 { 0%, 60% { left: 82%; top: 88%; } 70%, 100% { left: calc(50% + 6px); top: calc(50% + 97px); } }
.g-c8::after { animation-name: g-clic8; }
@keyframes g-clic8 { 0%, 71% { opacity: 0; transform: scale(.4); } 74% { opacity: 1; } 81%, 100% { opacity: 0; transform: scale(1.6); } }

/* 9 · Autorisations */
.g-s9 .g-reglages { inset: 12% 10% 12% 10%; }
.g-reg-liste { padding: 14px; display: grid; gap: 6px; }
.g-ligne-app { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #F7F5FA; font-size: 14px; }
.g-ligne-app .g-icone-app { width: 30px; height: 30px; border-radius: 8px; }
.g-pastille-app { width: 30px; height: 30px; border-radius: 8px; }
.g-pastille-app.g-gris { background: #E3DEEA; }
.g-inter { margin-left: auto; width: 38px; height: 22px; border-radius: 11px; background: #D9D4E0; position: relative; }
.g-inter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.g-inter.g-bascule { animation-name: g-inter-fond; }
.g-inter.g-bascule::after { animation: inherit; animation-name: g-inter-rond; }
@keyframes g-inter-fond { 0%, 70% { background: #D9D4E0; } 74%, 96% { background: #34C759; } 100% { background: #D9D4E0; } }
@keyframes g-inter-rond { 0%, 70% { transform: none; } 74%, 96% { transform: translateX(16px); } 100% { transform: none; } }
.g-ligne-app.g-vise { animation-name: g-vise; }
@keyframes g-vise { 0%, 58% { box-shadow: none; } 62%, 96% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: none; } }
.g-s9 .g-micro { z-index: 6; animation-name: g-alerte9; }
.g-icone-micro { width: 36px; fill: none; stroke: var(--encre); stroke-width: 1.8; stroke-linecap: round; }
@keyframes g-alerte9 { 0%, 4% { opacity: 0; transform: translate(-50%, -46%) scale(.92); } 10%, 38% { opacity: 1; transform: translate(-50%, -50%); } 44%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.g-s9 .g-micro .g-principal { animation-name: g-presse9; }
@keyframes g-presse9 { 0%, 30% { filter: none; } 32%, 36% { filter: brightness(.82); } 38%, 100% { filter: none; } }
.g-c9 { animation-name: g-c9; }
@keyframes g-c9 { 0% { left: 70%; top: 85%; } 22%, 36% { left: calc(50% + 6px); top: calc(50% + 21px); } 62%, 100% { left: calc(90% - 52px); top: calc(12% + 120px); } }
.g-c9::after { animation-name: g-clic9; }
@keyframes g-clic9 { 0%, 29% { opacity: 0; transform: scale(.4); } 32% { opacity: 1; } 38%, 66% { opacity: 0; transform: scale(1.5); } 69% { opacity: 1; transform: scale(.5); } 76%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes g-c9c { 0% { left: 60%; top: 85%; } 50%, 100% { left: calc(90% - 52px); top: calc(12% + 120px); } }
@keyframes g-clic9c { 0%, 66% { opacity: 0; transform: scale(.4); } 69% { opacity: 1; transform: scale(.5); } 76%, 100% { opacity: 0; transform: scale(1.6); } }

/* 10 · Prêt */
.g-note { inset: 8% 12% 44% 12%; }
.g-ecrit { margin: 0; padding: 18px; font-size: 17px; }
.g-ecrit span { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; animation-name: g-ecrit; animation-timing-function: steps(26, end); }
@keyframes g-ecrit { 0%, 52% { width: 0; } 70%, 94% { width: 26ch; } 100% { width: 0; } }
.g-pastille-dictee { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; background: #2D2440; box-shadow: 0 8px 20px rgba(45,36,64,.25); }
.g-pastille-dictee i { width: 4px; height: 8px; border-radius: 2px; background: var(--accent); animation-name: g-onde; }
.g-pastille-dictee i:nth-child(2) { animation-name: g-onde2; } .g-pastille-dictee i:nth-child(3) { animation-name: g-onde3; } .g-pastille-dictee i:nth-child(4) { animation-name: g-onde2; } .g-pastille-dictee i:nth-child(5) { animation-name: g-onde; }
@keyframes g-onde { 0%, 12% { height: 8px; } 16% { height: 14px; } 20% { height: 6px; } 24% { height: 16px; } 28% { height: 8px; } 32% { height: 12px; } 36% { height: 7px; } 40% { height: 15px; } 46%, 100% { height: 8px; } }
@keyframes g-onde2 { 0%, 12% { height: 8px; } 16% { height: 20px; } 21% { height: 10px; } 25% { height: 22px; } 30% { height: 9px; } 35% { height: 18px; } 41% { height: 11px; } 46%, 100% { height: 8px; } }
@keyframes g-onde3 { 0%, 12% { height: 8px; } 17% { height: 26px; } 22% { height: 12px; } 27% { height: 24px; } 33% { height: 14px; } 38% { height: 22px; } 46%, 100% { height: 8px; } }
.g-clavier { position: absolute; left: 8%; right: 8%; bottom: 6%; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--g-trait); }
.g-clavier span { height: 40px; border-radius: 7px; background: #F1EEF5; border: 1px solid var(--g-trait); border-bottom-width: 3px; display: grid; place-items: center; font-size: 13px; color: var(--encre-doux); }
.g-clavier .g-touche-fn { font-weight: 800; color: var(--encre); animation-name: g-fn; }
@keyframes g-fn { 0%, 8% { background: #F1EEF5; transform: none; box-shadow: none; } 12%, 46% { background: var(--accent); color: #fff; transform: translateY(2px); border-bottom-width: 1px; box-shadow: 0 0 0 3px var(--accent-pale); } 50%, 100% { background: #F1EEF5; transform: none; } }
.g-analyse .g-score { margin: 0; font: 600 40px/1 var(--titre); position: relative; height: 44px; display: flex; align-items: baseline; gap: 4px; }
.g-analyse .g-score small { font-size: 16px; opacity: .6; }
.g-score .g-avant { color: #FF8FA8; animation-name: g-avant; }
.g-score .g-apres { color: #6DBB7C; position: absolute; left: 0; opacity: 0; animation-name: g-apres; }
@keyframes g-avant { 0%, 60% { opacity: 1; } 66%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes g-apres { 0%, 60% { opacity: 0; transform: translateY(8px); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.g-analyse .g-btn-app { animation-name: g-presse10; }
@keyframes g-presse10 { 0%, 36% { filter: none; transform: none; } 39%, 43% { filter: brightness(.85); transform: scale(.97); } 46%, 100% { filter: none; transform: none; } }
.g-c10 { animation-name: g-c10; }
@keyframes g-c10 { 0% { left: 75%; top: 88%; } 30%, 100% { left: calc(50% + 6px); top: calc(50% + 78px); } }
.g-c10::after { animation-name: g-clic10; }
@keyframes g-clic10 { 0%, 37% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 47%, 100% { opacity: 0; transform: scale(1.6); } }


/* Téléphone */
@media (max-width: 820px) {
  .g-scene { font-size: 12px; }
  .g-icone-app { width: 44px; height: 44px; }
  .g-fichier { width: 80px; }
  .g-clavier span { height: 30px; font-size: 11px; }
}
/* Mouvement réduit : le site coupe toutes les animations, les scènes n'auraient plus de sens. */
@media (prefers-reduced-motion: reduce) { .g-scene { display: none; } }

/* =====================================================================
   Page Télécharger (FR /telecharger/, EN /en/download/)
   ===================================================================== */
.dl { padding: 4px 0 36px; }
.dl-btn { min-height: 60px; padding: 0 34px; font-size: 1.1rem; }
.dl-meta { margin: 16px 0 0; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.dl-req { margin: 6px 0 0; color: var(--encre-doux); max-width: 36em; }
.installer { padding: 64px 0 56px; background: var(--blanc); border-top: 1px solid var(--encre-trait); border-bottom: 1px solid var(--encre-trait); margin: 8px 0 28px; }
.installer .wrap { max-width: calc(1040px + 2 * var(--gouttiere)); }
.installer-tete { margin-bottom: 44px; }
.installer-tete h2 { font-size: clamp(2rem, 5vw, 2.9rem); }
.installer-tete p { color: var(--encre-doux); margin: 12px 0 0; max-width: 38em; }
.etapes-install { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.etape-install { display: grid; gap: 20px; align-items: center; }
.etape-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--encre); color: var(--blanc); font: 600 1rem/1 var(--titre); margin-bottom: 14px; }
.etape-texte h3 { font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -.015em; line-height: 1.12; }
.etape-texte p { color: var(--encre-doux); margin: 10px 0 0; }
.etape-install > * { min-width: 0; }
@media (min-width: 860px) {
  .etape-install { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; }
}