/* ============================================================================= KADENCE — DESIGN SYSTEM WHITE-LABEL (tokens de thème, phase 1) ----------------------------------------------------------------------------- GÉNÉALOGIE / TRAÇABILITÉ - Décision structurante : D38 (docs/DECISIONS.md) — Kadence est white-label, tokens « --brand-* », preset VMFC par défaut. - Source des valeurs par défaut : charte graphique VMFC officielle (VMFC-CHARTE-GRAPHIQUE du 22 mars 2026, relayée par skill-charte). - Document d'application subordonné à D38 : docs/CHARTE-KADENCE.md (correspondance charte VMFC → tokens Kadence incluse). RÈGLES - Aucune couleur en dur dans les composants, vues ou layouts. - Dans le code applicatif, les valeurs HEX sont autorisées UNIQUEMENT ici, dans le preset VMFC par défaut ; la documentation (CHARTE-KADENCE.md) les consigne à titre de référence. - Les futurs presets tenant surchargeront les MÊMES variables « --brand-* » avec des valeurs validées. Logo tenant : fallback VMFC (phase 3). - Le preset VMFC par défaut est défini dans un unique bloc « :root ». Le mécanisme de surcharge tenant est différé à la phase 3. - Polices FIXES de l'identité Kadence (non surchargeables par tenant) ; le chargement des fichiers de polices est différé à la phase 2 — ce fichier ne charge AUCUNE ressource externe. - Consommé depuis I-g par les vues d'installation (avec kad-composants.css). - Rayons, ombres et échelles d'espacement : différés à la phase 2 (aucune valeur officielle disponible dans les autorités V2 — rien n'est inventé). ============================================================================= */ :root { /* Icônes de contact : couleurs de VMFC Formation, validées par Vincent le 12/09/2026. */ --brand-contact-phone: #FA881C; --brand-contact-whatsapp: #25D366; --brand-contact-email: #0078D4; --brand-contact-linkedin: #0077B5; /* --- Couleurs de marque (preset VMFC par défaut) ------------------------ */ --brand-accent: #D4670C; /* accent, CTA, liens actifs (VMFC orange) */ --brand-accent-fond: #FDF0E6; /* fond de badge accent */ --brand-fond-navigation: #1C2E3F; /* fond de la navigation (VMFC ardoise) */ --brand-nav-texte: #B6C2CE; /* texte de navigation inactif sur ardoise */ --brand-nav-actif: #393737; /* fond d'item de nav actif (ardoise+orange)*/ --brand-fond: #F4F1EB; /* fond général de page (installation) */ --brand-fond-neutre: #F3F5F7; /* fond de l'app authentifiée (neutre froid)*/ --brand-surface: #FFFFFF; /* cartes, panneaux, widgets */ --brand-surface-2: #F5F7F9; /* surface secondaire (sous-blocs, entêtes) */ --brand-bordure: #E2DDD4; /* bordures */ --brand-voile: rgba(28, 46, 63, 0.55); /* voile de fond des modales (::backdrop) — teinte ardoise */ /* --- Couleurs de texte --------------------------------------------------- */ --brand-texte: #1C2E3F; /* texte principal et texte fort */ --brand-texte-2: #4D6070; /* texte secondaire */ --brand-texte-3: #8A9DB0; /* texte tertiaire */ /* --- Couleurs sémantiques (états) ---------------------------------------- */ --brand-ok: #0B7A4A; /* succès, validé, terminé */ --brand-ok-fond: #E6F5EE; /* fond de badge succès */ --brand-attention: #8C5A00; /* attention, en cours */ --brand-attention-fond: #FEF3DC; /* fond de badge attention */ --brand-danger: #B02020; /* erreur, refusé */ --brand-danger-fond: #FBEAE9; /* fond de badge erreur */ --brand-info: #1A5F8A; /* information, synchronisation */ --brand-info-fond: #E7F0F6; /* fond de badge information */ /* --- Typographie (identité Kadence, FIXE). Familles officielles Barlow / Barlow Condensed + chaîne de repli SYSTÈME honnête : rendu correct sans aucune ressource externe. L'auto-hébergement réel (fichiers .woff2 + licence OFL officielle) est différé jusqu'à fourniture des binaires — aucun @font-face ni fichier de licence factice n'est versionné en attendant (Google Fonts reste interdit par la charte). --- */ --brand-font-titre: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; /* H1/H2, KPI */ --brand-font-corps: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; /* corps */ --brand-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* données */ /* --- Échelle typographique par USAGE (décision Vincent 2026-08-18) ---------- CONSTAT MESURÉ avant correction : 82 déclarations de « font-size » pour 24 valeurs distinctes (11,5 px → 25,6 px), AUCUN clamp(), AUCUNE taille de base déclarée — l'interface héritait donc du 16 px par défaut du navigateur et ne s'adaptait à aucun écran. Comme TOUTES les tailles du projet sont exprimées en « rem », cette base unique les commande toutes, ainsi que les marges et remplissages exprimés en rem : la densité se règle ici, en un seul endroit, sans retoucher les 82 déclarations existantes. LA PENTE EST VOLONTAIREMENT DÉCROISSANTE — ce n'est pas une erreur de signe. Les trois appareils correspondent à trois usages DIFFÉRENTS (Vincent) : · téléphone ~390 px → l'APPRENANT, une main, un contenu à la fois : la lisibilité prime, la place ne manque pas (on défile) ; · tablette ~768 px → mise à disposition EN FORMATION, usage tactile ; · ordinateur ≥1440 px → VINCENT en gestion : il faut voir beaucoup d'un seul coup d'œil, c'est là que la densité compte. Un écran plus grand doit donc AFFICHER PLUS, pas afficher plus gros. Rendu : 16 px à 390 px · ~15,3 px à 768 px · 14 px à partir de 1440 px. « rem » dans le clamp se réfère à la taille par DÉFAUT du navigateur (jamais à l'élément racine lui-même : pas de récursion) : le réglage de taille de police de l'utilisateur et le zoom restent donc respectés — ce qu'une valeur en px pur sur « html » aurait cassé (WCAG 1.4.4). */ --brand-taille-base: clamp(0.875rem, 1.046rem - 0.19vw, 1rem); /* PLANCHER ANTI-ZOOM iOS — volontairement en PIXELS, jamais en rem : sous 16 px, iOS agrandit la page au focus d'un champ et casse la mise en page. Cette taille ne doit donc JAMAIS suivre l'échelle ci-dessus. L'intention était déjà écrite dans kad-composants.css, mais implémentée en « 1rem » — exacte par coïncidence tant que la base valait 16 px, fausse dès qu'elle change. La convention « 16px » existait déjà (kad-catalogue.css, champs de référentiel) : elle devient ici un token unique et explicite. */ --brand-taille-champ: 16px; /* --- Échelle d'ESPACEMENT (phase 2 de docs/CHARTE-KADENCE.md, jamais posée) ----- CONSTAT MESURÉ : 45 valeurs d'espacement distinctes dans les feuilles de style, dont des doublons d'écriture (« 0.5rem » et « .5rem ») et des valeurs séparées par un dixième de pixel (« 0.375rem » ET « 0.38rem », « 0.4rem » ET « 0.42rem »). Faute d'échelle, chaque écran a improvisé la sienne. Les SIX valeurs ci-dessous ne sont pas inventées : ce sont les six plus employées du dépôt (195 usages à elles seules). Tout nouvel espacement s'y rattache ; l'existant y migre au fil des retouches, jamais par une réécriture de masse. */ --brand-espace-1: 0.25rem; /* 4 px — micro (entre un libellé et son champ) */ --brand-espace-2: 0.5rem; /* 8 px — serré (dans un composant) */ --brand-espace-3: 0.75rem; /* 12 px — normal (remplissage courant) */ --brand-espace-4: 1rem; /* 16 px — large (entre composants) */ --brand-espace-5: 1.5rem; /* 24 px — section */ --brand-espace-6: 2rem; /* 32 px — bloc */ /* Interligne du corps de texte. En token parce que la DENSITÉ d'un écran tient autant à l'interligne qu'à la taille des caractères : c'est le levier qui resserre sans rien rendre moins lisible. */ --brand-interligne: 1.5; } /* Base de l'échelle : seule déclaration de taille sur la racine du document. Tout le reste du design system en dérive par « rem ». */ html { font-size: var(--brand-taille-base); } /* --- RÉGLAGE D'AFFICHAGE PAR COMPTE (D77, décision Vincent 2026-08-21) ----------- L'utilisateur choisit sa densité dans « Affichage » ; le choix est PERSISTÉ EN BASE sur son compte (migration 088) et le SERVEUR le pose sur avant tout rendu. Il le retrouve donc après reconnexion et d'un appareil à l'autre. CECI REMPLACE la conservation par navigateur (`localStorage`, `kad-densite.js`, tous deux SUPPRIMÉS) : la justification d'origine — « la bonne taille dépend de l'écran, pas de la personne » — a été écartée par Vincent. Deux vérités concurrentes valaient moins qu'une seule. « STANDARD » est le DÉFAUT : il s'applique dès que l'attribut manque ou porte une valeur inconnue, et le rendu ne dépend d'AUCUN JavaScript. RECALAGE (Vincent, après essai à l'écran : « le compact devrait être standard, mets à niveau compact et confort ») : le cran d'origine — 14 px sur ordinateur — était perçu comme la NORMALE, pas comme un mode dense. Il est donc devenu « Standard », à valeur INCHANGÉE, et un vrai « Compact » a été ajouté SOUS lui. La taille par défaut ne bouge pas : seuls le nom et l'amplitude de l'échelle changent. La pente par usage (téléphone plus grand, ordinateur plus dense) est conservée à l'identique dans les trois crans. ordinateur ≥1440 px : compact 13 px · standard 14 px · confortable 16 px téléphone 390 px : compact 14 px · standard 16 px · confortable 18 px */ /* COMPACT — trois leviers, pas seulement la taille du texte (Vincent, après essai : « je vois un écart entre confort et standard, mais pas entre standard et compact »). Mesuré : la taille SEULE ne donnait que −5,7 % de hauteur de page contre +13,9 % pour le confortable — l'écart était réellement deux fois plus faible vers le bas, donc imperceptible. Descendre la base à 12 px aurait « réglé » la symétrie en cassant la lisibilité : les libellés de colonnes, en 0.72rem, seraient tombés à 8,6 px. Un mode compact se gagne donc sur la DENSITÉ — espacements et interligne —, pas sur la taille des caractères, qui reste lisible à 13 px. Les espacements 2 à 6 et l'interligne sont donc resserrés ensemble. */ html[data-densite="compact"] { --brand-taille-base: clamp(0.8125rem, 0.898rem - 0.095vw, 0.875rem); --brand-espace-2: 0.375rem; --brand-espace-3: 0.5rem; --brand-espace-4: 0.625rem; --brand-espace-5: 0.875rem; --brand-espace-6: 1.25rem; --brand-interligne: 1.3; } html[data-densite="confortable"] { --brand-taille-base: clamp(1rem, 1.171rem - 0.19vw, 1.125rem); }