/* Les valeurs viennent de la MAQUETTE VALIDÉE (source-tableau-de-bord.dc.html) : couleurs, tailles et espacements sont ceux du fichier, pas des approximations. ⚠ La maquette chargeait Manrope et Inter Tight depuis Google Fonts. Pas ici : aucune ressource externe, et deux fontes à télécharger en 3G au Togo coûtent plus cher que ce qu'elles apportent. La pile système garde les mêmes graisses. */ :root { --or: #C9A24B; /* accentOr de la maquette */ --or-texte: #A8842F; /* goldText, lisible sur fond clair */ --nuit: #17140F; /* le bandeau */ --nuit-sous: #9C927E; /* le texte secondaire du bandeau */ --fond: #F4F6F9; --carte: #FFFFFF; --bord: #E7EBF1; --filet: #EEF1F6; --encre: #17202B; --gris: #8A93A2; --puce: #F1F3F8; --bord-bouton: #DCE3EC; --survol: #F4F6F9; --entree: #0F6B4E; /* inCol */ --sortie: #B42318; /* outCol */ --vert-vif: #12B76A; /* le point « En ligne » */ --ambre: #B58A00; /* le point « silencieux » */ } /* Le mode sombre — les VALEURS de la maquette (`const t = dark ? {…}`), pas des approximations. Demandé par le porteur le 07/08 : « le switch mode sombre et clair manque ». ⚠ Il vit sur ``, pas sur `prefers-color-scheme` seul : la maquette en fait un **bouton**, donc un choix, et un choix se garde (localStorage). Le réglage du système sert de premier avis, pas de verdict — même esprit que l'app, où le thème se choisit dans Réglages. ⚠ Le vert et le terre CHANGENT en sombre (#4ADE80 / #F87171 contre #0F6B4E / #B42318). Ce n'est pas cosmétique : le vert foncé du mode clair est dessiné pour du blanc et devient illisible sur #0D0B07 — c'est exactement le défaut payé dans l'app le 04/08 avec `EntreeClair` sur le bandeau brun. */ :root[data-sombre="oui"] { --fond: #0D0B07; --carte: #201A11; --bord: #312917; --filet: #2B2414; --encre: #F2EDE2; --gris: #9C927E; --puce: #2B2414; --bord-bouton: #3E3520; --survol: #2B2414; --or-texte: #C9A24B; /* goldText devient l'or plein : le brun s'éteint */ --entree: #4ADE80; --sortie: #F87171; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ⚠ Sans lui, un `display:flex` posé par une classe ÉCRASE l'attribut hidden — la carte d'entrée restait affichée par-dessus la vue (mesuré au 1er rendu). */ [hidden] { display: none !important; } body { font-family: "Inter Tight", -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; background: var(--fond); color: var(--encre); min-height: 100vh; display: flex; flex-direction: column; } .large { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; } /* ── le bandeau ───────────────────────────────────────────────────────── */ .bandeau { background: var(--nuit); color: #fff; } .barre { display: flex; align-items: center; justify-content: space-between; height: 66px; } .marque { display: flex; align-items: center; gap: 13px; } .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--or); color: #241D12; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } .nom { font-weight: 800; font-size: 16px; line-height: 1; } .sous { font-size: 11.5px; color: var(--nuit-sous); margin-top: 3px; } .rail { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 5px; } .onglet { display: flex; align-items: center; gap: 8px; color: var(--nuit-sous); border-radius: 10px; padding: 8px 13px; /* ⚠ Le reset : devenus de vrais