/* -------------------------------------------------------------------------- Fondations : couleurs, typographie, éléments communs. Direction « douce et chaleureuse » (refonte du 2026-09-17) : fond crème, cartes blanches très arrondies, une couleur pastel par module. Pensé pour le doigt d'abord — téléphone en main et tablette murale à bout de bras comptent autant. Aucune cible tactile en dessous de 48 px. La couleur d'accent suit le module affiché : app.js pose `data-module` sur , et toutes les règles lisent --accent. -------------------------------------------------------------------------- */ :root { color-scheme: light dark; --fond: #f7f4ef; --fond-carte: #ffffff; --fond-doux: #f0ebe3; --texte: #2a2521; --texte-doux: #7a7068; --bordure: #ebe4da; --alerte: #c0392b; --alerte-fond: #fcebeb; --attention: #a86a0c; /* Accent par défaut (accueil) : vert d'eau. Voir [data-module] plus bas. */ --accent: #1d9e75; --accent-fond: #e1f5ee; --accent-encre: #085041; --accent-texte: #ffffff; --rayon: 16px; --rayon-grand: 24px; --espace: 16px; --cible: 48px; --ombre: 0 1px 2px rgba(70, 50, 30, .05), 0 6px 20px rgba(70, 50, 30, .06); --ombre-forte: 0 2px 6px rgba(70, 50, 30, .08), 0 18px 40px rgba(70, 50, 30, .12); --police: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --duree: 220ms; --courbe: cubic-bezier(.2, .8, .2, 1); --rebond: cubic-bezier(.34, 1.56, .64, 1); } @media (prefers-color-scheme: dark) { :root { --fond: #141618; --fond-carte: #1e2125; --fond-doux: #272b30; --texte: #f0ece7; --texte-doux: #a79e95; --bordure: #2f343a; --alerte: #f08a7a; --alerte-fond: #3a1f1c; --attention: #e8b25c; --accent: #5dcaa5; --accent-fond: #12352c; --accent-encre: #9fe1cb; --accent-texte: #06231c; --ombre: 0 1px 2px rgba(0, 0, 0, .3); --ombre-forte: 0 12px 32px rgba(0, 0, 0, .45); } } /* ------------------------------------------------ une couleur par module */ body[data-module="agenda"], .teinte-agenda { --accent: #d85a30; --accent-fond: #faece7; --accent-encre: #712b13; } body[data-module="courses"], .teinte-courses { --accent: #1d9e75; --accent-fond: #e1f5ee; --accent-encre: #085041; } body[data-module="repas"], .teinte-repas { --accent: #6a61cf; --accent-fond: #eeedfe; --accent-encre: #3c3489; } body[data-module="taches"], .teinte-taches { --accent: #c07a12; --accent-fond: #faeeda; --accent-encre: #633806; } body[data-module="documents"], .teinte-documents { --accent: #2f78c4; --accent-fond: #e6f1fb; --accent-encre: #0c447c; } body[data-module="budget"], .teinte-budget { --accent: #4f8a1b; --accent-fond: #eaf3de; --accent-encre: #27500a; } body[data-module="famille"], .teinte-famille { --accent: #c2466f; --accent-fond: #fbeaf0; --accent-encre: #72243e; } @media (prefers-color-scheme: dark) { body[data-module="agenda"], .teinte-agenda { --accent: #f0997b; --accent-fond: #3d2016; --accent-encre: #f5c4b3; --accent-texte: #2a1208; } body[data-module="courses"], .teinte-courses { --accent: #5dcaa5; --accent-fond: #12352c; --accent-encre: #9fe1cb; --accent-texte: #06231c; } body[data-module="repas"], .teinte-repas { --accent: #aca5f0; --accent-fond: #2a2656; --accent-encre: #cecbf6; --accent-texte: #17143a; } body[data-module="taches"], .teinte-taches { --accent: #efb450; --accent-fond: #3b2a0f; --accent-encre: #fac775; --accent-texte: #2a1a02; } body[data-module="documents"], .teinte-documents { --accent: #85b7eb; --accent-fond: #13304f; --accent-encre: #b5d4f4; --accent-texte: #06203b; } body[data-module="budget"], .teinte-budget { --accent: #97c459; --accent-fond: #223612; --accent-encre: #c0dd97; --accent-texte: #122205; } body[data-module="famille"], .teinte-famille { --accent: #ed93b1; --accent-fond: #3f1a29; --accent-encre: #f4c0d1; --accent-texte: #2c0c18; } } /* `hidden` doit toujours cacher. Sans cette règle, n'importe quel `display: flex` posé sur une classe l'emporte : les suggestions des courses restaient affichées (constaté en ligne le 2026-09-17). */ [hidden] { display: none !important; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background: var(--fond); color: var(--texte); font: 16px/1.5 var(--police); -webkit-font-smoothing: antialiased; /* Encoches et barres système des téléphones. */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); -webkit-tap-highlight-color: transparent; transition: background-color var(--duree) var(--courbe); } .application { max-width: 720px; margin: 0 auto; padding: var(--espace); min-height: 100vh; display: flex; flex-direction: column; } h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; } h2 { font-size: 1.1rem; margin: 0 0 var(--espace); font-weight: 650; letter-spacing: -.005em; } p { margin: 0 0 var(--espace); } .doux { color: var(--texte-doux); } .chargement { text-align: center; color: var(--texte-doux); margin-top: 40vh; animation: pulsation 1.2s ease-in-out infinite; } .icone { flex: 0 0 auto; vertical-align: middle; } /* ------------------------------------------------------------- formulaires */ button { font: inherit; min-height: var(--cible); border-radius: 999px; border: none; cursor: pointer; background: var(--fond-carte); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bordure); transition: transform 120ms var(--courbe), background-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), color var(--duree) var(--courbe); } button:active { transform: scale(.97); } button:disabled { cursor: default; opacity: .5; } .bouton-principal { background: var(--accent); color: var(--accent-texte); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 650; width: 100%; padding: 0 20px; } .bouton-discret { background: none; box-shadow: none; color: var(--texte-doux); min-height: var(--cible); padding: 0 14px; font-weight: 550; } .bouton-discret:hover { background: var(--fond-doux); } input, select, textarea { font: inherit; width: 100%; min-height: var(--cible); padding: 0 16px; border-radius: var(--rayon); border: 1.5px solid transparent; background: var(--fond-doux); color: var(--texte); transition: border-color var(--duree) var(--courbe), background-color var(--duree) var(--courbe); } input::placeholder, textarea::placeholder { color: var(--texte-doux); opacity: .8; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--fond-carte); } button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } /* ------------------------------------------------------------------ divers */ .carte { background: var(--fond-carte); border: none; border-radius: var(--rayon-grand); padding: 18px; box-shadow: var(--ombre); } /* Vide, le message ne prend plus de place : sur les listes (courses), l'espace réservé coupait la page en deux. Les formulaires gardent le leur (.formulaire). */ .message-erreur:empty { min-height: 0; margin: 0; } .formulaire .message-erreur:empty { min-height: 1.5em; } .message-erreur { color: var(--alerte); font-weight: 600; text-align: center; /* Hauteur réservée en permanence : l'apparition du message ne doit pas faire sauter le clavier sous le doigt au moment où on tape. */ min-height: 1.5em; margin: 12px 0 0; } /* -------------------------------------------------------------- animations */ @keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pulsation { 50% { opacity: .45; } } @keyframes rebond { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } /* Réduire les animations : on respecte le réglage de l'appareil. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }