/* ============================================================================= MÔNE — Jetons du design system Source unique des couleurs, tailles et rythmes. Aucune valeur brute ailleurs. Direction « Sauge » : canevas minéral clair, surfaces posées à plat, grands rayons, une seule couleur d'accent — la sauge — dérivée du Vert Forêt de la charte. Le Vert Forêt reste la couleur d'action et d'autorité (boutons primaires, puce du compte, textes forts) ; la sauge dit « vous êtes ici » (navigation active, jauges, indicateurs). La Terre Cuite ne sert plus qu'au repère de focus clavier et aux accents secondaires. Tous les noms de jetons historiques sont conservés : les 150 gabarits de l'application suivent la nouvelle direction sans une ligne de balisage modifiée. ========================================================================== */ :root { /* --- Couleurs de marque ---------------------------------------------- */ --vert-foret: #0A2E24; /* Primaire / action */ --vert-foret-hover: #15433A; --vert-foret-08: rgba(10, 46, 36, .08); --vert-foret-04: rgba(10, 46, 36, .04); --vert-foret-16: rgba(10, 46, 36, .16); --terre-cuite: #A67C52; /* Secondaire / focus */ --terre-cuite-hover: #8A6641; --terre-cuite-12: rgba(166, 124, 82, .12); --gris-perle: #F4F6F7; --anthracite: #1C211B; /* Texte principal, noir végétal */ --gris-moyen: #62675E; /* Texte secondaire : 5,6:1 sur surface */ --rouge-brique: #8B2635; --blanc: #FFFFFF; --bordure: #E4E6E0; --desactive: #C9CCC4; --fond-entete: #F4F5F1; --beige-sable: #E8E0D4; /* --- Sauge : l'unique accent ---------------------------------------- Même famille que le Vert Forêt, tirée vers le jaune et désaturée. Quatre valeurs, du texte sur fond clair jusqu'au voile de survol. */ --sauge-fonce: #4B6038; /* Aplat porteur de texte blanc : 6,8:1 */ --sauge: #7B9163; /* Aplat décoratif : jauges, graphiques */ --sauge-clair: #C5D1B4; --sauge-pale: #E3E9DA; --sauge-brume: #EEF2E8; /* --- Teintes de domaine : icônes bicolores ----------------------------- Chaque domaine fonctionnel a son encre (tracé de l'icône, contraste ≥ 3:1 sur sa teinte), son second ton (calque de fond de l'icône duotone) et sa teinte (pastille). Toutes désaturées, de même clarté : elles distinguent sans se disputer la sauge, qui reste le seul accent d'interface. */ --associatif-encre: #4B6038; --associatif-fond: #9DB77F; --associatif-teinte: #EAF0E2; --finances-encre: #86600F; --finances-fond: #E2B24C; --finances-teinte: #F7EDD5; --activites-encre: #8A5634; --activites-fond: #D9A177; --activites-teinte: #F5E7DC; --logistique-encre: #3B5C6B; --logistique-fond: #86AFC2; --logistique-teinte: #E2ECF0; --institution-encre: #6A4A63; --institution-fond: #C49BBB; --institution-teinte: #F1E6EE; /* Nuances profondes : conservées pour les surfaces sombres (connexion, notifications éphémères, carte de membre). */ --vert-abysse: #06201A; --vert-nuit: #0C2C23; --vert-clair: #2F5C4B; /* --- Surfaces ------------------------------------------------------------ Canevas gris minéral légèrement verdi, cartes quasi blanches posées à plat : c'est l'écart de valeur, pas l'ombre, qui dessine la carte. */ --canevas: #E8EAE4; --canevas-voile: rgba(255, 255, 255, .55); --surface: #FBFCFA; /* Carte, panneau */ --surface-creuse: #F1F3EE; /* Tuile intérieure, champ au repos */ --surface-relief: #F6F7F3; /* Barre d'outils, pied de pagination */ --filet: rgba(28, 33, 27, .08); --filet-appuye: rgba(28, 33, 27, .15); --filet-clair: rgba(255, 255, 255, .12); --filet-clair-fort: rgba(255, 255, 255, .22); --sur-sombre: rgba(255, 255, 255, .95); --sur-sombre-2: rgba(255, 255, 255, .74); --sur-sombre-3: rgba(255, 255, 255, .60); /* --- Statuts ---------------------------------------------------------- */ --statut-ok: #3D7A57; --statut-attente: #B07F12; --statut-alerte: var(--rouge-brique); --statut-neutre: var(--gris-moyen); --statut-ok-fond: rgba(61, 122, 87, .11); --statut-attente-fond: rgba(176, 127, 18, .12); --statut-alerte-fond: rgba(139, 38, 53, .09); --statut-neutre-fond: rgba(98, 103, 94, .10); /* --- Typographie -------------------------------------------------------- */ --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', 'Menlo', 'Consolas', monospace; --fs-h1: 30px; --fw-h1: 600; --ls-h1: -.03em; --fs-h2: 18px; --fw-h2: 600; --ls-h2: -.018em; --fs-h3: 15px; --fw-h3: 600; --fs-body: 14px; --fw-body: 400; --fs-label: 11px; --fw-label: 600; --ls-label: .06em; --fs-small: 12px; --fs-kpi: 28px; --lh-base: 1.6; --lh-serre: 1.12; /* --- Espacement — échelle de 4 px -------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* --- Rayons --------------------------------------------------------------- Verrou de forme, une règle par famille, tenue partout : actions (bouton, puce, lien de navigation) → pilule contrôles (champ, élément de menu) → --radius 12 px tuiles intérieures d'une carte → --radius-md 16 px conteneurs (carte, panneau, modale) → --radius-lg 24 px */ --radius-sm: 8px; --radius: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-pilule: 999px; /* --- Ombres ---------------------------------------------------------------- À plat par défaut. L'ombre n'apparaît que pour ce qui flotte réellement au-dessus du contenu : menu, modale, notification. */ --shadow-filet: 0 0 0 1px rgba(28, 33, 27, .035); --shadow-card: 0 1px 2px rgba(28, 33, 27, .035); --shadow-eleve: 0 1px 2px rgba(28, 33, 27, .04), 0 12px 28px -14px rgba(28, 33, 27, .18); --shadow-flottant: 0 2px 6px rgba(28, 33, 27, .06), 0 22px 44px -18px rgba(28, 33, 27, .26); --shadow-modal: 0 1px 3px rgba(12, 20, 12, .10), 0 32px 64px -20px rgba(12, 20, 12, .34); --shadow-rail: none; --lueur-haute: inset 0 1px 0 rgba(255, 255, 255, .12); /* --- Layout ------------------------------------------------------------ */ --sidebar-w: 268px; --sidebar-w-reduite: 84px; --header-h: 72px; --content-max: 1480px; --marge-coquille: 16px; /* --- Mouvement ------------------------------------------------------------ Couleur 150 ms, matière 220 ms, panneau 300 ms. Tous neutralisés par `prefers-reduced-motion` (base.css). */ --transition: 150ms ease; --transition-matiere: 220ms cubic-bezier(.2, .8, .3, 1); --transition-panneau: 300ms cubic-bezier(.16, 1, .3, 1); /* --- Plans ------------------------------------------------------------- */ --z-sidebar: 30; --z-header: 20; --z-voile: 40; --z-modale: 50; --z-toast: 60; }