/** * Académie Golf IA — Design system (DASH-1) * ========================================================================= * SOURCE UNIQUE des tokens. Aucun autre fichier du plugin ne déclare de * token `--fj1-*`. Un token qui manque ici se pose ICI, jamais à l'œil dans * un fichier de page : c'est la règle du lot mail, appliquée au CSS. * * Documentation, rôle de chaque token, règle CSS / anime.js, procédure * d'ajout : `DESIGN_SYSTEM.md`, dépôt `academie-docs`. * * Ligne de support : celle d'`oklch()`, que le plugin consomme déjà sans * repli (Chrome 111, Firefox 113, Safari 16.2). `color-mix()` s'y tient. */ /* ========================================================================= 1. Police — Montserrat en local, aucune requête vers Google ========================================================================= UN SEUL FICHIER couvre les six graisses (400 à 900). Google sert Montserrat v31 en police VARIABLE : les six blocs `@font-face` de son CSS pointaient tous vers la même URL. Tables `fvar`, `gvar`, `avar`, `STAT`, `HVAR` vérifiées dans le woff2 livré, le 16/09/2026. Sous-ensemble `latin` seul, suffisant pour le français : sa plage couvre U+0000-00FF (tous les accents), U+0152-0153 (Œ, œ) et U+20AC (€). Ajouter `latin-ext` demanderait un second fichier ; aucun besoin identifié. `font-display: swap` : le texte s'affiche immédiatement dans le repli système, puis bascule. Jamais de texte invisible pendant le chargement. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/montserrat-latin-var.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= 2. Tokens ========================================================================= Portés par `:root` (arbitrage du 15/09/2026). Le préfixe `--fj1-` n'est déclaré ni par BuddyBoss ni par MemberPress : l'héritage ne peut entrer en collision avec rien. Seule exception documentée : `--fj1-panel-max`, voir le § 2.9. */ :root { /* --- 2.1 Violet de marque ------------------------------------------- Rampe recalculée le 16/09/2026 depuis `#9B00E5`, valeur canonique. Méthode : clarté et teinte CONSERVÉES, chroma écrêtée au maximum du gamut sRGB. Sept des onze valeurs de l'ancienne rampe étaient hors gamut, donc écrêtées par le navigateur, chacun à sa façon. ATTENTION : LE RENDU CHANGE SUR ÉCRAN LARGE GAMUT (P3), PAS SUR sRGB, ET C'EST VOULU. Sur un écran P3, l'ancienne valeur affichait un violet plus saturé que ce que sRGB peut représenter, donc plus saturé que le mail, que BuddyBoss et que tout écran standard. La saturation « perdue » n'était pas une intention de design : c'était un débordement. Ne pas la « réparer » en remontant la chroma, ce serait rouvrir l'écart. */ --fj1-violet-deep: oklch(38% 0.194 308); /* #5F008F */ --fj1-violet-press: oklch(42% 0.214 308); /* #6E01A3 */ --fj1-violet-hover: oklch(48% 0.245 308); /* #8401C4 */ --fj1-violet: oklch(54% 0.276 308); /* #9B00E5 — canonique */ --fj1-violet-light: oklch(72% 0.191 308); /* #C67EFF */ --fj1-lilac: oklch(85% 0.096 308); /* #DFBDFF */ --fj1-violet-line: oklch(88% 0.06 308); /* #E2CEF7 — inchangé */ --fj1-violet-soft: oklch(96% 0.02 308); /* #F5EEFD — inchangé */ --fj1-violet-glow: oklch(54% 0.276 308 / 0.35); /* Ajoutés le 12/10 (UX-FORM-1) : valeurs du dashboard et de la page programme, jusqu'ici en hex dans leurs feuilles. Aller-retour exact. */ --fj1-violet-ink: oklch(45.6% 0.234 307.5); /* #7A00B8, encre des surtitres */ --fj1-card-line: oklch(92% 0.034 306); /* #EADFF7, filet des encarts */ /* --- 2.2 Dégradés ---------------------------------------------------- */ --fj1-grad-hero: linear-gradient(135deg, oklch(54% 0.276 308) 0%, /* #9B00E5 */ oklch(64% 0.24 308) 50%, /* #B553F9 — inchangé */ oklch(74% 0.175 308) 100%); /* #C989FF */ --fj1-grad-page: linear-gradient(180deg, oklch(98% 0.008 308) 0%, oklch(96% 0.020 308) 50%, oklch(94% 0.035 308) 100%); --fj1-grad-soft: linear-gradient(135deg, oklch(98% 0.012 308) 0%, oklch(97% 0.018 308) 100%); /* --- 2.3 Surfaces, neutres tintés vers le violet --------------------- */ --fj1-bg: oklch(97% 0.02 308); --fj1-surface: oklch(100% 0 0); --fj1-surface-sunk: oklch(97% 0.018 308); --fj1-border: oklch(92% 0.015 308); --fj1-border-strong: oklch(82% 0.03 308); /* --- 2.4 Texte -------------------------------------------------------- */ --fj1-ink: oklch(18% 0.01 308); --fj1-ink-soft: oklch(40% 0.008 308); --fj1-ink-faint: oklch(58% 0.008 308); /* Texte et icônes POSÉS SUR un aplat de marque ou un fond sombre : CTA violet, puce cochée, badge plein, pastille d'agent sélectionnée. Même valeur que `--fj1-surface`, rôle opposé, et c'est pour cela que les deux existent : `--fj1-surface` est le fond d'une carte, `--fj1-on-brand` est ce qui se pose PAR-DESSUS le violet. Si la surface cessait un jour d'être blanche, ces deux tokens divergeraient, et tout texte qui aurait emprunté `--fj1-surface` deviendrait illisible sans que rien ne le signale. */ --fj1-on-brand: oklch(100% 0 0); /* --- 2.5 Retours : avertissement, erreur, succès --------------------- La palette succès existait déjà, dans `program-view.css` seul (bilan J14). Elle est remontée ici telle quelle : c'est un déplacement, pas une création. Elle remplace le `#4CAF50` en dur d'`academie.css`. */ /* TROIS ROLES DISTINCTS, ET ILS NE SE SUBSTITUENT PAS : invalid : erreur de SAISIE, un champ que l'élève doit reprendre warn : AVERTISSEMENT, une précaution qui n'empêche rien danger : action DESTRUCTIVE, une suppression, un retrait Trois oranges proches ne sont pas un doublon : ils disent trois choses différentes à l'élève. Ne pas les fusionner parce qu'ils se ressemblent. */ --fj1-warn: oklch(62% 0.14 55); --fj1-warn-soft: oklch(97% 0.03 75); --fj1-warn-line: oklch(88% 0.08 65); --fj1-danger: oklch(54% 0.20 25); /* Erreur de saisie. Valeurs relevées telles quelles dans le formulaire J1, où elles vivaient en dur, puis converties : aller-retour exact sur le fond, à une unité près sur les deux autres, donc aucun pixel ne bouge. Elles s'écartent franchement de `--fj1-warn` (8,5 points de clarté sur l'accent) : c'est l'écart entre un orange vif qui appelle une correction et un orange brun qui signale une précaution. */ --fj1-invalid: oklch(70.5% 0.187 48); /* #F97316, filet et bordure */ --fj1-invalid-soft: oklch(98% 0.016 74); /* #FFF7ED, fond d'encart */ --fj1-invalid-ink: oklch(47% 0.143 37); /* #9A3412, texte */ --fj1-success: oklch(62% 0.16 152); --fj1-success-hover: oklch(56% 0.17 152); --fj1-success-soft: oklch(96% 0.04 152); --fj1-success-line: oklch(86% 0.08 152); --fj1-success-glow: oklch(62% 0.16 152 / 0.30); --fj1-grad-success: linear-gradient(135deg, oklch(62% 0.16 152) 0%, oklch(72% 0.13 152) 100%); /* Pastilles d'agent, portées jusqu'ici par `bibliotheque.css` seul. */ --fj1-green: oklch(38% 0.14 160); --fj1-green-soft: oklch(94% 0.04 160); --fj1-rose: oklch(40% 0.15 5); --fj1-rose-soft: oklch(96% 0.025 5); /* --- 2.6 Espacement, échelle 4pt ------------------------------------- */ --fj1-s-1: 4px; --fj1-s-2: 8px; --fj1-s-3: 12px; --fj1-s-4: 16px; --fj1-s-5: 24px; --fj1-s-6: 32px; --fj1-s-7: 48px; --fj1-s-8: 64px; --fj1-s-9: 96px; /* --- 2.7 Rayons et ombres --------------------------------------------- */ --fj1-radius-sm: 8px; --fj1-radius-md: 14px; --fj1-radius-lg: 20px; --fj1-radius-xl: 28px; --fj1-shadow-sm: 0 1px 2px oklch(18% 0.01 308 / 0.04); --fj1-shadow-md: 0 8px 20px -10px oklch(18% 0.01 308 / 0.18); --fj1-shadow-lg: 0 20px 40px -16px oklch(18% 0.01 308 / 0.22); --fj1-shadow-brand: 0 12px 28px -10px var(--fj1-violet-glow); --fj1-shadow-success: 0 12px 28px -10px var(--fj1-success-glow); /* --- 2.8 Typographie ------------------------------------------------- La pile porte un repli système complet : si Montserrat ne charge pas, le texte reste lisible sans décalage de mise en page grossier. Les tailles sont des TOKENS, pas des règles : rien n'est appliqué ici, chaque page les consomme. Le socle ne change donc aucun rendu. */ --fj1-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fj1-fs-h1: 2.25rem; /* 36px */ --fj1-fs-h2: 1.75rem; /* 28px */ --fj1-fs-h3: 1.375rem; /* 22px */ --fj1-fs-h4: 1.125rem; /* 18px */ --fj1-fs-h5: 1rem; /* 16px */ --fj1-fs-h6: 0.9375rem; /* 15px */ --fj1-fs-body: 1rem; /* 16px */ --fj1-fs-small: 0.875rem; /* 14px */ --fj1-fs-caption: 0.8125rem; /* 13px */ --fj1-lh-tight: 1.15; /* titres */ --fj1-lh-snug: 1.35; /* sous-titres, intertitres */ --fj1-lh-body: 1.6; /* corps, lecture longue */ --fj1-fw-regular: 400; --fj1-fw-medium: 500; --fj1-fw-semi: 600; --fj1-fw-bold: 700; /* Ajoute le 23/09/2026, sur demande de la maquette v2 du dashboard, qui pose ses titres a 800. L'echelle sautait de 700 a 900 : 700 rendait les grands titres mous, 900 les rendait durs. AUCUN FICHIER N'EST AJOUTE. La woff2 est VARIABLE et declare `font-weight: 400 900` : le 800 est deja servi, il n'avait pas de nom. C'est un token qui manquait a l'echelle, pas une fonte de plus. */ --fj1-fw-extrabold: 800; --fj1-fw-black: 900; /* --- 2.9 Mise en page ------------------------------------------------- `--fj1-panel-max` reste surchargeable par wrapper (arbitrage « tokens sur :root, panel-max scopé par wrapper »). Le formulaire J1, longtemps à 960px, est à 1280px comme le programme depuis le 12/10 (UX-FORM-1) : aucune surface ne le pose plus en dessous de 1280px. */ --fj1-panel-max: 1280px; /* --- 2.10 Motion ------------------------------------------------------ Durées et easings. Ils sont la SOURCE pour le CSS comme pour anime.js : `agolf-motion.js` les lit par `getComputedStyle`, il ne les recopie jamais en constantes JS. Changer une durée ici la change partout. */ --fj1-dur-sm: 160ms; --fj1-dur: 260ms; --fj1-dur-lg: 420ms; /* Le REMPLISSAGE D'UNE BARRE DE MESURE (phases, secteurs), arbitrage Gabriel du 28/09/2026 : à `--fj1-dur-lg`, sous `--fj1-ease`, les barres étaient pleines avant que l'œil ait suivi. Environ quatre fois `--fj1-dur`. La valeur est LITTÉRALE et non un `calc()` : `agolf-motion.js` lit la chaîne brute, et `calc(260ms * 4)` ne se lit pas comme une durée. Ne désigne PAS le filet de progression du programme, qui reste sur `--fj1-dur-lg` : c'est un repère, pas une mesure qu'on regarde monter. La sortie douce est celle de `--fj1-ease` (ease-out-quart). */ --fj1-dur-bar: 1200ms; --fj1-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */ --fj1-ease-sp: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring approché, CSS */ --fj1-ease-in: cubic-bezier(0.4, 0, 1, 1); /* Le RESSORT RÉEL, pour anime.js. Arbitrage Gabriel du 15/09/2026, rendu sur iPhone après comparaison côte à côte : le spring physique l'emporte nettement sur la courbe CSS au toucher, et c'est ce qui décide du partage écrit dans `DESIGN_SYSTEM.md` § 8. Ce sont des NOMBRES SANS UNITÉ, pas des valeurs CSS : rien ici ne les consomme. Ils sont posés au socle pour la même raison que les durées, et c'est la raison qui compte : `agolf-motion.js` les lit par `getComputedStyle`, donc un ressort se règle À UN SEUL ENDROIT, pour tout le produit, sans toucher une ligne de JavaScript. `--fj1-ease-sp` reste : c'est l'approximation CSS, et elle garde son emploi partout où le mouvement n'est pas déclenché par un doigt. */ --fj1-spring-stiffness: 120; --fj1-spring-damping: 12; /* --- 2.11 Points de rupture ------------------------------------------- ATTENTION : CES TOKENS NE SONT PAS UTILISABLES DANS UNE `@media` : une variable CSS ne s'évalue pas dans une condition de media query. Ils sont ici comme RÉFÉRENCE, lisible par le JS via `getComputedStyle`, et pour que l'échelle ait un seul endroit où se lire. Dans une `@media`, écrire la valeur littérale, et n'utiliser QUE ces quatre. Les 26 media queries existantes ne sont pas réécrites (arbitrage du 15/09) : la convergence est une dette DASH-4. Toute NOUVELLE media query se pose sur cette échelle. */ --fj1-bp-sm: 480px; --fj1-bp-md: 768px; --fj1-bp-lg: 1024px; --fj1-bp-xl: 1280px; } /* ========================================================================= 3. Mouvement réduit ========================================================================= Deux filets, et il en faut deux. (1) Les DURÉES tombent à ~0. Comme toute animation du plugin consomme `var(--fj1-dur*)`, elles sont toutes neutralisées d'un coup, et UNIQUEMENT les nôtres : une règle `*` frapperait aussi BuddyBoss et MemberPress, alors que ce fichier est chargé sur tout le site. `agolf-motion.js` lit ces mêmes tokens, donc il se neutralise aussi. (2) Un filet sur les wrappers du plugin, pour les animations qui n'auraient pas encore été migrées vers les tokens. Il se retire quand la migration est finie ; en attendant il rattrape les oublis. */ @media (prefers-reduced-motion: reduce) { :root { --fj1-dur-sm: 0.01ms; --fj1-dur: 0.01ms; --fj1-dur-lg: 0.01ms; --fj1-dur-bar: 0.01ms; } /* La liste par identifiant est le COUT RECURRENT nomme au § 1 de DESIGN_SYSTEM.md : chaque page neuve doit y etre ajoutee, et un oubli ne se signale pas. Il a deja mordu : `#agolf-dashboard` n'y figurait pas (releve du 17/09/2026). Le dashboard refondu n'avait donc AUCUN filet, et le defaut etait invisible parce que ses propres animations sont deja gardees par `prefers-reduced-motion: no-preference`. Un filet manquant ne se voit pas tant que ce qu'il protege se garde tout seul. `.agolf-page` ferme la liste : toute page qui prend la classe est couverte, sans qu'on pense a l'inscrire. Les identifiants restent le temps que les pages adoptent la classe (DASH-4), pour qu'aucune ne perde sa couverture pendant la transition. */ .agolf-page *, .academie-formulaire-wrapper *, #agolf-chat *, #agolf-program *, #agolf-biblio *, #agolf-gabriel *, .agolf-trim-overlay * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= 4. La page du plugin : fond et titre, une seule fois ========================================================================= REGLE, arbitrage Gabriel du 17/09/2026 : toute page du plugin prend `--fj1-grad-page` comme fond, et masque le titre de page du theme. Les pages publiques (registre marketing) gardent le leur, et l'obtiennent en NE PORTANT PAS la classe. CE QUE CETTE SECTION REMPLACE, mesure du 17/09 : la neutralisation du fond du theme etait recopiee CINQ fois (program-view, chat-unified, bibliotheque, gabriel, formulaire-j1), le fond du wrapper CINQ fois, le masquage du titre QUATRE fois. Les trois arrets du degrade etaient LITTERALEMENT identiques dans les cinq fichiers : une decision recopiee cinq fois, pas cinq decisions concordantes. ATTENTION : CETTE SECTION PEINT, ET C'EST LA SEULE DU FICHIER QUI LE FASSE. `class-assets.php` justifie l'enqueue inconditionnel du socle par « il ne peint rien : le charger sur une page qui n'en a pas besoin ne change aucun pixel ». CETTE PROPRIETE TIENT ENCORE : tout ci-dessous est scope a `.agolf-page`, donc une page qui ne porte pas la classe reste strictement inchangee. C'est ce qui rend l'opt-in compatible avec un socle servi partout, pages publiques comprises. NE PAS ELARGIR CES SELECTEURS a `body`, a `#content` seul, ou a une classe du theme. Le jour ou ils frappent hors de `.agolf-page`, le socle cesse d'etre neutre et il ne pourra plus etre servi sans condition. ========================================================================= */ /* Le fond du theme, neutralise sur les conteneurs que BuddyBoss interpose entre `#content` et notre wrapper. Sans cela, le degrade du wrapper flotte sur le blanc du theme au lieu de couvrir la page. */ body:has(.agolf-page) #content, body:has(.agolf-page) #content .container, body:has(.agolf-page) #content .bb-grid, body:has(.agolf-page) #content .bb-grid-cell, body:has(.agolf-page) #content .content-area { background: var(--fj1-grad-page); } .agolf-page { background: var(--fj1-grad-page); } /* Le titre de page du theme. Nos ecrans portent deja leur titre ; celui de BuddyBoss en fait un second, qui dispute le foyer visuel sans rien ajouter. Les quatre selecteurs sont ceux que les quatre copies visaient deja. */ body:has(.agolf-page) #content .entry-header, body:has(.agolf-page) #content .entry-title, body:has(.agolf-page) #content .bb-entry-header, body:has(.agolf-page) #content .page-header { display: none !important; }