/* ========================================================================== css/systeme.css — la couche de cohérence -------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE L'app a été peinte écran par écran. Une mesure sur les huit onglets a trouvé DIX nuances de fond différentes — zinc-950, 900/40, 900/50, 900/60, 900/80, 950/40, 950/50… — là où trois niveaux suffisent. Aucune n'est laide ; ensemble, elles rendent impossible de savoir d'un coup d'œil ce qui est posé sur quoi. Une carte et son champ de saisie se ressemblaient plus que deux cartes entre elles. Le style de cette app vit dans des chaînes de classes Tailwind, réparties dans huit mille lignes de JavaScript. Les réécrire une à une, c'est huit mille occasions de casser un écran. On fait donc l'inverse : les classes existantes restent en place, et ce fichier les REDIRIGE vers trois surfaces nommées. Une seule valeur à changer pour toute l'app. ⚠️ POUR LE CODE NOUVEAU : utiliser les variables directement (background: var(--surface-1)), pas une nouvelle nuance de zinc. Les redirections ci-dessous sont un pont vers l'existant, pas un modèle. ⚠️ Chargé APRÈS tailwind.css et styles.css : c'est ce qui lui donne le dernier mot. Ne pas déplacer la balise dans index.html. test/coherence.test.js interdit désormais toute nouvelle nuance de fond. ========================================================================== */ /* -------------------------------------------------------------------------- 1. LES TROIS NIVEAUX -------------------------------------------------------------------------- L'app garde son noir absolu comme sol — c'est son identité, et c'est vrai sur un écran OLED. Au-dessus, deux niveaux seulement : --sol le fond de l'écran --surface-1 ce qui est POSÉ dessus : une carte, une modale --surface-2 ce qui est CREUSÉ dedans : un champ, un encart dans la carte Le niveau 2 est plus SOMBRE que le niveau 1, pas plus clair. C'est le choix déjà fait par l'app (les champs sont en zinc-950 dans des cartes en zinc-900) et il est bon : sur un fond noir, creuser se lit mieux qu'empiler. On l'assume et on s'y tient. -------------------------------------------------------------------------- */ :root, [data-theme="dark"] { --sol: #000000; --surface-1: #111413; /* charbon très légèrement vert : la carte appartient à la marque */ --surface-2: #080A09; /* creusé dans la carte, jamais confondu avec le sol */ --trait: #262b28; --trait-fort: #3a423e; --controle: #1b201e; /* bouton secondaire : au-dessus de la carte, sous le vert */ --plein: #f4f6f5; /* bouton plein clair sur fond sombre */ } [data-theme="light"] { --sol: #ffffff; --surface-1: #f5f7f6; --surface-2: #ffffff; /* en clair, un champ se creuse par sa bordure, pas par sa teinte */ --trait: #e2e8f0; --trait-fort: #cbd5e1; --controle: #eceff0; --plein: #111827; } /* -------------------------------------------------------------------------- 2. LES DIX NUANCES REDIRIGÉES VERS LES TROIS -------------------------------------------------------------------------- */ /* Niveau 1 — les cartes. Toutes les déclinaisons de zinc-900 y arrivent. */ .bg-zinc-900, .bg-zinc-900\/30, .bg-zinc-900\/40, .bg-zinc-900\/50, .bg-zinc-900\/60, .bg-zinc-900\/80, .pro-card { background-color: var(--surface-1) !important; } /* Niveau 2 — ce qui est creusé dans une carte. */ .bg-zinc-950, .bg-zinc-950\/30, .bg-zinc-950\/40, .bg-zinc-950\/50, .bg-zinc-950\/80 { background-color: var(--surface-2) !important; } /* Ce qui FLOTTE au-dessus du contenu — un en-tête collant, une bulle d'alerte — garde sa translucidité : c'est elle qui dit « je passe devant ». Mais elle est teintée du sol, plus d'un gris choisi à part. */ .bg-zinc-950\/95, .bg-zinc-900\/95 { background-color: color-mix(in srgb, var(--surface-1) 94%, transparent) !important; } /* Les CONTRÔLES ne sont pas des surfaces : un bouton secondaire, une pastille d'état. Ils partagent leur propre valeur, sinon ils se confondent avec la carte qui les porte. */ .bg-zinc-600, .bg-zinc-700, .bg-zinc-800 { background-color: var(--controle) !important; } /* Bouton plein sur fond sombre : reste franc, c'est un appel à l'action. */ .bg-zinc-100 { background-color: var(--plein) !important; } /* Le sol. La barre de navigation le prolonge, en translucide. */ body { background-color: var(--sol) !important; } .bg-zinc-950\/90 { background-color: color-mix(in srgb, var(--sol) 88%, transparent) !important; } /* Les champs sont au niveau 2, quel que soit l'endroit où ils se trouvent : styles.css les mettait au niveau du sol, ce qui les faisait disparaître dans les cartes noires. */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: var(--surface-2) !important; } /* Les traits : une seule valeur, plus six gris voisins. */ .border-zinc-700, .border-zinc-700\/50, .border-zinc-800, .border-zinc-800\/50, .border-zinc-800\/80 { border-color: var(--trait) !important; } /* -------------------------------------------------------------------------- 3. RIEN D'ILLISIBLE -------------------------------------------------------------------------- Mesure : 31 textes sous 12 px, dont un à 8 px. Le corps de 10 px est justifié sous une icône de navigation, où le mot n'est qu'un rappel — il ne l'est nulle part ailleurs. On relève le plancher à 11 px et on rend ces 11 px lisibles par l'espacement des lettres, pas par la graisse. -------------------------------------------------------------------------- */ .text-\[8px\], .text-\[9px\], .text-\[10px\] { font-size: 11px !important; letter-spacing: 0.03em; } /* Exception assumée : dans une barre où huit onglets doivent tenir sur 320 px. Le plancher reste 8 px, et c'est ajusterNav() (js/ui.js) qui choisit le cran à la mesure — d'où la variable plutôt qu'une valeur en dur, qui l'emportait sur elle. */ nav button span:last-child { font-size: var(--nav-corps, 10px) !important; letter-spacing: var(--nav-espacement, 0.04em); } /* -------------------------------------------------------------------------- 4. CE QU'ON PEUT ATTEINDRE AVEC UN POUCE -------------------------------------------------------------------------- Mesure : 16 cibles sous 44 px, dont les onglets eux-mêmes (34 px de haut) et « Déconnexion » (21 px). 44 px est le seuil d'Apple, et il correspond à la surface réelle d'un doigt — en dessous, on vise. La zone tactile grandit ; le dessin ne bouge pas. C'est le principe : personne ne doit voir la différence, tout le monde doit la sentir. -------------------------------------------------------------------------- */ /* La règle générale. On ne force PAS l'affichage : un bouton centre déjà son contenu verticalement, et imposer un display casserait ceux qui empilent une icône et un mot. */ button, summary { min-height: 44px; } summary { display: flex; align-items: center; } /* `height: 100%` remplit la hauteur de la RANGÉE — 46 px quand la barre est horizontale, ce qui donne une cible tactile pleine hauteur. Au-delà de 768 px la barre devient une colonne latérale de toute la hauteur de l'écran : chaque onglet héritait alors de 874 px, neuf onglets se retrouvaient empilés sur 7 800 px dans une colonne de 898, et la barre n'affichait plus qu'un seul mot. La règle est donc réservée au téléphone. */ @media (max-width: 767px) { nav > div > button { height: 100%; min-height: 44px; } } /* Exception mesurée : dans une barre où huit onglets doivent tenir sur 320 px, la largeur ne peut pas atteindre 44 px. Les onglets sont contigus — le doigt qui rate tombe sur le voisin, jamais dans le vide — et la hauteur, elle, est bien de 46 px. */ /* L'EN-TÊTE EST UNE EXCEPTION, ET C'EST VOULU. Ce n'est pas une barre d'action : c'est un bandeau d'état, qu'on lit sans s'y arrêter. Lui imposer 44 px de haut a transformé « Profil » et « Déconnexion » en grosses pastilles qui pèsent plus que le contenu. On sépare donc les deux choses que 44 px mélangeait : la zone qu'un doigt doit atteindre, et le dessin qu'un œil doit voir. Un rectangle invisible de 44 px, centré sur le bouton, déborde au-dessus et en dessous — le doigt le trouve, l'œil ne le voit pas. Rien à côté verticalement, donc rien à chevaucher. ⚠️ Une mesure de getBoundingClientRect() sur ces boutons continuera de renvoyer 21 à 25 px : elle ignore les pseudo-éléments. C'est la limite de l'outil de mesure, pas un défaut restant. */ header button, header #sync-status { min-height: 0; } /* LA PASTILLE D'ÉTAT DOIT POUVOIR RÉTRÉCIR, ET LA RÈGLE NE PEUT PAS ÊTRE UNE CLASSE UTILITAIRE : quatre fonctions (loadDataFromCloud, updateSyncBadge…) remplacent son `className` entier à chaque synchro. Un `min-w-0` posé dans le HTML disparaît au premier « Connecté ». Sans elle, « Profil » + la pastille + « Déconnexion » réclamaient 217 px dans un en-tête qui n'en offrait que 194 sur un écran de 320 px : le dépassement de 11 px faisait défiler toute la page de côté. Les deux boutons ne cèdent pas — c'est le statut, transitoire, qui s'abrège. */ header #sync-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } header button { position: relative; } header button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* Les boutons en icône seule : un carré de 44 px, quelle que soit l'icône. */ button.p-2 { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- 4 bis. LA PASTILLE VERTE PORTE DU TEXTE SOMBRE -------------------------------------------------------------------------- Mesurée à 2,54:1 dans la barre de navigation, soit très en dessous du seuil lisible de 4,5:1 — la pastille des messages non lus héritait du blanc du bouton qui la porte, malgré son `text-black`. Un compteur qu'on ne lit pas ne compte rien. -------------------------------------------------------------------------- */ .bg-emerald-500.text-black, .bg-emerald-400.text-black { color: #04140d !important; } /* -------------------------------------------------------------------------- 5. SAVOIR OÙ L'ON EST AU CLAVIER -------------------------------------------------------------------------- Aucun style de focus n'existait : en naviguant à la tabulation, le curseur disparaissait. :focus-visible ne s'affiche qu'au clavier, jamais sous le doigt ni à la souris — il n'y a donc rien à perdre. -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-accent-emerald, #10b981); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- 6. RESPECTER CEUX QUI ONT COUPÉ LES ANIMATIONS -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }