/* ===================================================================== Calcul Concret — Feuille de style principale --------------------------------------------------------------------- Sommaire : 1. Variables (thème clair) + thème sombre 2. Reset / base 3. Typographie 4. Utilitaires (cartes, badges, boutons) 5. En-tête (header, mascotte, étoiles, options) 6. Mise en page principale (grille) 7. Calculatrice (écran + clavier) 8. Histoire + illustration 9. Zone de réponse (mini-clavier, feedback) 10. Historique 11. Paramètres (modale) 12. Animations (apparition, rebond, secousse, confettis) 13. Responsive (tablette, mobile) 14. Accessibilité (focus, skip-link, reduce-motion) ===================================================================== */ /* ============================ 1. VARIABLES ========================== */ :root { /* Couleurs pastel de base */ --c-primary: #6c5ce7; /* violet */ --c-primary-d: #5a4bd1; --c-accent: #00cec9; /* turquoise */ --c-success: #00b894; /* vert */ --c-danger: #ff7675; /* rouge doux */ --c-warning: #fdcb6e; /* jaune */ --c-pink: #fd79a8; --c-blue: #74b9ff; /* Surfaces */ --bg: #eef2ff; /* fond general pastel */ --bg-grad-a: #a8c0ff; --bg-grad-b: #fdb4ff; --surface: #ffffff; --surface-2: #f7f9ff; --text: #2d3436; --text-soft: #636e72; --border: #e3e8f0; /* Ombres douces */ --shadow-sm: 0 2px 6px rgba(108, 92, 231, 0.08); --shadow-md: 0 8px 20px rgba(108, 92, 231, 0.12); --shadow-lg: 0 16px 40px rgba(108, 92, 231, 0.18); /* Formes */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 36px; /* Tailles */ --header-h: 80px; --max-w: 1280px; /* Polices */ --font-body: 'Quicksand', 'Segoe UI', system-ui, sans-serif; --font-title: 'Baloo 2', 'Quicksand', cursive; /* Transitions */ --t-fast: 0.15s ease; --t: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* rebond */ } /* Mode sombre : on bascule les variables via une classe sur */ body.dark { --bg: #1a1a2e; --bg-grad-a: #16213e; --bg-grad-b: #0f3460; --surface: #23234a; --surface-2: #1c1c3a; --text: #f5f5fa; --text-soft: #b2b2c8; --border: #34346a; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); } /* ============================ 2. RESET / BASE ====================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* * Important : l'attribut [hidden] doit toujours l'emporter sur les * règles "display: flex / grid" définies plus bas dans cette feuille, * sinon les éléments masqués via JS (ex. modale de paramètres) resteraient * visibles. On applique donc display:none avec !important. */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; color: var(--text); background: radial-gradient(1200px 800px at 10% -10%, var(--bg-grad-a) 0%, transparent 60%), radial-gradient(1200px 800px at 110% 10%, var(--bg-grad-b) 0%, transparent 60%), var(--bg); background-attachment: fixed; overflow-x: hidden; } /* Police adaptée dyslexie : on surcharge si la classe est posée */ body.font-dyslexic { --font-body: 'OpenDyslexic', 'Comic Sans MS', var(--font-body); --font-title: 'OpenDyslexic', 'Baloo 2', var(--font-title); letter-spacing: 0.02em; } img, svg { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input { font-family: inherit; } /* ============================ 3. TYPOGRAPHIE ======================= */ h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.15; margin: 0; } p { margin: 0; } /* ============================ 4. UTILITAIRES ======================== */ .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.5rem; border: 2px solid transparent; transition: transform var(--t), box-shadow var(--t); } /* Boutons génériques */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; font-size: 1.05rem; font-weight: 700; font-family: var(--font-title); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); user-select: none; -webkit-tap-highlight-color: transparent; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(1px) scale(0.98); } .btn--primary { background: var(--c-primary); color: #fff; } .btn--accent { background: var(--c-accent); color: #fff; } .btn--ghost { background: transparent; border: 2px dashed var(--border); } .btn--big { padding: 1.1rem 2rem; font-size: 1.25rem; width: 100%; } .btn--small { padding: 0.5rem 1rem; font-size: 0.9rem; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; background: var(--surface-2); box-shadow: var(--shadow-sm); } .badge--theme { background: linear-gradient(135deg, #ffeaa7, #fab1a0); } .badge--op { background: linear-gradient(135deg, #a29bfe, #74b9ff); color: #fff; } /* ============================ 5. EN-TÊTE =========================== */ .app-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid var(--border); box-shadow: var(--shadow-sm); } body.dark .app-header { background: rgba(35, 35, 74, 0.85); } .app-header__left { display: flex; align-items: center; gap: 0.85rem; } .mascotte { animation: bobbing 2.5s ease-in-out infinite; } .mascotte.bounce { animation: bigBounce 0.6s var(--t); } .app-title { font-size: clamp(1.3rem, 3vw, 1.9rem); background: linear-gradient(135deg, var(--c-primary), var(--c-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; align-items: center; gap: 0.4rem; } .app-title__icon { -webkit-text-fill-color: initial; } .app-header__right { display: flex; align-items: center; gap: 0.4rem; } .stars { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.9rem; background: linear-gradient(135deg, #ffeaa7, #fdcb6e); border-radius: 999px; font-weight: 800; font-family: var(--font-title); color: #6c5ce7; box-shadow: var(--shadow-sm); } .stars__icon { font-size: 1.1rem; } .stars.pop { animation: popStar 0.5s var(--t); } .icon-btn { width: 46px; height: 46px; border-radius: 50%; font-size: 1.35rem; background: var(--surface-2); box-shadow: var(--shadow-sm); transition: transform var(--t-fast), background var(--t-fast); -webkit-tap-highlight-color: transparent; } .icon-btn:hover { transform: scale(1.1); } .icon-btn:active { transform: scale(0.92); } .icon-btn[data-on="false"] { opacity: 0.45; } /* ============================ 6. MISE EN PAGE ====================== */ .app-main { max-width: var(--max-w); margin: 0 auto; padding: 1.5rem; display: grid; grid-template-columns: minmax(320px, 420px) 1fr; grid-template-areas: "welcome welcome" "calc story" "history history"; gap: 1.5rem; } .welcome { grid-area: welcome; } .calc-panel { grid-area: calc; } .story-panel { grid-area: story; } .history-panel{ grid-area: history; } .welcome__text { font-size: 1.1rem; font-weight: 600; } .panel__title { font-size: 1.4rem; margin-bottom: 1rem; color: var(--c-primary); } body.dark .panel__title { color: var(--c-blue); } /* Apparition progressive des cartes */ .card.entering { animation: fadeUp 0.5s var(--t) both; } /* ============================ 7. CALCULATRICE ====================== */ .calc-screen { background: linear-gradient(135deg, #2d3436, #636e72); color: #dfe6e9; border-radius: var(--radius-md); padding: 1.2rem 1.5rem; min-height: 90px; display: flex; align-items: center; justify-content: flex-end; box-shadow: inset 0 2px 8px rgba(0,0,0,0.3); margin-bottom: 0.75rem; border: 3px solid var(--border); } .calc-screen__expr { font-family: var(--font-title); font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 800; word-break: break-all; text-align: right; } .calc-error { color: var(--c-danger); font-weight: 700; background: #fff5f5; border: 2px solid #ffd6d6; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); margin: 0 0 0.75rem; animation: shake 0.4s; } body.dark .calc-error { background: rgba(255, 118, 117, 0.15); border-color: rgba(255,118,117,0.4); } .calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } /* Touches */ .key { aspect-ratio: 1 / 1; border-radius: var(--radius-md); font-size: 1.6rem; font-weight: 800; font-family: var(--font-title); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; } .key:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .key:active { transform: scale(0.93); } .key--num { background: linear-gradient(135deg, #ffffff, #f0f4ff); } .key--op { background: linear-gradient(135deg, #a29bfe, #6c5ce7); color: #fff; } .key--act { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); } .key--go { grid-column: span 4; aspect-ratio: auto; padding: 1rem; font-size: 1.4rem; background: linear-gradient(135deg, #00b894, #00cec9); color: #fff; } .key--zero { /* naturellement placé dans la grille */ } .key.pulse { animation: pulseKey 0.25s; } /* ============================ 8. HISTOIRE + ILLUSTRATION ============ */ .story-panel { display: flex; flex-direction: column; gap: 1rem; } .story-meta { display: flex; gap: 0.5rem; } .story-text { background: var(--surface-2); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; font-size: 1.2rem; line-height: 1.7; border-left: 6px solid var(--c-pink); } .story-text .q { display: block; margin-top: 0.6rem; font-family: var(--font-title); font-weight: 700; color: var(--c-primary); } body.dark .story-text .q { color: var(--c-blue); } .story-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .story-actions--bottom { margin-top: auto; } .illustration { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0 10px, rgba(255,255,255,0.3) 10px 20px), var(--surface-2); border-radius: var(--radius-md); padding: 1rem; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; overflow: hidden; border: 2px dashed var(--border); } .illustration svg { max-width: 100%; height: auto; } /* Sous-groupes d'illustration */ .il-group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; padding: 0.5rem; } .il-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; } .il-item { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; animation: popIn 0.4s var(--t) both; } .il-item.crossed { position: relative; } .il-item.crossed::after { content: ""; position: absolute; inset: -4px; background: linear-gradient(45deg, transparent 47%, var(--c-danger) 47% 53%, transparent 53%), linear-gradient(-45deg, transparent 47%, var(--c-danger) 47% 53%, transparent 53%); border-radius: 8px; animation: crossIn 0.3s var(--t) both; } .il-group--added .il-item { animation: dropIn 0.5s var(--t) both; } .il-label { font-family: var(--font-title); font-weight: 700; color: var(--text-soft); margin-bottom: 0.3rem; font-size: 1rem; } /* ============================ 9. ZONE DE RÉPONSE ==================== */ .answer { display: flex; flex-direction: column; gap: 0.85rem; } .answer__label { font-weight: 700; font-family: var(--font-title); font-size: 1.1rem; } .answer__row { display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: start; } .answer__input { width: 100%; text-align: center; font-size: 2.4rem; font-weight: 800; font-family: var(--font-title); padding: 0.5rem; border: 4px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); min-height: 80px; transition: border-color var(--t), background var(--t), transform var(--t); } .answer__input.correct { border-color: var(--c-success); background: rgba(0, 184, 148, 0.15); animation: pulseGood 0.5s var(--t); } .answer__input.wrong { border-color: var(--c-danger); background: rgba(255, 118, 117, 0.15); animation: shake 0.4s; } .answer-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .akey { aspect-ratio: 1.4 / 1; border-radius: var(--radius-sm); font-size: 1.3rem; font-weight: 800; font-family: var(--font-title); background: var(--surface-2); box-shadow: var(--shadow-sm); transition: transform var(--t-fast); -webkit-tap-highlight-color: transparent; } .akey:hover { transform: translateY(-2px); } .akey:active { transform: scale(0.93); } .akey--back { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); } .akey--clear { background: linear-gradient(135deg, #ff7675, #fab1a0); color: #fff; } .akey.pulse { animation: pulseKey 0.25s; } .answer__feedback { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; text-align: center; min-height: 1.6em; } .answer__feedback.good { color: var(--c-success); animation: pop 0.4s var(--t); } .answer__feedback.bad { color: var(--c-danger); animation: pop 0.4s var(--t); } /* ============================ 10. HISTORIQUE ======================= */ .history-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; max-height: 240px; overflow-y: auto; } .history-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; background: var(--surface-2); border-radius: var(--radius-sm); font-weight: 600; } .history-list li.history-empty { justify-content: center; color: var(--text-soft); font-style: italic; } .history-list .h-ok { color: var(--c-success); } .history-list .h-ko { color: var(--c-danger); } .history-list .h-expr { font-family: var(--font-title); font-weight: 800; } .history-list .h-time { margin-left: auto; font-size: 0.8rem; color: var(--text-soft); } /* ============================ 11. PARAMÈTRES (MODALE) ============== */ .overlay { position: fixed; inset: 0; background: rgba(45, 52, 54, 0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; animation: fadeIn 0.2s ease; } .modal { background: var(--surface); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2rem; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; position: relative; animation: fadeUp 0.3s var(--t) both; } .modal__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); font-size: 1.1rem; } .modal__title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--c-primary); } body.dark .modal__title { color: var(--c-blue); } .settings-form fieldset { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin: 0 0 1rem; } .settings-form legend { font-family: var(--font-title); font-weight: 700; padding: 0 0.5rem; color: var(--c-primary); } body.dark .settings-form legend { color: var(--c-blue); } .check { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-weight: 600; cursor: pointer; } .check input { width: 22px; height: 22px; accent-color: var(--c-primary); } .universes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .universe-chip { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: border-color var(--t-fast), transform var(--t-fast); } .universe-chip input { display: none; } .universe-chip:has(input:checked) { border-color: var(--c-primary); } .universe-chip:hover { transform: translateY(-2px); } .settings-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.5rem; } /* Range slider */ input[type="range"] { width: 100%; accent-color: var(--c-primary); } output { display: inline-block; background: var(--c-primary); color: #fff; padding: 0.2rem 0.75rem; border-radius: 999px; font-weight: 700; margin-left: 0.5rem; } /* ============================ 12. ANIMATIONS ====================== */ @keyframes bobbing { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } } @keyframes bigBounce { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(0.95) rotate(6deg); } 100% { transform: scale(1); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes dropIn { from { transform: translateY(-30px) scale(0.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes crossIn { from { opacity: 0; transform: scale(2); } to { opacity: 1; transform: scale(1); } } @keyframes pulseKey { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes pulseGood { 0% { transform: scale(1); } 40% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(0,184,148,0.25); } 100% { transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } @keyframes popStar { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } } @keyframes spinStar { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx,0), var(--dy,80px)) rotate(540deg); opacity: 0; } } /* ============================ 13. RESPONSIVE ====================== */ @media (max-width: 900px) { .app-main { grid-template-columns: 1fr; grid-template-areas: "welcome" "calc" "story" "history"; } .app-title__text { display: none; } } @media (max-width: 600px) { .app-header { padding: 0.5rem 0.75rem; } .app-header__right { gap: 0.2rem; } .icon-btn { width: 40px; height: 40px; font-size: 1.1rem; } .stars { padding: 0.35rem 0.7rem; font-size: 0.95rem; } .stars__icon { display: none; } .app-main { padding: 0.75rem; gap: 0.85rem; } .card { padding: 1rem; border-radius: var(--radius-md); } .calc-keys { gap: 0.4rem; } .key { font-size: 1.3rem; } .key--go { font-size: 1.1rem; padding: 0.75rem; } .answer__input { font-size: 2rem; min-height: 64px; } .modal { padding: 1.25rem; } } /* Très grands écrans : on limite la largeur des colonnes */ @media (min-width: 1400px) { .app-main { grid-template-columns: 440px 1fr; } } /* ============================ 14. ACCESSIBILITÉ =================== */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-primary); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 200; font-weight: 700; } .skip-link:focus { left: 0; } :focus-visible { outline: 4px solid var(--c-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Respect des préférences "reduce motion" */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .mascotte { animation: none; } } /* Canevas des confettis (plein écran, au-dessus de tout sauf modale) */ #confettiCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 90; } /* Toast (notifications temporaires) */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--surface); padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 150; opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Pied de page */ .app-footer { text-align: center; padding: 1.5rem; color: var(--text-soft); font-weight: 600; }