/* ============================================= VIFAVION — Jetons de la charte (v1 + profondeur v2) Une seule source de vérité pour les couleurs, la typographie, les rayons, les espacements et les élévations. Aucun écran ne redéfinit une couleur en dur : tout passe par ces variables, sans quoi le thème sombre décroche. Thème : clair par défaut, sombre si le système le demande, et l'attribut data-theme sur tranche dans les deux sens (préférence du salarié). Garde-fous de la charte, à ne pas contourner : - le cyan et l'ambre ne portent jamais de texte sur fond clair ; ce sont des aplats, des points et des filets ; - un statut porte d'abord un mot, ensuite une couleur ; - toute cible tactile fait au moins 48 px ; - en thème sombre les surfaces se détachent par la bordure et la teinte, jamais par l'ombre — les élévations passent à none. ============================================= */ :root { /* ---------- Couleurs de marque (les quatre, invariantes) ---------- */ --vf-marine: #0B1351; /* texte, surfaces sombres, structure */ --vf-bleu: #1690FB; /* action principale — une seule par écran */ --vf-cyan: #0FE3EC; /* statut « en poste » — jamais en texte sur blanc */ --vf-ambre: #F4B73B; /* attention : heures sup., pointage manquant */ /* ---------- Surfaces et texte ---------- */ --vf-bg: #F6F8FB; /* fond d'application */ --vf-surface: #FFFFFF; /* cartes, champs, lignes */ --vf-surface-creusee: #EEF2F8; /* en-têtes de tableau, segments, états vides */ --vf-bordure: #DDE4EE; /* bordure de carte, séparateur */ --vf-bordure-forte: #C3CEDE; /* bordure de champ, bouton secondaire, icône inactive */ --vf-texte: #0B1351; --vf-texte-second: #4A5570; /* texte secondaire, libellés de champ */ --vf-texte-discret: #69738C; /* métadonnées, texte tertiaire */ --vf-texte-eteint: #68718A; /* désactivé, texte d'invite */ /* ---------- Action ---------- */ --vf-primaire: #1690FB; --vf-primaire-survol: #0B7CE0; --vf-primaire-actif: #0A6BC2; --vf-primaire-doux: #E7F2FE; /* fond tonal */ --vf-primaire-doux-survol: #D6E9FD; --vf-primaire-texte: #0A6BC2; /* texte sur fond tonal — contraste AA */ --vf-sur-primaire: #FFFFFF; /* texte posé sur le bouton principal */ /* ---------- Statuts ---------- */ --vf-succes: #0FB48C; /* en poste, actif, pointé */ --vf-succes-doux: #E4F7F2; --vf-succes-texte: #0A7C63; --vf-alerte: #F4B73B; /* à vérifier, heures supplémentaires */ --vf-alerte-doux: #FDF3E0; --vf-alerte-texte: #8A6212; --vf-erreur: #E5484D; /* oubli, absence, action destructive */ --vf-erreur-doux: #FDECEC; --vf-erreur-texte: #B3282D; --vf-erreur-survol: #CE3237; --vf-neutre: #69738C; /* hors poste, inactif */ --vf-neutre-doux: #EEF2F8; --vf-neutre-texte: #4A5570; /* ---------- Types d'absence ---------- Une teinte par type de congé, identique sur tous les écrans (plannings et onglets congés, gestion et salarié). Règle commune : couleur pleine = validé, fond doux cerclé de la même teinte = demande en attente. Les noms suivent Conge.TYPE_CHOICES pour que les gabarits écrivent simplement abs-{{ conge.type_conge }}. */ --vf-abs-cp: #F4B73B; --vf-abs-cp-doux: #FDF3E0; --vf-abs-cp-texte: #8A6212; --vf-abs-rtt: #1690FB; --vf-abs-rtt-doux: #E7F2FE; --vf-abs-rtt-texte: #0A6BC2; --vf-abs-maladie: #7C5CFC; --vf-abs-maladie-doux: #EFEAFD; --vf-abs-maladie-texte: #5A3BE0; --vf-abs-enfant_malade: #ED5FA4; --vf-abs-enfant_malade-doux: #FDE9F3; --vf-abs-enfant_malade-texte: #C13478; --vf-abs-parental: #0FB48C; --vf-abs-parental-doux: #E4F7F2; --vf-abs-parental-texte: #0A7C63; --vf-abs-familial: #F0784F; --vf-abs-familial-doux: #FDEDE6; --vf-abs-familial-texte: #B54A26; --vf-abs-sans_solde: #64748B; --vf-abs-sans_solde-doux: #E7EBF2; --vf-abs-sans_solde-texte: #475569; --vf-abs-formation: #0FBBD6; --vf-abs-formation-doux: #E0F7FB; --vf-abs-formation-texte: #077E92; --vf-abs-autre: #A18465; --vf-abs-autre-doux: #F5EEE5; --vf-abs-autre-texte: #77573A; --vf-sur-abs: #FFFFFF; /* texte posé sur un aplat de type */ /* ---------- Surfaces marine (bandeaux, cartes sombres sur fond clair) ---------- Ces valeurs ne suivent pas le thème : un bandeau marine reste marine. */ --vf-marine-surface: #0F1A47; /* carte posée sur du marine */ --vf-marine-relief: #16225A; /* élément actif, fond de jauge */ --vf-marine-bordure: #222C6B; --vf-marine-bordure-forte: #2E3A7E; --vf-marine-texte: #F2F5FC; --vf-marine-texte-second: #A7B0CE; --vf-marine-texte-discret: #8892BE; --vf-marine-avatar: #12245E; --vf-marine-accent: #7CC2FD; --vf-sur-cyan: #061033; /* texte posé sur un aplat cyan */ /* ---------- Typographie ---------- */ --vf-police: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --vf-police-donnees: 'Space Grotesk', ui-monospace, 'Cascadia Mono', monospace; /* Échelle : taille / interligne / graisse / interlettrage */ --vf-display: 700 40px/44px var(--vf-police-donnees); /* compteurs, cadran */ --vf-h1: 700 32px/38px var(--vf-police); /* titre d'écran */ --vf-h2: 700 24px/30px var(--vf-police); /* section */ --vf-h3: 600 20px/26px var(--vf-police); /* titre de carte */ --vf-corps-lg: 400 17px/26px var(--vf-police); /* texte mobile */ --vf-corps: 400 15px/22px var(--vf-police); /* par défaut */ --vf-petit: 400 13px/18px var(--vf-police); /* métadonnées, cellules */ --vf-surtitre: 500 11px/14px var(--vf-police-donnees); /* + majuscules, .14em */ /* ---------- Espacement — base 4 ---------- */ --vf-esp-1: 4px; /* filet */ --vf-esp-2: 8px; /* icône au libellé */ --vf-esp-3: 12px; /* intérieur des puces */ --vf-esp-4: 16px; /* marge de carte */ --vf-esp-5: 20px; /* marge d'écran mobile */ --vf-esp-6: 24px; /* entre les cartes */ --vf-esp-8: 32px; /* marge web */ --vf-esp-12: 48px; /* section */ /* ---------- Rayons — rien d'anguleux sauf les tableaux ---------- */ --vf-r-xs: 6px; /* case à cocher */ --vf-r-sm: 8px; /* puces, petits champs */ --vf-r-md: 12px; /* boutons, champs 48 px, alertes */ --vf-r-lg: 16px; /* lignes de liste, bouton mobile 60 px */ --vf-r-xl: 24px; /* cartes, feuilles */ --vf-r-pilule: 999px; /* ---------- Élévation — ombres teintées marine, jamais grises ---------- */ --vf-elev-1: 0 1px 2px rgba(11, 19, 81, .06), 0 2px 8px rgba(11, 19, 81, .05); --vf-elev-2: 0 4px 12px rgba(11, 19, 81, .08), 0 12px 28px rgba(11, 19, 81, .08); --vf-elev-3: 0 8px 24px rgba(11, 19, 81, .12), 0 24px 48px rgba(11, 19, 81, .12); --vf-lueur-action: 0 6px 16px rgba(22, 144, 251, .25); --vf-lueur-pointage: 0 12px 32px rgba(22, 144, 251, .32); /* bouton circulaire */ --vf-anneau-focus: 0 0 0 3px rgba(22, 144, 251, .15); /* ---------- Profondeur v2 ---------- */ --vf-grad-hero: radial-gradient(130% 100% at 88% -12%, rgba(15, 227, 236, .14), transparent 55%), linear-gradient(160deg, #0B1351, #0F1A47); --vf-grad-action: linear-gradient(180deg, #1690FB, #0B7CE0); --vf-grad-direct: linear-gradient(90deg, #1690FB, #0FE3EC); /* jauges */ --vf-grad-losange: linear-gradient(135deg, #1690FB, #0FE3EC); --vf-verre: rgba(255, 255, 255, .86); /* barre d'onglets */ --vf-flou-verre: blur(14px); /* ---------- Mouvement ---------- */ --vf-transition: background-color .2s ease, color .2s ease, border-color .2s ease; color-scheme: light; } /* ============================================= Thème sombre Seules les valeurs qui changent sont redéfinies. La règle de la charte est que les surfaces montent au lieu de se creuser, et que l'ombre disparaît. Déclaré deux fois : au goût du système, puis à la demande explicite. ============================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vf-bg: #060A22; --vf-surface: #0F1A47; --vf-surface-creusee: #16225A; --vf-bordure: #222C6B; --vf-bordure-forte: #2E3A7E; --vf-texte: #F2F5FC; --vf-texte-second: #A7B0CE; --vf-texte-discret: #8892BE; --vf-texte-eteint: #8892BE; --vf-primaire: #3AA3FC; --vf-primaire-survol: #58B4FD; --vf-primaire-actif: #7CC2FD; --vf-primaire-doux: #12245E; --vf-primaire-doux-survol: #16225A; --vf-primaire-texte: #7CC2FD; --vf-sur-primaire: #061033; --vf-succes-doux: #0B3A34; --vf-succes-texte: #4EE0BC; --vf-alerte-doux: #3D2E0C; --vf-alerte-texte: #F4B73B; --vf-erreur-doux: #46191C; --vf-erreur-texte: #F58B8E; --vf-neutre-doux: #16225A; --vf-neutre-texte: #A7B0CE; --vf-abs-cp: #F4B73B; --vf-abs-cp-doux: #3D2E0C; --vf-abs-cp-texte: #F4B73B; --vf-abs-rtt: #3AA3FC; --vf-abs-rtt-doux: #12245E; --vf-abs-rtt-texte: #7CC2FD; --vf-abs-maladie: #9B82FD; --vf-abs-maladie-doux: #251E63; --vf-abs-maladie-texte: #C0B0FE; --vf-abs-enfant_malade: #F27EB7; --vf-abs-enfant_malade-doux: #431834; --vf-abs-enfant_malade-texte: #F8A8CF; --vf-abs-parental: #2FCFA6; --vf-abs-parental-doux: #0B3A34; --vf-abs-parental-texte: #4EE0BC; --vf-abs-familial: #F59D7D; --vf-abs-familial-doux: #3B2015; --vf-abs-familial-texte: #F8BCA4; --vf-abs-sans_solde: #94A3B8; --vf-abs-sans_solde-doux: #1D2A55; --vf-abs-sans_solde-texte: #B6C2DA; --vf-abs-formation: #3ED2E9; --vf-abs-formation-doux: #0A3743; --vf-abs-formation-texte: #7CE3F2; --vf-abs-autre: #BFA184; --vf-abs-autre-doux: #362A1C; --vf-abs-autre-texte: #D9BE9F; --vf-sur-abs: #061033; --vf-elev-1: none; --vf-elev-2: none; --vf-elev-3: none; --vf-verre: rgba(15, 26, 71, .86); color-scheme: dark; } } :root[data-theme="dark"] { --vf-bg: #060A22; --vf-surface: #0F1A47; --vf-surface-creusee: #16225A; --vf-bordure: #222C6B; --vf-bordure-forte: #2E3A7E; --vf-texte: #F2F5FC; --vf-texte-second: #A7B0CE; --vf-texte-discret: #8892BE; --vf-texte-eteint: #8892BE; --vf-primaire: #3AA3FC; --vf-primaire-survol: #58B4FD; --vf-primaire-actif: #7CC2FD; --vf-primaire-doux: #12245E; --vf-primaire-doux-survol: #16225A; --vf-primaire-texte: #7CC2FD; --vf-sur-primaire: #061033; --vf-succes-doux: #0B3A34; --vf-succes-texte: #4EE0BC; --vf-alerte-doux: #3D2E0C; --vf-alerte-texte: #F4B73B; --vf-erreur-doux: #46191C; --vf-erreur-texte: #F58B8E; --vf-neutre-doux: #16225A; --vf-neutre-texte: #A7B0CE; --vf-abs-cp: #F4B73B; --vf-abs-cp-doux: #3D2E0C; --vf-abs-cp-texte: #F4B73B; --vf-abs-rtt: #3AA3FC; --vf-abs-rtt-doux: #12245E; --vf-abs-rtt-texte: #7CC2FD; --vf-abs-maladie: #9B82FD; --vf-abs-maladie-doux: #251E63; --vf-abs-maladie-texte: #C0B0FE; --vf-abs-enfant_malade: #F27EB7; --vf-abs-enfant_malade-doux: #431834; --vf-abs-enfant_malade-texte: #F8A8CF; --vf-abs-parental: #2FCFA6; --vf-abs-parental-doux: #0B3A34; --vf-abs-parental-texte: #4EE0BC; --vf-abs-familial: #F59D7D; --vf-abs-familial-doux: #3B2015; --vf-abs-familial-texte: #F8BCA4; --vf-abs-sans_solde: #94A3B8; --vf-abs-sans_solde-doux: #1D2A55; --vf-abs-sans_solde-texte: #B6C2DA; --vf-abs-formation: #3ED2E9; --vf-abs-formation-doux: #0A3743; --vf-abs-formation-texte: #7CE3F2; --vf-abs-autre: #BFA184; --vf-abs-autre-doux: #362A1C; --vf-abs-autre-texte: #D9BE9F; --vf-sur-abs: #061033; --vf-elev-1: none; --vf-elev-2: none; --vf-elev-3: none; --vf-verre: rgba(15, 26, 71, .86); color-scheme: dark; } /* ============================================= Socle de page Tout le socle est cadré sous la classe vf-theme, posée par défaut sur le body. Ce cadrage a servi à faire cohabiter la charte avec l'ancien thème le temps de la bascule ; il est conservé parce qu'il rend explicite ce qui relève de la charte, pour le prix d'un seul sélecteur. ============================================= */ /* Socle minimal. Bootstrap le posait pour nous, mais les pages publiques — connexion, invitation — ne le chargent pas : sans box-sizing, un champ en largeur 100 % déborde de sa carte dès qu'il a du rembourrage. */ *, *::before, *::after { box-sizing: border-box; } body.vf-theme { margin: 0; /* En bloc, et non en flex : un conteneur flex en colonne aligne sa largeur sur le contenu le plus large, si bien qu'un tableau poussait la page entière au lieu de défiler dans son cadre. */ display: block; background: var(--vf-bg); color: var(--vf-texte); font: var(--vf-corps); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--vf-transition); } /* Un conteneur qui fait défiler son contenu doit pouvoir rétrécir : sans cela, un tableau large rouvre le même problème dans toute grille ou colonne flex construite avec la charte. */ body.vf-theme :where(.vf-pile, .vf-rang, .vf-grille) > * { min-width: 0; } /* Les chiffres de pointage s'alignent en colonne : même largeur pour tous. */ .vf-donnees, .vf-duree { font-family: var(--vf-police-donnees); font-variant-numeric: tabular-nums; } /* Surtitre : le seul endroit où l'on met des majuscules. */ .vf-surtitre { font: var(--vf-surtitre); letter-spacing: .14em; text-transform: uppercase; color: var(--vf-texte-discret); } /* Le losange de la marque — décor uniquement, jamais une icône cliquable. Trois usages autorisés : filigrane sur marine, puce de titre 8 px, onglet actif. Jamais en motif répété, jamais au-delà de 16 % d'opacité, jamais plus d'un filigrane par écran, jamais en ambre ou en rouge. */ .vf-losange { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--vf-grad-losange); flex: none; } .vf-puce-titre { width: 8px; height: 8px; } /* Focus visible : la charte impose un anneau de 2 px décollé de 2 px. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--vf-primaire); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================= Types d'absence : composants partagés Le badge nomme le type (liste de demandes, fiche) ; la pastille marque un jour dans un calendrier. La légende accompagne chaque planning qui utilise ces couleurs. Toutes les vues, gestion comme salarié, passent par ici : c'est ce qui garantit les mêmes couleurs partout. ============================================= */ .abs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .abs-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; } .abs-cp { background: var(--vf-abs-cp-doux); color: var(--vf-abs-cp-texte); } .abs-rtt { background: var(--vf-abs-rtt-doux); color: var(--vf-abs-rtt-texte); } .abs-maladie { background: var(--vf-abs-maladie-doux); color: var(--vf-abs-maladie-texte); } .abs-enfant_malade { background: var(--vf-abs-enfant_malade-doux); color: var(--vf-abs-enfant_malade-texte); } .abs-parental { background: var(--vf-abs-parental-doux); color: var(--vf-abs-parental-texte); } .abs-familial { background: var(--vf-abs-familial-doux); color: var(--vf-abs-familial-texte); } .abs-sans_solde { background: var(--vf-abs-sans_solde-doux); color: var(--vf-abs-sans_solde-texte); } .abs-formation { background: var(--vf-abs-formation-doux); color: var(--vf-abs-formation-texte); } .abs-autre { background: var(--vf-abs-autre-doux); color: var(--vf-abs-autre-texte); } /* Pastille pleine : le congé est validé. */ .abs-plein.abs-cp { background: var(--vf-abs-cp); } .abs-plein.abs-rtt { background: var(--vf-abs-rtt); } .abs-plein.abs-maladie { background: var(--vf-abs-maladie); } .abs-plein.abs-enfant_malade { background: var(--vf-abs-enfant_malade); } .abs-plein.abs-parental { background: var(--vf-abs-parental); } .abs-plein.abs-familial { background: var(--vf-abs-familial); } .abs-plein.abs-sans_solde { background: var(--vf-abs-sans_solde); } .abs-plein.abs-formation { background: var(--vf-abs-formation); } .abs-plein.abs-autre { background: var(--vf-abs-autre); } /* Cerclée sur fond doux : la demande attend une réponse. */ .abs-attente.abs-cp { background: var(--vf-abs-cp-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-cp); } .abs-attente.abs-rtt { background: var(--vf-abs-rtt-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-rtt); } .abs-attente.abs-maladie { background: var(--vf-abs-maladie-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-maladie); } .abs-attente.abs-enfant_malade { background: var(--vf-abs-enfant_malade-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-enfant_malade); } .abs-attente.abs-parental { background: var(--vf-abs-parental-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-parental); } .abs-attente.abs-familial { background: var(--vf-abs-familial-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-familial); } .abs-attente.abs-sans_solde { background: var(--vf-abs-sans_solde-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-sans_solde); } .abs-attente.abs-formation { background: var(--vf-abs-formation-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-formation); } .abs-attente.abs-autre { background: var(--vf-abs-autre-doux); box-shadow: inset 0 0 0 1.5px var(--vf-abs-autre); } /* Jour férié dans un calendrier : hachures, distinctes du week-end uni. */ .abs-ferie { background: repeating-linear-gradient( 45deg, var(--vf-bordure) 0 1.5px, var(--vf-surface-creusee) 1.5px 5px ); } .abs-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--vf-texte-second); } .abs-legende span { display: inline-flex; align-items: center; gap: 6px; } /* Encre par type : pour les icônes et textes qui marquent une absence dans un calendrier (vue semaine, mois, équipe du salarié). */ .abs-encre-cp { color: var(--vf-abs-cp) !important; } .abs-encre-rtt { color: var(--vf-abs-rtt) !important; } .abs-encre-maladie { color: var(--vf-abs-maladie) !important; } .abs-encre-enfant_malade { color: var(--vf-abs-enfant_malade) !important; } .abs-encre-parental { color: var(--vf-abs-parental) !important; } .abs-encre-familial { color: var(--vf-abs-familial) !important; } .abs-encre-sans_solde { color: var(--vf-abs-sans_solde) !important; } .abs-encre-formation { color: var(--vf-abs-formation) !important; } .abs-encre-autre { color: var(--vf-abs-autre) !important; }