/* ════════════════════════════════════════════════════════════════════════════ Thème Filorys Une marque s'applique PAR-DESSUS un module, jamais dedans. Le module « relances » ne connaît que des jetons ; ce fichier leur donne des valeurs. Le jour où la marque change de nom — et il n'est pas arrêté — il n'y a qu'un fichier à refaire. ⚠️ SOURCE UNIQUE : les valeurs viennent de KANSO-BRAIN/29_Charte_Graphique/Filorys/Charte_Filorys.md. Relevées sur une capture, pas sur la source : justes à quelques points près, pas certaines. Si elles changent, les deux fichiers changent ensemble. ⛔ LE SÉLECTEUR. ThemeManager pose déjà `` avec la clef du client. La première version de ce fichier attendait une classe `.theme-filorys` que PERSONNE ne posait : le thème n'a jamais été appliqué, sans la moindre erreur. Et il cible `body`, pas `:root` : ThemeManager écrit ses variables en style EN LIGNE sur ``, et un style en ligne bat une règle de feuille sur le même élément. Posées sur `body`, elles gagnent pour body et tout ce qu'il contient — c'est-à-dire tout ce qu'on voit. ════════════════════════════════════════════════════════════════════════════ */ [data-client-theme="filorys"] body, body.theme-filorys { /* ── Les jetons de la charte, lus par le module ─────────────────────────── */ --kanso-navy: #1C3A2D; /* vert profond — titres, bandeau d'ouverture */ --kanso-corail: #2C6049; /* vert moyen — l'accent, les boutons */ --kanso-encre: #1C2B24; --kanso-encre-douce: #5F6B63; --kanso-bordure: #DDDBD1; /* le filet, qui remplace les cadres */ --kanso-input: #F5F4EE; --fy-lime: #D9EBA5; /* ⛔ fonds SEULEMENT, jamais du texte sur clair */ --fy-creme: #F5F4EE; --fy-creme-chaud: #EDEBE2; /* ── La coque du cockpit ────────────────────────────────────────────────── */ /* Un module vert dans une barre latérale navy se voit immédiatement : la marque s'arrête au milieu de l'écran. */ --primary: #2C6049; --primary-dark: #1C3A2D; --primary-light: #D9EBA5; --primary-rgb: 44, 96, 73; --primary-dark-rgb: 28, 58, 45; --primary-light-rgb: 217, 235, 165; --primary-muted: rgba(44, 96, 73, .12); --shell-bg: #1C3A2D; --shell-surface: #1C3A2D; --shell-border: rgba(255, 255, 255, .09); --shell-text: #F2F1EA; --shell-text-muted: #A9BBAE; --shell-text-soft: #7D9186; --shell-version: #5E6F64; --shell-hover: rgba(255, 255, 255, .06); /* L'élément actif se marque au lime — le seul endroit du cockpit où il apparaît, et il y est sur fond vert, comme la charte l'exige. */ --shell-active-bg: rgba(217, 235, 165, .16); --shell-active-text: #FFFFFF; --shell-toggle-bg: rgba(217, 235, 165, .12); --shell-toggle-border: rgba(217, 235, 165, .26); --shell-toggle-hover: rgba(217, 235, 165, .22); --shell-toggle-text: #F2F1EA; --shell-mobile-tap: rgba(217, 235, 165, .2); --shell-welcome: #F2F1EA; --theme-color: #1C3A2D; } /* Le module hérite : on ne redéfinit que ce que la marque change vraiment. */ [data-client-theme="filorys"] .rl, body.theme-filorys .rl { --rl-vert: #2C6049; --rl-vert-fond: #E7F0E3; --rl-ambre: #8A6A1E; --rl-ambre-fond: #F6F1DE; --rl-rouge: #A33B2B; --rl-rouge-fond: rgba(163, 59, 43, .08); } /* ⛔ Le lime n'est JAMAIS une couleur de texte sur fond clair : il y perdrait tout contraste. Ici il est un fond, avec l'encre verte par-dessus. */ [data-client-theme="filorys"] .rl-etape--en_echange, body.theme-filorys .rl-etape--en_echange { background: var(--fy-lime); color: #2F4A18; } /* Le voile du fil était teinté navy Kanso : du violet sur une marque verte se remarque immédiatement, et c'est le genre de détail qui fait « pas fini ». */ [data-client-theme="filorys"] .rl-fil, body.theme-filorys .rl-fil { background: rgba(28, 58, 45, .34); } /* ── L'en-tête de marque du banc d'essai ──────────────────────────────────── Utilisé par l'aperçu hors ligne, pas par le cockpit — qui a sa propre barre. Le point du « F » est le seul geste graphique : une marque se reconnaît à une chose, pas à cinq. */ .fy-barre { background: var(--fy-creme, #F5F4EE); border-bottom: 1px solid #DDDBD1; padding: 16px 24px; display: flex; align-items: center; gap: 12px; } .fy-marque { font-family: Lato, system-ui, sans-serif; font-weight: 900; font-size: 20px; letter-spacing: -.5px; color: var(--kanso-navy, #1C3A2D); display: flex; align-items: baseline; gap: 7px; } .fy-marque .f { display: inline-flex; align-items: baseline; gap: 2px; } .fy-marque .f::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--kanso-corail, #2C6049); transform: translateY(-3px); } .fy-espace { margin-left: auto; font-family: 'Open Sans', system-ui, sans-serif; font-size: 12.5px; color: var(--kanso-encre-douce, #5F6B63); font-weight: 400; letter-spacing: 0; }