:root { --bg: #f6f2ea; --surface: #ffffff; --surface-alt: #f0eae0; --text: #262019; --text-muted: #8a8074; --border: #e6dfd0; --primary: #b1552e; --primary-dark: #8f421f; --primary-soft: #f0e0d5; --success: #5c7c58; --success-dark: #45603f; --success-soft: #e6ece3; --danger: #ad4a3f; --danger-dark: #8a3a30; --danger-soft: #f1e2df; --pending: #ab8a3d; --pending-dark: #8a6d2e; --pending-soft: #f2ebd9; --chart-earned: var(--primary); --chart-spent: #2a7ab8; --chart-axis: var(--border); --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', ui-serif, serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(38, 32, 25, 0.04), 0 8px 20px rgba(38, 32, 25, 0.05); --overlay: rgba(38, 32, 25, 0.5); --touch: 84px; } /* ========================================================================== Theme "Explorateur" — univers enfant (index.html, kid.html uniquement). Applique via . L'espace parent garde le theme par defaut ci-dessus. Les composants reutilisent les memes noms de variables : la plupart des styles se re-habillent automatiquement. ========================================================================== */ [data-theme='explorer'] { --bg: #faf7ef; --surface: #ffffff; --surface-alt: #f2eee0; --text: #263b43; --text-muted: #718087; --border: #eae4d4; --primary: #269f9a; --primary-dark: #285c60; --primary-soft: #dcf0ee; --success: #54c6a4; --success-dark: #2e8c77; --success-soft: #e1f6ef; --danger: #e4664f; --danger-dark: #b94b39; --danger-soft: #fbe4df; --pending: #ffd166; --pending-dark: #9c7218; --pending-soft: #fff3d6; --chart-earned: var(--primary); --chart-spent: #5ba7e6; --chart-axis: var(--border); --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-lg: 26px; --radius-md: 20px; --radius-sm: 14px; --shadow: 0 2px 5px rgba(38, 59, 67, 0.05), 0 8px 20px rgba(38, 59, 67, 0.06); --overlay: rgba(20, 35, 40, 0.55); /* Categories de routine : couleur + fond doux, stables dans toute l'app. */ --cat-matin: #ffd166; --cat-matin-dark: #9c7218; --cat-matin-soft: #fff3d6; --cat-ecole: #5ba7e6; --cat-ecole-dark: #2c6ca0; --cat-ecole-soft: #e3f1fc; --cat-maison: #7fbe45; --cat-maison-dark: #4c7a26; --cat-maison-soft: #ecf6e1; --cat-soir: #269f9a; --cat-soir-dark: #285c60; --cat-soir-soft: #dcf0ee; --cat-recompense: #ff965f; --cat-recompense-dark: #c9622f; --cat-recompense-soft: #ffe9dc; } /* ========================================================================== Theme nuit — meme univers "Explorateur", palette sombre. Applique en plus (pas a la place) via , active automatiquement selon la plage horaire choisie sur l'ecran d'accueil ET la page enfant (voir index.html/kid.html), reglable depuis l'espace parent. Reprend les memes roles de variables que ci-dessus (ex: *-dark reste "texte lisible sur *-soft", *-soft reste "fond teinte doux" - simplement inverses en clarte pour un fond sombre). ========================================================================== */ [data-theme='explorer'][data-mode='night'] { --bg: #0f171b; --surface: #182229; --surface-alt: #202b32; --text: #e8edef; --text-muted: #8fa2ab; --border: #2a363d; --primary: #4dd0c7; --primary-dark: #bdeeea; --primary-soft: #163332; --success: #6fd7ae; --success-dark: #bdf3da; --success-soft: #16332a; --danger: #f0876c; --danger-dark: #ffd9cd; --danger-soft: #3a2018; --pending: #ffd166; --pending-dark: #ffe9b3; --pending-soft: #3a2f10; --chart-earned: var(--primary); --chart-spent: #7ec2f2; --chart-axis: var(--border); --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.4); --overlay: rgba(5, 10, 12, 0.65); --cat-matin: #ffd166; --cat-matin-dark: #ffe9b3; --cat-matin-soft: #3a2f10; --cat-ecole: #7ec2f2; --cat-ecole-dark: #cfe8fb; --cat-ecole-soft: #16262f; --cat-maison: #9ad674; --cat-maison-dark: #dcf0c4; --cat-maison-soft: #212f16; --cat-soir: #4dd0c7; --cat-soir-dark: #bdeeea; --cat-soir-soft: #163332; --cat-recompense: #ffb185; --cat-recompense-dark: #ffe3d1; --cat-recompense-soft: #3a271c; } /* Meme theme nuit, pour l'espace parent cette fois (theme par defaut, pas "Explorateur" - voir :root en haut de fichier). Applique via (sans data-theme, l'espace parent n'en met jamais) ; specificite plus faible que la regle explorer ci-dessus, donc sans conflit meme si les deux selecteurs matchaient un jour la meme page. */ body[data-mode='night'] { --bg: #171310; --surface: #221d17; --surface-alt: #2a231b; --text: #ece6db; --text-muted: #a89a89; --border: #3a3226; --primary: #e0895c; --primary-dark: #f5c7ab; --primary-soft: #3a2418; --success: #7fbf76; --success-dark: #c9e8c2; --success-soft: #1e2f1c; --danger: #e4796a; --danger-dark: #f8cfc7; --danger-soft: #3a211b; --pending: #d1ac57; --pending-dark: #f5e2b0; --pending-soft: #362c14; --chart-earned: var(--primary); --chart-spent: #6ab0e8; --chart-axis: var(--border); --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.4); --overlay: rgba(5, 5, 5, 0.65); } /* Fondu entre les pages (index <-> kid.html) : le standard "cross-document view transitions" (@view-transition) donnait un rendu saccade - trop de facteurs hors de notre controle (support variable selon la version de Chrome, cumul avec les animations d'entree propres a chaque page comme .home-heading/.kid-tile qui rejouaient PAR-DESSUS le fondu du navigateur). Remplace par le meme mecanisme, simple et maitrise, que la popup liste de courses (opacite + transition CSS, classe ajoutee apres un double requestAnimationFrame) : un voile plein ecran qui se dissipe a l'arrivee et se referme juste avant de quitter la page. Memes duree/easing que cette popup. Voir #page-fade dans index.html et kid.html. */ .page-fade { position: fixed; inset: 0; z-index: 9999; background: var(--bg); opacity: 1; pointer-events: none; transition: opacity 0.22s ease; } .page-fade.hidden { opacity: 0; } * { box-sizing: border-box; } /* Logo "Marmailloux" : un M barre de deux traits horizontaux, sur le principe du won (W) ou de l'euro (C). Rendu via masque CSS (currentColor) pour heriter la couleur du texte environnant sans dupliquer de SVG. */ .marmailloux-mark { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 26 L8 6 L16 26 L24 6 L24 26' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='0' y1='13' x2='32' y2='13' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='0' y1='19' x2='32' y2='19' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 26 L8 6 L16 26 L24 6 L24 26' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='0' y1='13' x2='32' y2='13' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='0' y1='19' x2='32' y2='19' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-user-select: none; user-select: none; /* Supprime le "flash" de surbrillance natif au tap (parfois lent/en retard sur Android) : le retour visuel passe entierement par les etats :active, plus rapides et coherents. */ -webkit-tap-highlight-color: transparent; /* Coupe le delai de detection double-tap avant qu'un tap ne devienne un clic. Deja pose sur `button` ; ici en global il couvre aussi les elements tactiles qui ne sont pas des