/* ============================================================================ 00-tokens-charte.css — v1.0.2 — 21/08/2026 (v1.0.2 : ajout des déclinaisons pâles de l'ambre, §1 — elles servent le fond chaud du menu de l'espace client, réclamé par Fred le même jour.) LA SOURCE UNIQUE DES COULEURS DU SITE. À placer dans : /wp-content/themes/infinite-child/css/00-tokens-charte.css ⚠️ Doit être chargé AVANT tous les autres CSS (d'où le préfixe 00). --------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE (Fred, 21/08/2026) « À chaque page j'ai l'impression d'être sur un site différent. » Constat mesuré le même jour : 265 couleurs distinctes dans les CSS actifs pour ~35 prévues — dont 146 verts, 95 ambres et 26 crèmes de fond. Cause : chaque chantier a recréé son propre :root au lieu de consommer la charte. RÈGLE À PARTIR D'AUJOURD'HUI : une couleur ne s'écrit QUE dans ce fichier. Partout ailleurs on écrit var(--c-xxx). Jamais un #hex en dur. ⚠️ CE FICHIER NE CHANGE RIEN À L'ÉCRAN. Toutes les valeurs ci-dessous sont celles RELEVÉES EN LIGNE le 21/08/2026 — c'est un inventaire, pas une refonte. Les corrections viendront ensuite, une par une, validées par Fred. ============================================================================ */ :root{ /* --------------------------------------------------------------------- 1. IDENTITÉ — les 3 couleurs de la marque --------------------------------------------------------------------- */ --c-brand: #107C41; /* vert de marque — logo, gratuit, apprentissage */ --c-brand-deep: #0b5a2f; /* vert foncé — survols, héros */ --c-brand-soft: #dceee3; /* vert pâle — pastilles, fonds de badge */ --c-brand-tint: #eaf4ee; /* vert très pâle — fonds de pastille */ --c-accent: #a8741a; /* ambre commerce — tout ce qui s'achète */ --c-btn: #8F6316; /* bouton d'achat, fond */ --c-btn-hover: #7B5513; /* bouton d'achat, survol */ /* Déclinaisons pâles de l'ambre — déjà dans charte-graphique.css depuis le 18/08/2026, remontées ici le 21/08 pour que la source unique soit complète. Elles servent les fonds chauds : menu du compte, pastilles premium, encadrés. */ --c-accent-soft: #f5ecd6; /* ambre pâle — bordures chaudes */ --c-accent-pale: #fbf6e9; /* crème chaud — fonds de zone */ --c-accent-ink: #4d370a; /* brun — texte sur fond chaud */ /* --------------------------------------------------------------------- 2. NEUTRES — la base de lecture (les 5 valeurs les plus solides du site) --------------------------------------------------------------------- */ --c-ink: #0e1814; /* titres */ --c-text: #36443e; /* texte courant */ --c-muted: #677571; /* texte secondaire */ --c-border: #d4dcd7; /* bordures */ --c-surface: #ffffff; /* fond des cartes */ /* Fond général du site — ⚠️ VALEUR TRANCHÉE le 21/08/2026 : #f9f5f0. Deux crèmes se disputaient le site (#f9f5f0 décidé le 18/08 contre #fbf7ef encore écrit dans CLAUDE.md et 53 fois dans le code). Mesure faite en ligne le 21/08 : le rend rgb(249,245,240) = #f9f5f0 sur toutes les pages testées. C'est donc #f9f5f0 qui gagne, et CLAUDE.md qui doit être corrigé. */ --c-bg: #f9f5f0; /* --------------------------------------------------------------------- 3. SIGNALÉTIQUE EXERCICE / QUIZ ⭐ (règle expliquée par Fred le 21/08/2026) Ce n'est PAS de la décoration : c'est un code de lecture pour le visiteur. violet = « tu produis quelque chose » (exercice) vert = « tu réponds à des questions » (quiz) Réglé jusqu'ici À LA MAIN, quiz par quiz, dans Quiz Maker (AYS) — « super long à faire ». La section 8 ci-dessous le pose automatiquement. Valeurs relevées en ligne le 21/08/2026 : exercice rgba(148,86,255,.06) sur /exercices-en-ligne-pour-excel/?quiz=28, quiz rgba(25,104,29,.08) sur /quiz-pour-debutant/. La page d'accueil utilise déjà la même paire de teintes pour ses deux aperçus (à 12 % et 8 %) : le système existait déjà à deux endroits sans être écrit nulle part. Il l'est désormais ici. */ --c-exercice: #9456FF; /* violet — exercice */ --c-exercice-wash: rgba(148,86,255,.06); /* son fond de page */ --c-quiz: #19681D; /* vert — quiz (⚠️ voir note ci-dessous) */ --c-quiz-wash: rgba(25,104,29,.08); /* son fond de page */ /* ⚠️ ARBITRAGE EN ATTENTE : --c-quiz (#19681D) n'est PAS le vert de marque (#107C41). À 8 % d'opacité l'œil ne les distingue pas, mais cela fait une couleur de plus à maintenir. Proposition : aligner --c-quiz-wash sur rgba(16,124,65,.07). À trancher avec Fred, effet visuel quasi nul. */ /* --------------------------------------------------------------------- 4. ÉTATS — juste / faux / verrouillé Les dégradés sont les valeurs de Fred relevées dans sa console le 20/08/2026, CONFIRMÉES le 21/08 (« je garde les dégradés »). → La charte disait « jamais de dégradé dans un bloc » : cette règle est donc RÉVISÉE — le dégradé est admis sur les en-têtes de réponse. --------------------------------------------------------------------- */ --c-ok: #107C41; --c-ok-line: #8cbf9e; --c-ok-wash: linear-gradient(135deg,#e6f4ec7a 0%,#97d3aba3 80%); --c-ok-wash-hover: linear-gradient(135deg,#e6f4ecb0 0%,#97d3abc9 80%); --c-ko: #C43E1C; --c-ko-line: #d78c8c; --c-ko-wash: linear-gradient(135deg,#fbe4e27a 0%,#ff9797a3 80%); --c-ko-wash-hover: linear-gradient(135deg,#fbe4e2b0 0%,#ff9797c9 80%); --c-locked: #d60a0a; /* verrouillé / payant (charte du 15/07/2026) */ /* --------------------------------------------------------------------- 5. COULEUR PAR TYPE DE FICHIER (boutique) --------------------------------------------------------------------- */ --t-excel: #107C41; --t-excel-bg: #eaf4ee; --t-word: #185ABD; --t-word-bg: #eaf0f9; --t-ppt: #C43E1C; --t-ppt-bg: #fbeee9; --t-pbi: #9a7d0a; --t-pbi-bg: #fbf6e2; /* ⚠️ --t-pbi se contredisait : #9a7d0a (CLAUDE.md, et valeur réellement rendue) contre #E8B400 (charte-graphique.css). Signalé dès l'audit du 04/07/2026, jamais tranché. On retient #9a7d0a = ce que voient les visiteurs aujourd'hui, donc zéro changement visuel. */ /* --------------------------------------------------------------------- 6. MÉDAILLE / OR (héros et distinctions — charte gelée du 15/07/2026) --------------------------------------------------------------------- */ --c-gold: #e7c982; --c-medal-1: #fdf3d2; --c-medal-2: #f7e5aa; /* --------------------------------------------------------------------- 7. FORMES — arrondis, ombres, typographie Le site utilise aujourd'hui 9 arrondis et 33 formules d'ombre. On en retient 3 et 2. Les autres s'aligneront progressivement. --------------------------------------------------------------------- */ --r-sm: 10px; /* petits éléments : accordéons, pastilles */ --r-md: 14px; /* valeur de référence : cartes, encadrés */ --r-lg: 16px; /* grands blocs : héros, panneaux */ --r-pill: 999px; /* badges arrondis */ --shadow-sm: 0 1px 2px rgba(14,24,20,.06); --shadow: 0 6px 18px rgba(14,24,20,.10); --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* ⚠️ --font-display N'EXISTE PLUS comme police distincte : Fraunces a été abandonnée le 09/06/2026. Elle est pourtant encore réclamée 31 fois dans css/quiz_ai/ (dont 15 en !important) alors qu'elle n'est plus chargée — le navigateur la remplace par Georgia. Fred a confirmé le 21/08/2026 : ces titres doivent repasser en Inter. Alias de transition ci-dessous pour que les fichiers non encore corrigés retombent sur la bonne police. */ --font-display: var(--font-text); --font-title: var(--font-text); /* token inventé le 19/08, ici honoré */ } /* ============================================================================ 8. LA SIGNALÉTIQUE, POSÉE AUTOMATIQUEMENT → Fred ne règle plus JAMAIS la couleur de fond dans Quiz Maker. Un nouvel exercice est violet tout seul ; un nouveau quiz est vert tout seul. Comment un exercice se reconnaît, sans liste à tenir à jour : · soit il vit sur la page hub des exercices (WP id 28451) ; · soit son conteneur contient une grille ExcelLab (:has) — c'est ce qui distingue un exercice d'un quiz, et c'est déjà le critère retenu par 04-excel-ai-free.js v3.3 le 19/08/2026. Vérifié en ligne le 21/08/2026 : :has() est supporté, et les 10 grilles de l'exercice 28 sont présentes dès le chargement de la page. Les valeurs étant identiques à celles réglées à la main, RIEN NE CHANGE sur les exercices existants. Le gain porte sur les suivants. ⚠️ POURQUOI DES !important ICI (et nulle part ailleurs) — v1.0.1, 21/08/2026 Mesuré en ligne le jour même : Quiz Maker écrit la couleur de fond dans une balise