/* Manyflow — thèmes (V0.47). UNE seule source de vérité pour les couleurs : variables CSS chargées par TOUTES les pages (app, login, éditeur, simulateur) AVANT app.css / editor.css / styles de page. Sombre = défaut (:root) ; clair = surcharge [data-theme="light"] posée sur par le serveur (cookie mf_theme) et par setTheme() en direct. */ :root { /* Fonds */ --bg: #0f1117; /* fond de page */ --surface: #151926; /* cartes, menu latéral, tableaux */ --surface-2: #1a1e2a; /* champs, boutons neutres, en-têtes de tableau */ --surface-3: #232839; /* popovers (palette emoji) */ --input-bg: #12151f; /* champs de recherche / formulaires */ --hover: #1c2233; /* survol menu */ --active: #24304f; /* entrée de menu active */ --active-border: #3d4d8a; --detail-bg: #10131d; /* sous-lignes de détail (stats) */ /* Bordures */ --border: #232838; /* bordures douces (cartes, lignes de tableau) */ --border-2: #2a2f3e; /* bordures de champs et boutons */ --border-strong: #3a4157; /* bordures au survol */ /* Textes */ --text: #e8eaf0; --text-strong: #ffffff; --muted: #aab3c5; --soft: #c3c9dd; /* Accent */ --accent: #4f6ef7; --accent-hover: #6f89ff; --accent-soft: rgba(79, 110, 247, .2); --link: #8fa3ff; --on-accent: #ffffff; /* Sémantique (badges, pastilles, bandeaux) */ --ok-bg: #143d2b; --ok-fg: #5ee6a0; --ok-dot: #34c77b; --warn-bg: #3d3114; --warn-fg: #e6c65e; --warn-border: #6e5a24; --warn-bg-2: #4a3d14; /* badge "warn" des paramètres */ --danger-bg: #3d1714; --danger-fg: #ff9d94; --danger-border: #6e2a24; --danger-bg-2: #43201f; --danger-strong: #a33; --danger-soft: #ff8a8a; --err-zone-bg: #4a1a1f; /* zone d'erreurs de l'éditeur */ --info-bg: #1d2a4d; --info-fg: #8fa3ff; --neutral-bg: #2b3040; --neutral-fg: #aab3c5; --ko-dot: #ff6b61; /* Cartes d'information (conseil IA, résumé de ciblage) */ --info-card-bg: #10192e; --info-card-bg-hover: #16203a; --info-card-border: #35406b; /* Divers */ --overlay: rgba(8, 10, 16, .72); /* fond des modales */ --on-overlay: #ffffff; /* texte posé SUR un overlay sombre */ --chip-overlay: rgba(8, 10, 16, .8); /* pastilles posées sur une image */ --shadow: rgba(0, 0, 0, .35); --shadow-strong: rgba(0, 0, 0, .45); --canvas-dot: #232838; /* points du canvas de l'éditeur */ --thumb-bg: #0f1117; --halo: rgba(79, 110, 247, .14); /* halo de la page de connexion */ --story-warn: #e8a13c; /* avertissement story de l'éditeur */ --key-ok: #7ee2a8; /* « clé OpenAI configurée » */ } /* --- Thème clair : réellement lisible, pas une inversion --- */ [data-theme="light"] { --bg: #f3f5fa; --surface: #ffffff; --surface-2: #f1f3f8; --surface-3: #ffffff; --input-bg: #ffffff; --hover: #eceff6; --active: #e1e8fd; --active-border: #b9c6f2; --detail-bg: #f6f7fb; --border: #e4e8f1; --border-2: #d4dae6; --border-strong: #b4bdd0; --text: #232a3b; --text-strong: #12161f; --muted: #5c6577; --soft: #454e63; --accent: #3b55d9; --accent-hover: #4f6ef7; --accent-soft: rgba(59, 85, 217, .18); --link: #3450c8; --on-accent: #ffffff; --ok-bg: #d7f1e1; --ok-fg: #146a41; --ok-dot: #1ea366; --warn-bg: #f7edcb; --warn-fg: #74580d; --warn-border: #dcc063; --warn-bg-2: #f5e8c0; --danger-bg: #fadcd8; --danger-fg: #9c2b22; --danger-border: #eab2ab; --danger-bg-2: #f8d7d3; --danger-strong: #c0392b; --danger-soft: #c0392b; --err-zone-bg: #fbe3e0; --info-bg: #dfe6fb; --info-fg: #2c46b8; --neutral-bg: #e7eaf1; --neutral-fg: #4d5568; --ko-dot: #e0554a; --info-card-bg: #eef2fd; --info-card-bg-hover: #e3eafc; --info-card-border: #c3cff2; --overlay: rgba(24, 30, 44, .45); --on-overlay: #ffffff; /* l'overlay reste sombre, même en thème clair */ --chip-overlay: rgba(18, 24, 38, .72); --shadow: rgba(18, 26, 43, .10); --shadow-strong: rgba(18, 26, 43, .18); --canvas-dot: #d9deea; --thumb-bg: #eceff6; --halo: rgba(79, 110, 247, .10); --story-warn: #a86a0a; --key-ok: #146a41; } /* --- Sélecteurs langue + thème (partial _prefs_switcher.html) --- */ .prefs-switch { display: flex; gap: 6px; align-items: center; } .prefs-switch select { font: inherit; font-size: 12px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted); padding: 5px 6px; cursor: pointer; max-width: 100%; min-width: 0; } .prefs-switch select:hover { color: var(--text); border-color: var(--border-strong); } /* --- Navigation globale (V0.48) : [Langue][Thème][Compte] dans une VRAIE barre en tête du contenu (_global_nav.html), alignée à droite — DANS le flux, jamais flottante ni détachée. .gnav-inline : le trio s'insère dans une barre d'actions existante (éditeur). --- */ /* Barre dédiée, tout en haut de la zone principale : hauteur et marges CONSTANTES sur toutes les pages — le titre de page vient DESSOUS. */ .topbar { display: flex; justify-content: flex-end; align-items: center; width: 100%; min-height: 40px; margin: -12px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .gnav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } /* Les trois contrôles [Langue][Thème][Compte] partagent la MÊME hauteur : sans elle, le bouton compte (13px/padding 6px) mesure ~31px contre ~28px pour les sélecteurs natifs (12px/padding 5px) et déborde de ~1,5px en haut et en bas du centrage du .gnav. Hauteur fixe + padding vertical nul : chaque contrôle centre son contenu lui-même (select natif, inline-flex). margin: 0 : les pages ont des styles locaux du type `button { margin-top }` (Paramètres : 16px) qui fuiraient sinon sur le bouton compte et le décaleraient vers le bas — la barre doit rester identique sur TOUTES les pages. */ .gnav .prefs-switch select, .gnav .acct-btn { height: 28px; padding-top: 0; padding-bottom: 0; margin: 0; } /* --- Menu compte (partial _account_menu.html, V0.47.4/V0.48) --- */ /* Le conteneur .acct vit DANS le flux du .gnav mais reste TOUJOURS le référent de positionnement du panneau — relative, jamais static : en static le panneau absolu s'ancrerait sur le document et s'ouvrirait hors écran. */ .acct { position: relative; } .acct-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); box-shadow: 0 2px 8px var(--shadow); max-width: 60vw; } .acct-btn:hover { border-color: var(--border-strong); background: var(--hover); } .acct-ws { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-caret { font-size: 10px; color: var(--muted); } /* [hidden] doit GAGNER sur display:flex — sans cette règle, le style auteur écrase l'attribut hidden et le panneau resterait ouvert en permanence (bug découvert en vérification visuelle V0.48). */ .acct-panel[hidden] { display: none; } /* z-index : le panneau passe DEVANT les cartes de contenu qui suivent dans le flux (sans lui, leurs titres interceptent les clics). */ .acct-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px var(--shadow-strong); display: flex; flex-direction: column; gap: 8px; } .acct-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-sep { border-top: 1px solid var(--border); } .acct-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .acct-ws-single { font-size: 13px; color: var(--text); } /* Emplacements (V0.48) : un par plan/workspace accessible — connecté actif = marqué et désactivé ; connecté inactif = bouton (changer de compte) ; VIDE = CTA « Connecter Instagram » (lien vers la page Instagram). */ .acct-slot { display: block; box-sizing: border-box; font: inherit; font-size: 13px; text-align: left; width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); } .acct-slot:hover:not(:disabled) { background: var(--hover); border-color: var(--border-strong); } .acct-slot:disabled { border-color: var(--active-border); background: var(--active); color: var(--text-strong); cursor: default; } a.acct-cta { color: var(--link); font-weight: 600; } .acct-err { font-size: 12px; color: var(--danger-fg); margin: 0; } .acct-logout { margin: 0; } .acct-logout button { font: inherit; font-size: 13px; width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--danger-border); background: transparent; color: var(--danger-fg); } .acct-logout button:hover { background: var(--danger-bg); } /* Petit écran : la barre reste dans le flux en tête du contenu — les contrôles se compactent et passent à la ligne si besoin, aucune fonction perdue, rien n'est recouvert. */ @media (max-width: 760px) { .topbar { margin-bottom: 10px; } .acct-btn { font-size: 12px; padding: 5px 10px; } .acct-ws { max-width: 40vw; } }