/* ===================================================================== DataFlex — design system : tokens (source unique) --------------------------------------------------------------------- Outil métier B2B : sobre, dense, lisible. Fond clair, surfaces blanches bordées, pas de cartes flottantes, pas d'ombre sur les éléments en ligne. Ce fichier ne contient QUE des variables et quelques classes utilitaires préfixées df- : chargé avant les autres feuilles (index.html), il ne change l'apparence d'aucun écran tant que ceux-ci ne s'en servent pas. Les anciens jeux de variables (--brand-* dans mainlayout.css, --fx-* dans fiches.css) seront remplacés écran par écran. ===================================================================== */ :root { /* ---------- Couleurs de base ---------- */ --df-fond-app: #F7F7F8; /* fond de l'application */ --df-surface: #FFFFFF; /* panneaux, tableaux, champs */ --df-surface-survol: #F3F4F6; /* ligne ou élément survolé */ --df-bordure: #E5E7EB; --df-bordure-forte: #D1D5DB; /* champ de saisie, séparation marquée */ --df-texte: #111827; /* texte principal */ --df-texte-second: #6B7280; /* infos secondaires, libellés */ --df-texte-inactif: #9CA3AF; /* désactivé, placeholder */ /* ---------- Rouge Genie Flexion ---------- Valeur exacte du logo (wwwroot/brand/logo-genieflexion.png, couleur majoritaire). Avec parcimonie : élément de navigation actif, badge de notification, alertes. Jamais pour les boutons primaires. */ --df-rouge: #BF1E2E; --df-rouge-fonce: #9A1825; /* survol d'un élément rouge */ --df-rouge-pale: #F9E4E6; /* fond d'alerte */ /* ---------- Actions ---------- */ --df-primaire: #1F2937; /* bouton primaire : gris anthracite */ --df-primaire-survol: #111827; --df-primaire-texte: #FFFFFF; --df-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #1F2937; /* anneau de focus clavier */ /* ---------- Sémantique (messages, hors statuts d'intervention) ---------- */ --df-succes: #15803D; --df-succes-pale: #DCFCE7; --df-alerte: #B45309; --df-alerte-pale: #FEF3C7; --df-erreur: var(--df-rouge); --df-erreur-pale: var(--df-rouge-pale); --df-info: #1D4ED8; --df-info-pale: #DBEAFE; /* ---------- Typographie ---------- Une seule police pour tout, matricules et immatriculations compris (plus de monospace) ; les chiffres alignés passent par .df-chiffres (tabular-nums). Inter est déjà chargée par index.html en 400 et 600 seulement. */ --df-police: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --df-taille-12: 12px; /* mentions, badges, métadonnées */ --df-taille-13: 13px; /* infos secondaires, cellules denses */ --df-taille-14: 14px; /* texte courant */ --df-taille-16: 16px; /* titre de panneau */ --df-taille-20: 20px; /* titre de page */ --df-graisse-normale: 400; --df-graisse-forte: 600; --df-interligne: 1.45; --df-interligne-serre: 1.25; /* ---------- Espacements : grille de 4 px ---------- */ --df-esp-1: 4px; --df-esp-2: 8px; --df-esp-3: 12px; --df-esp-4: 16px; --df-esp-5: 20px; --df-esp-6: 24px; --df-esp-8: 32px; --df-esp-10: 40px; /* ---------- Rayons ---------- */ --df-rayon: 6px; /* partout : boutons, champs, badges, lignes */ --df-rayon-panneau: 8px; /* maximum, réservé aux panneaux */ /* ---------- Ombres ---------- Aucune sur les éléments en ligne. Seuls les menus déroulants et les popovers en portent une, très légère. */ --df-ombre-aucune: none; --df-ombre-popover: 0 4px 12px rgba(17, 24, 39, .08), 0 1px 2px rgba(17, 24, 39, .06); /* ---------- Hauteurs de contrôle ---------- */ --df-hauteur-controle: 32px; /* bouton, champ (bureau) */ --df-hauteur-tactile: 44px; /* au doigt (pointer: coarse) */ /* ---------- Statuts d'intervention ---------- Pour chaque statut : couleur pleine (bordure gauche de 3 px), fond = la couleur pleine à 20 % sur blanc (valeur précalculée, sans color-mix pour les anciens navigateurs mobiles), texte foncé de la même teinte. */ --df-st-preplanifiee: #84CC16; --df-st-preplanifiee-fond: #E6F5D0; --df-st-preplanifiee-texte: #365314; /* vert pâle */ --df-st-planifiee: #EAB308; --df-st-planifiee-fond: #FBF0CE; --df-st-planifiee-texte: #713F12; /* jaune */ --df-st-synchronisee: #F97316; --df-st-synchronisee-fond: #FEE3D0; --df-st-synchronisee-texte: #7C2D12; /* orange */ --df-st-demarree: #16A34A; --df-st-demarree-fond: #D0EDDB; --df-st-demarree-texte: #14532D; /* vert */ --df-st-realisee: #2563EB; --df-st-realisee-fond: #D3E0FB; --df-st-realisee-texte: #1E3A8A; /* bleu */ --df-st-validee: #7C3AED; --df-st-validee-fond: #E5D8FB; --df-st-validee-texte: #4C1D95; /* violet */ --df-st-annulee: #DC2626; --df-st-annulee-fond: #F8D4D4; --df-st-annulee-texte: #7F1D1D; /* rouge */ --df-st-echec: #7F1D1D; --df-st-echec-fond: #E5D2D2; --df-st-echec-texte: #450A0A; /* rouge foncé */ } /* ===================================================================== Classes utilitaires (aucun écran ne les utilise encore) ===================================================================== */ /* Chiffres alignés en colonne, à la place de la police monospace (matricules, immatriculations, montants, numéros d'intervention). */ .df-chiffres { font-variant-numeric: tabular-nums; } /* Pastille de statut d'intervention : fond à 20 %, bordure gauche pleine de 3 px, texte foncé. Le statut vient tel quel des données (data-statut = valeur du champ Statut de l'API), la correspondance avec la palette est faite ici, à un seul endroit : elle pose les variables --df-st-* sur tout élément portant data-statut (pastille, bloc du planning, légende). */ .df-statut { display: inline-flex; align-items: center; gap: var(--df-esp-1); padding: 2px var(--df-esp-2); border-left: 3px solid var(--df-st-couleur, var(--df-bordure-forte)); border-radius: var(--df-rayon); background: var(--df-st-fond, var(--df-surface-survol)); color: var(--df-st-texte, var(--df-texte)); font-family: var(--df-police); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); line-height: var(--df-interligne-serre); white-space: nowrap; } /* Statuts de l'intervention (enum StatutIntervention de l'API) */ [data-statut="CREEE"] { --df-st-couleur: var(--df-st-preplanifiee); --df-st-fond: var(--df-st-preplanifiee-fond); --df-st-texte: var(--df-st-preplanifiee-texte); } [data-statut="AFFECTEE"] { --df-st-couleur: var(--df-st-planifiee); --df-st-fond: var(--df-st-planifiee-fond); --df-st-texte: var(--df-st-planifiee-texte); } [data-statut="VUE"] { --df-st-couleur: var(--df-st-synchronisee); --df-st-fond: var(--df-st-synchronisee-fond); --df-st-texte: var(--df-st-synchronisee-texte); } [data-statut="EN_ROUTE"], [data-statut="EN_COURS"] { --df-st-couleur: var(--df-st-demarree); --df-st-fond: var(--df-st-demarree-fond); --df-st-texte: var(--df-st-demarree-texte); } [data-statut="RAPPORT_FINALISE"] { --df-st-couleur: var(--df-st-realisee); --df-st-fond: var(--df-st-realisee-fond); --df-st-texte: var(--df-st-realisee-texte); } [data-statut="VALIDEE"], [data-statut="ENVOYEE_X3"] { --df-st-couleur: var(--df-st-validee); --df-st-fond: var(--df-st-validee-fond); --df-st-texte: var(--df-st-validee-texte); } [data-statut="ANNULEE"] { --df-st-couleur: var(--df-st-annulee); --df-st-fond: var(--df-st-annulee-fond); --df-st-texte: var(--df-st-annulee-texte); } /* Envoi vers X3 (statut de la file x3_outbox) : seul l'échec a une couleur propre */ [data-statut="ECHEC"] { --df-st-couleur: var(--df-st-echec); --df-st-fond: var(--df-st-echec-fond); --df-st-texte: var(--df-st-echec-texte); } /* Badge du statut de transmission à X3 (composant StatutX3Badge) : libellé court, le détail du connecteur en infobulle. Quatre états seulement. */ .df-x3 { display: inline-flex; align-items: center; gap: var(--df-esp-1); height: 20px; padding: 0 var(--df-esp-2); border-radius: var(--df-rayon); font-family: var(--df-police); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); line-height: 1; white-space: nowrap; cursor: default; } .df-x3 i { font-size: 12px; } .df-x3--non-envoyee { background: #F3F4F6; color: #4B5563; } .df-x3--traitement { background: var(--df-info-pale); color: #1E40AF; } .df-x3--acceptee { background: var(--df-succes-pale); color: #166534; } .df-x3--echec { background: var(--df-rouge-pale); color: var(--df-rouge-fonce); }