/* =========================================================================== SUPER AI — COUCHE VISUELLE v210 =========================================================================== CE FICHIER N'AGIT QUE SI PORTE LA CLASSE « sai-effets ». Cette classe est posee par effets-v210.js, et par lui seul. Tant qu'elle n'est pas la, ce fichier ne change RIEN, pas un pixel : chaque regle commence par « html.sai-effets ». C'est l'interrupteur. Pour tout eteindre : dans effets-v210.js, mettre EFFETS = false. Pour tout enlever : retirer les deux lignes ajoutees dans wallet.html. REGLE QUE JE ME SUIS DONNEE EN L'ECRIVANT ----------------------------------------- Aucune de ces regles ne touche a la mise en page : ni display, ni position, ni width, ni height, ni margin, ni padding sur un element existant. Uniquement de la lumiere (opacity, box-shadow, background d'un pseudo-element) et du mouvement (transform). Une animation qui ne touche que transform et opacity ne provoque aucun recalcul de mise en page : elle ne peut donc pas deplacer un bouton, ni cacher un texte, ni casser un defilement. Trois exceptions assumees, et pourquoi elles sont sans risque : · .btn-primary recoit position:relative et overflow:hidden — ses seuls enfants sont un et un , tous deux en flux. · .tab recoit position:relative — c'est une boite flex sans enfant absolu. · .logo a deja position:relative dans la feuille d'origine. Et le mouvement s'arrete tout seul chez qui a demande moins d'animations dans les reglages de son telephone (voir la toute fin). =========================================================================== */ /* ───────────────────────────────────────────────────────────────────────── 1. L'AURORE Une lueur bleue et or qui derive lentement derriere l'application. Elle est posee sur ::before du chassis, donc DERRIERE tous les ecrans, et ne recoit aucun clic. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .phone::before{ content:'';position:absolute;inset:-25%;z-index:0;pointer-events:none; background: radial-gradient(38% 30% at 22% 18%, rgba(59,130,246,.30), transparent 70%), radial-gradient(34% 26% at 82% 30%, rgba(229,161,0,.16), transparent 70%), radial-gradient(46% 34% at 50% 96%, rgba(29,78,216,.22), transparent 72%); animation:saiAurore 34s ease-in-out infinite; will-change:transform,opacity; } html[data-theme="clair"].sai-effets .phone::before{ background: radial-gradient(38% 30% at 22% 16%, rgba(59,130,246,.16), transparent 70%), radial-gradient(34% 26% at 84% 30%, rgba(229,161,0,.15), transparent 70%), radial-gradient(46% 34% at 50% 97%, rgba(29,78,216,.10), transparent 72%); } @keyframes saiAurore{ 0% {transform:translate3d(0,0,0) scale(1); opacity:.85} 33% {transform:translate3d(3%,-2%,0) scale(1.08); opacity:1} 66% {transform:translate3d(-3%,2.5%,0) scale(1.04); opacity:.9} 100%{transform:translate3d(0,0,0) scale(1); opacity:.85} } /* ───────────────────────────────────────────────────────────────────────── 2. LE REFLET DU BANDEAU Un eclat traverse la bande SUPER AI toutes les sept secondes, comme la lumiere sur un bouclier qu'on tourne. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .demo-strip{overflow:hidden} html.sai-effets .demo-strip::after{ content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:saiReflet 7s ease-in-out infinite; } html[data-theme="clair"].sai-effets .demo-strip::after{ background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent); } @keyframes saiReflet{ 0%,68%{transform:translateX(0)} 100% {transform:translateX(360%)} } /* ───────────────────────────────────────────────────────────────────────── 3. LE BOUCLIER QUI RESPIRE Sur les grands logos seulement (60 px et plus) : l'ecran d'accueil, la fiche « A propos ». Les petites pastilles des listes ne bougent pas, sinon la page entiere fremit. ───────────────────────────────────────────────────────────────────────── */ /* Le choix se fait sur la taille demandee, ecrite dans la variable --s de l'element lui-meme : seules les grandes pastilles — 60, 64 et 76 px — respirent. Les petites, celles des listes et des en-tetes, ne bougent pas d'un cheveu : une page entiere qui fremit donne le mal de mer. */ html.sai-effets .logo[style*="--s:60px"], html.sai-effets .logo[style*="--s:64px"], html.sai-effets .logo[style*="--s:76px"]{ animation:saiSouffle 5.5s ease-in-out infinite; } html.sai-effets .logo[style*="--s:60px"]::after, html.sai-effets .logo[style*="--s:64px"]::after, html.sai-effets .logo[style*="--s:76px"]::after{ content:'';position:absolute;inset:-30%;border-radius:50%;z-index:-1; pointer-events:none; background:radial-gradient(circle,rgba(59,130,246,.34) 0%,rgba(59,130,246,.10) 45%,transparent 68%); animation:saiHalo 5.5s ease-in-out infinite; } /* En plein jour, le meme halo poserait une tache bleue sur du blanc. On le reduit de moitie : il reste une aureole, pas un nuage. */ html[data-theme="clair"].sai-effets .logo[style*="--s:60px"]::after, html[data-theme="clair"].sai-effets .logo[style*="--s:64px"]::after, html[data-theme="clair"].sai-effets .logo[style*="--s:76px"]::after{ inset:-22%; background:radial-gradient(circle,rgba(59,130,246,.18) 0%,rgba(59,130,246,.05) 48%,transparent 70%); } @keyframes saiSouffle{ 0%,100%{transform:translateY(0) scale(1)} 50% {transform:translateY(-3.5px) scale(1.035)} } @keyframes saiHalo{ 0%,100%{opacity:.45; transform:scale(.94)} 50% {opacity:.95; transform:scale(1.10)} } /* ───────────────────────────────────────────────────────────────────────── 4. LE BOUTON QUI APPELLE Un eclat traverse le bouton dore toutes les cinq secondes. C'est ce qui fait qu'on a envie d'appuyer, et c'est exactement le but. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .btn-primary{ position:relative; overflow:hidden; } html.sai-effets .btn-primary::after{ content:'';position:absolute;top:-60%;bottom:-60%;left:-45%;width:32%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(0) rotate(12deg); animation:saiEclatBouton 5s ease-in-out infinite; } html.sai-effets .btn-primary:disabled::after{ display:none } @keyframes saiEclatBouton{ 0%,62%{transform:translateX(0) rotate(12deg)} 100% {transform:translateX(470%) rotate(12deg)} } /* L'appui repond plus franchement, avec un retour elastique. */ html.sai-effets .btn{ transition:transform .14s cubic-bezier(.34,1.7,.5,1),opacity .16s,background .16s } html.sai-effets .btn:active{ transform:scale(.955) } html.sai-effets .btn-primary{ box-shadow:0 10px 26px -10px rgba(255,140,60,.7),0 0 0 0 rgba(229,161,0,.45) } html.sai-effets .btn-primary:active{ box-shadow:0 4px 14px -8px rgba(255,140,60,.8),0 0 0 6px rgba(229,161,0,.14) } /* ───────────────────────────────────────────────────────────────────────── 5. LES QUATRE BULLES DE L'ACCUEIL Elles arrivent l'une apres l'autre, et repondent a l'appui. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .action .bubble{ transition:transform .16s cubic-bezier(.34,1.7,.5,1),box-shadow .16s; } html.sai-effets .action:active .bubble{ transform:scale(.9); box-shadow:0 0 0 7px rgba(229,161,0,.13); } /* ⚠ « backwards » et non « both » — ce choix n'est pas cosmetique. « both » garde l'etat de depart APRES la fin de l'animation : si une animation etait interrompue, le bouton resterait invisible. « backwards » ne remplit que le temps d'attente, au plus 17 centiemes de seconde. Rien ne peut rester cache. */ html.sai-effets .view.active .action{ animation:saiMonte .42s cubic-bezier(.22,.9,.3,1) backwards } html.sai-effets .view.active .action:nth-child(1){ animation-delay:.02s } html.sai-effets .view.active .action:nth-child(2){ animation-delay:.07s } html.sai-effets .view.active .action:nth-child(3){ animation-delay:.12s } html.sai-effets .view.active .action:nth-child(4){ animation-delay:.17s } @keyframes saiMonte{ from{opacity:0;transform:translateY(9px) scale(.96)} to {opacity:1;transform:none} } /* ───────────────────────────────────────────────────────────────────────── 6. L'ONGLET ACTIF Un point dore se pose sous l'onglet ou l'on se trouve. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .tab{ position:relative } html.sai-effets .tab::after{ content:'';position:absolute;top:6px;left:50%; width:5px;height:5px;margin-left:-2.5px;border-radius:50%; background:var(--accent);opacity:0;transform:scale(.4); transition:opacity .22s,transform .28s cubic-bezier(.34,1.7,.5,1); pointer-events:none; } html.sai-effets .tab.on::after{ opacity:1;transform:scale(1) } html.sai-effets .tab.on svg{ animation:saiOngletPop .34s cubic-bezier(.34,1.7,.5,1) } @keyframes saiOngletPop{ 0%{transform:scale(.82)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} } /* ───────────────────────────────────────────────────────────────────────── 7. LE MONTANT ⚠ Le chiffre n'est JAMAIS anime : aucun total intermediaire faux ne doit s'afficher, meme un dixieme de seconde. Seule la boite qui le contient respire. Le nombre affiche est, a chaque image, le vrai. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .balance{ transition:transform .3s cubic-bezier(.34,1.7,.5,1) } html.sai-effets .balance.sai-pop{ animation:saiBattement .58s cubic-bezier(.34,1.6,.4,1) } @keyframes saiBattement{ 0%{transform:scale(1)} 34%{transform:scale(1.055)} 100%{transform:scale(1)} } html.sai-effets .balance-delta{ transition:transform .2s } html.sai-effets .balance-delta.sai-pop{ animation:saiMonte .4s cubic-bezier(.22,.9,.3,1) } /* ───────────────────────────────────────────────────────────────────────── 8. LE TOUR DE PAGE L'ecran qui arrive vient d'un peu plus loin, celui qui part s'efface. On remplace l'animation d'origine, on n'en ajoute pas une deuxieme. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .view.active{ animation:saiPageIn .34s cubic-bezier(.22,.85,.26,1); } @keyframes saiPageIn{ from{opacity:0;transform:translateX(22px) scale(.982)} to {opacity:1;transform:none} } html.sai-effets .view.back.active{ animation:saiPageBack .34s cubic-bezier(.22,.85,.26,1); } @keyframes saiPageBack{ from{opacity:0;transform:translateX(-22px) scale(.982)} to {opacity:1;transform:none} } /* ───────────────────────────────────────────────────────────────────────── 9. LES BLOCS QUI SE POSENT Les groupes de reglages et les cartes arrivent en cascade courte. Uniquement opacite et translation : rien ne se decale durablement. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .view.active .settings-group{ animation:saiPose .4s cubic-bezier(.22,.9,.3,1) backwards } html.sai-effets .view.active .settings-group:nth-of-type(1){ animation-delay:.03s } html.sai-effets .view.active .settings-group:nth-of-type(2){ animation-delay:.07s } html.sai-effets .view.active .settings-group:nth-of-type(3){ animation-delay:.11s } html.sai-effets .view.active .settings-group:nth-of-type(4){ animation-delay:.15s } html.sai-effets .view.active .settings-group:nth-of-type(n+5){ animation-delay:.18s } @keyframes saiPose{ from{opacity:0;transform:translateY(7px)} to {opacity:1;transform:none} } /* ───────────────────────────────────────────────────────────────────────── 10. L'ONDULATION AU TOUCHER Dessinee dans un calque a part, pose sur le chassis. Elle n'entre jamais dans un bouton : rien de ce que l'application lit ou reecrit n'est touche. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .sai-calque{ position:absolute;inset:0;z-index:95;pointer-events:none;overflow:hidden; border-radius:52px; } html.sai-effets .sai-onde{ position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; background:radial-gradient(circle,rgba(229,161,0,.42),rgba(229,161,0,0) 70%); animation:saiOnde .62s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes saiOnde{ from{transform:scale(1);opacity:.95} to {transform:scale(13);opacity:0} } /* ───────────────────────────────────────────────────────────────────────── 11. LE PETIT DETAIL QUI FAIT RESTER La fleche de rafraichissement tourne quand on la touche ; les lignes de reglage s'enfoncent legerement ; les cartes se soulevent. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets [data-act="actualiserTout"]{ transition:transform .3s } html.sai-effets [data-act="actualiserTout"]:active{ transform:rotate(-180deg) } html.sai-effets .row, html.sai-effets .item, html.sai-effets .tok{ transition:transform .13s,background .16s } html.sai-effets .row:active, html.sai-effets .item:active, html.sai-effets .tok:active{ transform:scale(.988) } html.sai-effets .card{ transition:transform .2s,box-shadow .2s } /* ───────────────────────────────────────────────────────────────────────── 12. CHEZ QUI A DEMANDE MOINS D'ANIMATIONS Le telephone le dit au navigateur ; on l'ecoute. Il reste la lumiere, il ne reste plus le mouvement. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ html.sai-effets .phone::before, html.sai-effets .demo-strip::after, html.sai-effets .logo[style*="--s:60px"], html.sai-effets .logo[style*="--s:64px"], html.sai-effets .logo[style*="--s:76px"], html.sai-effets .logo[style*="--s:60px"]::after, html.sai-effets .logo[style*="--s:64px"]::after, html.sai-effets .logo[style*="--s:76px"]::after, html.sai-effets .btn-primary::after, html.sai-effets .view.active .action, html.sai-effets .view.active .settings-group, html.sai-effets .balance.sai-pop, html.sai-effets .tab.on svg, html.sai-effets .sai-onde{ animation:none !important; } html.sai-effets .view.active, html.sai-effets .view.back.active{ animation:fade .2s } } /* ───────────────────────────────────────────────────────────────────────── 13. LE CIEL DE JETONS L'esprit du site, ramene dans le portefeuille : quelques jetons qui derivent tres lentement, tres loin derriere. Le calque est pose sur le chassis, DERRIERE la zone d'ecrans (z-index 0, la zone est au-dessus), il ne recoit aucun clic et n'entre dans aucun ecran. Sur les pages remplies on ne le devine qu'a peine ; sur l'ecran d'ouverture, il occupe le grand vide du haut. ───────────────────────────────────────────────────────────────────────── */ html.sai-effets .sai-ciel{ position:absolute;top:74px;left:0;right:0;height:44%;z-index:0; pointer-events:none;overflow:hidden; transition:opacity .5s ease; } /* DANS le portefeuille, le ciel s'efface. La regle est simple et je la tiens : devant un montant en euros, rien ne flotte. Les jetons ne se voient que sur les ecrans d'ouverture, la ou il n'y a rien a lire. */ html.sai-effets.sai-dedans .sai-ciel{ opacity:0 } html.sai-effets .sai-jeton{ position:absolute;border-radius:50%; display:grid;place-items:center; font-family:var(--titre);font-weight:700; color:rgba(59,130,246,.55); background:radial-gradient(circle at 32% 28%,rgba(59,130,246,.16),rgba(29,78,216,.05)); box-shadow:inset 0 0 0 1px rgba(59,130,246,.22); opacity:.5; animation:saiDerive linear infinite; will-change:transform; } html.sai-effets .sai-jeton.or{ color:rgba(229,161,0,.6); background:radial-gradient(circle at 32% 28%,rgba(229,161,0,.16),rgba(229,161,0,.04)); box-shadow:inset 0 0 0 1px rgba(229,161,0,.24); } html[data-theme="clair"].sai-effets .sai-jeton{ opacity:.34 } @keyframes saiDerive{ 0% {transform:translate3d(0,0,0) rotate(0deg)} 25% {transform:translate3d(7px,-11px,0) rotate(4deg)} 50% {transform:translate3d(-6px,-18px,0) rotate(-3deg)} 75% {transform:translate3d(-9px,-8px,0) rotate(3deg)} 100%{transform:translate3d(0,0,0) rotate(0deg)} } @media (prefers-reduced-motion: reduce){ html.sai-effets .sai-jeton{ animation:none !important } } /* ───────────────────────────────────────────────────────────────────────── 14. SUR UN VRAI TELEPHONE, ET DANS L'APPLICATION INSTALLEE Le portefeuille abandonne alors son faux chassis : plus d'encoche dessinee, plus de barre d'etat, plus de coins arrondis, et la zone d'ecrans remonte a 22 px sous l'encoche reelle. Nos deux calques doivent suivre exactement le meme deplacement, sinon le ciel de jetons commence 52 px trop bas et l'ondulation est coupee par un arrondi qui n'existe plus. Les memes conditions que la feuille d'origine, au mot pres : max-width 900px, et les trois modes « installee ». ───────────────────────────────────────────────────────────────────────── */ @media (max-width:900px){ html.sai-effets .sai-ciel{ top:calc(22px + env(safe-area-inset-top)) } html.sai-effets .sai-calque{ border-radius:0 } html.sai-effets .phone::before{ inset:-15% } } @media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){ html.sai-effets .sai-ciel{ top:calc(22px + env(safe-area-inset-top)) } html.sai-effets .sai-calque{ border-radius:0 } html.sai-effets .phone::before{ inset:-15% } } /* Sur les petits ecrans — iPhone SE, Galaxy A — les jetons sont reduits : a 360 px de large, huit pastilles de 46 px encombrent. On les rapetisse d'un tiers plutot que d'en supprimer. */ @media (max-width:400px){ html.sai-effets .sai-jeton{ transform-origin:center; zoom:.86 } } @media (max-width:360px){ html.sai-effets .sai-jeton{ zoom:.74 } } /* Sous 680 px de haut (iPhone SE couche, vieux Android), le portefeuille escamote son bandeau de marque pour rendre la place au contenu — c'est sa regle a lui, ligne 1495 du portefeuille. La zone d'ecrans remonte alors tout en haut : le ciel de jetons doit remonter avec elle. */ @media (max-height:680px){ html.sai-effets .sai-ciel{ top:env(safe-area-inset-top) } } /* Sur un ecran court — iPhone SE, vieux Android — le bouclier remonte et les jetons du bas viendraient se poser dessus. Mesure faite sur un 320x568 : le bouclier commence a 128 px du haut. On raccourcit donc le ciel et on retire les trois jetons les plus bas. Il en reste cinq, et plus rien ne touche le logo. */ @media (max-height:720px){ html.sai-effets .sai-ciel{ height:34% } html.sai-effets .sai-jeton:nth-child(n+6){ display:none } }