/* * Design system — étape 0. * Thème Kapibou (kit d'identité, cf. web/img/LISEZ-MOI.md), mobile-first. * Accessibilité dys native (claude.md règle d'or #15) : police adaptable, taille/interligne * réglables, fort contraste, grandes cibles tactiles. Les préférences d'un profil enfant * piloteront ces variables via les classes/attributs sur . * * Contraintes non négociables du kit : * - JAMAIS de blanc pur (le fond crème réduit l'éblouissement des lecteurs dys). * - JAMAIS de rouge (« le rouge, c'est le stylo du prof ») — les erreurs se signalent en Miel. * - Police de lecture = Atkinson Hyperlegible ; titres/logo = Baloo 2. Pas d'OpenDyslexic. */ /* Polices du kit (licence SIL OFL). Servies depuis le CDN fontsource (jsDelivr) : pas d'étape de build côté SWA. Repli système immédiat via font-display: swap. Pour un self-host sans réseau tiers, poser les .woff2 sous /img/fonts et remplacer les URL. */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap; src: url("https://cdn.jsdelivr.net/fontsource/fonts/baloo-2@latest/latin-800-normal.woff2") format("woff2"); } /* Jetons de marque Kapibou (source unique : web/img/couleurs.css, dupliqués ici pour éviter une dépendance de chargement — garder synchronisés). */ :root { --kb-creme: #FBF3E4; /* fond principal — jamais de blanc pur */ --kb-creme-fonce: #F3E6CD; /* cartes, blocs secondaires */ --kb-brun: #B5794E; /* pelage de Kapi */ --kb-brun-profond: #8A5733; /* oreilles, ombres */ --kb-brun-sombre: #6B3F26; /* intérieur d'oreille */ --kb-museau: #4A3428; /* truffe, bouche */ --kb-encre: #2B2420; /* texte, yeux */ --kb-miel: #E0913A; /* accent : action, boutons, signalement */ --kb-vert-eau: #46907F; /* accent : acquis, validation */ --kb-brun-clair: #C98A5C; /* pelage sur fond sombre */ } :root { /* Palette — le design system (--sc-*) est mappé sur les jetons de marque (--kb-*). */ --sc-bg: var(--kb-creme); --sc-surface: var(--kb-creme-fonce); --sc-ink: var(--kb-encre); --sc-muted: var(--kb-brun-profond); --sc-primary: var(--kb-brun); --sc-primary-ink: var(--kb-creme); --sc-accent: var(--kb-miel); --sc-success: var(--kb-vert-eau); /* acquis / validation */ --sc-danger: var(--kb-miel); /* pas de rouge : le signalement se fait en Miel */ --sc-warning: var(--kb-miel); --sc-border: var(--kb-brun-clair); /* Typographie — pilotable par les préférences dys. Baloo 2 pour les titres, Atkinson Hyperlegible pour le corps (kit d'identité). */ --sc-font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sc-font-title: "Baloo 2", "Atkinson Hyperlegible", system-ui, sans-serif; --sc-font-size: 17px; --sc-line-height: 1.7; --sc-letter-spacing: 0.01em; /* Rayons / espacements */ --sc-radius: 16px; --sc-tap: 48px; /* cible tactile mini */ } /* Préférence : police adaptée dys. Le kit prescrit Atkinson Hyperlegible (Braille Institute) et déconseille explicitement OpenDyslexic. On renforce donc espacement/interligne sur la même famille. */ html[data-font="dys"] { --sc-letter-spacing: 0.05em; --sc-line-height: 2; word-spacing: 0.12em; } /* Préférence : taille de texte confort. */ html[data-textsize="large"] { --sc-font-size: 20px; } html[data-textsize="xlarge"] { --sc-font-size: 23px; } /* Préférence : fort contraste — reste dans la palette du kit (pas de blanc/noir purs). Fond crème, encre poussée au museau le plus sombre, bordures encre. */ html[data-contrast="high"] { --sc-bg: var(--kb-creme); --sc-ink: var(--kb-encre); --sc-muted: var(--kb-museau); --sc-border: var(--kb-encre); --sc-surface: var(--kb-creme); } /* Préférence : réduire les animations. */ html[data-motion="reduced"] *, @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sc-font); font-size: var(--sc-font-size); line-height: var(--sc-line-height); letter-spacing: var(--sc-letter-spacing); color: var(--sc-ink); background: var(--sc-bg); } /* Titres en Baloo 2 (kit d'identité : « logo et titres uniquement »). */ h1, h2, h3, .kb-title { font-family: var(--sc-font-title); letter-spacing: 0; } .sc-container { max-width: 900px; margin: 0 auto; padding: 1.25rem; } .sc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sc-tap); padding: 0 1.25rem; border: none; border-radius: var(--sc-radius); background: var(--sc-primary); color: var(--sc-primary-ink); font: inherit; font-weight: 700; cursor: pointer; transition: transform .08s ease, filter .15s ease; } .sc-btn:hover { filter: brightness(1.05); } .sc-btn:active { transform: translateY(1px); } .sc-btn-accent { background: var(--sc-accent); } .sc-btn-danger { background: var(--sc-danger); } .sc-card { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 1.25rem; } /* État vide (claude.md règle d'or #14) — jamais de texte brut à la place. */ .sc-state { text-align: center; padding: 3rem 1rem; color: var(--sc-muted); } .sc-state-icon { font-size: 2.5rem; margin-bottom: .5rem; } .sc-state h3 { margin: .25rem 0; color: var(--sc-ink); } /* Modale (claude.md règle d'or #13) — remplace tout alert/confirm/prompt natif. */ .sc-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 48, .45); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; } .sc-modal-backdrop.open { display: flex; } .sc-modal { background: var(--sc-surface); border-radius: var(--sc-radius); max-width: 480px; width: 100%; padding: 1.5rem; box-shadow: 0 20px 60px rgba(20, 24, 48, .25); } .sc-modal-head { font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; } .sc-modal-head-danger { color: var(--sc-danger); } .sc-modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; } /* Toast — texte en crème sur encre (jamais de blanc pur). */ .sc-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--sc-ink); color: var(--kb-creme); padding: .75rem 1.25rem; border-radius: var(--sc-radius); z-index: 1100; opacity: 0; transition: opacity .2s ease; } .sc-toast.show { opacity: 1; } /* ─── Marque Kapibou ───────────────────────────────────────────────────────── Briques réutilisables pour poser logo, wordmark et mascotte de façon cohérente. Les SVG vivent sous /img (kit d'identité). Respecter la zone de respiration. */ /* Logo horizontal dans une barre de navigation (accueil, en-têtes). */ .kb-logo { display: inline-flex; align-items: center; text-decoration: none; } .kb-logo img { height: 40px; width: auto; display: block; } /* ≥ 120px de large */ .kb-logo--sm img { height: 32px; } /* Wordmark seul, quand la place manque. */ .kb-wordmark img { height: 28px; width: auto; display: block; } /* Mascotte Kapi — illustration décorative, ratio préservé, jamais déformée. */ .kb-mascotte { display: block; margin: 0 auto; max-width: 100%; height: auto; } .kb-mascotte--hero { width: 180px; } .kb-mascotte--card { width: 96px; } .kb-mascotte--spot { width: 64px; } /* Bandeau accent (CTA, section « dys ») : fond brun, illustration à côté du texte. */ .kb-band { background: var(--sc-primary); color: var(--sc-primary-ink); border-radius: var(--sc-radius); }