/* ========================================================================== Jetons de design — la seule source de vérité visuelle. Aucun composant ne code une couleur, un rayon ou une ombre en dur. Parti pris : grammaire macOS (vibrance, filets fins, rayons continus, ressorts courts) accordée à la palette de la marque — l'olive des Alpilles remplace le bleu système, pour que l'ERP, le site et les emails se ressemblent (cf. gabarit d'email du CDC §7.4). ========================================================================== */ :root { /* ---- Typographie ------------------------------------------------------ La pile démarre sur la police système : sur un Mac, l'interface est rendue en SF Pro, donc identique à une application native. Ailleurs, on retombe sur l'équivalent local le plus proche. */ --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --police-affichage: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, sans-serif; --police-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; /* Échelle typographique alignée sur les tailles macOS. */ --t-mini: 0.6875rem; /* 11px — légendes, étiquettes de colonne */ --t-petit: 0.75rem; /* 12px — texte secondaire */ --t-base: 0.8125rem; /* 13px — texte d'interface standard */ --t-corps: 0.875rem; /* 14px — corps de fiche */ --t-titre: 1.0625rem; /* 17px — titre de section */ --t-grand: 1.375rem; /* 22px — titre de page */ --t-geant: 2rem; /* 32px — valeur d'indicateur */ --graisse-normale: 400; --graisse-moyenne: 500; --graisse-demi: 590; /* le « semibold » de SF, plus fin qu'un 600 */ --graisse-forte: 680; /* ---- Rythme ---------------------------------------------------------- */ --e1: 2px; --e2: 4px; --e3: 6px; --e4: 8px; --e5: 12px; --e6: 16px; --e7: 20px; --e8: 24px; --e9: 32px; --e10: 40px; --e11: 56px; /* ---- Rayons ---------------------------------------------------------- macOS Sonoma utilise des rayons généreux et « continus ». On approche la courbe continue par un rayon plus large que d'habitude à taille égale. */ --r-petit: 5px; --r-controle: 7px; --r-carte: 11px; --r-panneau: 14px; --r-fenetre: 12px; --r-pilule: 999px; /* ---- Mouvement ------------------------------------------------------- Deux courbes seulement : une sortie douce pour les apparitions, un léger dépassement pour ce que l'utilisateur vient d'actionner (le « ressort » qui donne la sensation de matière). */ --sortie: cubic-bezier(0.22, 0.61, 0.36, 1); --ressort: cubic-bezier(0.34, 1.42, 0.64, 1); --court: 120ms; --moyen: 220ms; --long: 320ms; /* ---- Épaisseur des filets -------------------------------------------- Les séparateurs macOS font un pixel physique, soit 0.5px sur un écran Retina. On le demande explicitement quand l'écran le permet. */ --filet: 1px; } @media (min-resolution: 2dppx) { :root { --filet: 0.5px; } } /* ========================================================================== Thème clair ========================================================================== */ :root, :root[data-theme="clair"] { color-scheme: light; /* Fonds, du plus lointain au plus proche. */ --fond-bureau: #ececee; /* derrière la fenêtre */ --fond-barre: 250 250 251; /* barres latérales et d'outils (RVB pour alpha) */ --fond-contenu: #ffffff; /* zone de travail */ --fond-eleve: #ffffff; /* cartes, feuilles, menus */ --fond-enfonce: #f2f2f4; /* champs, puits */ --fond-survol: rgba(0, 0, 0, 0.04); --fond-actif: rgba(0, 0, 0, 0.07); /* Texte. */ --texte: #1d1d1f; --texte-2: #57575c; --texte-3: #8a8a8f; --texte-inverse: #ffffff; /* Filets et ombres. */ --separateur: rgba(0, 0, 0, 0.11); --separateur-fort: rgba(0, 0, 0, 0.18); --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 var(--filet) rgba(0, 0, 0, 0.06); --ombre-elevee: 0 4px 14px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 var(--filet) rgba(0, 0, 0, 0.07); --ombre-flottante: 0 16px 48px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.10), 0 0 0 var(--filet) rgba(0, 0, 0, 0.08); /* Accent de marque — l'olive des Alpilles à la place du bleu système. */ --accent: #6e8052; --accent-fort: #5c6b45; --accent-doux: rgba(110, 128, 82, 0.12); --accent-contour: rgba(110, 128, 82, 0.34); --sur-accent: #ffffff; /* Sémantique d'état. */ /* Teinte unique de la frise de planning. Validée (bande de clarté, plancher de chroma, contraste ≥ 3:1 sur la surface du mode). Une seule teinte : la distinction entre séjours passe par le remplissage, pas par la couleur. */ --planning: #2e8b45; --planning-doux: rgba(46, 139, 69, 0.14); --vert: #2e8b45; --vert-doux: rgba(46, 139, 69, 0.12); --orange: #b26a00; --orange-doux: rgba(178, 106, 0, 0.13); --rouge: #c0392b; --rouge-doux: rgba(192, 57, 43, 0.11); --bleu: #2a6fb8; --bleu-doux: rgba(42, 111, 184, 0.11); --violet: #7a5ea8; --violet-doux: rgba(122, 94, 168, 0.12); --gris: #74747a; --gris-doux: rgba(116, 116, 122, 0.12); } /* ========================================================================== Thème sombre ========================================================================== */ :root[data-theme="sombre"] { color-scheme: dark; --fond-bureau: #131315; --fond-barre: 32 32 35; --fond-contenu: #1c1c1f; --fond-eleve: #252528; --fond-enfonce: #29292d; --fond-survol: rgba(255, 255, 255, 0.06); --fond-actif: rgba(255, 255, 255, 0.10); --texte: #f2f2f5; --texte-2: #a9a9b0; --texte-3: #78787f; --texte-inverse: #16161a; --separateur: rgba(255, 255, 255, 0.11); --separateur-fort: rgba(255, 255, 255, 0.20); --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 var(--filet) rgba(255, 255, 255, 0.07); --ombre-elevee: 0 6px 18px rgba(0, 0, 0, 0.50), 0 0 0 var(--filet) rgba(255, 255, 255, 0.09); --ombre-flottante: 0 20px 56px rgba(0, 0, 0, 0.62), 0 0 0 var(--filet) rgba(255, 255, 255, 0.11); /* L'olive est éclaircie : à luminance égale, elle deviendrait illisible sur fond sombre. */ --accent: #9db87e; --accent-fort: #b0c795; --accent-doux: rgba(157, 184, 126, 0.17); --accent-contour: rgba(157, 184, 126, 0.42); --sur-accent: #14180d; --planning: #47a758; --planning-doux: rgba(71, 167, 88, 0.20); --vert: #56d364; --vert-doux: rgba(86, 211, 100, 0.16); --orange: #e3a008; --orange-doux: rgba(227, 160, 8, 0.17); --rouge: #ff6b5e; --rouge-doux: rgba(255, 107, 94, 0.16); --bleu: #6cb0f5; --bleu-doux: rgba(108, 176, 245, 0.16); --violet: #b39bdc; --violet-doux: rgba(179, 155, 220, 0.17); --gris: #98989f; --gris-doux: rgba(152, 152, 159, 0.16); } /* Suivi du réglage système quand l'utilisateur n'a pas tranché. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --fond-bureau: #131315; --fond-barre: 32 32 35; --fond-contenu: #1c1c1f; --fond-eleve: #252528; --fond-enfonce: #29292d; --fond-survol: rgba(255, 255, 255, 0.06); --fond-actif: rgba(255, 255, 255, 0.10); --texte: #f2f2f5; --texte-2: #a9a9b0; --texte-3: #78787f; --texte-inverse: #16161a; --separateur: rgba(255, 255, 255, 0.11); --separateur-fort: rgba(255, 255, 255, 0.20); --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 var(--filet) rgba(255, 255, 255, 0.07); --ombre-elevee: 0 6px 18px rgba(0, 0, 0, 0.50), 0 0 0 var(--filet) rgba(255, 255, 255, 0.09); --ombre-flottante: 0 20px 56px rgba(0, 0, 0, 0.62), 0 0 0 var(--filet) rgba(255, 255, 255, 0.11); --accent: #9db87e; --accent-fort: #b0c795; --accent-doux: rgba(157, 184, 126, 0.17); --accent-contour: rgba(157, 184, 126, 0.42); --sur-accent: #14180d; --planning: #47a758; --planning-doux: rgba(71, 167, 88, 0.20); --vert: #56d364; --vert-doux: rgba(86, 211, 100, 0.16); --orange: #e3a008; --orange-doux: rgba(227, 160, 8, 0.17); --rouge: #ff6b5e; --rouge-doux: rgba(255, 107, 94, 0.16); --bleu: #6cb0f5; --bleu-doux: rgba(108, 176, 245, 0.16); --violet: #b39bdc; --violet-doux: rgba(179, 155, 220, 0.17); --gris: #98989f; --gris-doux: rgba(152, 152, 159, 0.16); } }