/* ========================================================================= style.css — Habillage visuel de l'application "Gerimo" ========================================================================= Organisation : 1. Variables de thème (clair + sombre) et réglages globaux 2. Structure générale (app, en-tête, navigation) 3. Composants réutilisables (cartes, listes, puces, boutons…) 4. Formulaires (page Paramètres, modale d'ajout, page Modifier) 5. Fenêtre modale + toast 6. Media queries (grand écran, mode sombre système) Toutes les couleurs passent par des variables CSS (--bg, --card, --ink…) définies une seule fois : c'est ce qui permet au mode sombre (activé depuis Paramètres, ou automatiquement si l'appareil est en sombre) de retexturer toute l'app sans dupliquer les règles. ========================================================================= */ /* ---------- 1. Variables de thème ---------- */ :root { --bg: #f6f7fb; --card: #fff; --ink: #101828; --muted: #667085; --line: #eaecf0; --dark: #0f172a; --accent: #2563eb; --green: #12b76a; --red: #f04438; --amber: #f79009; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; } /* Mode sombre : activé via la classe .dark posée sur par applySettingsToUI() (js/ui.js) quand settings.darkMode est vrai. On redéfinit les mêmes variables, ce qui suffit à adapter tout le reste du fichier grâce à var(--...). */ html.dark { --bg: #0b1220; --card: #111a2b; --ink: #f1f5f9; --muted: #94a3b8; --line: #1e293b; --dark: #060b16; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100%; overscroll-behavior: none; } body { padding-bottom: env(safe-area-inset-bottom); transition: background .2s ease, color .2s ease; } button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; } .hidden { display: none !important; } /* ---------- 2. Structure générale ---------- */ .app { max-width: 520px; margin: auto; min-height: 100vh; padding-bottom: 88px; } /* Sur mobile, .app-content ne doit RIEN changer au rendu : ses enfants (.topbar et
) se comportent comme s'ils étaient directement dans .app, exactement comme avant l'ajout de la barre latérale. C'est la media query "ordinateur" plus bas qui lui donne un vrai rôle de mise en page (colonne de contenu à droite de la barre latérale). */ .app-content { display: contents; } /* Barre de navigation latérale : uniquement visible en mise en page "ordinateur" (voir media query desktop). Sur mobile, c'est .bottom-nav qui est utilisée à la place — voir plus bas. */ .sidebar-nav { display: none; } .topbar { display: flex; justify-content: space-between; align-items: center; padding: calc(18px + env(safe-area-inset-top)) 18px 14px; background: var(--bg); } .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted); } h1 { font-size: 25px; letter-spacing: -.04em; margin: 5px 0 0; } h2 { font-size: 24px; margin: 3px 0 0; letter-spacing: -.04em; } h3 { margin: 0; font-size: 16px; } .icon-btn { position: relative; width: 44px; height: 44px; border-radius: 14px; background: var(--card); box-shadow: 0 2px 12px #1018280d; display: flex; align-items: center; justify-content: center; } .icon-btn.small { width: 36px; height: 36px; border-radius: 11px; flex: none; } /* Icônes SVG inline (voir icons.js) : ne rétrécissent jamais dans un conteneur flex, et s'alignent proprement au milieu du texte. */ svg.icon { display: inline-block; vertical-align: middle; flex: none; } /* Déclencheur du menu ⋮ (Renommer/Déplacer/Supprimer) : juste trois points discrets à côté de la ligne, pas un bouton avec un fond comme .icon-btn. */ .menu-dots { flex: none; padding: 4px 8px; font-size: 20px; font-weight: 700; line-height: 1; color: var(--muted); } /* Petit menu contextuel (Renommer/Déplacer/Supprimer) : une carte compacte positionnée près du "⋮" cliqué (voir openItemMenu() dans ui.js), pas une grande fenêtre. Texte simple, sans icônes. */ .item-menu { position: fixed; z-index: 70; min-width: 160px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px #10182826; overflow: hidden; } .item-menu button { display: block; width: 100%; text-align: left; padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--line); } .item-menu button:last-child { border-bottom: 0; } .item-menu button.danger { color: var(--red); } .dot { position: absolute; right: 11px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); } main { padding: 0 16px; } /* ---------- 3. Composants ---------- */ .hero { background: var(--dark); color: white; border-radius: 24px; padding: 21px; margin: 5px 0 16px; box-shadow: 0 14px 30px #0f172a1f; } .hero .label { font-size: 12px; color: #b8c1d1; } .hero .amount { font-size: 34px; font-weight: 800; letter-spacing: -.05em; margin: 6px 0 16px; } .hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mini { background: #ffffff12; border: 1px solid #ffffff12; border-radius: 15px; padding: 12px; } .mini span { display: block; color: #aab5c7; font-size: 11px; margin-bottom: 4px; } .mini strong { font-size: 16px; } .section { display: flex; justify-content: space-between; align-items: center; margin: 21px 2px 10px; } .section a { color: var(--accent); font-size: 12px; font-weight: 700; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 19px; padding: 15px; margin-bottom: 10px; } .asset { display: flex; align-items: center; gap: 12px; } .asset-icon { width: 47px; height: 47px; border-radius: 15px; display: grid; place-items: center; background: var(--bg); font-size: 22px; flex: none; } .asset-main { min-width: 0; flex: 1; } .asset-main strong { display: block; font-size: 15px; } .asset-main span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .asset-value { text-align: right; } .asset-value strong { font-size: 14px; } .asset-value small { display: block; color: var(--green); font-size: 11px; margin-top: 3px; } .chip { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #ecfdf3; color: #027a48; font-size: 10px; font-weight: 700; margin-top: 9px; } html.dark .chip { background: #06301f; color: #4ade80; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 15px; } .stat .ico { font-size: 19px; margin-bottom: 12px; } .stat span { display: block; color: var(--muted); font-size: 11px; } .stat strong { display: block; font-size: 20px; margin-top: 4px; } .list-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .list-row:last-child { border-bottom: 0; } .list-row .grow { flex: 1; min-width: 0; } .list-row strong { font-size: 14px; } .list-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; } .amount-green { color: var(--green); } .amount-red { color: var(--red); } .progress { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 10px; } .progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .empty { text-align: center; padding: 38px 18px; color: var(--muted); } .empty .big { font-size: 42px; margin-bottom: 8px; } .empty b { color: var(--ink); } .empty p { font-size: 13px; line-height: 1.5; } .empty .primary { margin-top: 14px; } .primary { width: 100%; background: var(--dark); color: #fff; padding: 14px; border-radius: 14px; font-weight: 750; text-align: center; } .secondary { width: 100%; background: var(--line); color: var(--ink); padding: 14px; border-radius: 14px; font-weight: 750; text-align: center; } .toolbar { display: flex; gap: 8px; overflow: auto; padding: 2px 0 5px; margin-bottom: 12px; } .filter { white-space: nowrap; padding: 9px 12px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; font-size: 11px; font-weight: 700; } .filter.active { background: var(--dark); color: white; border-color: var(--dark); } .bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); width: min(520px, 100%); height: 76px; padding: 7px 13px calc(7px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px #1018280c; } .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #98a2b3; font-size: 20px; } .bottom-nav svg { width: 21px; height: 21px; } .bottom-nav small { font-size: 9px; font-weight: 700; } .bottom-nav button.active { color: var(--ink); } .add-tab b { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 17px; background: var(--dark); color: #fff; line-height: 1; box-shadow: 0 8px 18px #0f172a30; } .add-tab svg { width: 22px; height: 22px; } /* ---------- 4. Formulaires (Paramètres, modale d'ajout, édition d'actif) ---------- */ .field { display: block; margin-bottom: 14px; } .field span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; } .field input, .field select { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); color: var(--ink); font-size: 14px; font-family: inherit; } .field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .field input[type="file"] { padding: 9px 13px; } .toggle-field { display: flex; align-items: center; justify-content: space-between; } .toggle-field span { margin-bottom: 0; color: var(--ink); font-weight: 600; font-size: 14px; } .toggle-field input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--dark); } .form-actions { display: flex; gap: 10px; margin-top: 6px; } .form-actions button { flex: 1; } .sub { color: var(--muted); font-size: 11px; } /* ---------- 5. Fenêtre modale + toast ---------- */ .modal { position: fixed; z-index: 50; inset: 0; background: #10182866; display: flex; align-items: flex-end; } .sheet { width: min(520px, 100%); margin: auto 0 0; background: var(--card); border-radius: 26px 26px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: up .22s ease; } @keyframes up { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet-handle { width: 38px; height: 4px; background: #d0d5dd; border-radius: 99px; margin: 3px auto 18px; } .sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; } .sheet-head h2 { font-size: 20px; } .close { font-size: 28px; color: var(--muted); line-height: 1; } .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quick-grid button { text-align: left; border: 1px solid var(--line); border-radius: 17px; padding: 14px; background: var(--bg); } .quick-grid span { display: block; font-size: 24px; margin-bottom: 12px; } .quick-grid b { display: block; font-size: 13px; } .quick-grid small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; line-height: 1.35; } .toast { position: fixed; z-index: 100; left: 50%; bottom: 92px; transform: translate(-50%, 20px); background: var(--dark); color: white; padding: 11px 15px; border-radius: 12px; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s; max-width: 90%; text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* Écran de connexion / inscription / mot de passe (js/auth.js), affiché centré par défaut. La page vitrine (mode "landing") a besoin d'une mise en page normale — voir .is-landing plus bas, qui annule ce centrage. */ .auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 30px 24px; box-shadow: 0 14px 30px #1018280d; } .auth-card h1 { margin: 4px 0 0; } .auth-card .sub a { color: var(--accent); font-weight: 700; cursor: pointer; margin-left: 4px; } /* ---------- Page vitrine (marketing, publique, avant connexion) ---------- */ .auth-screen.is-landing { display: block; min-height: auto; padding: 0; } .landing { max-width: 1100px; margin: 0 auto; padding: 20px 20px 60px; } .landing-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 6px 0 36px; } .landing-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; white-space: nowrap; } .landing-nav-actions { display: flex; align-items: center; gap: 14px; } .landing-nav-actions a { font-weight: 700; cursor: pointer; white-space: nowrap; } .landing-hero { padding: 30px 0 46px; } .landing-hero-text { text-align: center; } .landing-hero h1 { font-size: 32px; margin: 12px 0 16px; letter-spacing: -0.03em; } .landing-hero p { color: var(--muted); font-size: 15px; max-width: 460px; margin: 0 auto; line-height: 1.6; } /* Aperçu de l'accueil de l'app (voir landingHtml(), auth.js) : un vrai .hero/.stats réduits dans une carte-fenêtre, pour montrer l'app plutôt que la décrire. aria-hidden côté HTML (purement illustratif). */ .landing-preview { max-width: 360px; margin: 34px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 16px; box-shadow: 0 20px 40px #10182814; } .landing-features { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 10px 0 20px; } .landing-feature { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; } .landing-feature-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; } .landing-feature h3 { margin: 14px 0 6px; font-size: 15px; } .landing-feature p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; } .landing-pricing { padding: 30px 0 10px; } .landing-pricing h2 { font-size: 22px; } .landing-footer { text-align: center; padding: 34px 0 0; } @media (min-width: 1024px) { .landing { padding: 32px 48px 80px; } .landing-hero { padding: 60px 0 64px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; } .landing-hero-text { text-align: left; } .landing-hero h1 { font-size: 48px; } .landing-hero p { font-size: 16px; max-width: 480px; margin: 0; } .landing-preview { margin: 0; max-width: none; } .landing-features { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .detail-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; } .back { font-size: 24px; width: 38px; height: 38px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); flex: none; } .big-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; margin-bottom: 12px; } .big-card .big-value { font-size: 29px; font-weight: 800; letter-spacing: -.04em; margin: 7px 0 3px; } /* ---------- 6. Media queries ---------- */ /* Tablette / écran moyen : l'app garde sa mise en page mobile (une seule colonne, barre du bas) mais se présente comme une carte centrée sur un fond neutre plutôt que de s'étirer d'un bord à l'autre de l'écran. */ @media (min-width: 700px) { body { background: #e9edf3; } html.dark body { background: #05070d; } .app { background: var(--bg); box-shadow: 0 0 50px #10182812; } } /* ------------------------------------------------------------------------- Ordinateur (à partir de 1024px) : vraie mise en page "site web". Important — RIEN ne change dans le fonctionnement, seulement la présentation : - la barre du bas (.bottom-nav) laisse place à une barre latérale (.sidebar-nav) — mêmes boutons, mêmes onclick="navigate(...)" ; - les listes de cartes (actifs, documents, contrats…) passent en grille grâce à un simple conteneur `.card-grid` ajouté autour d'elles dans pages.js — sur mobile, `.card-grid` n'a aucune règle, donc aucun changement là-bas ; - la fenêtre modale devient une fenêtre centrée classique au lieu d'un tiroir qui remonte du bas. ------------------------------------------------------------------------- */ @media (min-width: 1024px) { body { padding: 0; } /* Toute la largeur ET toute la hauteur de la fenêtre — pas de carte flottante avec des marges autour, contrairement au palier tablette juste au-dessus (700-1023px), qui lui garde ce rendu "carte centrée". */ .app { max-width: none; width: 100%; margin: 0; min-height: 100vh; padding-bottom: 0; display: grid; grid-template-columns: 260px 1fr; border-radius: 0; box-shadow: none; background: var(--bg); } /* --- Barre latérale (pleine hauteur, reste visible au défilement) --- Suit le mode clair/sombre comme le reste de l'app (var(--card) pour le fond, séparée du contenu par une bordure var(--line)) — seul l'état "actif" garde volontairement le même fond très sombre (var(--dark)) dans les deux thèmes, comme .primary/.filter.active ailleurs dans ce fichier, pour rester lisible sur fond clair comme sur fond sombre. */ .sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; background: var(--card); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; } .sidebar-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 16px; padding: 6px 10px 22px; } .sidebar-brand svg { width: 22px; height: 22px; flex: none; } .sidebar-add { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; font-weight: 750; font-size: 14px; padding: 12px; border-radius: 13px; margin-bottom: 18px; } .sidebar-add svg { width: 18px; height: 18px; flex: none; } /* [data-tab] = onglets principaux, [data-view] = accès direct à quelques sous-pages (Documents/Abonnement/Paramètres) — même style, même comportement, seule la donnée suivie diffère (voir ui.js). */ .sidebar-nav button[data-tab], .sidebar-nav button[data-view] { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 12px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; } .sidebar-nav button[data-tab] svg, .sidebar-nav button[data-view] svg { width: 19px; height: 19px; flex: none; } .sidebar-nav button[data-tab] small, .sidebar-nav button[data-view] small { font-size: 14px; font-weight: inherit; } .sidebar-nav button[data-tab]:hover, .sidebar-nav button[data-view]:hover { background: var(--line); color: var(--ink); } .sidebar-nav button[data-tab].active, .sidebar-nav button[data-view].active { background: var(--dark); color: #fff; } .sidebar-divider { height: 1px; background: var(--line); margin: 12px 4px; flex: none; } /* --- Colonne de contenu (prend tout l'espace restant) --- */ .app-content { display: block; overflow-y: auto; height: 100vh; } .bottom-nav { display: none; } .topbar { padding: 30px 48px 18px; position: sticky; top: 0; z-index: 5; background: var(--bg); } h1 { font-size: 30px; } /* Le contenu garde une largeur confortable à LIRE, mais la colonne et le fond, eux, vont bien jusqu'au bord de l'écran (voir .app ci-dessus). */ main { max-width: 900px; margin: 0 auto; padding: 0 48px 60px; } /* --- Grilles de cartes (voir pages.js : wrapper
ajouté autour des listes d'actifs/documents/contrats). --- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; } .card-grid > * { margin-bottom: 0; } /* Comparatif des 3 formules d'abonnement, toujours sur une seule ligne (contrairement à .card-grid, qui adapte librement son nombre de colonnes à la largeur disponible). */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; } .pricing-grid > * { margin-bottom: 0; } /* --- Modale : fenêtre centrée plutôt que tiroir du bas --- */ .modal { align-items: center; justify-content: center; } .sheet { width: min(480px, 92vw); margin: 0; border-radius: 24px; max-height: 85vh; animation: pop .16s ease; } .sheet-handle { display: none; } } @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Remarque : le mode sombre est piloté UNIQUEMENT par le réglage explicite "Mode sombre" de la page Paramètres (classe .dark sur , voir applySettingsToUI() dans js/ui.js). On évite volontairement de le faire suivre automatiquement la préférence système : cela éviterait à un choix explicite de l'utilisateur d'être écrasé par celle-ci. */