/* * Thème « Section 4 » — noir et blanc, à l'image de l'agence. * * Troisième thème, à côté du clair et du sombre : choisi depuis le menu * utilisateur (`?theme=section4`), retenu par `tabler-theme.min.js` qui pose * `data-bs-theme="section4"` sur ``. Tout ce fichier est rangé sous ce * sélecteur : tant que le thème n'est pas choisi, il ne fait rien. * * Il se charge APRÈS `theme.css` et ne touche qu'aux COULEURS et aux POLICES. * Rayons, espacements, ombres (leur forme), mises en page : tout vient du * thème « Corail & menthe », qu'il suit donc à chaque évolution sans reprise. * Hors du clair de Tabler, Bootstrap retombe sur les jetons de `:root` : ce * thème part du clair et n'en redéfinit que la palette. * * Le parti pris est celui de la charte (voir `careers.css`) : blanc, noir, * une rampe de gris neutres, la grotesque Section 4. La couleur n'apparaît * que lorsqu'elle PORTE un sens — réussite en vert, erreur en rouge, * attention en orange — et elle y est vive. Les teintes décoratives (bleu, * violet, turquoise…) et les teintes de brique passent au noir : une brique se * reconnaît à son icône et à son nom, pas à sa couleur. */ /* ========================================================================== Police de la charte ========================================================================== */ /* * Le même kit que la page carrières et les documents. Déclarée ici aussi : la * page carrières charge `careers.css`, pas l'application, et inversement. * Deux déclarations identiques d'une même famille ne se gênent pas. */ @font-face { font-family: "Section4"; src: url("../fonts/section4-light-qB2rBk1.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Section4"; src: url("../fonts/section4-regular-5A7R75B.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Section4"; src: url("../fonts/section4-bold-0DR3LZJ.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== Jetons ========================================================================== */ [data-bs-theme="section4"] { color-scheme: light; /* --- Encre et papier ------------------------------------------------- */ --tblr-primary: #000000; --tblr-primary-rgb: 0, 0, 0; /* Le noir ne s'assombrit pas : le survol d'un bouton noir l'éclaircit. */ --tblr-primary-darken: #2e2e2e; --tblr-primary-fg: #ffffff; --tblr-primary-text-emphasis: #000000; --tblr-primary-bg-subtle: #ededed; --tblr-primary-border-subtle: #c4c4c4; --tblr-dark: #000000; --tblr-dark-rgb: 0, 0, 0; --tblr-dark-darken: #2e2e2e; /* --- Gris neutres --------------------------------------------------- * Même échelle de clarté que la rampe chaude du thème clair, sans teinte : * tout ce qui y pioche (surfaces secondaires, séparateurs, texte atténué) * passe au gris sans autre intervention. */ --tblr-gray-50: #fafafa; --tblr-gray-100: #f4f4f4; --tblr-gray-200: #e6e6e6; --tblr-gray-300: #d4d4d4; --tblr-gray-400: #a3a3a3; --tblr-gray-500: #737373; --tblr-gray-600: #525252; --tblr-gray-700: #3a3a3a; --tblr-gray-800: #262626; --tblr-gray-900: #141414; /* --- Surfaces ------------------------------------------------------- * Page d'un gris à peine perceptible, cartes blanches : c'est ce qui * détache une carte sans lui donner de couleur. */ --tblr-body-bg: #f5f5f5; --tblr-body-bg-rgb: 245, 245, 245; --tblr-body-color: #000000; --tblr-body-color-rgb: 0, 0, 0; --tblr-emphasis-color: #000000; --tblr-emphasis-color-rgb: 0, 0, 0; --tblr-bg-surface: #ffffff; --tblr-bg-surface-primary: #ffffff; /* À peine en retrait du blanc : un gris franc dans une carte (en-têtes à onglets, colonnes du kanban, zones de dépôt) fait daté. Le filet fait la séparation, pas l'aplat. */ --tblr-bg-surface-secondary: #fafafa; --tblr-bg-surface-tertiary: #fcfcfc; --tblr-bg-forms: #ffffff; --tblr-highlight-bg: #ededed; --tblr-highlight-color: #000000; --tblr-border-color: #e3e3e3; --tblr-border-color-translucent: rgba(0, 0, 0, 0.1); --tblr-border-active-color: #000000; /* 4,5:1 sur blanc comme sur le fond de page : le texte atténué reste lu. */ --tblr-secondary: #6b6b6b; --tblr-secondary-rgb: 107, 107, 107; --tblr-secondary-darken: #525252; --tblr-secondary-color: #6b6b6b; --tblr-muted: #6b6b6b; --tblr-disabled-color: #a3a3a3; --tblr-active-bg: rgba(0, 0, 0, 0.06); --tblr-focus-ring-color: rgba(0, 0, 0, 0.2); --tblr-link-color: #000000; --tblr-link-color-rgb: 0, 0, 0; --tblr-link-hover-color: #000000; --tblr-link-hover-color-rgb: 0, 0, 0; /* --- Couleurs porteuses de sens ------------------------------------- * Les seules couleurs du thème, et elles sont vives : quand elles * apparaissent, c'est qu'il y a quelque chose à voir. */ --tblr-green: #00b35f; --tblr-green-rgb: 0, 179, 95; --tblr-green-darken: #009950; --tblr-lime: #00b35f; --tblr-lime-rgb: 0, 179, 95; --tblr-lime-darken: #009950; --tblr-success: #00b35f; --tblr-success-rgb: 0, 179, 95; --tblr-success-darken: #009950; --tblr-success-text-emphasis: #005c30; --tblr-success-bg-subtle: #d6f5e6; --tblr-success-border-subtle: #99e0bf; --tblr-red: #ff2d2d; --tblr-red-rgb: 255, 45, 45; --tblr-red-darken: #e01e1e; --tblr-danger: #ff2d2d; --tblr-danger-rgb: 255, 45, 45; --tblr-danger-darken: #e01e1e; --tblr-danger-text-emphasis: #8a0f0f; --tblr-danger-bg-subtle: #ffe0e0; --tblr-danger-border-subtle: #ffadad; --tblr-orange: #ff7a00; --tblr-orange-rgb: 255, 122, 0; --tblr-orange-darken: #e06b00; --tblr-yellow: #ff7a00; --tblr-yellow-rgb: 255, 122, 0; --tblr-yellow-darken: #e06b00; --tblr-warning: #ff7a00; --tblr-warning-rgb: 255, 122, 0; --tblr-warning-darken: #e06b00; --tblr-warning-text-emphasis: #7a3a00; --tblr-warning-bg-subtle: #ffead6; --tblr-warning-border-subtle: #ffc999; /* Sur un aplat vif, le texte est noir : 5,8:1 sur le rouge, 7:1 sur le vert, 8:1 sur l'orange — là où le blanc tombe sous 3:1. */ --tblr-green-fg: #000000; --tblr-lime-fg: #000000; --tblr-success-fg: #000000; --tblr-red-fg: #000000; --tblr-danger-fg: #000000; --tblr-orange-fg: #000000; --tblr-yellow-fg: #000000; --tblr-warning-fg: #000000; /* --- Teintes décoratives, ramenées à l'encre ------------------------ * Un badge `bg-blue` ou `bg-purple-lt` distinguait un statut par sa * couleur ; il le distingue désormais par son libellé, en noir ou en gris * clair. « Info » n'est pas une alerte : il passe au noir lui aussi. */ --tblr-blue: #000000; --tblr-blue-rgb: 0, 0, 0; --tblr-blue-darken: #2e2e2e; --tblr-azure: #000000; --tblr-azure-rgb: 0, 0, 0; --tblr-azure-darken: #2e2e2e; --tblr-indigo: #000000; --tblr-indigo-rgb: 0, 0, 0; --tblr-indigo-darken: #2e2e2e; --tblr-purple: #000000; --tblr-purple-rgb: 0, 0, 0; --tblr-purple-darken: #2e2e2e; --tblr-pink: #000000; --tblr-pink-rgb: 0, 0, 0; --tblr-pink-darken: #2e2e2e; --tblr-teal: #000000; --tblr-teal-rgb: 0, 0, 0; --tblr-teal-darken: #2e2e2e; --tblr-cyan: #000000; --tblr-cyan-rgb: 0, 0, 0; --tblr-cyan-darken: #2e2e2e; --tblr-info: #000000; --tblr-info-rgb: 0, 0, 0; --tblr-info-darken: #2e2e2e; --tblr-info-text-emphasis: #000000; --tblr-info-bg-subtle: #ededed; --tblr-info-border-subtle: #c4c4c4; /* --- Ombres : même forme que le thème clair, teinte neutre ----------- */ --tblr-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.18); --tblr-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px -14px rgba(0, 0, 0, 0.2); --tblr-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --tblr-box-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.28); /* --- Typographie ---------------------------------------------------- * Une seule police, comme la charte : titres, texte, tableaux. */ --tblr-font-sans-serif: "Section4", "Helvetica Neue", Helvetica, Arial, sans-serif; --tblr-body-font-family: var(--tblr-font-sans-serif); --app-font-display: var(--tblr-font-sans-serif); /* --- Jetons propres à l'ERP ------------------------------------------ */ --app-tone-ink-base: #000000; --app-sidebar-bg: #ffffff; --app-sidebar-color: #525252; } /* ========================================================================== Teintes de brique ========================================================================== Toutes à l'encre. Le sélecteur de thème en tête les rend plus spécifiques que les `.tone-*` de `theme.css` : une brique ajoutée demain, qui choisit une classe existante, passe au noir sans qu'on revienne ici. `.tone-primary` suit déjà la primaire. Le bandeau d'appel à l'action (`.banner-gradient`), fait de `--tone` et `--tone-2`, devient un aplat noir. */ [data-bs-theme="section4"] :is( .tone-primary, .tone-coral, .tone-teal, .tone-green, .tone-blue, .tone-azure, .tone-indigo, .tone-purple, .tone-pink, .tone-orange, .tone-yellow, .tone-cyan ) { --tone: #000000; --tone-2: #000000; } /* ========================================================================== Couleurs écrites en dur dans `theme.css` ========================================================================== Les seules règles de ce fichier qui ne passent pas par une variable : elles répondent chacune à une couleur que `theme.css` fixe elle-même. */ /* La barre latérale est blanche : un filet la sépare de la page, et le survol blanc translucide du thème clair n'y serait plus visible. */ [data-bs-theme="section4"] .navbar-vertical { --tblr-navbar-border-color: var(--tblr-border-color); } [data-bs-theme="section4"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover, [data-bs-theme="section4"] .navbar-vertical .mt-auto .nav-link:hover { background-color: var(--tblr-gray-100); } /* Les tuiles de chiffres : `theme.css` teinte leur fond de 10 % de la couleur de brique. Avec le noir, ce mélange donne un gris franc. Ici la tuile est blanche, et le chiffre en noir suffit à la distinguer. */ [data-bs-theme="section4"] .stat-tile { background-color: var(--tblr-bg-surface); border-color: var(--tblr-border-color); } /* Les initiales sur un aplat noir, et non sur le dégradé corail. */ [data-bs-theme="section4"] .avatar { background-image: none; background-color: #000000; } /* L'écran de connexion perd ses halos de couleur. */ [data-bs-theme="section4"] .page-center { background-image: none; } /* * Une couleur vive fait un bon APLAT, pas un bon TEXTE : en petit sur blanc, * le vert et l'orange de la charte tombent sous 3:1. Le texte coloré * (`.text-*`, et celui des badges pâles `.bg-*-lt`) prend donc une version * profonde de la même couleur ; les aplats gardent la vive. Les `!important` * répondent à ceux des utilitaires Tabler, qui n'en laissent pas d'autre. */ [data-bs-theme="section4"] :is(.text-success, .text-green, .text-lime, .bg-success-lt, .bg-green-lt, .bg-lime-lt) { color: #007a41 !important; } [data-bs-theme="section4"] :is(.text-danger, .text-red, .bg-danger-lt, .bg-red-lt) { color: #d40000 !important; } [data-bs-theme="section4"] :is(.text-warning, .text-orange, .text-yellow, .bg-warning-lt, .bg-orange-lt, .bg-yellow-lt) { color: #b35500 !important; } /* Les chiffres en colonne : la grotesque de la charte a des chiffres proportionnels, et un total changerait de largeur à chaque frappe. */ [data-bs-theme="section4"] .table, [data-bs-theme="section4"] .stat-tile-value { font-variant-numeric: tabular-nums; }