/* ===================================================================== WebApp — jetons de design Identité propre : SARCELLE PROFOND + AMBRE. Le sarcelle s'éloigne franchement du bleu royal employé ailleurs dans la maison ; l'ambre reprend la couleur historique de WebApp et devient la couleur d'action. Thème clair + sombre via . ===================================================================== */ :root { /* Couleurs de marque (sarcelle profond) */ --brand: #0E6E63; --brand-600: #0A574E; --brand-700: #07423B; --brand-050: #E6F4F1; /* fond très clair de marque */ /* Accent d'action (ambre) — boutons, chiffres, soulignements */ --accent: #E8A33D; --accent-600: #CE8A25; --accent-050: #FDF3E2; /* --- LA COULEUR D'ACTION --------------------------------------------- POURQUOI CE JETON EXISTE. Relevé sur la page d'accueil : les deux couleurs les plus peintes étaient --brand et --accent, deux verts très proches (#00382B et #00694B dans la palette en service). Le bouton « Réserver un appel », le soulignement de l'onglet actif, les titres et les bordures de carte partageaient donc la même famille. Rien ne ressortait, parce que tout ressortait. --accent n'était pas récupérable : il porte 27 usages, dont des bordures, des pastilles et des survols. Le teindre en rouge aurait mis du rouge partout — le contraire du but. LA RÈGLE, et elle tient en une phrase : le rouge est réservé à L'ACTION PRINCIPALE, et à rien d'autre. Pas les titres, pas les chiffres, pas les bordures. Sur une page donnée il apparaît trois ou quatre fois ; au-delà il cesse de vouloir dire quelque chose. PAR DÉFAUT, L'ACTION REPREND L'ACCENT DE LA PALETTE. Cinq des six palettes ont déjà un accent franchement distinct de leur marque — rose sur violet, or sur bordeaux, orange sur graphite, ambre sur sarcelle, rouge sur maroc. Elles n'ont rien à changer. Seule « ecosysteme », la palette en service, a deux verts : elle redéfinit --action sur le rouge du « App » du logo, la seule teinte non verte que la marque possède déjà. Rien n'est inventé pour l'occasion. --action-ink : la couleur du texte POSÉ SUR l'action. Elle ne peut pas être blanche par principe — mesuré, du blanc sur l'ambre de sarcelle ne donne que 2,2:1. Chaque palette déclare l'encre qui passe. */ --action: var(--accent); --action-600: var(--accent-600); --action-050: var(--accent-050); --action-ink: #ffffff; /* Surfaces & texte — teintées vert profond, jamais bleutées */ --ink: #0B2320; /* titres / texte fort */ --body: #3A4B48; /* texte courant */ --muted: #64756F; /* texte secondaire */ --line: #DCE7E4; /* bordures */ --bg: #ffffff; /* fond de page */ --bg-soft: #F2F8F6; /* sections alternées */ --surface: #ffffff; /* cartes, panneaux, champs */ --surface-2: #EAF3F0; /* surface secondaire */ --bg-dark: #08201D; /* blocs sombres (bandeau, pied de page) */ /* États */ --success: #15803d; --success-bg: #dcfce7; --warning: #a5670a; --warning-bg: #fdf1dc; --danger: #b3261e; --danger-bg: #fdeceb; --info: #0A574E; --info-bg: #E6F4F1; /* Typographie */ --font-sans: "Inter", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif; --font-head: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif; /* --- ÉCHELLE TYPOGRAPHIQUE ------------------------------------------- SEPT ÉCHELONS, ET RIEN ENTRE EUX. Le relevé qui a motivé ce bloc : 151 déclarations de taille réparties sur 40 valeurs distinctes, dont six coincées entre 16,8 et 18,4 px (16,8 · 16,96 · 17,28 · 17,6 · 17,92 · 18,4). Personne ne distingue 17,28 de 17,6. Ce n'étaient pas des décisions, c'était l'accumulation d'un « 1.08rem » ici et d'un « .93rem » là, chacun raisonnable au moment où il a été écrit. Une hiérarchie se lit parce que les marches sont franches. Sous ~12 % d'écart, deux tailles se ressemblent sans se distinguer : c'est le pire des cas, l'œil sent une différence sans pouvoir la nommer. RÈGLE : aucune feuille publique n'écrit de taille en dur. Si une valeur manque, c'est l'échelle qu'on discute, pas une exception qu'on ajoute. */ --t-xs: .75rem; /* 12 px — sur-titres, mentions, méta */ --t-sm: .875rem; /* 14 px — texte secondaire, légendes, cartes */ --t-base: 1rem; /* 16 px — corps */ --t-lg: 1.125rem; /* 18 px — chapô, titre de carte */ --t-xl: 1.375rem; /* 22 px — sous-titre, h3 courant */ --t-2xl: clamp(1.6rem, 3.2vw, 2.3rem); /* 26 à 37 px — titre de section */ --t-3xl: clamp(2rem, 4.5vw, 3.1rem); /* 32 à 50 px — titre de page */ /* Hors échelle : ces chiffres-là ne sont pas du texte mais un ornement, ils ne se comparent au corps d'aucun autre élément. */ --t-numeral: 4.2rem; /* Rayons — plus francs que le socle d'origine */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Ombres teintées sarcelle */ --shadow-sm: 0 1px 2px rgba(7, 66, 59, .08), 0 1px 3px rgba(7, 66, 59, .10); --shadow-md: 0 8px 22px rgba(7, 66, 59, .12); --shadow-lg: 0 20px 44px rgba(7, 66, 59, .20); --shadow-inset: inset 0 1px 2px rgba(7, 66, 59, .06); --ring: 0 0 0 3px rgba(14, 110, 99, .22); /* Mise en page */ --maxw: 1180px; --gutter: clamp(16px, 4vw, 28px); /* Dégradés — la signature colorée de WebApp */ --grad-brand: linear-gradient(125deg, #0E6E63 0%, #17958A 55%, #E8A33D 100%); --grad-dark: linear-gradient(140deg, #08201D 0%, #0E453E 55%, #12645A 100%); --grad-amber: linear-gradient(120deg, #E8A33D 0%, #F2C078 100%); /* Translucide en-tête (clair) */ --header-bg: rgba(255, 255, 255, .88); color-scheme: light; } /* --------------------------- THÈME SOMBRE --------------------------- */ :root[data-theme="dark"] { --brand: #3FBFAE; /* sarcelle lumineux sur fond sombre */ --brand-600: #2FA694; --brand-700: #1F8878; --brand-050: #0E3B36; --accent: #F0B75E; --accent-600: #D89B3F; --accent-050: #3A2C13; --ink: #E9F3F0; --body: #BFD1CD; --muted: #8AA09B; --line: #22403B; --bg: #071815; --bg-soft: #0B221E; --surface: #0E2925; --surface-2: #143430; --bg-dark: #04100E; --success-bg: #12311f; --warning-bg: #33280d; --danger-bg: #331515; --info-bg: #0E3B36; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 22px rgba(0,0,0,.5); --shadow-lg: 0 20px 44px rgba(0,0,0,.6); --shadow-inset: inset 0 1px 2px rgba(0,0,0,.4); --ring: 0 0 0 3px rgba(63, 191, 174, .28); --grad-brand: linear-gradient(125deg, #17958A 0%, #3FBFAE 55%, #F0B75E 100%); --grad-dark: linear-gradient(140deg, #04100E 0%, #0B2E29 55%, #12564D 100%); --header-bg: rgba(7, 24, 21, .84); color-scheme: dark; } /* Surfaces grises codées en dur basculées en sombre */ :root[data-theme="dark"] .badge, :root[data-theme="dark"] .badge--muted, :root[data-theme="dark"] .table th, :root[data-theme="dark"] .dtable th, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .panel__head { background: var(--surface-2); } :root[data-theme="dark"] .table tr:hover td { background: var(--surface-2); } :root[data-theme="dark"] body.admin { background: var(--bg); }