/* ===================================================================== THÈME BO — « Éditorial clair · quiet luxury » --------------------------------------------------------------------- Feuille ADDITIVE injectée après le thème Filament compilé (render hook STYLES_AFTER des trois panneaux). Elle ne remplace aucun fichier : la retirer = retour immédiat à l'apparence d'origine. POURQUOI ÇA GAGNE SANS `!important` : le thème compilé (Tailwind v4) vit entièrement dans des `@layer` ; toute règle NON-layered déclarée ici l'emporte dans la cascade, quelle que soit la spécificité. On reste donc volontairement hors de tout `@layer`. MODES : le clair = papier/encre/sauge ; le sombre (classe `.dark` posée par Filament sur ) = charbon CHAUD/os/sauge claire — jamais de gris froid. Tout passe par des jetons thémés `--bo-*`. ===================================================================== */ /* ------------------------------------------------------------------ */ /* 1 · POLICES AUTO-HÉBERGÉES (aucun CDN — fichiers dans /fonts) */ /* Inter est déjà servie par Filament (« Inter Variable ») ; la */ /* déclarer ici en secours ne coûte rien : un @font-face inutilisé */ /* n'est jamais téléchargé. */ /* ------------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/inter/inter-latin-var-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../fonts/dm-sans/dm-sans-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url('../fonts/dm-sans/dm-sans-latin-var-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-var-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------------ */ /* 2 · JETONS DE LA CHARTE (constantes + jetons THÉMÉS clair/sombre) */ /* ------------------------------------------------------------------ */ :root { /* Constantes de marque */ --bo-paper: #f4efe7; --bo-paper-2: #ebe3d5; --bo-paper-3: #fbf8f2; --bo-charcoal: #14130f; --bo-charcoal-2: #1e1c16; --bo-ink: #201e18; --bo-ink-soft: #4c483f; --bo-ink-mute: #837b6d; --bo-bone: #f4efe7; --bo-bone-dim: #cec7b9; --bo-bone-mute: #928a7b; --bo-sage: #7e9b76; --bo-sage-deep: #566e4d; --bo-sage-soft: #9db795; --bo-clay: #b0644b; /* Typo */ --bo-font-display: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif; --bo-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; /* Mouvement */ --bo-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Jetons THÉMÉS — défaut = CLAIR */ --bo-bg: var(--bo-paper); --bo-surface: var(--bo-paper-3); --bo-band: var(--bo-paper-2); --bo-text: var(--bo-ink); --bo-text-soft: var(--bo-ink-soft); --bo-text-mute: var(--bo-ink-mute); --bo-hair: rgba(32, 30, 24, 0.12); --bo-hair-2: rgba(32, 30, 24, 0.22); --bo-accent-tx: var(--bo-sage-deep); --bo-chart-line: var(--bo-sage); --bo-wash: rgba(32, 30, 24, 0.05); --bo-row-hover: rgba(235, 227, 213, 0.45); --bo-btn-fill: var(--bo-ink); --bo-btn-fg: var(--bo-paper); --bo-btn-hover: var(--bo-sage-deep); --bo-btn-hover-fg: var(--bo-paper); --bo-glass: rgba(244, 239, 231, 0.72); --bo-pop-shadow: 0 18px 44px -18px rgba(20, 19, 15, 0.28); } /* `.dark` est posée sur par Filament (localStorage `theme`). */ .dark { --bo-bg: var(--bo-charcoal); --bo-surface: var(--bo-charcoal-2); --bo-band: #191712; --bo-text: var(--bo-bone); --bo-text-soft: var(--bo-bone-dim); --bo-text-mute: var(--bo-bone-mute); --bo-hair: rgba(244, 239, 231, 0.12); --bo-hair-2: rgba(244, 239, 231, 0.24); --bo-accent-tx: var(--bo-sage-soft); --bo-chart-line: var(--bo-sage-soft); --bo-wash: rgba(244, 239, 231, 0.07); --bo-row-hover: rgba(244, 239, 231, 0.045); --bo-btn-fill: var(--bo-bone); --bo-btn-fg: var(--bo-charcoal); --bo-btn-hover: var(--bo-sage); --bo-btn-hover-fg: var(--bo-charcoal); --bo-glass: rgba(20, 19, 15, 0.6); --bo-pop-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------ */ /* 3 · RE-CÂBLAGE DES VARIABLES FILAMENT/TAILWIND */ /* · gamme --gray-* → neutres CHAUDS (même échelle de luminance */ /* que Zinc : tous les contrastes existants sont préservés) ; */ /* · --color-white → papier-3 : plus AUCUN blanc froid (cartes, */ /* entrées, panneaux… et les filets sombres en color-mix */ /* deviennent chauds d'eux-mêmes) ; */ /* · rayons quasi nuls (charte : 3 px, 5 px pour les cartes) ; */ /* · police courante → DM Sans (les titres repassent en Inter ou */ /* Fraunces plus bas). */ /* ------------------------------------------------------------------ */ html.fi { --gray-50: #fbf8f2; --gray-100: #f1eae0; --gray-200: #e4dcca; --gray-300: #d0c6b2; --gray-400: #a89f8e; --gray-500: #837b6d; --gray-600: #645d50; --gray-700: #4c483f; --gray-800: #2a2820; --gray-900: #1e1c16; --gray-950: #14130f; --color-white: #fbf8f2; --radius-sm: 3px; --radius-md: 3px; --radius-lg: 3px; --radius-xl: 5px; --radius-2xl: 5px; --font-family: 'DM Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ------------------------------------------------------------------ */ /* 4 · SOCLE */ /* ------------------------------------------------------------------ */ .fi-body { background-color: var(--bo-bg); color: var(--bo-text); } .fi ::selection { background-color: rgba(126, 155, 118, 0.3); } /* ------------------------------------------------------------------ */ /* 5 · BARRE LATÉRALE — le bloc SOMBRE signature, dans les DEUX modes */ /* (charbon chaud, libellés os, accent sauge claire). */ /* ------------------------------------------------------------------ */ .fi-sidebar { background-color: var(--bo-charcoal); } .dark .fi-sidebar { border-inline-end: 1px solid rgba(244, 239, 231, 0.08); } .fi-sidebar-header { background-color: var(--bo-charcoal); box-shadow: 0 1px 0 rgba(244, 239, 231, 0.08); } .fi-sidebar-header .fi-logo { color: var(--bo-bone); font-family: var(--bo-font-display); font-weight: 600; letter-spacing: -0.025em; } .fi-sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(244, 239, 231, 0.22) transparent; } /* Étiquettes de groupes = « eyebrow » : petites capitales espacées, précédées du tiret 1 px signature. */ .fi-sidebar-group-label { display: flex; align-items: center; gap: 0.55rem; color: var(--bo-bone-mute); font-family: var(--bo-font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .fi-sidebar-group-label::before { content: ''; flex: none; width: 1.1rem; height: 1px; background-color: rgba(244, 239, 231, 0.32); } .fi-sidebar-group-btn { color: var(--bo-bone-mute); } .fi-sidebar-item-btn { border-radius: 3px; transition: background-color 0.18s var(--bo-ease); } .fi-sidebar-item-label { color: var(--bo-bone-dim); } .fi-sidebar-item-btn > .fi-icon { color: var(--bo-bone-mute); } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background-color: rgba(244, 239, 231, 0.07); } .fi-sidebar-item-btn:hover .fi-sidebar-item-label, .fi-sidebar-item-btn:focus-visible .fi-sidebar-item-label { color: var(--bo-bone); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgba(126, 155, 118, 0.16); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: var(--bo-sage-soft); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--bo-sage-soft); } /* Filet vertical des sous-éléments d'un groupe déplié. */ .fi-sidebar-item-grouped-border-part { background-color: rgba(244, 239, 231, 0.16); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: var(--bo-sage-soft); } /* Boutons-icônes logés DANS la barre (replier, notifications…). */ .fi-sidebar .fi-icon-btn { color: var(--bo-bone-mute); } .fi-sidebar .fi-icon-btn:hover, .fi-sidebar .fi-icon-btn:focus-visible { background-color: rgba(244, 239, 231, 0.08); color: var(--bo-bone); } /* ------------------------------------------------------------------ */ /* 6 · BARRE SUPÉRIEURE — verre dépoli sur papier (repli : fond plein */ /* quand le navigateur ne sait pas flouter). */ /* ------------------------------------------------------------------ */ .fi-topbar { background-color: var(--bo-bg); box-shadow: 0 1px 0 var(--bo-hair); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fi-topbar { background-color: var(--bo-glass); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); } } .fi-topbar .fi-icon-btn { color: var(--bo-text-soft); } .fi-topbar .fi-icon-btn:hover, .fi-topbar .fi-icon-btn:focus-visible { background-color: var(--bo-wash); color: var(--bo-text); } .fi-topbar .fi-logo { color: var(--bo-text); font-family: var(--bo-font-display); font-weight: 600; letter-spacing: -0.025em; } /* ------------------------------------------------------------------ */ /* 7 · EN-TÊTE DE PAGE — le grand titre passe en Fraunces (serif */ /* éditorial), le reste demeure sobre. */ /* ------------------------------------------------------------------ */ .fi-header-heading { color: var(--bo-text); font-family: var(--bo-font-serif); font-size: clamp(1.55rem, 1.35rem + 0.6vw, 1.95rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; } .fi-header-subheading { color: var(--bo-text-soft); } .fi-breadcrumbs-item-label { color: var(--bo-text-mute); } a.fi-breadcrumbs-item-label:hover { color: var(--bo-accent-tx); } /* ------------------------------------------------------------------ */ /* 8 · CARTES, SECTIONS, WIDGETS — surfaces papier-3 cerclées d'un */ /* filet « hairline » ; les ombres portées disparaissent. */ /* ------------------------------------------------------------------ */ .fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn, .fi-ta-ctn, .fi-wi-stats-overview-stat { background-color: var(--bo-surface); box-shadow: 0 0 0 1px var(--bo-hair); } .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary, .fi-section:not(.fi-section-not-contained).fi-aside.fi-secondary > .fi-section-content-ctn { background-color: var(--bo-band); } .fi-section-header-heading, .fi-sc-section-label, .fi-ta-header-heading, .fi-ta-empty-state-heading { color: var(--bo-text); font-family: var(--bo-font-display); font-weight: 600; letter-spacing: -0.025em; } .fi-section-header-description { color: var(--bo-text-mute); } /* ------------------------------------------------------------------ */ /* 9 · STATISTIQUES & GRAPHIQUES — les grandes valeurs en Fraunces ; */ /* les sondes de couleur que Chart.js lit (axes, grille, jeu de */ /* données par défaut) passent aux neutres chauds et à la sauge. */ /* ------------------------------------------------------------------ */ .fi-wi-stats-overview-stat-value { color: var(--bo-text); font-family: var(--bo-font-serif); font-size: 1.9rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; } .fi-wi-stats-overview-stat-label { color: var(--bo-text-soft); font-family: var(--bo-font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .fi-wi-chart-text-color { color: var(--bo-text-mute); } .fi-wi-chart-grid-color { color: var(--bo-hair); } .fi-wi-chart-bg-color { color: rgba(126, 155, 118, 0.16); } .fi-wi-chart-border-color { color: var(--bo-chart-line); } /* ------------------------------------------------------------------ */ /* 10 · TABLEAUX — en-têtes en petites capitales éditoriales, lignes */ /* séparées par des filets chauds (hérités des gris re-câblés), */ /* survol en voile papier-2. */ /* ------------------------------------------------------------------ */ .fi-ta-header-cell, .fi-ta-header-cell-sort-btn { color: var(--bo-text-soft); font-family: var(--bo-font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .fi-ta-row:hover { background-color: var(--bo-row-hover); } .fi-ta-group-header { background-color: var(--bo-band); } .fi-ta-empty-state-icon-bg { background-color: var(--bo-band); } .fi-ta-empty-state-description { color: var(--bo-text-mute); } /* ------------------------------------------------------------------ */ /* 11 · BOUTONS — le primaire est PLEIN ENCRE et passe SAUGE au */ /* survol (os → sauge en mode sombre), léger soulèvement ; */ /* contour de focus toujours visible. Les couleurs sémantiques */ /* (danger, avertissement, info, succès) ne bougent pas. */ /* ------------------------------------------------------------------ */ .fi-btn { border-radius: 3px; transition: background-color 0.2s var(--bo-ease), color 0.2s var(--bo-ease), transform 0.2s var(--bo-ease), box-shadow 0.2s var(--bo-ease); } .fi-icon-btn { border-radius: 3px; } .fi-icon-btn:hover { background-color: var(--bo-wash); } .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled) { background-color: var(--bo-btn-fill); color: var(--bo-btn-fg); box-shadow: none; } .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):hover { background-color: var(--bo-btn-hover); color: var(--bo-btn-hover-fg); transform: translateY(-1px); } .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):active { transform: translateY(0); } .fi-btn.fi-color-primary:not(.fi-outlined):focus-visible { outline: 2px solid var(--bo-accent-tx); outline-offset: 2px; } /* Variante « contour » primaire : filet + texte sauge profonde. */ .fi-btn.fi-color-primary.fi-outlined { box-shadow: 0 0 0 1px var(--bo-hair-2); color: var(--bo-accent-tx); } .fi-btn.fi-color-primary.fi-outlined:hover { background-color: var(--bo-wash); } .fi-badge { border-radius: 3px; letter-spacing: 0.01em; } .fi-link { text-underline-offset: 3px; } /* ------------------------------------------------------------------ */ /* 12 · FORMULAIRES — champs papier-3 à filet appuyé, focus sauge net, */ /* états invalide/désactivé explicites (nos filets remplacent */ /* l'anneau Filament, il faut donc re-déclarer chaque état). */ /* ------------------------------------------------------------------ */ .fi-input-wrp { background-color: var(--bo-surface); box-shadow: 0 0 0 1px var(--bo-hair-2); transition: box-shadow 0.15s var(--bo-ease), background-color 0.15s var(--bo-ease); } .fi-input-wrp:focus-within { box-shadow: 0 0 0 2px var(--bo-accent-tx); } .fi-input-wrp.fi-invalid { box-shadow: 0 0 0 1px var(--danger-500); } .fi-input-wrp.fi-invalid:focus-within { box-shadow: 0 0 0 2px var(--danger-500); } .fi-input-wrp.fi-disabled { background-color: var(--bo-band); box-shadow: 0 0 0 1px var(--bo-hair); } .fi-input::placeholder, .fi-select-input:invalid { color: var(--bo-text-mute); } /* ------------------------------------------------------------------ */ /* 13 · ONGLETS & PAGINATION */ /* ------------------------------------------------------------------ */ .fi-tabs-item { border-radius: 3px; } .fi-pagination-item { border-radius: 3px; } /* ------------------------------------------------------------------ */ /* 14 · MENUS DÉROULANTS — panneaux papier-3, filet + ombre douce, */ /* survol en voile chaud (le `bg-gray-50` d'origine serait */ /* invisible sur une surface déjà papier-3). */ /* ------------------------------------------------------------------ */ .fi-dropdown-panel { background-color: var(--bo-surface); border-radius: 5px; box-shadow: 0 0 0 1px var(--bo-hair), var(--bo-pop-shadow); } .fi-dropdown-header { color: var(--bo-text-soft); } .fi-dropdown-list-item { border-radius: 3px; } .fi-dropdown-list-item:hover { background-color: var(--bo-wash); } /* ------------------------------------------------------------------ */ /* 15 · MODALES & NOTIFICATIONS — mêmes surfaces chaudes, ombre */ /* profonde réservée à ce qui flotte réellement. */ /* ------------------------------------------------------------------ */ .fi-modal-window { box-shadow: 0 0 0 1px var(--bo-hair), 0 30px 80px -24px rgba(20, 19, 15, 0.45); } .fi-modal-heading { color: var(--bo-text); font-family: var(--bo-font-display); font-weight: 600; letter-spacing: -0.025em; } .fi-no-notification:not(.fi-inline):not(.fi-color) { box-shadow: 0 0 0 1px var(--bo-hair), var(--bo-pop-shadow); } /* ------------------------------------------------------------------ */ /* 16 · CONNEXION (pages « simples ») — la vitrine : carte papier-3 */ /* posée sur le papier, grand titre Fraunces souligné d'un tiret */ /* sauge signature. */ /* ------------------------------------------------------------------ */ .fi-simple-main { background-color: var(--bo-surface); border-radius: 5px; box-shadow: 0 0 0 1px var(--bo-hair), 0 24px 60px -32px rgba(20, 19, 15, 0.3); } .fi-simple-header-heading { color: var(--bo-text); font-family: var(--bo-font-serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; } .fi-simple-header-heading::after { content: ''; display: block; width: 2.2rem; height: 2px; margin: 0.8rem auto 0; background-color: var(--bo-sage); } .fi-simple-header .fi-logo { color: var(--bo-text); font-family: var(--bo-font-display); font-weight: 600; letter-spacing: -0.025em; } /* ------------------------------------------------------------------ */ /* 17 · ACCESSIBILITÉ DU MOUVEMENT */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .fi-btn, .fi-sidebar-item-btn, .fi-input-wrp { transition: none; } .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):hover { transform: none; } }