/* ============================================================ Atelier Mémoire — design system Public : personne âgée, Alzheimer + très basse vision d'origine cérébrale (type atrophie corticale postérieure). Voir RECHERCHE.md. Règles non négociables : - contraste maximal (noir sur fond clair, cible AAA 7:1) - une information n'est JAMAIS portée par une couleur sombre seule - PAS d'espacement de lettres élargi (nuit à la lecture en ACP) - taille de texte réglable, défaut modéré (le géant peut nuire en ACP) - thème clair/sombre au choix (pas de polarité universelle en basse vision) - cibles tactiles ≥ 72px, une seule action par écran, écrans épurés - jamais de rouge agressif, jamais de compte à rebours, aucune pénalité ============================================================ */ @font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root, html[data-theme="clair"] { --fond: #ffffff; --fond-doux: #fff6e3; /* crème chaud, écrans d'accueil */ --encre: #000000; --bleu: #0a5dc2; /* bleu vif, contraste ≥ 5:1 sur blanc */ --jaune: #ffd13b; /* action principale : jaune + texte noir */ --jaune-doux: #ffe89a; --vert: #0e6b1e; /* succès, avec texte blanc + icône */ --rayon: 22px; --ombre: 0 3px 0 rgba(0, 0, 0, .55); } /* Thème sombre : proposé car il n'existe pas de polarité idéale universelle en basse vision. On garde un contraste très élevé (blanc cassé sur presque noir), et le jaune reste l'action principale avec du texte noir. */ html[data-theme="sombre"] { --fond: #101418; --fond-doux: #16202b; --encre: #ffffff; --bleu: #6fb2ff; --jaune: #ffd13b; --jaune-doux: #4a3d17; --vert: #6fe08a; --rayon: 22px; --ombre: 0 3px 0 rgba(0, 0, 0, .8); } /* Taille de texte réglable : le JS pose data-taille sur . Défaut volontairement modéré : en ACP une police trop grande peut dégrader la lecture (voir RECHERCHE.md). L'aidant ajuste au besoin. */ html { font-size: 108%; } html[data-taille="2"] { font-size: 125%; } html[data-taille="3"] { font-size: 145%; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Atkinson', 'Verdana', system-ui, sans-serif; background: var(--fond-doux); color: var(--encre); font-size: 1.35rem; line-height: 1.5; min-height: 100dvh; -webkit-tap-highlight-color: transparent; } #ecran { max-width: 860px; margin: 0 auto; /* marges de sécurité pour les téléphones à encoche (env safe-area) */ padding: calc(1.2rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left)); } h1 { font-size: 2.1rem; font-weight: 700; text-align: center; padding: .4rem 0 .2rem; } .sous-titre { text-align: center; font-size: 1.25rem; margin-bottom: 1.4rem; } /* ---------- boutons ---------- */ button { font-family: inherit; font-size: 1.4rem; font-weight: 700; color: var(--encre); background: var(--fond); border: 4px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); min-height: 76px; padding: .6rem 1.4rem; cursor: pointer; touch-action: manipulation; } button:active { transform: translateY(3px); box-shadow: none; } button:focus-visible { outline: 6px solid var(--bleu); outline-offset: 3px; } /* indice de survol pour la souris (web) — n'affecte jamais le tactile. On agit sur la bordure/luminosité, pas sur le fond : le contraste texte/fond reste garanti dans les deux thèmes. */ @media (hover: hover) and (pointer: fine) { button:hover { border-color: var(--bleu); filter: brightness(1.04); } } /* Surfaces jaunes : toujours du texte noir, même en thème sombre (jaune + blanc serait illisible). */ .btn-principal, .choix-tailles .actif, .grille-lettres button.depart, .carte-memory { color: #000; } .btn-principal { background: var(--jaune); } .btn-discret { border-width: 3px; box-shadow: none; min-height: 60px; font-size: 1.15rem; background: var(--fond); } /* ---------- accueil : cartes d'exercices ---------- */ .grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; margin-top: 1rem; } .carte-exo { display: flex; align-items: center; gap: 1.1rem; text-align: left; min-height: 120px; background: var(--fond); padding: 1rem 1.2rem; } .carte-exo .emoji { font-size: 3.4rem; line-height: 1; flex: none; } .carte-exo .titre { font-size: 1.6rem; display: block; } .carte-exo .desc { font-weight: 400; font-size: 1.1rem; display: block; } .pied-accueil { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } /* carte « Mélange » mise en avant */ .carte-melange { background: var(--jaune); color: #000; border-width: 5px; } /* bannière de série (streak) sur l'accueil */ .banniere-serie { display: block; width: 100%; text-align: center; font-size: 1.5rem; font-weight: 700; background: var(--jaune); color: #000; border: 4px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); min-height: 64px; margin-bottom: 1rem; } /* énoncé de proverbe : texte modéré, jamais géant, interligne aéré */ .enonce-proverbe { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 700; line-height: 1.35; margin-bottom: 1.2rem; } /* choix « texte » (fins de proverbe) : plus petits que les chiffres, ils s'enroulent */ .choix-texte { grid-template-columns: 1fr; } .choix-texte button { font-size: 1.4rem; min-height: 72px; line-height: 1.3; padding: .6rem 1rem; white-space: normal; } .message-jour { text-align: center; font-size: 1.3rem; background: var(--jaune-doux); border: 3px solid var(--encre); border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: 1.4rem; } /* ---------- écran exercice ---------- */ .barre-exo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; } .progression { font-size: 1.6rem; font-weight: 700; white-space: nowrap; background: var(--fond); border: 3px solid var(--encre); border-radius: var(--rayon); padding: .5rem 1.1rem; } .consigne { text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.2rem; } .zone-question { background: var(--fond); border: 4px solid var(--encre); border-radius: var(--rayon); padding: 1.6rem 1.2rem; text-align: center; } .enonce-geant { /* taille fluide : reste très grande mais rétrécit sur écran étroit pour qu'un mot long (ex. VOITURE) ne déborde jamais */ font-size: clamp(2.2rem, 9vw, 3.2rem); font-weight: 700; /* pas de letter-spacing élargi : nuit à la lecture en ACP (voir RECHERCHE.md) */ margin-bottom: 1.4rem; overflow-wrap: break-word; } .choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .choix button { font-size: 2.4rem; min-height: 96px; } .choix button.efface { opacity: .25; pointer-events: none; } /* choix « mots » (catégories) : boutons plus larges (2 colonnes) pour que les mots restent entiers, jamais coupés ; texte modéré qui s'enroule aux espaces */ .choix-mots { grid-template-columns: repeat(2, 1fr); } .choix-mots button { font-size: clamp(1.3rem, 4.5vw, 1.7rem); line-height: 1.2; white-space: normal; padding: .6rem .8rem; } /* réaction douce en cas d'erreur */ @keyframes tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .tremble { animation: tremble .35s ease; } .encouragement { min-height: 2.4rem; text-align: center; font-size: 1.4rem; font-weight: 700; margin-top: 1rem; } /* voile « bonne réponse » */ .voile-bravo { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: var(--fond-doux); color: var(--encre); font-size: 2.4rem; font-weight: 700; z-index: 10; } .voile-bravo .coche { width: 130px; height: 130px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 4.2rem; display: flex; align-items: center; justify-content: center; } /* ---------- memory ---------- */ .plateau-memory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 560px; margin: 0 auto; } .carte-memory { aspect-ratio: 3 / 3.4; font-size: min(4rem, 14vw); min-height: 110px; background: var(--jaune); display: flex; align-items: center; justify-content: center; padding: 0; } .carte-memory.retournee { background: var(--fond); } .carte-memory.trouvee { background: var(--fond); border-color: var(--vert); box-shadow: none; pointer-events: none; } /* ---------- mots mêlés ---------- */ .grille-lettres { display: grid; gap: .4rem; max-width: 560px; margin: 0 auto 1.2rem; } .grille-lettres button { aspect-ratio: 1; min-height: 0; min-width: 0; /* la case suit la largeur de la grille (6 à 8 colonnes) ; la lettre reste grande mais s'adapte pour ne jamais déborder d'une case étroite */ font-size: clamp(1.2rem, 6.5vw, 1.9rem); padding: 0; border-width: 3px; border-radius: 14px; box-shadow: none; } .grille-lettres button.depart { background: var(--jaune); } .grille-lettres button.mot-trouve { background: var(--jaune-doux); border-color: var(--vert); pointer-events: none; } .liste-mots { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; font-size: 1.6rem; font-weight: 700; } .liste-mots .trouve { text-decoration: line-through 4px var(--vert); opacity: .5; } /* ---------- écran bravo ---------- */ .ecran-bravo { text-align: center; padding-top: 2rem; } .ecran-bravo .soleil { font-size: 6rem; } .ecran-bravo h1 { font-size: 2.6rem; margin: .6rem 0; } .ecran-bravo p { font-size: 1.5rem; margin-bottom: 2rem; } .ecran-bravo .actions { display: flex; flex-direction: column; gap: 1.1rem; max-width: 440px; margin: 0 auto; } /* ---------- réglages ---------- */ .bloc-reglage { background: var(--fond); border: 4px solid var(--encre); border-radius: var(--rayon); padding: 1.3rem; margin-bottom: 1.3rem; } .bloc-reglage h2 { font-size: 1.5rem; margin-bottom: .9rem; } .choix-tailles { display: flex; gap: 1rem; } .choix-tailles button { flex: 1; font-size: 1.1rem; padding: .6rem .4rem; } .aide-reglage { font-size: 1.05rem; font-weight: 400; margin-bottom: .9rem; } .ligne-niveau { margin-bottom: 1.1rem; } .ligne-niveau:last-child { margin-bottom: 0; } .nom-jeu { font-size: 1.2rem; font-weight: 700; margin-bottom: .4rem; } .choix-tailles .t1 { font-size: 1.2rem; } .choix-tailles .t2 { font-size: 1.7rem; } .choix-tailles .t3 { font-size: 2.2rem; } .choix-tailles .actif { background: var(--jaune); } input[type="text"] { font-family: inherit; font-size: 1.5rem; font-weight: 700; width: 100%; min-height: 70px; padding: .5rem 1rem; border: 4px solid var(--encre); border-radius: var(--rayon); background: var(--fond); color: var(--encre); } input[type="text"]:focus-visible { outline: 6px solid var(--bleu); outline-offset: 3px; } /* ---------- mes progrès ---------- */ .carte-serie { text-align: center; background: var(--jaune-doux); border: 4px solid var(--encre); border-radius: var(--rayon); padding: 1.2rem; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 700; } .carte-serie .grand-nombre { font-size: 3.4rem; line-height: 1.1; } .graphique { display: flex; align-items: flex-end; justify-content: space-between; gap: .3rem; height: 200px; margin-top: .8rem; } .col-jour { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; } .barre-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .barre { width: 100%; min-height: 4px; background: var(--vert); border: 2px solid var(--encre); border-radius: 6px 6px 0 0; color: #fff; font-size: 1rem; font-weight: 700; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; } .barre-jour { background: var(--bleu); } /* aujourd'hui bien visible */ .barre-vide { background: transparent; border-color: var(--encre); border-style: dashed; opacity: .35; } .label-jour { font-size: .95rem; font-weight: 700; margin-top: .3rem; } /* ---------- petites joies (célébrations douces) ---------- */ .voile-bravo.pop { animation: popIn .35s ease; } @keyframes popIn { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .voile-titre { font-size: 2rem; font-weight: 700; text-align: center; } .voile-detail { font-size: 1.5rem; font-weight: 700; text-align: center; margin-top: .2rem; padding: 0 1rem; } /* paires trouvées : petit rebond ; mot trouvé : pulsation */ .carte-memory.trouvee { animation: popCarte .45s ease; } @keyframes popCarte { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } } .grille-lettres button.mot-trouve { animation: pulseMot .5s ease; } @keyframes pulseMot { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } } .ligne-record { text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; } .record-egal { color: var(--vert); } /* ---------- jardin ---------- */ /* ce qui a poussé, sur l'écran de fin (cliquable) */ .pousse-jardin { display: flex; flex-direction: column; align-items: center; gap: .4rem; background: var(--jaune-doux); color: var(--encre); border: 3px solid var(--encre); border-radius: var(--rayon); padding: 1rem 1.2rem; margin: 0 auto 1.4rem; max-width: 440px; width: 100%; font-size: 1.3rem; font-weight: 700; } .plante-poussee { font-size: 4rem; line-height: 1; } .plante-poussee.eclot { animation: eclot .9s ease; } @keyframes eclot { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.25); } 100% { transform: scale(1); } } /* la scène du jardin : ciel clair en haut, herbe en bas, plantes qui poussent */ .jardin-scene { position: relative; border: 4px solid var(--encre); border-radius: var(--rayon); background: linear-gradient(#bfe6ff 0%, #e9f7cf 100%); min-height: 320px; overflow: hidden; margin-bottom: 1.2rem; } .jardin-soleil { position: absolute; top: .6rem; right: .9rem; font-size: 2.8rem; } .jardin-sol { position: absolute; left: 0; right: 0; bottom: 0; min-height: 56%; background: linear-gradient(#8fd07a, #6bb85a); border-top: 5px solid #4e8f3e; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; justify-content: center; gap: .1rem .3rem; padding: .5rem .6rem .3rem; } .plante { font-size: clamp(2.2rem, 11vw, 3.4rem); line-height: 1; transform-origin: bottom center; animation: sway 4s ease-in-out infinite; } .plante.niv-1 { font-size: clamp(1.4rem, 7vw, 2rem); } /* graine, petite */ .plante.niv-2 { font-size: clamp(1.9rem, 9vw, 2.7rem); } /* pousse, moyenne */ @keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }