/* Base et keyframes — repris tels quels du prototype Japan Memo. */ * { box-sizing: border-box; } /* Le mot-clé `only` interdit au navigateur d'appliquer son mode sombre automatique : sans lui, Brave et Chrome recolorent l'intégralité de la page sur un appareil en apparence sombre, alors que l'application gère son propre thème. Posé en CSS pour être effectif dès la première image ; src/app.js repose ensuite `color-scheme` en style inline sur — plus prioritaire que cette règle — lorsque le thème sombre est choisi. */ html { color-scheme: only light; } body { margin: 0; background: #e9e4da; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } a { color: inherit; text-decoration: none; } /* Les zones défilables du téléphone n'affichent pas de barre. */ ::-webkit-scrollbar { width: 0; height: 0; } .jm-scroll { scrollbar-width: none; -ms-overflow-style: none; } @keyframes jm-pop { 0% { transform: scale(0.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes jm-slide { from { transform: translateY(101%); } to { transform: translateY(0); } } @keyframes jm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes jm-drop { 0% { transform: translateY(-8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes jm-rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* Encart « Compléter avec l'IA ». Le décalage d'animation est posé en style inline au rendu pour que le dégradé reprenne à sa phase courante plutôt que de repartir de zéro à chaque reconstruction du DOM (cf. anim.js). */ .jm-ai-btn { background: linear-gradient(90deg, #4f8cff, #8b6cff, #ff5db1, #ff9d4d, #4f8cff) !important; background-size: 300% 100% !important; animation: jm-rainbow 4s linear infinite; } .jm-ai-title { background: linear-gradient(90deg, #4f8cff, #8b6cff, #ff5db1, #ff9d4d, #4f8cff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: jm-rainbow 5s linear infinite; } .jm-ai-card { border: 1.5px solid transparent !important; background: linear-gradient(var(--ai-in), var(--ai-in)) padding-box, linear-gradient(90deg, #4f8cff, #8b6cff, #ff5db1, #ff9d4d, #4f8cff) border-box !important; background-size: auto, 300% 100% !important; animation: jm-rainbow 6s linear infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }