/* ============================================================ OCTALI - Reskin Filament v3.6.5 (Pixbulle 2026) ============================================================ Changements v3.6.5 (retour Marie) : - Le theme "creme" est renomme "Initial" et affiche le GRIS #F5F6F8 (defaut). Suppression du bloc html.theme-creme qui restaurait le creme en v3.6.4 : le creme ne doit plus apparaitre du tout. - A coupler avec octali-theme-switcher.js v2.1 (label "Initial"). Changements v3.6.4 (retour Marie) : - Fond de page + header passes en gris clair #F5F6F8 par DEFAUT (--oc-bg). --oc-bg-alt ajuste a #ECEEF2 (gris un cran plus fonce). - Le creme d origine devient un theme a part : nouvelle classe html.theme-creme qui restaure --oc-bg #FBFAF5 / --oc-bg-alt #F5F2E8. - ATTENTION : verifier que le switcher JS n applique pas 'theme-creme' par defaut au load (sinon le defaut resterait creme). Le defaut doit etre AUCUNE classe theme sur . Changements v3.6.3 (retours Marie + DOM settings fourni) : - Couleur Taches : magenta #E354D4 -> violet-pourpre #9B3FC4 (moins rose). Variables --oc-magenta* recalculees + ombre flashy. - FIX REEL sous-nav settings (section 28) : la sous-nav settings reutilise les classes .fi-sidebar-item* de la sidebar principale, donc le label #fff de la section 3 la rendait invisible. On scope desormais sur le groupe parent [data-group-label="sub_navigation_"] pour reecrire ces liens en navy lisible (actif/hover en bleu Octali) SANS toucher la vraie sidebar. Changements v3.6.2 (ajustement Marie) : - Sidebar items : padding vertical resserre 7px -> 5px (.fi-sidebar-item-btn), prolonge le resserrement v3.6 [1]. Changements v3.6.1 (retours Marie sur le v3.6) : - [A] Stats cards : retour a un FOND CLAIR TEINTE (soft) + fine bordure coloree assortie, pour bien differencier les 4 blocs des cards/listes en dessous. On CONSERVE la pastille pleine coloree + icone blanche et les teintes tranchees rose/orange. - [B] Accses rapides (quick links) : suppression du comportement sticky sur cette version (position static). A revoir plus tard. - [C] Fix liens sous-nav settings (section 28) : selecteurs elargis pour matcher la sous-navigation en cluster de Filament v4 (/app/settings/general-settings). Changements v3.6 (retours Guillem - retour au skin creme de base) : - [1] Sidebar resserree + labels texte blanc opacite 1 (accessibilite contraste prioritaire). Paddings/gaps reduits, icones plus lisibles. - [2] Accses rapides (quick links) : suppression des couleurs decoratives, retour a un rendu mono navy. La couleur est reservee aux missions. - [3] Couleurs reservees aux entites metier (missions) uniquement : stats cards conservent le mapping canonique, le decoratif est neutralise. - [4] Stats cards : 4 teintes pleines tranchees, fond de card BLANC, pastille pleine coloree + icone blanche. Nouvelle var --oc-rose (rose vif) pour Evenements, distinct de l orange/corail Projets. - [5] Fix contraste des liens du sous-menu interne des settings (/app/settings/general-settings) : liens lisibles en navy. Note : un second theme plus sobre reste en backlog (a retravailler plus tard). 5 themes disponibles : - .theme-creme ("Initial") Pixbulle gris clair #F5F6F8 (defaut, aucun override) - .theme-flashy Pixbulle plein color - .theme-sobre Pixbulle bandeau gauche - .theme-vert Original sante/medical (turquoise/sauge) - .theme-violet Original premium (violet/corail) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================ 1. VARIABLES ============================================================ */ :root { --oc-blue: #5C67F7; --oc-blue-soft: rgba(92, 103, 247, .10); --oc-blue-mid: rgba(92, 103, 247, .20); --oc-blue-border: rgba(92, 103, 247, .22); --oc-magenta: #9B3FC4; --oc-magenta-soft: rgba(155, 63, 196, .10); --oc-magenta-border:rgba(155, 63, 196, .22); --oc-coral: #FF8E6F; --oc-coral-deep: #D8704F; --oc-coral-soft: rgba(255, 142, 111, .12); --oc-coral-border: rgba(255, 142, 111, .26); --oc-violet: #7B5BF7; --oc-violet-soft: rgba(123, 91, 247, .12); --oc-violet-border: rgba(123, 91, 247, .22); /* v3.6 - Rose vif pour les evenements (distinct du corail/orange projets) */ --oc-rose: #F7549C; --oc-rose-soft: rgba(247, 84, 156, .10); --oc-rose-border: rgba(247, 84, 156, .22); --oc-rose-link: #E03B85; /* v3.6 - Orange plein tranche pour les projets (cf print screen Guillem) */ --oc-orange: #FF8A3D; --oc-orange-soft: rgba(255, 138, 61, .12); --oc-orange-border: rgba(255, 138, 61, .26); --oc-orange-link: #E5701F; --oc-bg: #F5F6F8; --oc-bg-alt: #ECEEF2; --oc-surface: #FFFFFF; --oc-ink: #1A1D29; --oc-ink-2: #393D50; --oc-muted: #7A7D8C; --oc-border: rgba(57, 61, 80, .10); --oc-border-2: rgba(57, 61, 80, .16); --oc-navy: #1F2438; --oc-navy-2: #2A2F45; --oc-ok: #00C77F; --oc-ok-soft: rgba(0, 199, 127, .10); --oc-warn: #F5A623; --oc-warn-soft: rgba(245, 166, 35, .12); --oc-err: #E33056; --oc-err-soft: rgba(227, 48, 86, .10); --oc-r-sm: 6px; --oc-r-md: 10px; --oc-r-lg: 14px; --oc-r-xl: 16px; --oc-r-pill: 999px; --oc-c-taches: var(--oc-magenta); --oc-c-taches-soft: var(--oc-magenta-soft); --oc-c-taches-border: var(--oc-magenta-border); --oc-c-adhesions: var(--oc-blue); --oc-c-adhesions-soft: var(--oc-blue-soft); --oc-c-adhesions-border: var(--oc-blue-border); /* v3.6 - Evenements bascule sur rose vif (etait corail) */ --oc-c-evenements: var(--oc-rose); --oc-c-evenements-link: var(--oc-rose-link); --oc-c-evenements-soft: var(--oc-rose-soft); --oc-c-evenements-border: var(--oc-rose-border); /* v3.6 - Projets bascule sur orange plein tranche (etait violet) */ --oc-c-projets: var(--oc-orange); --oc-c-projets-link: var(--oc-orange-link); --oc-c-projets-soft: var(--oc-orange-soft); --oc-c-projets-border: var(--oc-orange-border); --oc-c-compta: var(--oc-ok); /* Compat Guillem existant */ --main-color: var(--oc-blue); --secondary-color: var(--oc-navy); --main-color-transparent: rgba(92, 103, 247, .08); --main-color-semi-transparent: rgba(92, 103, 247, .12); --main-color-semi-opaque: rgba(92, 103, 247, .65); --main-color-shadow: rgba(92, 103, 247, .15); } /* ============================================================ 2. TYPO + BODY ============================================================ */ html, body, .fi-body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; } .fi-body { background-color: var(--oc-bg) !important; color: var(--oc-ink); } /* ============================================================ 3. SIDEBAR (navy) - themes Pixbulle ------------------------------------------------------------ v3.6 [1] : menu resserre + texte blanc opacite 1 (accessibilite). ============================================================ */ .fi-sidebar, .fi-sidebar-nav { background: var(--oc-navy) !important; border-right: none !important; } .fi-sidebar-nav-groups { margin-inline: 8px !important; row-gap: 8px !important; padding-top: 8px !important; } .fi-sidebar-group-label { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 700 !important; color: rgba(255, 255, 255, .75) !important; letter-spacing: .14em !important; text-transform: uppercase !important; padding: 0 10px 4px !important; margin-top: 4px !important; } .fi-sidebar-group-items { row-gap: 1px !important; } .fi-sidebar-item-btn { padding: 5px 10px !important; border-radius: var(--oc-r-md) !important; border-left: 2px solid transparent !important; transition: background-color .15s ease, color .15s ease !important; } /* v3.6 [1] : labels en blanc plein, opacite 1 (contraste max) */ .fi-sidebar-item-label { color: #fff !important; opacity: 1 !important; font-size: 14px !important; font-weight: 500 !important; } /* v3.6 [1] : icones nav remontees a .82 pour rester lisibles sans bruit */ .fi-sidebar-item-btn > .fi-icon { color: rgba(255, 255, 255, .82) !important; opacity: 1 !important; width: 19px !important; height: 19px !important; } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, .08) !important; } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff !important; } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-icon { color: #fff !important; } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn { background-color: var(--oc-blue-mid) !important; border-left-color: var(--oc-blue) !important; } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff !important; font-weight: 600 !important; } /* v3.6 [1] : icone active en blanc plein (etait bleu, moins lisible sur navy) */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-icon { color: #fff !important; } .fi-sidebar-item .fi-badge { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 700 !important; background: var(--oc-magenta-soft) !important; color: var(--oc-magenta) !important; padding: 2px 7px !important; border-radius: var(--oc-r-pill) !important; } .fi-sidebar-header { background: var(--oc-navy) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; padding: 12px 16px !important; } /* ============================================================ 4. TOPBAR creme ============================================================ */ .fi-topbar, .fi-topbar > nav { background: var(--oc-bg) !important; border-bottom: 1px solid var(--oc-border) !important; box-shadow: none !important; } .fi-topbar .fi-global-search-field input, .fi-topbar input[type="search"] { background: #fff !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-md) !important; color: var(--oc-ink) !important; font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; } .fi-topbar .fi-global-search-field input::placeholder { color: var(--oc-muted) !important; } .fi-topbar button.fi-icon-btn, .fi-topbar .fi-icon-btn, .fi-topbar-custom-link { color: var(--oc-ink-2) !important; transition: background .15s, color .15s !important; padding: 8px !important; min-width: 40px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .fi-topbar button.fi-icon-btn:hover, .fi-topbar .fi-icon-btn:hover, .fi-topbar-custom-link:hover { color: var(--oc-blue) !important; background: var(--oc-blue-soft) !important; border-radius: var(--oc-r-md) !important; } .fi-topbar button.fi-icon-btn svg, .fi-topbar .fi-icon-btn svg, .fi-topbar-custom-link svg, .fi-topbar button .fi-icon, .fi-topbar a .fi-icon { pointer-events: none !important; } .fi-topbar .fi-avatar, .fi-topbar img.fi-avatar { border: 2px solid var(--oc-border-2) !important; } .fi-topbar img[class*="object-contain"] { padding: 4px 10px !important; background: #fff !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-md) !important; height: 32px !important; box-sizing: content-box !important; transition: border-color .15s, box-shadow .15s !important; } .fi-topbar a:hover img[class*="object-contain"] { border-color: var(--oc-blue) !important; box-shadow: 0 0 0 3px var(--oc-blue-soft) !important; } /* ============================================================ 5. BASELINE sous le logo Octali ============================================================ */ .fi-topbar .fi-logo { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1 !important; gap: 3px !important; } .fi-topbar .fi-logo::after { content: 'CRM CPTS \u00b7 par Pixbulle'; display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--oc-blue); letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; } .fi-topbar .fi-logo img { display: block !important; height: 26px !important; } /* ============================================================ 6. HEADER PAGE ============================================================ */ .fi-header-heading { font-size: 30px !important; font-weight: 700 !important; color: var(--oc-ink) !important; letter-spacing: -0.02em !important; } .fi-header-subheading { font-size: 14px !important; color: var(--oc-muted) !important; } .fi-breadcrumbs-item { font-size: 13px !important; color: var(--oc-muted) !important; } .fi-breadcrumbs-item a { color: var(--oc-muted) !important; } .fi-breadcrumbs-item a:hover { color: var(--oc-blue) !important; } .fi-breadcrumbs-item:last-child { color: var(--oc-ink-2) !important; font-weight: 500 !important; } /* ============================================================ 7. SECTIONS / CARDS ============================================================ */ .fi-section { background: var(--oc-surface) !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-lg) !important; box-shadow: none !important; } .fi-section-header { border-bottom: 1px solid var(--oc-border) !important; padding: 16px 20px !important; } .fi-section-header-heading { font-size: 16px !important; font-weight: 700 !important; color: var(--oc-ink) !important; } .fi-section > .fi-section-header > .fi-icon, .fi-section .fi-section-header-heading .fi-icon { color: var(--oc-blue) !important; width: 19px !important; height: 19px !important; } .fi-section-content { padding: 18px 20px !important; } /* ============================================================ 8. TABS ============================================================ */ .fi-tabs { background: transparent !important; border-bottom: 1px solid var(--oc-border) !important; } .fi-tabs-item { color: var(--oc-muted) !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; transition: color .15s, border-color .15s !important; } .fi-tabs-item:hover { color: var(--oc-ink) !important; background: transparent !important; } .fi-tabs-item.fi-active, .fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: var(--oc-blue) !important; border-bottom-color: var(--oc-blue) !important; font-weight: 600 !important; background: transparent !important; } /* ============================================================ 9. FORM INPUTS ============================================================ */ .fi-input, .fi-select-input, .fi-textarea, .fi-input-wrp input, .fi-input-wrp textarea, .fi-input-wrp select { border: 1px solid var(--oc-border-2) !important; border-radius: var(--oc-r-md) !important; background: #fff !important; color: var(--oc-ink) !important; font-family: 'DM Sans', sans-serif !important; font-size: 14.5px !important; transition: border-color .15s, box-shadow .15s !important; } .fi-input:focus, .fi-select-input:focus, .fi-textarea:focus, .fi-input-wrp input:focus, .fi-input-wrp textarea:focus { outline: none !important; border-color: var(--oc-blue) !important; box-shadow: 0 0 0 3px var(--oc-blue-soft) !important; } .fi-fo-field-wrp-label, label { color: var(--oc-ink-2) !important; font-weight: 600 !important; font-size: 13.5px !important; } .fi-fo-field-wrp-helper-text { color: var(--oc-muted) !important; font-size: 12.5px !important; } /* ============================================================ 10. BOUTONS ============================================================ */ .fi-btn.fi-color-primary, .fi-btn-color-primary, .fi-ac-btn-action.fi-color-primary { background: var(--oc-blue) !important; border-color: var(--oc-blue) !important; color: #fff !important; border-radius: var(--oc-r-md) !important; font-weight: 600 !important; font-size: 13.5px !important; box-shadow: none !important; transition: background .15s, transform .1s !important; } .fi-btn.fi-color-primary:hover, .fi-btn-color-primary:hover { background: #4A56E8 !important; border-color: #4A56E8 !important; transform: translateY(-1px); } .fi-btn.fi-color-danger { background: var(--oc-err) !important; border-color: var(--oc-err) !important; color: #fff !important; border-radius: var(--oc-r-md) !important; font-weight: 600 !important; } .fi-btn.fi-color-gray, .fi-btn-outlined, .fi-link { color: var(--oc-blue) !important; font-size: 13.5px !important; } .fi-btn-outlined { border-color: var(--oc-border-2) !important; background: #fff !important; border-radius: var(--oc-r-md) !important; } /* ============================================================ 11. BADGES ============================================================ */ .fi-badge { font-family: 'JetBrains Mono', monospace !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; border-radius: var(--oc-r-pill) !important; padding: 3px 9px !important; } .fi-badge.fi-color-success { background: var(--oc-ok-soft) !important; color: var(--oc-ok) !important; } .fi-badge.fi-color-warning { background: var(--oc-warn-soft) !important; color: var(--oc-warn) !important; } .fi-badge.fi-color-danger { background: var(--oc-err-soft) !important; color: var(--oc-err) !important; } .fi-badge.fi-color-primary, .fi-badge.fi-color-info { background: var(--oc-blue-soft) !important; color: var(--oc-blue) !important; } /* ============================================================ 12. TABLES ============================================================ */ .fi-ta, .fi-ta-ctn { background: #fff !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-lg) !important; overflow: hidden; } .fi-ta-header { background: var(--oc-bg) !important; border-bottom: 1px solid var(--oc-border) !important; } .fi-ta-header-cell { font-size: 12px !important; font-weight: 700 !important; color: var(--oc-muted) !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 11px 16px !important; } .fi-ta-cell { padding: 13px 16px !important; font-size: 14px !important; color: var(--oc-ink-2) !important; border-top: 1px solid var(--oc-border) !important; } .fi-ta tbody tr:hover { background: var(--oc-bg) !important; } /* ============================================================ 13. DASHBOARD QUICK LINKS ------------------------------------------------------------ v3.6 [2] : suppression des couleurs decoratives. Rendu mono navy, la couleur est reservee aux missions (entites metier). v3.6.1 [B] : suppression du sticky (position static). A revoir plus tard. ============================================================ */ .dashboard-quick-links { gap: 0.5rem !important; padding: 12px 16px !important; margin-bottom: 24px !important; align-items: center !important; background: #fff !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-md) !important; position: static !important; z-index: auto !important; backdrop-filter: none !important; box-shadow: 0 4px 16px -8px rgba(11, 27, 59, .08) !important; } .dashboard-quick-links__title { display: inline-block !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 600 !important; color: var(--oc-muted) !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin-right: 8px !important; } .dashboard-quick-links__link { padding: 7px 14px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--oc-ink-2) !important; background: #fff !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-pill) !important; text-decoration: none !important; transition: border-color .15s, color .15s, background .15s !important; } .dashboard-quick-links__link:hover { text-decoration: none !important; color: var(--oc-ink) !important; border-color: var(--oc-border-2) !important; background: var(--oc-bg) !important; transform: translateY(-1px); } /* v3.6 [2] : couleurs decoratives retirees. Les liens d acces rapide restent monochromes navy. (Anciennes regles nth-child colorees supprimees.) */ /* ============================================================ 14. DASHBOARD STATS CARDS ------------------------------------------------------------ v3.6 [4] : pastille pleine coloree + icone blanche. v3.6.1 [A] : fond clair TEINTE par bloc + fine bordure assortie (gere en section 15). Ici on ne fixe que la structure commune. ============================================================ */ .dashboard-stats-grid { gap: 14px !important; margin-bottom: 32px !important; display: grid !important; } .dashboard-stat-card { padding: 22px !important; box-shadow: none !important; text-decoration: none !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important; position: relative; overflow: hidden; border-radius: var(--oc-r-xl) !important; display: block !important; /* v3.6.1 [A] : fond/bordure par defaut, surcharges colorees en section 15 */ background: var(--oc-surface) !important; border: 1px solid var(--oc-border) !important; } .dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(11, 27, 59, .12) !important; } .dashboard-stat-card__layout { display: flex !important; flex-direction: column !important; gap: 0 !important; } .dashboard-stat-card__content { text-align: left !important; order: 2 !important; } .dashboard-stat-card__label { font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--oc-ink-2) !important; margin: 0 0 8px !important; line-height: 1.3 !important; } .dashboard-stat-card__value { font-size: 44px !important; font-weight: 800 !important; color: var(--oc-ink) !important; letter-spacing: -0.03em !important; line-height: 1 !important; margin: 0 !important; } .dashboard-stat-card__link { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid var(--oc-border) !important; display: block !important; font-size: 13px !important; font-weight: 600 !important; } .dashboard-stat-card__icon { order: 1 !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; box-shadow: none !important; margin-bottom: 0 !important; position: absolute !important; top: 22px !important; right: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .dashboard-stat-card__icon svg { width: 22px !important; height: 22px !important; color: #fff !important; } /* ============================================================ 15. REORDONNEMENT KPI (Taches en 1er) + PASTILLES MISSIONS ------------------------------------------------------------ v3.6 [3][4] : couleur portee par la pastille pleine + le lien. v3.6.1 [A] : fond clair TEINTE (soft) + fine bordure coloree assortie par bloc, pour differencier des cards/listes en dessous. Pastille pleine + teintes rose/orange conservees. ============================================================ */ .dashboard-stat-card:nth-child(1) { order: 2; } .dashboard-stat-card:nth-child(2) { order: 1; } .dashboard-stat-card:nth-child(3) { order: 3; } .dashboard-stat-card:nth-child(4) { order: 4; } /* --- Adhesions (bleu-violet) --- */ .dashboard-stats-grid > .dashboard-stat-card:nth-child(1) { background: var(--oc-c-adhesions-soft) !important; border: 1px solid var(--oc-c-adhesions-border) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(1) .dashboard-stat-card__icon { background: var(--oc-c-adhesions) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(1) .dashboard-stat-card__link { color: var(--oc-c-adhesions) !important; border-top-color: var(--oc-c-adhesions-border) !important; } /* --- Taches (magenta) --- */ .dashboard-stats-grid > .dashboard-stat-card:nth-child(2) { background: var(--oc-c-taches-soft) !important; border: 1px solid var(--oc-c-taches-border) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(2) .dashboard-stat-card__icon { background: var(--oc-c-taches) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(2) .dashboard-stat-card__link { color: var(--oc-c-taches) !important; border-top-color: var(--oc-c-taches-border) !important; } /* --- Evenements (rose vif v3.6) --- */ .dashboard-stats-grid > .dashboard-stat-card:nth-child(3) { background: var(--oc-c-evenements-soft) !important; border: 1px solid var(--oc-c-evenements-border) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(3) .dashboard-stat-card__icon { background: var(--oc-c-evenements) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(3) .dashboard-stat-card__link { color: var(--oc-c-evenements-link) !important; border-top-color: var(--oc-c-evenements-border) !important; } /* --- Projets (orange plein v3.6) --- */ .dashboard-stats-grid > .dashboard-stat-card:nth-child(4) { background: var(--oc-c-projets-soft) !important; border: 1px solid var(--oc-c-projets-border) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(4) .dashboard-stat-card__icon { background: var(--oc-c-projets) !important; } .dashboard-stats-grid > .dashboard-stat-card:nth-child(4) .dashboard-stat-card__link { color: var(--oc-c-projets-link) !important; border-top-color: var(--oc-c-projets-border) !important; } /* ============================================================ 15bis. THEME INITIAL (defaut gris) - v3.6.5 ------------------------------------------------------------ Le rendu de base du reskin est le gris clair #F5F6F8 (fond + header), defini dans :root. Le bouton du switcher porte l id 'theme-creme' (conserve pour compat localStorage / JS) mais s appelle desormais "Initial" et n applique AUCUN override : il affiche donc le gris. v3.6.4 avait introduit un bloc html.theme-creme qui restaurait le creme (#FBFAF5). Retire en v3.6.5 : le creme ne doit plus apparaitre. Si un second skin est cree plus tard, lui donner sa propre classe dediee (ex: html.theme-skin2) plutot que de reutiliser theme-creme. ============================================================ */ /* ============================================================ 16. THEME FLASHY - cards plein color ============================================================ */ html.theme-flashy .dashboard-stats-grid > .dashboard-stat-card:nth-child(1) { background: var(--oc-c-adhesions) !important; border: none !important; box-shadow: 0 4px 16px -4px rgba(92,103,247,.40) !important; } html.theme-flashy .dashboard-stats-grid > .dashboard-stat-card:nth-child(2) { background: var(--oc-c-taches) !important; border: none !important; box-shadow: 0 4px 16px -4px rgba(155,63,196,.40) !important; } html.theme-flashy .dashboard-stats-grid > .dashboard-stat-card:nth-child(3) { background: var(--oc-c-evenements) !important; border: none !important; box-shadow: 0 4px 16px -4px rgba(247,84,156,.40) !important; } html.theme-flashy .dashboard-stats-grid > .dashboard-stat-card:nth-child(4) { background: var(--oc-c-projets) !important; border: none !important; box-shadow: 0 4px 16px -4px rgba(255,138,61,.40) !important; } html.theme-flashy .dashboard-stat-card__label { color: rgba(255,255,255,.92) !important; } html.theme-flashy .dashboard-stat-card__value { color: #fff !important; } html.theme-flashy .dashboard-stat-card__link { color: #fff !important; border-top-color: rgba(255,255,255,.25) !important; } html.theme-flashy .dashboard-stat-card__icon { background: rgba(255,255,255,.20) !important; } /* ============================================================ 17. THEME SOBRE - bandeau gauche colore ============================================================ */ html.theme-sobre .dashboard-stat-card { background: var(--oc-surface) !important; border: 1px solid var(--oc-border) !important; border-radius: 0 var(--oc-r-xl) var(--oc-r-xl) 0 !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(1) { border-left: 4px solid var(--oc-c-adhesions) !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(2) { border-left: 4px solid var(--oc-c-taches) !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(3) { border-left: 4px solid var(--oc-c-evenements) !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(4) { border-left: 4px solid var(--oc-c-projets) !important; } html.theme-sobre .dashboard-stat-card__icon { background: transparent !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(1) .dashboard-stat-card__icon svg { color: var(--oc-c-adhesions) !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(2) .dashboard-stat-card__icon svg { color: var(--oc-c-taches) !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(3) .dashboard-stat-card__icon svg { color: var(--oc-c-evenements) !important; } html.theme-sobre .dashboard-stats-grid > .dashboard-stat-card:nth-child(4) .dashboard-stat-card__icon svg { color: var(--oc-c-projets) !important; } /* ============================================================ 18. DASHBOARD LISTES ============================================================ */ .dashboard-list-card { border: 1px solid var(--oc-border) !important; background: #fff !important; border-radius: var(--oc-r-lg) !important; box-shadow: none !important; overflow: hidden !important; } .dashboard-list-card:hover { background: #fff !important; } .dashboard-list-header { margin: 0 !important; padding: 14px 18px !important; border-bottom: 1px solid var(--oc-border) !important; } .dashboard-list-kicker { font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; } .dashboard-list-description { color: var(--oc-ink-2) !important; font-size: 14.5px !important; } .dashboard-list-count { font-weight: 700 !important; border-radius: var(--oc-r-pill) !important; font-size: 13px !important; } .dashboard-list-date { box-shadow: none !important; } .dashboard-list-empty { border: 1px dashed var(--oc-border-2) !important; background: var(--oc-bg-alt) !important; color: var(--oc-muted) !important; } /* ============================================================ 19. REPEATERS ============================================================ */ .fi-fo-repeater[data-sortable-id*="sessions"] .fi-fo-repeater-item { border-left: 3px solid var(--oc-c-evenements) !important; background-color: var(--oc-c-evenements-soft) !important; border-radius: 0 var(--oc-r-md) var(--oc-r-md) 0 !important; } .fi-fo-repeater[data-sortable-id*="pricings"] .fi-fo-repeater-item { border-left: 3px solid var(--oc-c-compta) !important; background-color: var(--oc-ok-soft) !important; border-radius: 0 var(--oc-r-md) var(--oc-r-md) 0 !important; } .fi-fo-repeater[data-sortable-id*="formFields"] .fi-fo-repeater-item { border-left: 3px solid var(--oc-c-adhesions) !important; background-color: var(--oc-c-adhesions-soft) !important; border-radius: 0 var(--oc-r-md) var(--oc-r-md) 0 !important; } /* ============================================================ 20. STICKY FOOTER ACTIONS ============================================================ */ .fi-resource-create-record-page .fi-sc-actions, .fi-resource-edit-record-page .fi-sc-actions { background: #fff !important; border: 1px solid var(--oc-border) !important; border-radius: var(--oc-r-lg) !important; box-shadow: 0 10px 30px -8px rgba(11, 27, 59, .18) !important; } /* ============================================================ 21. SCROLLBAR sidebar ============================================================ */ .fi-sidebar-nav::-webkit-scrollbar { width: 6px; } .fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; } .fi-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; } .fi-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); } /* ============================================================ 22. THEME SWITCHER (dropdown desktop uniquement) ============================================================ */ .octali-theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9998; font-family: 'DM Sans', sans-serif; } .octali-theme-switcher__trigger { background: #fff; border: 1px solid var(--oc-border-2); border-radius: var(--oc-r-pill); padding: 8px 16px; box-shadow: 0 10px 30px -8px rgba(11, 27, 59, .25); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--oc-ink-2); cursor: pointer; font-family: inherit; transition: transform .12s ease; } .octali-theme-switcher__trigger:hover { transform: translateY(-1px); } .octali-theme-switcher__trigger-icon { font-size: 15px; line-height: 1; } .octali-theme-switcher__trigger-caret { font-size: 10px; color: var(--oc-muted); transition: transform .15s; } .octali-theme-switcher.is-open .octali-theme-switcher__trigger-caret { transform: rotate(180deg); } .octali-theme-switcher__menu { position: absolute; bottom: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--oc-border-2); border-radius: var(--oc-r-lg); padding: 6px; box-shadow: 0 16px 40px -10px rgba(11, 27, 59, .30); min-width: 220px; display: none; flex-direction: column; gap: 1px; } .octali-theme-switcher.is-open .octali-theme-switcher__menu { display: flex; } .octali-theme-switcher__btn { background: transparent; border: none; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--oc-ink-2); border-radius: var(--oc-r-md); cursor: pointer; transition: background .12s, color .12s; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; text-align: left; width: 100%; } .octali-theme-switcher__btn:hover { background: var(--oc-bg); } .octali-theme-switcher__btn.is-active { background: var(--oc-blue-soft); color: var(--oc-blue); font-weight: 600; } .octali-theme-switcher__btn-icon { font-size: 14px; line-height: 1; } .octali-theme-switcher__btn-check { margin-left: auto; color: var(--oc-blue); font-weight: 700; opacity: 0; } .octali-theme-switcher__btn.is-active .octali-theme-switcher__btn-check { opacity: 1; } .octali-theme-switcher__separator { height: 1px; background: var(--oc-border); margin: 4px 8px; } .octali-theme-switcher__separator-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; color: var(--oc-muted); letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px 4px; } .fi-scroll-to-top-button { bottom: 80px !important; } /* ============================================================ 23. RESPONSIVE \u2014 TABLETTE (1024px et moins) ============================================================ */ @media (max-width: 1023px) { .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .fi-header-heading { font-size: 24px !important; } .dashboard-stat-card__value { font-size: 36px !important; } .dashboard-quick-links { flex-wrap: wrap !important; padding: 10px 12px !important; } .fi-resource-create-record-page .fi-sc-actions, .fi-resource-edit-record-page .fi-sc-actions { left: 16px !important; right: 16px !important; bottom: 16px !important; width: auto !important; } .octali-theme-switcher { display: none !important; } .fi-topbar > nav { padding: 8px 12px !important; } .fi-topbar .fi-logo::after { display: none !important; } .fi-topbar img[class*="object-contain"] { height: 28px !important; padding: 3px 8px !important; } } /* ============================================================ 24. RESPONSIVE \u2014 MOBILE (640px et moins) ============================================================ */ @media (max-width: 639px) { .dashboard-stats-grid { grid-template-columns: 1fr !important; } .fi-section-header { padding: 12px 14px !important; } .fi-section-content { padding: 14px !important; } .fi-ta-ctn { overflow-x: auto !important; } .fi-topbar img[class*="object-contain"] { display: none !important; } } /* ============================================================ 25. CORRECTIONS MOBILE (sidebar burger) ============================================================ */ @media (max-width: 1023px) { .fi-topbar-sidebar-toggle-btn, .fi-sidebar-toggle-btn, button[x-on\:click*="toggleSidebar"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: var(--oc-r-md) !important; color: var(--oc-ink-2) !important; background: transparent !important; border: none !important; cursor: pointer !important; } .fi-topbar-sidebar-toggle-btn:hover, .fi-sidebar-toggle-btn:hover { background: var(--oc-blue-soft) !important; color: var(--oc-blue) !important; } .fi-sidebar { box-shadow: 0 0 60px -10px rgba(0, 0, 0, .35) !important; } } /* ============================================================ ============================================================ THEMES ANCIENS (Vert / Violet) \u2014 PRESERVATION RENDU ORIGINAL ============================================================ Les CSS ci-dessous reprennent EXACTEMENT le travail original de l'utilisateur dans designer-overrides-2.css. Tous les selecteurs sont SCOPES a leur classe de theme pour ne s'appliquer QUE quand le theme est actif (sinon ils ecraseraient le reskin Pixbulle). ============================================================ */ /* ============================================================ 26. THEME VERT (sante / medical) Reprend designer-overrides-2.css partie VERT ============================================================ */ html.theme-vert .fi-sidebar-item-btn>.fi-icon { color: #76C093; color: #219A99; } html.theme-vert .fi-ta-ctn .fi-ta-header .fi-ta-header-heading { color: #219A99; } html.theme-vert .fi-sidebar-nav { background: #E6EDED; background: #f3f5f5; } html.theme-vert .border-gray-200 { border-color: var(--gray-200); background: #E6EDED; } html.theme-vert .fi-tabs-item .fi-tabs-item-label { color: #1C3969; } html.theme-vert svg { color: #219A99; } html.theme-vert .fi-section .fi-section-header-heading { color: #219A99; text-transform: uppercase; } html.theme-vert .fi-ta-ctn .fi-ta-header .fi-ta-header-heading { color: #219A99; text-transform: uppercase; } html.theme-vert .fi-sidebar-group-label { color: #000; text-transform: uppercase; font-size: 16px; } html.theme-vert .fc-h-event { background-color: #219A99; border: 1px solid #76C093; display: block; color: #fff; } html.theme-vert .fc-h-event .fc-event-main { color: #fff; } html.theme-vert .fc-direction-ltr .fc-daygrid-event.fc-event-start, html.theme-vert .fc-direction-rtl .fc-daygrid-event.fc-event-end { padding-left: 10px; } html.theme-vert .fc .fc-button-primary:not(:disabled).fc-button-active, html.theme-vert .fc .fc-button-primary:not(:disabled):active { background-color: #76C093; border-color: #76C09; color: #000; } html.theme-vert .fc .fc-button-primary:disabled { background-color: #76C093; border-color: #76C09; color: #000; } html.theme-vert .fc .fc-button-primary { background-color: #219A99; border-color: #219A99; color: #fff; } html.theme-vert .fi-tabs.fi-contained { border-color: var(--gray-200); background: #E6EDED; } html.theme-vert .fi-sidebar-item-label { color: #1C3969; } /* ============================================================ 27. THEME VIOLET (premium / creatif) Reprend designer-overrides-2.css partie VIOLET ============================================================ */ html.theme-violet .fi-main { background: #f6f7fb; } html.theme-violet .fi-body { background: #f6f7fb; } html.theme-violet .fi-sidebar-item-btn>.fi-icon { color: #76C093; color: #493675; } html.theme-violet .fi-ta-ctn .fi-ta-header .fi-ta-header-heading { color: #493675; } html.theme-violet .fi-sidebar-nav { background: #fff; } html.theme-violet .fi-sidebar-group-label { color: #ff4554; text-transform: uppercase; font-size: 13px; } html.theme-violet .border-gray-200 { border-color: var(--gray-200); background: #e5def5; } html.theme-violet .fi-tabs-item .fi-tabs-item-label { color: #1C3969; } html.theme-violet svg { color: #ff4554; } html.theme-violet .fi-section .fi-section-header-heading { color: #ff4554; text-transform: none; } html.theme-violet .fi-ta-ctn .fi-ta-header .fi-ta-header-heading { color: #ff4554; text-transform: none; } html.theme-violet .fc-h-event { background-color: #493675; border: 1px solid #76C093; display: block; color: #fff; } html.theme-violet .fc-h-event .fc-event-main { color: #fff; } html.theme-violet .fc-direction-ltr .fc-daygrid-event.fc-event-start, html.theme-violet .fc-direction-rtl .fc-daygrid-event.fc-event-end { padding-left: 10px; } html.theme-violet .fc .fc-button-primary:not(:disabled).fc-button-active, html.theme-violet .fc .fc-button-primary:not(:disabled):active { background-color: #76C093; border-color: #76C09; color: #000; } html.theme-violet .fc .fc-button-primary:disabled { background-color: #76C093; border-color: #76C09; color: #000; } html.theme-violet .fc .fc-button-primary { background-color: #493675; border-color: #493675; color: #fff; } html.theme-violet .fi-tabs.fi-contained { border-color: var(--gray-200); background: #E6EDED; } html.theme-violet .fi-sidebar-item-label { color: #1C3969; } /* ============================================================ THEME VERT/VIOLET \u2014 FONDS PRINCIPAUX (ex-patch v3.5) ============================================================ */ /* ---------- THEME VERT SANTE ---------- */ html.theme-vert .fi-sidebar-nav, html.theme-vert aside.fi-sidebar { background: #E6EDED !important; } html.theme-vert .fi-main, html.theme-vert .fi-body { background: #F3F7F6 !important; } html.theme-vert .fi-topbar { background: #F3F7F6 !important; border-bottom: 1px solid #D8E2E2 !important; } html.theme-vert .fi-section, html.theme-vert .fi-wi-stats-overview-stat { background: #FFFFFF !important; } /* ---------- THEME VIOLET PREMIUM ---------- */ html.theme-violet .fi-sidebar-nav, html.theme-violet aside.fi-sidebar { background: #FFFFFF !important; border-right: 1px solid #E5DEF5 !important; } html.theme-violet .fi-main, html.theme-violet .fi-body { background: #F6F7FB !important; } html.theme-violet .fi-topbar { background: #F6F7FB !important; border-bottom: 1px solid #E5DEF5 !important; } html.theme-violet .fi-section, html.theme-violet .fi-wi-stats-overview-stat { background: #FFFFFF !important; } /* ============================================================ 28. FIX LIENS SOUS-NAV SETTINGS - v3.6 [5] / v3.6.3 [DOM reel] ------------------------------------------------------------ DIAGNOSTIC (DOM fourni 2026-05-28) : La sous-navigation des pages settings (/app/settings/...) utilise EXACTEMENT les memes classes que la sidebar principale : .fi-sidebar-item / .fi-sidebar-item-btn / .fi-sidebar-item-label Resultat : les regles de la section 3 (sidebar navy, label #fff) s appliquaient a ces liens -> texte blanc sur fond clair = invisible. Le seul element distinctif est le groupe PARENT :
  • On scope donc TOUTES les surcharges sur ce conteneur, ce qui reecrit les liens en navy lisible SANS toucher la vraie sidebar. ============================================================ */ /* Labels : navy lisible (annule le #fff de la section 3) */ [data-group-label="sub_navigation_"] .fi-sidebar-item-label, [x-data*="sub_navigation"] .fi-sidebar-item-label { color: var(--oc-ink-2) !important; opacity: 1 !important; font-weight: 500 !important; } /* Icones : navy attenue */ [data-group-label="sub_navigation_"] .fi-sidebar-item-btn > .fi-icon, [data-group-label="sub_navigation_"] .fi-sidebar-item-icon, [x-data*="sub_navigation"] .fi-sidebar-item-btn > .fi-icon { color: var(--oc-muted) !important; opacity: 1 !important; } /* Hover : bleu Octali sur fond bleu pale (au lieu du blanc/06 navy) */ [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover, [x-data*="sub_navigation"] .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background-color: var(--oc-blue-soft) !important; } [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label, [x-data*="sub_navigation"] .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: var(--oc-blue) !important; } [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-icon, [x-data*="sub_navigation"] .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-icon { color: var(--oc-blue) !important; } /* Etat actif (.fi-active) : fond bleu pale + texte/icone bleus + filet gauche */ [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, [x-data*="sub_navigation"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--oc-blue-soft) !important; border-left-color: var(--oc-blue) !important; } [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label, [x-data*="sub_navigation"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--oc-blue) !important; font-weight: 600 !important; } [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, [data-group-label="sub_navigation_"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon, [x-data*="sub_navigation"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--oc-blue) !important; } /* ============================================================ FIN - OCTALI Reskin v3.6.5 (Pixbulle 2026) ------------------------------------------------------------ CHANGELOG (resume - detail complet dans Reskin-app-Octali.md) : v3.6.5 - "Creme" renomme "Initial" = gris #F5F6F8 (creme supprime) ; retrait du bloc html.theme-creme. Couple avec switcher JS v2.1 v3.6.4 - Fond + header gris #F5F6F8 par defaut ; creme -> theme a part (.theme-creme) v3.6.3 - Taches -> #9B3FC4 (violet-pourpre, moins rose) ; fix reel sous-nav settings via [data-group-label="sub_navigation_"] v3.6.2 - Sidebar items padding 7px -> 5px (ajustement Marie) v3.6.1 - Retours Marie sur le v3.6 : [A] stats cards fond clair teinte (soft) + fine bordure assortie (differenciation des cards/listes), pastille pleine + rose/orange conservees [B] quick links : suppression du sticky (position static) [C] section 28 elargie pour la sous-nav settings Filament v4 v3.6 - Retour skin creme de base + retours Guillem : [1] sidebar resserree + texte blanc opacite 1 [2] quick links sans couleur (mono navy) [3] couleurs reservees aux missions (entites metier) [4] stats cards pastille pleine + var --oc-rose / --oc-orange [5] fix contraste liens sous-nav settings v3.5 - Patch fonds themes Vert/Violet + chargement JS switcher v3.4 - +2 themes (Vert/Violet) + switcher dropdown v3.3 - Systeme couleurs canonique + reordonnement KPI + responsive v3.2 - Stats cards variante C + typo +1-2px v3.1 - Topbar creme + baseline + logo encadre v3.0 - Premiere version complete ============================================================ */