/* ═══════════════════════════════════════════════════════════════════════════ * Thèmes du site — chargé sur TOUTES les pages, APRÈS leur feuille propre. * * Le principe : « Original » est l'absence de thème. Aucune règle ici ne * s'applique tant que ne porte pas data-theme — le site d'origine ne * traverse pas ce fichier, il ne peut donc pas être abîmé par lui. * * « Dark » suit la recette de Dark Reader, pas celle du noir pur. Un premier * essai en quasi-noir (#0a0a0c) a montré pourquoi : le contraste écrase tout, * et les couleurs qui doivent porter du sens — le vert des DO'S, le rouge des * DON'TS — n'ont plus d'air pour briller. Dark Reader éclaire ses fonds à * #181a1b, un graphite doux, et réchauffe le texte (#e8e6e3 plutôt que blanc * bleuté). C'est ce couple-là qui rend son anti-lumière confortable. * * Deuxième leçon du même essai : garder le violet d'origine au milieu d'un * thème sombre, c'est garder un morceau de l'ancien thème planté dans le * nouveau. Ici le violet est REMPLACÉ par l'accent du thème — un bleu ardoise * désaturé, famille Dark Reader — via les mêmes variables (--purple, --accent…) * que les pages consomment déjà. Les couleurs de SENS (vert = ok, rouge = * danger, jaune = attention) ne bougent pas : elles gagnent même en présence * sur le fond adouci. * * Deux leviers : * 1. les variables — 23 pages sur 28 héritent du :root de style.css, les * pages mobiles ont le leur (mobile.1.css). html[data-theme] gagne en * spécificité sur :root, aucun !important nécessaire ; * 2. les surfaces peintes en dur (dégradés de sidebar, fonds de modals…), * relevées feuille par feuille — une surface oubliée resterait bleu-nuit * au milieu du graphite, c'est le seul vrai risque de ce fichier. * Les voiles translucides (rgba blanc/noir) suivent le fond tout seuls ; * les maquettes qui imitent autre chose (écran Meta de /sop-instagram, * aperçu téléphone de /lien-editeur) sont du contenu, pas le site. * * Le choix vit dans localStorage (voir public/js/theme.1.js et le sélecteur * de /settings). CSS uniquement : aucune route, aucun comportement modifié. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Jetons de couleur : la famille violette de l'Original, nommee ──────── * Chaque violet pose en dur dans le site (CSS, HTML, styles inline generes * par le JS) est remplace par var(--vio-XXXXXX), ou XXXXXX est SA valeur * d'origine. En theme Original ces jetons valent exactement cette valeur : * zero changement, au pixel. En Dark ils basculent vers la famille azur. * C'est ce qui permet de ne laisser AUCUNE trace de l'Original en sombre * sans jamais toucher a l'Original lui-meme. * Les valeurs -rgb- servent aux lavis : rgba(var(--vio-rgb-XXXXXX), .15). */ :root { --vio-8b5cf6: #8b5cf6; --vio-a78bfa: #a78bfa; --vio-7c3aed: #7c3aed; --vio-6d28d9: #6d28d9; --vio-a855f7: #a855f7; --vio-c084fc: #c084fc; --vio-c4b5fd: #c4b5fd; --vio-7c6aff: #7c6aff; --vio-a796ff: #a796ff; --vio-5a4ad8: #5a4ad8; --vio-c8b8ff: #c8b8ff; --vio-rgb-8b5cf6: 139,92,246; --vio-rgb-a855f7: 168,85,247; --vio-rgb-7c6aff: 124,106,255; --vio-rgb-c4b5fd: 196,181,253; --vio-rgb-c084fc: 192,132,252; --vio-rgb-a78bfa: 167,139,250; --vio-8b7bff: #8b7bff; --vio-6d5ce0: #6d5ce0; --fond-13131a: #13131a; --fond-0a0a14: #0a0a14; --fond-13131f: #13131f; } html[data-theme="dark"] { --vio-8b5cf6: #58a6ff; --vio-a78bfa: #79c0ff; --vio-7c3aed: #388bfd; --vio-6d28d9: #1f6feb; --vio-a855f7: #58a6ff; --vio-c084fc: #79c0ff; --vio-c4b5fd: #a5d0ff; --vio-7c6aff: #58a6ff; --vio-a796ff: #79c0ff; --vio-5a4ad8: #316dca; --vio-c8b8ff: #a5d0ff; --vio-rgb-8b5cf6: 88,166,255; --vio-rgb-a855f7: 88,166,255; --vio-rgb-7c6aff: 88,166,255; --vio-rgb-c4b5fd: 165,208,255; --vio-rgb-c084fc: 121,192,255; --vio-rgb-a78bfa: 121,192,255; --vio-8b7bff: #58a6ff; --vio-6d5ce0: #316dca; --fond-13131a: #1e2021; --fond-0a0a14: #161718; --fond-13131f: #1e2021; } /* ── DARK : les variables globales (style.css) ─────────────────────────── */ html[data-theme="dark"] { /* Fonds — le #181a1b de Dark Reader, décliné */ --bg: #181a1b; --bg2: #1e2021; --panel: rgba(30, 32, 33, 0.94); --card: rgba(36, 39, 40, 0.94); --card2: rgba(46, 49, 50, 0.72); --border: rgba(255, 255, 255, 0.12); --border2: rgba(255, 255, 255, 0.19); /* Texte — blanc cassé chaud, pas blanc bleuté */ --text: #eceae7; --text2: #c0beb7; --muted: #98958d; /* L'accent du thème : le violet d'origine devient bleu ardoise désaturé. Mêmes variables, donc remplacé PARTOUT où les pages font var(--purple). */ --purple: #58a6ff; --purple-l: #79c0ff; --purple-d: #388bfd; --pink: #f472b6; --border-glow: rgba(88, 166, 255, 0.4); --grad-main: linear-gradient(135deg, #316dca 0%, #58a6ff 100%); --grad-blue: linear-gradient(135deg, #1f6feb 0%, #58a6ff 100%); --shadow-glow: 0 0 40px rgba(88, 166, 255, 0.18); /* Pages mobiles (mobile.1.css) — fonds et accent, même logique */ --bg-deep: #121415; --surface: #232627; --surface2: #2a2d2e; --accent: #58a6ff; --accent-bright: #79c0ff; --accent-deep: #316dca; --accent-soft: rgba(88, 166, 255, .18); } /* ── DARK : surfaces peintes en dur ────────────────────────────────────── */ /* La lueur ambiante du fond : elle suit l'accent du thème, plus le violet. */ html[data-theme="dark"] body::before { background: radial-gradient(circle, rgba(88, 166, 255, .05) 0%, transparent 60%); } html[data-theme="dark"] body::after { background: radial-gradient(circle, rgba(88, 166, 255, .04) 0%, transparent 60%); } /* La sidebar : même raccord au pixel près que l'original avec son fond, refait en graphite (voir le commentaire dans style.css). */ html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, rgba(88, 166, 255, .06) 0%, transparent 40%), linear-gradient(90deg, rgba(30, 32, 33, .96) 0%, rgba(24, 26, 27, .86) 100%); } @media (max-width: 768px) { /* style.css force #080616 !important sur mobile — même arme, même poids. */ html[data-theme="dark"] .sidebar { background: #1d1f20 !important; } } /* style.css — journaux, toasts, vignettes */ html[data-theme="dark"] .model-card-image::after { background: linear-gradient(to top, rgba(24,26,27,1), transparent); } html[data-theme="dark"] .log-wrap { background: rgba(20, 21, 22, 0.95); } html[data-theme="dark"] .log-toolbar { background: rgba(26, 28, 29, 0.95); } html[data-theme="dark"] .log-container { background: linear-gradient(to bottom, rgba(18,19,20,.98), rgba(22,23,24,.98)); } html[data-theme="dark"] .toast { background: rgba(30,32,33,.95); } /* Connexion (index.1.css) et 404 */ html[data-theme="dark"] .panel-left { background: #1b1d1e; } html[data-theme="dark"] .panel-right { background: #212324; } html[data-theme="dark"] body { background-color: var(--bg); } html[data-theme="dark"] .box { background: rgba(32,34,35,.7); } /* Dashboard (dashboard-glass.css + dashboard-activity.1.css) */ html[data-theme="dark"] body.dashboard-page { background: radial-gradient(ellipse 90% 50% at 15% 5%, rgba(88, 166, 255, .12), transparent 55%), radial-gradient(ellipse 70% 45% at 95% 30%, rgba(56, 189, 248, .07), transparent 60%), radial-gradient(ellipse 70% 40% at 50% 95%, rgba(181, 138, 158, .07), transparent 60%), #17191a; } html[data-theme="dark"] body.dashboard-page .dash-stat-card { background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%), rgba(33, 35, 36, .55); } html[data-theme="dark"] body.dashboard-page .da-card { background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%), rgba(31, 33, 34, .65); } html[data-theme="dark"] body.dashboard-page .ig-card-frame { background: linear-gradient(180deg, rgba(48, 51, 54, .5) 0%, rgba(26, 28, 29, .82) 100%); } html[data-theme="dark"] body.dashboard-page .modal-box { background: linear-gradient(180deg, rgba(45, 48, 50, .92) 0%, rgba(30, 32, 33, .96) 100%); } html[data-theme="dark"] .da-card { background: linear-gradient(180deg, rgba(35,38,39,.78) 0%, rgba(29,31,32,.78) 100%); } html[data-theme="dark"] .da-growth-dd-panel { background: linear-gradient(180deg, #26292a 0%, #1e2021 100%); } html[data-theme="dark"] .da-cal-panel { background: rgba(30, 32, 33, .985); } /* Le grand panneau générique gris-bleu (team, facture, planning, import, mobile — tous déclinent le même dégradé 26,26,46 → 20,20,42) */ html[data-theme="dark"] .ta-dd-trigger, html[data-theme="dark"] .fac-sum-card, html[data-theme="dark"] .pl-grid-wrap, html[data-theme="dark"] .tk-toolbar { background: linear-gradient(180deg, rgba(35,38,39,.78) 0%, rgba(29,31,32,.78) 100%); } html[data-theme="dark"] .ta-dd-panel { background: linear-gradient(180deg, rgba(30,32,33,.98), rgba(25,27,28,.98)); } /* Facture / planning — modals et menus déroulants */ html[data-theme="dark"] .fac-modal-content, html[data-theme="dark"] .fac-cselect-panel, html[data-theme="dark"] .tk-cselect-panel { background: rgba(30, 32, 33, .98); } html[data-theme="dark"] #pl-modal .fac-modal-content { background: linear-gradient(160deg, rgba(33,35,36,.99) 0%, rgba(26,28,29,.99) 100%); } html[data-theme="dark"] .pl-cselect-panel { background: #202324; } html[data-theme="dark"] .pl-status-popover { background: linear-gradient(160deg, rgba(34,36,37,.97), rgba(26,28,29,.98)); } /* Import (import.1.css) */ html[data-theme="dark"] .tk-progress { background: linear-gradient(180deg, rgba(88,166,255,.08) 0%, rgba(29,31,32,.85) 100%); } html[data-theme="dark"] .tk-results { background: linear-gradient(180deg, rgba(35,38,39,.65) 0%, rgba(29,31,32,.65) 100%); } html[data-theme="dark"] .tk-modal-content { background: #212425; } html[data-theme="dark"] .tk-card-thumb-fallback { background: linear-gradient(135deg, #26292a, #17191a); } html[data-theme="dark"] .tk-target-card { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(29,31,32,.6)); } html[data-theme="dark"] .tk-cselect-open .tk-cselect-trigger { background: rgba(30,32,33,.6); } /* Générateur, geelark, scraper, veille, liens. Le .toast du générateur (#13131a) est déjà couvert : la règle générique html[data-theme] .toast plus haut gagne en spécificité sur toutes les pages. */ html[data-theme="dark"] .aud-modal-box { background: #212425; } html[data-theme="dark"] .stats-modal-box { background: #1d2021; } html[data-theme="dark"] .scr-info-bubble { background: #26292a; } html[data-theme="dark"] .scr-thumb { background: linear-gradient(135deg, #2a2d2e, #191b1c); } html[data-theme="dark"] .vl-suggestions { background: #212425; } html[data-theme="dark"] .lk-tip { background: #1f2122; } /* IA (ia.1.css) — le fond dégradé de la page garde sa lueur, sa base #05041a est neutralisée par la règle générique background-color posée sur body plus haut : le raccourci background pose la couleur en dernière couche, et une règle background-color plus spécifique ne remplace QUE cette couche. */ html[data-theme="dark"] .ia-lay-panel { background: #242728; } /* Phone Farm (phone-farm.1.css) — la lueur cyan reste (identité de la page, pas du violet), la base devient graphite */ html[data-theme="dark"] .pf-nav { background: linear-gradient(180deg, rgba(34, 211, 238, .05) 0%, transparent 40%), linear-gradient(90deg, rgba(30, 32, 33, .96) 0%, rgba(24, 26, 27, .86) 100%); } html[data-theme="dark"] .pf-menu, html[data-theme="dark"] .pf-node { background: #26292a; } html[data-theme="dark"] .pf-toolbar { background: rgba(30, 32, 33, .92); } html[data-theme="dark"] .pf-dd2-panel, html[data-theme="dark"] .pf-dd-panel { background: linear-gradient(180deg, #26292a 0%, #1e2021 100%); } html[data-theme="dark"] select.pf-input option, html[data-theme="dark"] select.pf-select option { background: #1e2021; } html[data-theme="dark"] .pf-cap-preview canvas { background: #161718; } /* Fenêtres génériques (ui-modal.css) */ html[data-theme="dark"] .um-overlay { background: rgba(10, 11, 11, .72); } html[data-theme="dark"] .um-box { background: #242728; } html[data-theme="dark"] select.um-input option { background: #1e2021; } html[data-theme="dark"] .um-dd-panel { background: linear-gradient(180deg, #26292a 0%, #1e2021 100%); } /* Cartes Instagram (ig-cards.css) */ html[data-theme="dark"] .ig-card-frame { background: linear-gradient(180deg, #26292a 0%, #191b1c 100%); } /* Formation — les cartes DO'S / DON'TS. C'est ELLES qui ont montré le problème du premier essai : leur teinte à 6% n'existait plus sur du quasi-noir. Sur le graphite on la remonte même un peu, pour que le vert et le rouge portent à nouveau. */ html[data-theme="dark"] .fm-do { background: rgba(34,197,94,.09); border-color: rgba(34,197,94,.38); } html[data-theme="dark"] .fm-dont { background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.38); } /* Info Modèles, Formation, Trophées — les surfaces bleu-nuit posées dans le