/* ===================================================================== modes.css — Styles des modes adaptatifs (attribut data-mode sur ) ===================================================================== Importé EN DERNIER dans main.css pour gagner la cascade. Phase A : squelette (aucune règle active → app identique en normal). Phase B : mode ANCRAGE (TSA). Phase C : mode ÉLAN (TDAH). ===================================================================== */ /* ───────────────────────── MODE NORMAL ────────────────────────────── Aucune règle : le mode normal = design system par défaut (baseline). */ /* ───────────────────────── MODE ÉLAN (TDAH) ───────────────────────── Focus 1 bloc, récompenses, Pomodoro, "Passer". À implémenter (Phase C). */ [data-mode="elan"] #quiz-section { display: flex; flex-direction: column; justify-content: center; min-height: 80vh; } @keyframes elanSuccessPulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(39, 174, 96, 0.4); } 100% { transform: scale(1); } } .anim-success { animation: elanSuccessPulse 0.5s ease-out; } /* ───────────────────────── MODE ANCRAGE (TSA) ─────────────────────── Faible contraste, zéro animation, nav fixe, littéral. À implémenter (Phase B). Note Phase B : respecter aussi la préférence système : @media (prefers-reduced-motion: reduce) { ... } */ [data-mode="ancrage"] { --paper: #f4f1ea; --paper-2: #ebe6df; --ink: #3a3835; --ink-soft: #5b5854; --accent: #5e6b72; --accent-hover: #4e5a60; --danger: #b3564e; --success: #4a7c59; } [data-mode="ancrage"] *, [data-mode="ancrage"] *::before, [data-mode="ancrage"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-mode="ancrage"] #timer-display { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } [data-mode="elan"] #pomodoro-skip { display: inline-block !important; } [data-mode="elan"] #pomodoro-timer { display: inline-block !important; }