/* ============================================================ THEME — SI Breeze (tokens) ------------------------------------------------------------ C'EST LE SEUL FICHIER A DUPLIQUER POUR REVENDRE LE SITE A UN AUTRE CLIENT. Copier en « tokens-.css », changer les valeurs, puis poser « Application:Theme = » dans la configuration : le bandeau, les cartes, les badges et les deux modes suivent, sans toucher a poste.css ni a une seule page Razor. Regles heritees de la charte, valables pour toute copie : - les cinq valeurs de marque ne se renomment pas ; - aucune couleur ne se declare dans un seul bloc de theme : la palette claire sur « :root », puis les MEMES variables redefinies sous « @media (prefers-color-scheme: dark) » garde par « :root:not([data-theme=light]) », puis sous « :root[data-theme=dark] » ; - le filet (2px) remplace l'ombre, qui est reservee a ce qui flotte ; - quatre rayons seulement : 40 / 16 / 10 / 100 px. Contenu ci-dessous : charte SI Breeze, reprise telle quelle du skill sibreeze-charte (references/tokens.css). Ne pas la reecrire ici. ============================================================ */ /* ============================================================ SI BREEZE — Design tokens ------------------------------------------------------------ Les cinq premières valeurs ne sont PAS une interprétation : ce sont les variables déclarées dans le CSS de sibreeze.fr, avec leurs noms d'origine (.sib-menu-root). Ne les renomme pas et n'en dérive pas de variantes « proches » — c'est exactement là que deux livrables commencent à ne plus se ressembler. --sib-bleu:#071038 --sib-orange:#F68822 --sib-bleu-clair:#F2F6FF --sib-bleu-clair2:#E9EEFF --sib-blanc:#fff Tout le reste est marqué DÉRIVÉ : ce sont les valeurs qu'un dashboard réclame et que le site vitrine n'a pas (encres secondaires, statuts, séries de graphique). Leurs contrastes sont calculés, pas estimés. ============================================================ */ /* --- Police de marque ------------------------------------------------- Satoshi (Fontshare) pour tout livrable local / email / fichier autonome. Dans un Artifact publié, le CSP bloque Fontshare : la ligne Google Fonts prend le relais avec Plus Jakarta Sans, construction et chasse quasi identiques. Garder les deux, elles ne se gênent pas. */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { color-scheme: light; /* ================= MARQUE — valeurs officielles du site ============= */ --sib-bleu: #071038; --sib-orange: #F68822; --sib-bleu-clair: #F2F6FF; /* bloc de section arrondi, pastille d'icône */ --sib-bleu-clair2: #E9EEFF; /* filet de carte (2px) */ --sib-blanc: #fff; /* -- Les deux dégradés de marque -- Ce ne sont pas des effets décoratifs : le CTA du site EST un dégradé, et sa grande section sombre aussi. Un aplat à leur place se voit immédiatement. Les valeurs sont relevées telles quelles. */ --sib-bleu-2: #163768; /* extrémité claire du dégradé sombre */ --sib-grad-orange: linear-gradient(90deg, #F68822 0%, #F9A72B 100%); --sib-grad-bleu: linear-gradient(65deg, #163768 0%, #060F36 100%); /* Le survol du CTA doit rester un DÉGRADÉ. Avec une couleur simple, le shorthand `background` retire l'image d'un coup pendant que la couleur transitionne depuis `transparent` : le bouton devient invisible ~0,25 s et son texte tombe à 1,16:1. Défaut réel, invisible sur une capture. */ --sib-grad-orange-survol: linear-gradient(90deg, #DD7817 0%, #E8951F 100%); /* ================= DÉRIVÉS ========================================= */ /* -- Orange : le site pose du blanc sur l'orange (2,48:1, sous le minimum AA de 4,5). Ces deux dérivés corrigent le tir sans changer la couleur de marque. -- */ --sib-orange-ink: #a35000; /* texte/lien orange sur fond clair — 5.67:1 */ --sib-orange-hover: #dd7817; /* survol du CTA — bleu dessus 5.94:1 */ --sib-on-orange: #071038; /* texte SUR l'orange — 7.42:1 */ /* -- Surfaces -- Deux contextes, deux fonds, et il faut savoir lequel on sert : • Le SITE vitrine pose ses cartes sur du blanc, avec le bleu-clair en grands pavés arrondis (--sib-section, rayon 40px). • L'APPLICATION (Gestion SI Breeze) pose ses cartes blanches sur un fond bleu-clair continu : à densité élevée, c'est ce qui détache les cartes sans multiplier les filets. Le défaut ci-dessous est celui de l'application, puisque c'est ce que cette charte sert. Pour une page de type vitrine, remettre --sib-page à var(--sib-blanc). */ --sib-page: #F2F6FF; --sib-surface: #fff; /* carte */ --sib-survol: #F2F6FF; /* le bleu-clair en tant qu'ÉTAT (ligne de tableau, carte cliquable, onglet). Distinct de --sib-bleu-clair, qui est la COULEUR de marque : celle-ci ne change jamais, l'état si. Utiliser --sib-bleu-clair pour un survol repeint la ligne en blanc bleuté sous un texte clair en mode sombre — illisible. */ --sib-section: #F2F6FF; /* bloc de section arrondi (rayon 40px) */ --sib-surface-2: #F2F6FF; /* zone en retrait, en-tête de tableau, pastille */ --sib-border: #B6C7E8; /* Filet des cartes de contenu — 1,70:1 sur blanc, 1,57:1 sur le fond de page. La marque fournit #E9EEFF (--sib-bleu-clair2) et le site s'en contente : il est aéré, ses cartes sont grandes et espacées. Dans une application dense, ce filet à 1,16:1 ne délimite plus rien — une carte blanche sur fond clair se retrouve sans bord. Un cran plus soutenu, même famille bleutée : la carte se voit, l'air de famille tient. */ --sib-border-2: #d8e1f8; /* DÉRIVÉ — séparateur de tableau */ --sib-border-fort: #7789b5; /* DÉRIVÉ — 3,48:1 sur blanc, 3,22:1 sur le pavé. OBLIGATOIRE dès que le filet PORTE du sens : bouton, champ, onglet, carte cliquable, état sélectionné. Là, 1,4.11 s'applique vraiment. */ /* -- Encres -- Le site n'écrit qu'en #071038. Un dashboard a besoin de deux niveaux de plus pour hiérarchiser sans multiplier les tailles. Ils sont obtenus en désaturant le bleu de marque, pas en piochant un gris. */ --sib-ink: #071038; /* 18.42:1 sur blanc · 17.02:1 sur bleu-clair */ --sib-ink-2: #46536f; /* DÉRIVÉ — 7.70:1 · 7.11:1 */ --sib-ink-3: #666f8a; /* DÉRIVÉ — 4.99:1 · 4.61:1 — tient l'AA sur le blanc ET sur le bleu-clair, ce qui compte puisque les deux surfaces se côtoient. */ /* -- Chrome de l'application (DÉRIVÉ du bandeau de Gestion SI Breeze) -- */ --sib-bandeau: #071038; /* en-tête et barre de navigation */ --sib-sur-bandeau: #fff; --sib-sur-bandeau-2:#b9c4dd; /* texte secondaire du bandeau — 8,9:1 */ --sib-bandeau-filet:rgba(255,255,255,.45); /* pilules du bandeau */ /* -- Statut NEUTRE : l'état d'un flux de travail (« En cours », « Terminé », « A faire », « En test client »). Volontairement pâle : ce n'est pas une alerte, et si tous les statuts crient, aucun ne s'entend. Les quatre statuts vifs ci-dessous sont réservés à ce qui appelle une action. -- */ --sib-neutre: #46536f; --sib-neutre-bg: #EEF3FF; --sib-neutre-br: #657eb8; /* txt/fond 6,93:1 · filet 3,3–4,0:1 sur toutes les surfaces claires */ /* -- Statuts (DÉRIVÉS) -- Volontairement hors de la famille orange de marque : une alerte ne doit jamais pouvoir se confondre avec un bouton d'action. */ /* Le filet d'un badge reprend la couleur du statut, il n'est pas une version pâlie du fond : un badge délimite un état, donc son contour porte du sens et doit tenir le 3:1 contre la surface. Les teintes pâles précédentes plafonnaient à 1,3:1 — le badge se dissolvait. */ --sib-good: #067306; --sib-good-bg: #e6f5e6; --sib-good-br: #067306; /* txt/fond 5.36 · filet/blanc 6.06 */ --sib-warn: #8a5200; --sib-warn-bg: #fdf0dc; --sib-warn-br: #8a5200; /* 5.68 · 6.39 */ --sib-serious: #a24218; --sib-serious-bg: #fbece4; --sib-serious-br: #a24218; /* 5.47 · 6.31 */ --sib-crit: #b02020; --sib-crit-bg: #fbe9e9; --sib-crit-br: #b02020; /* 5.84 · 6.83 */ /* -- Séries de graphique (DÉRIVÉES, voir references/dataviz.md) -- */ --sib-series-1: #2a6f9e; --sib-series-2: #F68822; --sib-series-3: #1baf7a; --sib-series-4: #eda100; --sib-series-5: #e87ba4; --sib-series-6: #008300; --sib-series-7: #4a3aa7; --sib-series-8: #e34948; --sib-grid: #E9EEFF; --sib-axis: #d8e1f8; /* ================= TYPOGRAPHIE ===================================== */ --sib-font: 'Satoshi', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Le site titre en 600, pas en 800. Le 800 est réservé au H1 d'accroche de la page d'accueil ; l'appliquer partout alourdit tout de suite. */ --sib-fw-title: 600; --sib-fw-hero: 800; --sib-fs-display: 1.75rem; /* 28px — titre de page (le 50px du site est une taille marketing, hors de propos ici) */ --sib-fs-h2: 1.3125rem; /* 21px — taille de titre de carte du site */ --sib-fs-h3: 1rem; /* 16px */ --sib-fs-body: .9375rem; /* 15px */ --sib-fs-sm: .8125rem; /* 13px */ --sib-fs-xs: .75rem; /* 12px */ --sib-fs-kpi: 2rem; /* 32px */ --sib-lh-tight: 1.1; /* le site : 23,1px sur 21px */ --sib-lh-body: 1.5; /* ================= FORMES ========================================== */ /* Le site n'utilise que trois rayons. S'y tenir fait beaucoup pour l'air de famille ; un 8px égaré casse la ressemblance immédiatement. */ --sib-r-section: 40px; /* grand pavé de section (contexte vitrine) */ --sib-r: 16px; /* carte de contenu */ --sib-r-sm: 10px; /* champ de saisie, bloc interne, bandeau */ --sib-r-pill: 100px; /* bouton, onglet, badge, pastille */ /* Le site vitrine arrondit ses cartes à 20px ; l'application descend à 16 parce que ses cartes sont plus petites et plus nombreuses — à 20px sur une carte dense, l'arrondi mange le contenu des angles. Les pilules restent à 100px partout : c'est elles qui portent la signature. */ /* Le site ne pose PAS d'ombre sur ses cartes : il pose un filet de 2px. C'est sa signature visuelle — une ombre à la place et ça ne ressemble plus à SI Breeze. L'ombre n'est là que pour les éléments flottants (menu déroulant, infobulle). */ --sib-bd: 2px solid var(--sib-border); --sib-shadow-pop: 0 20px 50px rgba(7,16,56,.15); /* valeur exacte du site */ /* ================= ESPACEMENTS ===================================== */ --sib-1: 4px; --sib-2: 8px; --sib-3: 12px; --sib-4: 16px; --sib-5: 20px; --sib-6: 30px; --sib-7: 48px; --sib-8: 64px; /* 20 et 30 ne sont pas arbitraires : ce sont les paddings de carte du site (18px 20px pour les cartes de menu, 30px pour les cartes de contenu). */ --sib-focus: 0 0 0 2px var(--sib-surface), 0 0 0 4px var(--sib-bleu); /* Logos officiels (SVG hébergés). Pour un livrable autonome, remplacer par une copie locale ou une data: URI — voir SKILL.md § Logo. */ --sib-logo: url('https://www.sibreeze.fr/wp-content/uploads/2025/09/logo-si-breeze-integrateur-divalto-brest.svg'); --sib-logo-blanc: url('https://www.sibreeze.fr/wp-content/uploads/2025/09/logo-blanc-si-breeze-integrateur-divalto-brest.svg'); } /* ============================================================ Dark mode — choisi, pas calculé. Le fond est le bleu de marque #071038, pas un gris neutre : c'est ce qui garde l'identité en sombre. Les deux blocs sont nécessaires — le média couvre le réglage système, [data-theme] couvre la bascule manuelle, et elle doit gagner dans les deux sens. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* Le fond de page est l'extrémité SOMBRE du dégradé de marque, en aplat. Le dégradé lui-même est réservé aux bandeaux (.sib-hero) : posé derrière des cartes, son contraste s'inversait en travers de la page — la carte était plus sombre que le fond d'un côté, plus claire de l'autre. Illisible, et invérifiable. */ --sib-page: #060F36; --sib-surface: #121F4A; /* carte : plus CLAIRE que la page (élévation) */ --sib-section: #0B1640; --sib-surface-2: #1B2A5E; --sib-survol: #1B2A5E; /* En sombre le filet est le seul repère de structure et l'œil discrimine moins les valeurs basses : il passe au niveau « porteur de sens ». L'ancien #1e2f5c plafonnait à 1,31:1 contre la carte. */ --sib-border: #5570ad; /* 3,26:1 contre la carte */ --sib-border-2: #47609c; --sib-border-fort: #7c93cd; /* 5,23:1 carte · 4,49:1 surface-2 · 6,12:1 page */ --sib-ink: #fff; /* 15.90:1 sur la carte */ --sib-ink-2: #c3cde0; /* 9.94:1 */ --sib-ink-3: #9dabc9; /* 6.89:1 — l'ancien #8e9cba tombait à 4,28:1 dès qu'il touchait le haut du dégradé */ --sib-orange-ink: #F68822; /* 6.86:1 — en sombre l'orange passe en texte */ --sib-orange-hover: #ffa04a; --sib-bandeau: #060F36; --sib-sur-bandeau-2:#b9c4dd; --sib-neutre: #c3cde0; --sib-neutre-bg: #1B2A5E; --sib-neutre-br: #7c93cd; --sib-good: #4ade4a; --sib-good-bg: #123326; --sib-good-br: #4ade4a; /* filet/carte 8.96 */ --sib-warn: #f5b942; --sib-warn-bg: #33260d; --sib-warn-br: #f5b942; /* 9.01 */ --sib-serious: #f4915f; --sib-serious-bg: #331d12; --sib-serious-br: #f4915f; /* 6.86 */ --sib-crit: #f4696e; --sib-crit-bg: #331416; --sib-crit-br: #f4696e; /* 5.37 */ --sib-series-1: #4d94c9; --sib-series-2: #d97615; --sib-series-3: #199e70; --sib-series-4: #c98500; --sib-series-5: #d55181; --sib-series-6: #008300; --sib-series-7: #9085e9; --sib-series-8: #e66767; --sib-grid: rgba(255,255,255,.08); --sib-axis: rgba(255,255,255,.16); --sib-shadow-pop: 0 20px 50px rgba(0,0,0,.55); --sib-focus: 0 0 0 2px var(--sib-surface), 0 0 0 4px var(--sib-orange); } } :root[data-theme="dark"] { color-scheme: dark; --sib-page: #060F36; --sib-surface: #121F4A; --sib-section: #0B1640; --sib-surface-2: #1B2A5E; --sib-survol: #1B2A5E; --sib-border: #5570ad; --sib-border-2: #47609c; --sib-border-fort: #7c93cd; --sib-ink: #fff; --sib-ink-2: #c3cde0; --sib-ink-3: #9dabc9; --sib-orange-ink: #F68822; --sib-orange-hover: #ffa04a; --sib-bandeau: #060F36; --sib-sur-bandeau-2:#b9c4dd; --sib-neutre: #c3cde0; --sib-neutre-bg: #1B2A5E; --sib-neutre-br: #7c93cd; --sib-good: #4ade4a; --sib-good-bg: #123326; --sib-good-br: #4ade4a; --sib-warn: #f5b942; --sib-warn-bg: #33260d; --sib-warn-br: #f5b942; --sib-serious: #f4915f; --sib-serious-bg: #331d12; --sib-serious-br: #f4915f; --sib-crit: #f4696e; --sib-crit-bg: #331416; --sib-crit-br: #f4696e; --sib-series-1: #4d94c9; --sib-series-2: #d97615; --sib-series-3: #199e70; --sib-series-4: #c98500; --sib-series-5: #d55181; --sib-series-6: #008300; --sib-series-7: #9085e9; --sib-series-8: #e66767; --sib-grid: rgba(255,255,255,.08); --sib-axis: rgba(255,255,255,.16); --sib-shadow-pop: 0 20px 50px rgba(0,0,0,.55); --sib-focus: 0 0 0 2px var(--sib-surface), 0 0 0 4px var(--sib-orange); } /* ============================================================ Base — mobile d'abord ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--sib-page); color: var(--sib-ink); font-family: var(--sib-font); font-size: var(--sib-fs-body); line-height: var(--sib-lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: var(--sib-fw-title); line-height: var(--sib-lh-tight); color: var(--sib-ink); margin: 0 0 var(--sib-3); } h1 { font-size: var(--sib-fs-display); } h2 { font-size: var(--sib-fs-h2); } h3 { font-size: var(--sib-fs-h3); } a { color: var(--sib-orange-ink); text-underline-offset: 2px; } :focus-visible { outline: none; box-shadow: var(--sib-focus); border-radius: var(--sib-r-sm); } /* Les colonnes de chiffres doivent s'aligner, sinon la lecture décroche. */ .sib-num, td.sib-num, .sib-kpi__value { font-variant-numeric: tabular-nums; } /* Un enfant de grille prend par défaut la largeur de son contenu (min-width:auto) : un tableau large fait alors déborder la page entière malgré son conteneur en overflow:auto. Cause n°1 de scroll horizontal. */ .sib-grid > *, .sib-kpis > * { min-width: 0; } /* Bandeau d'accroche — le seul endroit où le dégradé bleu de marque a sa place : du texte blanc dessus (11,79:1 au pire point), pas de carte, pas de graphique. Derrière des cartes il inverse son propre contraste. */ .sib-hero { background: var(--sib-grad-bleu); border-radius: var(--sib-r-section); padding: var(--sib-7) var(--sib-6); color: #fff; } .sib-hero h1, .sib-hero h2, .sib-hero h3 { color: #fff; } /* Bloc de section bleu-clair — le motif du site : un grand pavé arrondi posé sur le blanc, pas un fond de page. */ .sib-section { background: var(--sib-section); border-radius: var(--sib-r-section); padding: var(--sib-7) var(--sib-6); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ Ajouts applicatifs — poste de production ------------------------------------------------------------ Deux etats que la charte ne nomme pas encore. Ils sont declares dans les TROIS blocs, comme le veut la regle : une couleur definie dans un seul bloc casse l'un des deux modes. ============================================================ */ :root { /* Survol d'une pilule du bandeau. composants.md le pose en dur dans le composant ; ici il devient un token, sinon poste.css porterait une couleur et le theme ne serait plus echangeable en un fichier. */ --sib-bandeau-survol: rgba(255, 255, 255, .12); /* Voile du pave numerique. Dans la famille de marque (#071038), pas un noir neutre : le pave est modal, il couvre tout l'ecran de l'atelier. */ --sib-voile: rgba(7, 16, 56, .66); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sib-bandeau-survol: rgba(255, 255, 255, .14); --sib-voile: rgba(0, 0, 0, .72); } } :root[data-theme="dark"] { --sib-bandeau-survol: rgba(255, 255, 255, .14); --sib-voile: rgba(0, 0, 0, .72); }