/** * kmoove-design.css — Feuille de style KMOOVE Studio * -------------------------------------------------------------------------- * Source unique de vérité visuelle pour toutes les pages QuizForge. * Inspiré de la charte Kmoove Studio Store (BRAND.md) : français, chaleureux, * rassurant. Pas de violet/tech SaaS US. Palette crème + corail + teal. * * Ne change AUCUNE fonctionnalité — uniquement l'aspect visuel. * Appliqué via overrides des classes Tailwind existantes. */ /* ═══════════════════════════════════════════════════════════════════════ 1. TOKENS (couleurs, polices, transitions) — BRAND.md KMOOVE ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── COULEURS MÈRES ───────────────────────────────────── */ --kmoove-coral: #D4572A; /* action principale, énergie */ --kmoove-coral-light: #FAECE7; --kmoove-coral-dark: #993C1D; --kmoove-teal: #1D9E75; /* succès, validation */ --kmoove-teal-light: #E1F5EE; --kmoove-teal-dark: #0F6E56; --kmoove-purple: #534AB7; /* personnalisation, soin */ --kmoove-purple-light: #EEEDFE; --kmoove-purple-dark: #3C3489; /* ── FONDS (identité chaleur) ─────────────────────────── */ --kmoove-cream: #FAF7F2; --kmoove-cream-2: #F4EDE0; --kmoove-cream-3: #E8DDC9; --kmoove-white: #FFFFFF; /* ── TEXTES (ink — jamais noir) ───────────────────────── */ --kmoove-ink: #2B1F12; --kmoove-ink-2: #4A3D2C; --kmoove-ink-3: #6B5D4A; --kmoove-ink-4: #8A7D6A; /* ── POLICES ──────────────────────────────────────────── */ --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ── MOUVEMENT ──────────────────────────────────────── `cubic-bezier(0.4, 0, 0.2, 1)` est la courbe par défaut de Material Design. Elle est correcte, et c'est précisément le problème : on la reconnaît, elle appartient à tout le monde. Un mouvement qui ne dit rien de la marque est un mouvement gratuit. La courbe ci-dessous décélère plus franchement : les choses arrivent vite puis se posent, au lieu de flotter. C'est ce qui fait qu'une interface paraît sûre d'elle plutôt qu'hésitante — exactement ce qu'on veut devant un public qui hésite déjà. Trois durées, parce qu'un survol et l'ouverture d'une modale n'ont pas la même charge : ce qui répond au doigt doit être immédiat, ce qui apparaît doit prendre le temps d'être compris. */ --kmoove-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --kmoove-ease-doux: cubic-bezier(0.33, 0.9, 0.32, 1); --kmoove-duration-vif: 120ms; /* réaction au doigt : survol, appui */ --kmoove-duration: 200ms; /* transitions courantes */ --kmoove-duration-ample: 320ms; /* apparitions : modales, panneaux */ --kmoove-transition: all var(--kmoove-duration) var(--kmoove-ease); /* ── ÉLÉVATION ──────────────────────────────────────── Les trois ombres d'origine se ressemblaient trop (0.04 à 0.08 d'opacité) : tout flottait pareil, donc rien ne ressortait. Une ombre ne décore pas, elle dit à quelle distance de la page se trouve un objet. Quatre niveaux qui SIGNIFIENT quelque chose : posé / détaché / soulevé / au-dessus de tout. Chacun combine une ombre de contact très serrée et une ombre de diffusion large — c'est ce qui distingue une ombre observée d'une ombre calculée. La teinte est brune (43,31,18) et non noire : sur un fond crème, une ombre grise ternit, une ombre chaude enrichit. */ --kmoove-shadow-pose: 0 1px 2px rgba(43, 31, 18, 0.05); --kmoove-shadow-soft: 0 1px 2px rgba(43, 31, 18, 0.05), 0 3px 8px rgba(43, 31, 18, 0.04); --kmoove-shadow-card: 0 1px 2px rgba(43, 31, 18, 0.05), 0 8px 20px -6px rgba(43, 31, 18, 0.07); --kmoove-shadow-hover: 0 2px 4px rgba(43, 31, 18, 0.06), 0 14px 32px -10px rgba(43, 31, 18, 0.13); --kmoove-shadow-haut: 0 4px 8px rgba(43, 31, 18, 0.06), 0 28px 64px -16px rgba(43, 31, 18, 0.20); /* ── RAYONS ───────────────────────────────────────────── */ --kmoove-radius-btn: 10px; --kmoove-radius-card: 16px; --kmoove-radius-modal: 20px; /* ── RYTHME VERTICAL ────────────────────────────────── L'audit du 2026-08-03 a relevé qu'aucun jeton d'espacement n'existait : chaque page écrivait ses pixels à la main, d'où des respirations qui ne tombent jamais deux fois pareil. Échelle à pas croissant plutôt que linéaire — l'œil perçoit les rapports, pas les additions. */ --kmoove-espace-xs: 4px; --kmoove-espace-s: 8px; --kmoove-espace-m: 16px; --kmoove-espace-l: 28px; --kmoove-espace-xl: 48px; } /* ═══════════════════════════════════════════════════════════════════════ 2. BASE — reset polices + fond crème + couleur encre ═══════════════════════════════════════════════════════════════════════ */ body, .font-sans { font-family: var(--font-sans) !important; color: var(--kmoove-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fond global crème — remplace bg-slate-50 */ body.bg-slate-50, body.kmoove-body { background-color: var(--kmoove-cream) !important; } /* Titres toujours en serif Fraunces */ h1, h2, .text-2xl, .text-xl, .text-3xl, .kmoove-title { font-family: var(--font-serif) !important; font-weight: 500 !important; letter-spacing: -0.01em; color: var(--kmoove-ink); } /* Chiffres / scores / clés en JetBrains Mono */ .font-mono, .kmoove-mono { font-family: var(--font-mono) !important; } /* ═══════════════════════════════════════════════════════════════════════ 3. COULEURS — override Tailwind violet/slate/emerald → palette KMOOVE ═══════════════════════════════════════════════════════════════════════ */ /* ── VIOLET → CORAL (action principale) ───────────────── */ .bg-violet-600 { background-color: var(--kmoove-coral) !important; } .bg-violet-700 { background-color: var(--kmoove-coral-dark) !important; } .hover\:bg-violet-700:hover { background-color: var(--kmoove-coral-dark) !important; } .active\:bg-violet-800:active { background-color: var(--kmoove-coral-dark) !important; } .bg-violet-50 { background-color: var(--kmoove-coral-light) !important; } .bg-violet-100 { background-color: var(--kmoove-coral-light) !important; } .hover\:bg-violet-50:hover { background-color: var(--kmoove-coral-light) !important; } .hover\:bg-violet-100:hover { background-color: var(--kmoove-coral-light) !important; } .text-violet-500 { color: var(--kmoove-coral) !important; } .text-violet-600 { color: var(--kmoove-coral) !important; } .text-violet-700 { color: var(--kmoove-coral-dark) !important; } .hover\:text-violet-700:hover { color: var(--kmoove-coral-dark) !important; } .border-violet-200 { border-color: var(--kmoove-coral-light) !important; } .border-violet-300 { border-color: #e7c4b5 !important; } .border-violet-400 { border-color: var(--kmoove-coral) !important; } .border-violet-500 { border-color: var(--kmoove-coral) !important; } .hover\:border-violet-200:hover { border-color: var(--kmoove-coral-light) !important; } .hover\:border-violet-300:hover { border-color: #e7c4b5 !important; } .hover\:border-violet-400:hover { border-color: var(--kmoove-coral) !important; } .focus\:border-violet-400:focus { border-color: var(--kmoove-coral) !important; } .focus\:border-violet-500:focus { border-color: var(--kmoove-coral) !important; } .focus\:ring-violet-100:focus { --tw-ring-color: var(--kmoove-coral-light) !important; } .ring-violet-100 { --tw-ring-color: var(--kmoove-coral-light) !important; } .shadow-violet-200 { --tw-shadow-color: rgba(212, 87, 42, 0.18) !important; box-shadow: 0 2px 8px rgba(212, 87, 42, 0.18) !important; } /* Filter-btn-active dans hub.html — corail au lieu de violet */ .filter-btn-active { border-color: var(--kmoove-coral) !important; background-color: var(--kmoove-coral-light) !important; color: var(--kmoove-coral-dark) !important; } /* ── SLATE → INK / CREAM (texte + fonds neutres) ──────── */ .text-slate-900 { color: var(--kmoove-ink) !important; } .text-slate-800 { color: var(--kmoove-ink-2) !important; } .text-slate-700 { color: var(--kmoove-ink-2) !important; } .text-slate-600 { color: var(--kmoove-ink-3) !important; } .text-slate-500 { color: var(--kmoove-ink-3) !important; } .text-slate-400 { color: var(--kmoove-ink-4) !important; } .text-slate-300 { color: var(--kmoove-ink-4) !important; } .bg-slate-50 { background-color: var(--kmoove-cream) !important; } .bg-slate-100 { background-color: var(--kmoove-cream-2) !important; } .bg-slate-200 { background-color: var(--kmoove-cream-3) !important; } .hover\:bg-slate-100:hover { background-color: var(--kmoove-cream-2) !important; } .hover\:bg-slate-200:hover { background-color: var(--kmoove-cream-3) !important; } .border-slate-100 { border-color: var(--kmoove-cream-2) !important; } .border-slate-200 { border-color: var(--kmoove-cream-3) !important; } .border-slate-300 { border-color: var(--kmoove-cream-3) !important; } .hover\:border-slate-300:hover { border-color: var(--kmoove-ink-4) !important; } .placeholder\:text-slate-400::placeholder { color: var(--kmoove-ink-4) !important; } /* ── EMERALD → TEAL (succès, disponible) ──────────────── */ .bg-emerald-50 { background-color: var(--kmoove-teal-light) !important; } .bg-emerald-500 { background-color: var(--kmoove-teal) !important; } .border-emerald-200 { border-color: #bfe8d8 !important; } .text-emerald-600 { color: var(--kmoove-teal) !important; } .text-emerald-700 { color: var(--kmoove-teal-dark) !important; } /* ── AMBER → CORAL (accents secondaires) ─────────────── */ .bg-amber-50 { background-color: var(--kmoove-coral-light) !important; } .bg-amber-100 { background-color: var(--kmoove-coral-light) !important; } .border-amber-200 { border-color: #e7c4b5 !important; } .text-amber-600 { color: var(--kmoove-coral) !important; } .text-amber-700 { color: var(--kmoove-coral-dark) !important; } .hover\:bg-amber-100:hover { background-color: var(--kmoove-coral-light) !important; } /* ── BLUE → PURPLE-KMOOVE (secondaires doux) ──────────── */ .bg-blue-50 { background-color: var(--kmoove-purple-light) !important; } .bg-blue-100 { background-color: var(--kmoove-purple-light) !important; } .border-blue-200 { border-color: #d4d2f0 !important; } .text-blue-600 { color: var(--kmoove-purple) !important; } .text-blue-700 { color: var(--kmoove-purple-dark) !important; } .hover\:bg-blue-100:hover { background-color: var(--kmoove-purple-light) !important; } /* ── RED (erreurs) : on garde mais plus chaleureux ────── */ .bg-red-50 { background-color: #fdf1ec !important; } .border-red-200 { border-color: #e9bfae !important; } .text-red-500 { color: #c94a2a !important; } .text-red-600 { color: #b0401f !important; } .hover\:border-red-300:hover { border-color: #d18164 !important; } .hover\:text-red-500:hover { color: #c94a2a !important; } /* ═══════════════════════════════════════════════════════════════════════ 4. COMPOSANTS — cartes, boutons, inputs, sidebar ═══════════════════════════════════════════════════════════════════════ */ /* ── Cartes blanches : ombre douce + radius KMOOVE ───── */ .bg-white.rounded-xl, .bg-white.rounded-2xl { background-color: var(--kmoove-white) !important; box-shadow: var(--kmoove-shadow-card); transition: var(--kmoove-transition); } .bg-white.rounded-xl { border-radius: var(--kmoove-radius-card) !important; } .bg-white.rounded-2xl { border-radius: var(--kmoove-radius-modal) !important; } /* Cartes au hover : soulève + ombre douce */ .bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover, .game-card:hover:not(.opacity-55) { transform: translateY(-1px); box-shadow: var(--kmoove-shadow-hover); border-color: var(--kmoove-cream-3) !important; } /* ── Boutons primaires corail — radius 10px ─────────── */ button.bg-violet-600, a.bg-violet-600, .bg-violet-600.rounded-xl, .bg-violet-600.rounded-lg { background-color: var(--kmoove-coral) !important; color: var(--kmoove-white) !important; border-radius: var(--kmoove-radius-btn) !important; font-weight: 500 !important; letter-spacing: 0; box-shadow: 0 1px 2px rgba(43, 31, 18, 0.04); transition: var(--kmoove-transition); } button.bg-violet-600:hover, a.bg-violet-600:hover, .bg-violet-600.rounded-xl:hover, .bg-violet-600.rounded-lg:hover { background-color: var(--kmoove-coral-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212, 87, 42, 0.2); } button.bg-violet-600:active, a.bg-violet-600:active { transform: translateY(0); } /* ── Inputs : fond crème + radius arrondi + focus corail */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], textarea, select { font-family: var(--font-sans) !important; color: var(--kmoove-ink); transition: var(--kmoove-transition); } input.bg-slate-50, textarea.bg-slate-50, select.bg-slate-50 { background-color: var(--kmoove-white) !important; border-color: var(--kmoove-cream-3) !important; } input:focus, textarea:focus, select:focus { border-color: var(--kmoove-coral) !important; outline: 2px solid rgba(212, 87, 42, 0.12); outline-offset: 0; } /* ── Sidebar (hub.html, app.html) ──────────────────── */ aside#sidebar, aside.w-\[220px\] { background-color: var(--kmoove-white) !important; border-right-color: var(--kmoove-cream-3) !important; } /* Logo carré sidebar : corail au lieu de violet */ aside .bg-violet-600 { background-color: var(--kmoove-coral) !important; } /* Navigation active : fond coral-light */ aside nav a.bg-violet-50 { background-color: var(--kmoove-coral-light) !important; color: var(--kmoove-coral-dark) !important; font-weight: 500 !important; } /* Top bar backdrop blur : fond crème translucide */ .bg-white\/95 { background-color: rgba(250, 247, 242, 0.95) !important; border-bottom-color: var(--kmoove-cream-3) !important; } /* ═══════════════════════════════════════════════════════════════════════ 5. GAME CARDS — hub.html ═══════════════════════════════════════════════════════════════════════ */ .game-card { background-color: var(--kmoove-white) !important; border: 1px solid var(--kmoove-cream-3) !important; border-radius: var(--kmoove-radius-card) !important; box-shadow: var(--kmoove-shadow-soft); transition: var(--kmoove-transition); } .game-card:hover { border-color: var(--kmoove-cream-3) !important; box-shadow: var(--kmoove-shadow-hover); transform: translateY(-1px); } .game-card .text-3xl { font-size: 1.75rem; line-height: 1; } /* ═══════════════════════════════════════════════════════════════════════ 6. BADGES (Disponible / Bientôt / En dev) ═══════════════════════════════════════════════════════════════════════ */ /* Disponible — teal */ .inline-flex.bg-emerald-50 { background-color: var(--kmoove-teal-light) !important; border-color: #bfe8d8 !important; color: var(--kmoove-teal-dark) !important; font-weight: 500 !important; letter-spacing: 0.02em; } .inline-flex.bg-emerald-50 .bg-emerald-500 { background-color: var(--kmoove-teal) !important; } /* En dev — corail doux */ .inline-flex.bg-amber-50 { background-color: var(--kmoove-coral-light) !important; border-color: #e7c4b5 !important; color: var(--kmoove-coral-dark) !important; font-weight: 500 !important; } /* Bientôt — violet KMOOVE */ .inline-flex.bg-blue-50 { background-color: var(--kmoove-purple-light) !important; border-color: #d4d2f0 !important; color: var(--kmoove-purple-dark) !important; font-weight: 500 !important; } /* ═══════════════════════════════════════════════════════════════════════ 7. GRADIENTS (login galerie) — atténuer les bleus/violets saturés ═══════════════════════════════════════════════════════════════════════ */ /* ── SIX TUILES, TROIS COULEURS ──────────────────────────────────────────── Constat par capture d'écran le 2026-08-03 : la galerie de connexion affichait SIX teintes sans parenté — brique, violet, bleu, deux verts, rose. Une marque qui déclare trois couleurs et en montre six n'a pas de palette, elle a un inventaire. C'est le signal « pas conçu » le plus voyant d'une page, avant même la typographie. Les six tuiles gardent leurs six sujets, mais se répartissent désormais en TROIS FAMILLES à deux tons : corail, teal, violet. Le regard perçoit une intention là où il voyait une accumulation. Les dégradés partent en biais avec un écart de luminosité mesuré : assez pour donner du volume, assez peu pour rester sobre. Un dégradé qu'on remarque est un dégradé raté. */ .bg-gradient-to-br.from-orange-500 { background-image: linear-gradient(140deg, #D4572A, #A63F1C) !important; } /* corail */ .bg-gradient-to-br.from-pink-500 { background-image: linear-gradient(140deg, #B84526, #8A3216) !important; } /* corail brûlé */ .bg-gradient-to-br.from-teal-500 { background-image: linear-gradient(140deg, #1D9E75, #14785A) !important; } /* teal */ .bg-gradient-to-br.from-emerald-500{ background-image: linear-gradient(140deg, #157F5F, #0D6047) !important; } /* teal profond */ .bg-gradient-to-br.from-violet-500 { background-image: linear-gradient(140deg, #5B52BE, #443C97) !important; } /* violet */ .bg-gradient-to-br.from-blue-500 { background-image: linear-gradient(140deg, #453D9B, #332C78) !important; } /* violet encre */ /* Login page : gradient texte violet→rose → corail chaleureux */ .kmoove-gradient-text, [style*="linear-gradient(90deg,#7c3aed,#ec4899)"] { background: linear-gradient(90deg, var(--kmoove-coral), var(--kmoove-coral-dark)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ═══════════════════════════════════════════════════════════════════════ 8. MODALES (qf-overlay) ═══════════════════════════════════════════════════════════════════════ */ .qf-overlay.fixed.bg-black\/60 { background-color: rgba(43, 31, 18, 0.5) !important; backdrop-filter: blur(4px); } .qf-panel { border-radius: var(--kmoove-radius-modal) !important; box-shadow: 0 20px 48px rgba(43, 31, 18, 0.15), 0 4px 12px rgba(43, 31, 18, 0.08); } /* ═══════════════════════════════════════════════════════════════════════ 9. TAGS uppercase et labels ═══════════════════════════════════════════════════════════════════════ */ .text-xs.uppercase, .tracking-wider, .tracking-wide { font-weight: 500 !important; letter-spacing: 0.08em !important; } /* ═══════════════════════════════════════════════════════════════════════ 10. SCROLLBAR custom (déjà existante — juste la couleur) ═══════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar-thumb { background: var(--kmoove-cream-3) !important; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--kmoove-ink-4) !important; } /* ═══════════════════════════════════════════════════════════════════════ 11. UTILITAIRES KMOOVE additionnels (classes neuves, pas d'override) ═══════════════════════════════════════════════════════════════════════ */ .kmoove-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kmoove-ink-3); } .kmoove-hero { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--kmoove-ink); line-height: 1.15; } .kmoove-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--kmoove-cream-3), transparent); margin: 2rem 0; } /* Icône dans un rond teinté (style KMOOVE) */ .kmoove-icon-pill { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--kmoove-radius-btn); background-color: var(--kmoove-coral-light); color: var(--kmoove-coral); } .kmoove-icon-pill.teal { background-color: var(--kmoove-teal-light); color: var(--kmoove-teal); } .kmoove-icon-pill.purple{ background-color: var(--kmoove-purple-light); color: var(--kmoove-purple); } /* Focus visible style KMOOVE */ *:focus-visible { outline: 2px solid var(--kmoove-coral); outline-offset: 2px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════════ 12. MODE CARDS (hub.html — 3 cartes d'entrée, inspiration KMOOVE Studio) ═══════════════════════════════════════════════════════════════════════ */ .mode-card { display: flex; flex-direction: column; text-align: left; background: var(--kmoove-white); border: 1px solid var(--kmoove-cream-3); border-radius: var(--kmoove-radius-card); padding: 24px; box-shadow: var(--kmoove-shadow-soft); cursor: pointer; transition: var(--kmoove-transition); font-family: var(--font-sans); width: 100%; text-decoration: none; color: var(--kmoove-ink); } .mode-card:hover { transform: translateY(-1px); box-shadow: var(--kmoove-shadow-hover); border-color: var(--kmoove-ink-4); } .mode-card-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; margin-bottom: 20px; } .mode-card-icon.coral { background: var(--kmoove-coral-light); color: var(--kmoove-coral); } .mode-card-icon.teal { background: var(--kmoove-teal-light); color: var(--kmoove-teal); } .mode-card-icon.purple { background: var(--kmoove-purple-light); color: var(--kmoove-purple); } .mode-card-icon svg { width: 22px; height: 22px; } .mode-card-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .mode-card-tag.coral { color: var(--kmoove-coral-dark); } .mode-card-tag.teal { color: var(--kmoove-teal-dark); } .mode-card-tag.purple { color: var(--kmoove-purple-dark); } .mode-card-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--kmoove-ink); margin-bottom: 12px; letter-spacing: -0.01em; } .mode-card-desc { font-size: 14px; line-height: 1.55; color: var(--kmoove-ink-3); flex: 1; margin-bottom: 24px; } .mode-card-duration { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kmoove-ink-3); } .mode-card-duration svg { width: 16px; height: 16px; } /* ═══════════════════════════════════════════════════════════════════════ 13. HELP BANNER (bande « Besoin d'un coup de main ? ») ═══════════════════════════════════════════════════════════════════════ */ .kmoove-help-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; background: var(--kmoove-coral-light); border-radius: var(--kmoove-radius-card); border: 1px solid rgba(212, 87, 42, 0.12); } .kmoove-help-banner .help-body { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 0; } .kmoove-help-banner .help-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--kmoove-coral); color: var(--kmoove-white); flex-shrink: 0; } .kmoove-help-banner .help-icon svg { width: 20px; height: 20px; } .kmoove-help-banner .help-title { font-weight: 500; color: var(--kmoove-ink); font-size: 15px; margin-bottom: 2px; } .kmoove-help-banner .help-text { font-size: 14px; line-height: 1.55; color: var(--kmoove-ink-2); } .kmoove-help-banner .help-cta { font-size: 14px; font-weight: 500; color: var(--kmoove-coral-dark); text-decoration: none; white-space: nowrap; transition: var(--kmoove-transition); flex-shrink: 0; } .kmoove-help-banner .help-cta:hover { color: var(--kmoove-coral); } /* ═══════════════════════════════════════════════════════════════════════ 14. DRAFTS HORIZONTAL SCROLL (brouillons — défilement latéral) ═══════════════════════════════════════════════════════════════════════ */ .kmoove-draft-scroller { position: relative; } .kmoove-draft-track { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 4px 2px 12px 2px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--kmoove-cream-3) transparent; } .kmoove-draft-track::-webkit-scrollbar { height: 4px; } .kmoove-draft-track::-webkit-scrollbar-track { background: transparent; } .kmoove-draft-track::-webkit-scrollbar-thumb { background: var(--kmoove-cream-3); border-radius: 2px; } .kmoove-draft-card { display: flex; align-items: center; gap: 12px; background: var(--kmoove-white); border: 1px solid var(--kmoove-cream-3); border-radius: var(--kmoove-radius-card); padding: 14px 16px; width: 320px; flex-shrink: 0; box-shadow: var(--kmoove-shadow-soft); transition: var(--kmoove-transition); scroll-snap-align: start; } .kmoove-draft-card:hover { transform: translateY(-1px); border-color: var(--kmoove-ink-4); box-shadow: var(--kmoove-shadow-hover); } .kmoove-draft-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--kmoove-white); border: 1px solid var(--kmoove-cream-3); box-shadow: var(--kmoove-shadow-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: var(--kmoove-transition); color: var(--kmoove-ink-2); } .kmoove-draft-scroll-btn:hover { background: var(--kmoove-coral); color: var(--kmoove-white); border-color: var(--kmoove-coral); transform: translateY(-50%) scale(1.05); } .kmoove-draft-scroll-btn.left { left: -14px; } .kmoove-draft-scroll-btn.right { right: -14px; } .kmoove-draft-scroll-btn[disabled] { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.8); } .kmoove-draft-scroll-btn svg { width: 18px; height: 18px; } /* ═══════════════════════════════════════════════════════════════════════ 15. GRAIN — la texture qui distingue le papier de l'écran ═══════════════════════════════════════════════════════════════════════ */ /* Un aplat parfaitement uniforme est le signe le plus sûr d'une interface produite par défaut : aucune surface réelle n'est uniforme. Un grain très fin, posé sur toute la page, suffit à faire basculer la perception du « fond blanc cassé » vers « papier ». Réglé à 3 % d'opacité : à ce niveau on ne le voit pas, on le ressent. Si vous distinguez le grain, c'est qu'il est trop fort — il doit rester en deçà du seuil de conscience. `pointer-events: none` : la couche ne doit JAMAIS intercepter un clic. `position: fixed` : le grain appartient à l'écran, pas au document — il ne défile pas, comme la texture d'une feuille sous l'encre. */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════ 16. FOCUS — rendre le clavier visible, et la souris tranquille ═══════════════════════════════════════════════════════════════════════ */ /* L'anneau de focus était `rgba(212, 87, 42, 0.12)` — douze pour cent d'opacité, autant dire invisible. Qui navigue au clavier ne savait pas où il se trouvait sur la page. Deux corrections : · `:focus-visible` plutôt que `:focus` — l'anneau n'apparaît qu'au clavier. Un utilisateur à la souris ne verra plus de halo après chaque clic, ce qui était l'autre défaut : un focus visible en permanence finit par être supprimé par le premier développeur qu'il agace. · un anneau franc, doublé d'un halo, pour tenir sur fond clair comme foncé. Ce n'est pas décoratif. Pour un animateur qui saisit vingt questions au clavier, c'est la différence entre fluide et pénible. */ :focus-visible { outline: 2px solid var(--kmoove-coral) !important; outline-offset: 2px; border-radius: 4px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--kmoove-coral) !important; outline-offset: 1px; border-color: var(--kmoove-coral) !important; box-shadow: 0 0 0 4px rgba(212, 87, 42, 0.10); } /* La souris ne déclenche plus de halo résiduel. */ input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible), button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none !important; } /* Curseur de saisie corail — détail minuscule, signal de soin. */ input, textarea { caret-color: var(--kmoove-coral); } /* Sélection de texte dans la teinte de la marque, pas le bleu du système. */ ::selection { background: rgba(212, 87, 42, 0.16); color: var(--kmoove-ink); } ::-moz-selection { background: rgba(212, 87, 42, 0.16); color: var(--kmoove-ink); } /* ═══════════════════════════════════════════════════════════════════════ 17. TYPOGRAPHIE — le réglage qui se voit sans se remarquer ═══════════════════════════════════════════════════════════════════════ */ /* Fraunces est une police VARIABLE dont l'axe `opsz` (taille optique) est déjà chargé depuis Google Fonts. Presque personne ne s'en sert. C'est pourtant ce pour quoi elle a été dessinée : à 32 px les pleins et déliés doivent se contraster, à 16 px ils doivent s'épaissir pour rester lisibles. Une police qui s'adapte à sa taille, c'est le métier d'un fondeur du XIXe siècle. Laisser le navigateur agrandir la même lettre, c'est ce que fait n'importe quel gabarit. L'interlettrage suit la même logique : négatif sur les grands titres, où les lettres se serrent naturellement ; positif sur les petites capitales, qui s'étouffent sans air. */ h1, .kmoove-hero, .page-hero h1 { font-variation-settings: "opsz" 96; letter-spacing: -0.021em; line-height: 1.12; } h2, .text-2xl { font-variation-settings: "opsz" 48; letter-spacing: -0.014em; line-height: 1.22; } h3, .text-xl { font-variation-settings: "opsz" 24; letter-spacing: -0.008em; } /* Lecture suivie : hauteur de ligne confortable. */ p, li { line-height: 1.62; } /* Petites capitales (« LE PLUS RAPIDE », « CLÉ DE LICENCE », libellés). Sans interlettrage, une capitale de 11 px se referme et devient un pâté gris. C'est la correction typographique la plus rentable d'une interface : une ligne de CSS pour des dizaines d'éléments. */ .uppercase, .tracking-wide, .tracking-wider { letter-spacing: 0.07em !important; } /* Chiffres tabulaires : les compteurs cessent de danser quand ils changent. */ .font-mono, .kmoove-mono { font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════ 18. DISCIPLINE D'INTERACTION — seul ce qui répond doit bouger ═══════════════════════════════════════════════════════════════════════ */ /* La règle d'origine faisait lever TOUTE carte blanche au survol, y compris celles qui ne sont pas cliquables. Un objet qui réagit sans rien faire ment à l'utilisateur : il promet une action qui n'existe pas, et le regard finit par ignorer le signal — y compris là où il compte vraiment. Le mouvement est une promesse. On ne le donne qu'à ce qui la tient. */ .bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover { transform: none; box-shadow: var(--kmoove-shadow-card); } a .bg-white.rounded-xl:hover, button .bg-white.rounded-xl:hover, .cursor-pointer.bg-white.rounded-xl:hover, .game-card:hover:not(.opacity-55), .mode-card:hover { transform: translateY(-2px); box-shadow: var(--kmoove-shadow-hover); transition-duration: var(--kmoove-duration-vif); } /* L'appui ramène l'objet sous le doigt — sans ça, un bouton paraît collé. */ button:active, a.bg-violet-600:active, .mode-card:active { transform: translateY(0) scale(0.995); transition-duration: 60ms; } /* ═══════════════════════════════════════════════════════════════════════ 19. MOUVEMENT RÉDUIT — obligation, pas option ═══════════════════════════════════════════════════════════════════════ */ /* Les troubles vestibulaires rendent les animations réellement pénibles, et le système d'exploitation le signale déjà. Ne pas l'écouter, c'est ignorer une préférence que la personne a pris la peine d'exprimer. On coupe le mouvement, jamais le retour visuel : couleurs et ombres continuent d'indiquer ce qui est survolé et ce qui a le focus. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .game-card:hover, .mode-card:hover, .bg-white.rounded-xl:hover, button:hover, button:active { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ 20. PIED DE PAGE LÉGAL — présent, jamais encombrant ═══════════════════════════════════════════════════════════════════════ */ /* Un lien obligatoire (RGPD art. 12-13) qui ne doit ni disparaître ni s'imposer. Il se tient en retrait et ne se souligne qu'au survol : la discrétion d'un ourlet, pas d'une étiquette. */ #qf-legal-footer { margin-top: var(--kmoove-espace-xl); padding: var(--kmoove-espace-l) var(--kmoove-espace-m); font-size: 12.5px; color: var(--kmoove-ink-4); border-top: 1px solid var(--kmoove-cream-3); position: relative; z-index: 1; } #qf-legal-footer a { text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--kmoove-duration-vif) var(--kmoove-ease), color var(--kmoove-duration-vif) var(--kmoove-ease); } #qf-legal-footer a:hover { color: var(--kmoove-coral); text-decoration-color: currentColor; } /* ═══════════════════════════════════════════════════════════════════════ 21. RATTRAPAGE — valeurs Tailwind arbitraires perdues au build local ═══════════════════════════════════════════════════════════════════════ */ /* BUG DE PRODUCTION, trouvé par capture d'écran le 2026-08-03. Le bouton « C'est parti » de hub.html — l'action principale de la fonctionnalité « une phrase suffit » — s'affichait en BLANC SUR CRÈME, donc invisible, depuis la migration du 2026-06-06. Cause : son balisage porte `bg-[color:var(--kmoove-coral)]`, une valeur arbitraire Tailwind. Le CDN les fabriquait à la volée, à la demande. Le build local ne génère que ce qu'il rencontre au moment du scan — cette classe n'a jamais été produite. La page continue de la citer, le navigateur ne trouve rien, et l'élément perd simplement son fond. C'est un mode de panne SILENCIEUX : aucune erreur console, aucun test rouge, un bouton qui existe et fonctionne — mais qu'on ne voit pas. On répare ici plutôt que dans le balisage : la feuille de style est la couche design, et un correctif visuel n'a pas à modifier 21 pages. */ #phraseGo, .bg-\[color\:var\(--kmoove-coral\)\] { background-color: var(--kmoove-coral) !important; color: var(--kmoove-white) !important; border-radius: var(--kmoove-radius-btn) !important; box-shadow: var(--kmoove-shadow-pose); transition: var(--kmoove-transition); } #phraseGo:hover:not(:disabled) { background-color: var(--kmoove-coral-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212, 87, 42, 0.22); } /* État désactivé : `disabled:opacity-50` rendait le bouton laiteux et le faisait passer pour cassé. Un bouton en attente doit rester lisible — il dit « pas encore », pas « en panne ». On garde donc la couleur, on retire seulement le relief et on montre le refus par le curseur. */ #phraseGo:disabled { opacity: 1 !important; background-color: var(--kmoove-cream-3) !important; color: var(--kmoove-ink-4) !important; box-shadow: none; cursor: not-allowed; } /* ═══════════════════════════════════════════════════════════════════════ 22. DENSITÉ ET HIÉRARCHIE — un outil de travail, pas une page vitrine ═══════════════════════════════════════════════════════════════════════ */ /* PRÉMISSE CORRIGÉE LE 2026-08-03 : les utilisateurs de cet éditeur sont des professionnels — directeurs, animateurs — qui l'ouvrent tous les jours. Pas des visiteurs qu'il faut accueillir, ni un public fragile qu'il faut guider à gros caractères. Or l'accueil était construit comme une page d'atterrissage : salutation centrée, titre de magazine, sous-titre explicatif — près de 250 pixels consommés avant la première action possible. C'est acceptable une fois. C'est une taxe quand on l'ouvre quinze fois par semaine. Trois décisions, dans cet ordre d'importance : 1. LE BANDEAU D'ACCUEIL RECULE. Aligné à gauche, réduit de moitié. Un outil professionnel ne se présente pas à chaque ouverture ; il se met au travail. Le texte centré est un code de communication, l'alignement à gauche un code d'outil — le lecteur le sait avant même de lire. 2. LA PHRASE DEVIENT LE SUJET DE LA PAGE. C'est la fonction phare du produit (« un memory sur les monuments de Paris »), elle était traitée comme un champ secondaire coincé entre un titre et trois cartes. Elle prend maintenant la place et le poids qui lui reviennent. 3. LES TROIS CARTES CESSENT D'ÊTRE ÉQUIVALENTES. Trois options de poids strictement identique ne guident personne : l'utilisateur doit lire les trois pour choisir, à chaque visite. La première est la voie recommandée — elle le montre. Les deux autres restent disponibles sans réclamer l'attention. */ /* ── 1. LE BANDEAU D'ACCUEIL RECULE ──────────────────────────────────── */ main.flex-1 > .text-center:first-child { text-align: left !important; margin-bottom: var(--kmoove-espace-l) !important; padding-bottom: var(--kmoove-espace-m); border-bottom: 1px solid var(--kmoove-cream-3); } main.flex-1 > .text-center:first-child .kmoove-tag { margin-bottom: 2px !important; font-size: 11px; color: var(--kmoove-ink-4); } main.flex-1 > .text-center:first-child h1.kmoove-hero { font-size: 23px !important; line-height: 1.25; margin-left: 0 !important; margin-right: 0 !important; max-width: 46ch !important; font-variation-settings: "opsz" 40; letter-spacing: -0.012em; } /* Le sous-titre explicatif : conservé, mais il cesse d'occuper une ligne pleine au centre de l'écran. Il devient ce qu'il est — une précision. */ main.flex-1 > .text-center:first-child > p:last-child { margin-left: 0 !important; margin-right: 0 !important; margin-top: 4px !important; max-width: 62ch !important; font-size: 13.5px !important; color: var(--kmoove-ink-4) !important; } /* ── 2. LA PHRASE DEVIENT LE SUJET DE LA PAGE ────────────────────────── */ main.flex-1 > div:has(> label[for="phraseJeu"]) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: var(--kmoove-espace-l) !important; background: var(--kmoove-white); border: 1px solid var(--kmoove-cream-3); border-radius: var(--kmoove-radius-card); padding: 22px 24px 24px; box-shadow: var(--kmoove-shadow-card); position: relative; } /* Filet corail sur la tranche gauche : signe le chemin recommandé sans ajouter ni couleur de fond ni étiquette. */ main.flex-1 > div:has(> label[for="phraseJeu"])::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kmoove-coral); } label[for="phraseJeu"] { font-family: var(--font-serif) !important; font-size: 19px !important; font-weight: 500 !important; color: var(--kmoove-ink) !important; letter-spacing: -0.01em; margin-bottom: 10px !important; } #phraseJeu { font-size: 16px !important; padding: 15px 18px !important; border-radius: 12px !important; background: var(--kmoove-cream) !important; border-color: var(--kmoove-cream-3) !important; } #phraseJeu:focus { background: var(--kmoove-white) !important; } #phraseGo { padding: 15px 26px !important; font-size: 15px !important; white-space: nowrap; } /* ── 3. LES TROIS CARTES CESSENT D'ÊTRE ÉQUIVALENTES ─────────────────── */ /* Elles perdent d'abord du volume : la hauteur venait d'un rembourrage généreux, pas du contenu. Plus compactes, les trois tiennent dans le champ de vision en même temps que la phrase — c'est ce qui permet de choisir au lieu de faire défiler. */ .mode-card { padding: 18px 20px 16px !important; border-radius: 14px !important; gap: 0 !important; } .mode-card-icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; margin-bottom: 12px !important; } .mode-card-icon i, .mode-card-icon svg { width: 17px !important; height: 17px !important; } .mode-card-tag { font-size: 10.5px !important; letter-spacing: 0.08em !important; margin-bottom: 5px !important; } .mode-card-title { font-size: 17px !important; line-height: 1.25 !important; margin-bottom: 6px !important; font-variation-settings: "opsz" 24; } .mode-card-desc { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--kmoove-ink-3) !important; } .mode-card-duration { margin-top: 12px !important; font-size: 12px !important; color: var(--kmoove-ink-4) !important; } /* La voie recommandée se distingue par l'ÉLÉVATION et le contour, jamais par un fond coloré : une carte teintée parmi deux blanches paraît sélectionnée, alors qu'elle est seulement conseillée. La nuance compte — on suggère, on ne décide pas à la place de l'utilisateur. */ .mode-card:nth-child(1) { border-color: #E3B9A6 !important; box-shadow: var(--kmoove-shadow-card); } /* Les deux autres reculent d'un cran : présentes, jamais concurrentes. */ .mode-card:nth-child(2), .mode-card:nth-child(3) { background: transparent !important; box-shadow: none !important; } .mode-card:nth-child(2):hover, .mode-card:nth-child(3):hover { background: var(--kmoove-white) !important; box-shadow: var(--kmoove-shadow-hover); } /* ── 4. L'AIDE CESSE DE CRIER ─────────────────────────────────────────── */ /* Le bandeau « Besoin d'un coup de main ? » avait un fond corail plein et la même surface que les actions principales. Une offre d'aide qui pèse autant qu'une action de travail détourne l'attention en permanence — et finit, comme toute alarme constante, par ne plus être vue du tout. */ .kmoove-help-banner { background: transparent !important; border: 1px solid var(--kmoove-cream-3) !important; padding: 14px 18px !important; border-radius: 12px !important; margin-bottom: var(--kmoove-espace-l) !important; } .kmoove-help-banner .help-icon { width: 30px !important; height: 30px !important; background: var(--kmoove-coral-light) !important; color: var(--kmoove-coral) !important; } .kmoove-help-banner .help-icon i, .kmoove-help-banner .help-icon svg { width: 15px !important; height: 15px !important; } .kmoove-help-banner .help-title { font-size: 14px !important; } .kmoove-help-banner .help-text { font-size: 13px !important; color: var(--kmoove-ink-4) !important; } /* ── 5. LE BOUTON FLOTTANT SE FAIT OUBLIER ───────────────────────────── */ /* « Suggérer » est utile mais secondaire. En corail plein et en gros, il rivalisait avec le bouton d'action principal, à l'autre bout de l'écran. Il devient une pastille sobre qui reprend sa couleur au survol. */ #suggestFab, [title="Suggérer une amélioration ou signaler un bug"] { background: var(--kmoove-white) !important; color: var(--kmoove-ink-3) !important; border: 1px solid var(--kmoove-cream-3) !important; box-shadow: var(--kmoove-shadow-soft) !important; font-size: 13px !important; padding: 9px 16px !important; } #suggestFab:hover, [title="Suggérer une amélioration ou signaler un bug"]:hover { background: var(--kmoove-coral) !important; color: var(--kmoove-white) !important; border-color: var(--kmoove-coral) !important; } /* ── 6. RESPIRATION GÉNÉRALE ─────────────────────────────────────────── */ /* Le contenu commence plus haut : sur un outil quotidien, chaque pixel gagné au-dessus de la ligne de flottaison est une action rendue visible. */ main.flex-1.overflow-y-auto { padding-top: 26px !important; padding-bottom: 40px !important; } /* ═══════════════════════════════════════════════════════════════════════ 23. ATELIER — l'outil d'un studio, pas un panneau d'administration ═══════════════════════════════════════════════════════════════════════ */ /* DIRECTION (carte blanche, 2026-08-03). Le produit sert à FABRIQUER DES JEUX. Or son interface racontait un logiciel de gestion : tout blanc, tout plat, tout de même poids. Rien ne disait qu'on assemble quelque chose. L'écueil symétrique serait le ludique : couleurs bonbon, coins ronds partout, animations. Ce serait pire — les utilisateurs sont des directeurs et des animateurs qui produisent du matériel pédagogique, pas des joueurs. La voie tenue ici est celle de l'ATELIER : des surfaces qui ont une matière, des objets qui semblent manipulables, de la couleur employée franchement quand elle sert à quelque chose. La référence n'est pas un jeu, c'est un établi bien rangé. Trois principes appliqués partout : · LA MATIÈRE AVANT L'ORNEMENT — un fond crème légèrement plus soutenu et des surfaces blanches franches. Le contraste entre les deux fait exister les objets, sans une seule bordure supplémentaire. · LA COULEUR SIGNIFIE — corail pour ce qu'on déclenche, teal pour ce qui est acquis, violet pour ce qu'on personnalise. Jamais pour décorer. · LES CHOSES ONT UNE ÉPAISSEUR — bordure marquée en bas des éléments qu'on presse, comme un objet posé sur une table. C'est ce qui donne envie de cliquer. */ /* ── LE PLAN DE TRAVAIL ──────────────────────────────────────────────── */ /* Fond légèrement plus soutenu : les surfaces blanches y gagnent en présence sans qu'on ait à leur ajouter des ombres. Le contraste fait le travail. */ body.bg-slate-50, body.kmoove-body { background-color: #F6F1E9 !important; } /* ── LA BARRE LATÉRALE PREND CORPS ───────────────────────────────────── */ /* Elle était d'un blanc identique aux cartes : la structure et le contenu se confondaient. Teintée, elle devient le bâti de l'atelier — et tout ce qui est blanc devient, par contraste, une chose sur laquelle on travaille. */ /* ⚠️ La teinte doit être NETTEMENT plus soutenue que le plan de travail. Premier essai : `--kmoove-cream-2` (#F4EDE0) sur un fond #F6F1E9 — deux points d'écart. La règle s'appliquait parfaitement et ne se voyait pas. Mesuré au navigateur, pas jugé à l'œil : sur des teintes proches, la capture d'écran ment autant que l'intuition. */ aside#sidebar, aside.w-\[220px\], aside.sidebar { background-color: #EDE3D2 !important; border-right: 1px solid #D8C9B0 !important; } /* L'élément actif devient un jeton plein : on sait où l'on est d'un coup d'œil, au lieu de chercher une teinte pâle parmi six lignes grises. */ aside nav a.bg-violet-50, aside .sidebar-nav a.active { background-color: var(--kmoove-coral) !important; color: var(--kmoove-white) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(153, 60, 29, 0.28), 0 2px 8px rgba(153, 60, 29, 0.16); } aside nav a.bg-violet-50 i, aside nav a.bg-violet-50 svg { color: var(--kmoove-white) !important; } aside nav a:not(.bg-violet-50):hover { background-color: rgba(255, 255, 255, 0.7) !important; } /* ── LES SURFACES DE TRAVAIL ─────────────────────────────────────────── */ .bg-white.rounded-xl, .bg-white.rounded-2xl, .game-card, .mode-card { border: 1px solid #E6DAC6 !important; } /* ── CE QU'ON PRESSE A UNE ÉPAISSEUR ─────────────────────────────────── */ /* Une bordure basse plus sombre que le fond du bouton : l'objet paraît avoir un flanc, donc une épaisseur, donc une réalité physique. À l'appui, le flanc disparaît et l'objet descend — exactement ce que fait une touche. C'est le seul emprunt franc au vocabulaire du jeu, et il est fonctionnel : il rend l'état pressé lisible sans animation. */ button.bg-violet-600, a.bg-violet-600, .bg-violet-600.rounded-xl, .bg-violet-600.rounded-lg, #phraseGo { border-bottom: 2px solid var(--kmoove-coral-dark) !important; font-weight: 600 !important; } button.bg-violet-600:active, a.bg-violet-600:active, #phraseGo:active { border-bottom-width: 1px !important; transform: translateY(1px); } /* ── LES JETONS DE SECTION ───────────────────────────────────────────── */ /* Les petites capitales (« LE PLUS RAPIDE », « NOUVEAU — PROTOTYPE ») étaient du texte gris parmi du texte gris. Un point coloré en tête suffit à les transformer en repères : l'œil saute de point en point pour parcourir la page, au lieu de tout relire. */ .mode-card-tag::before, .kmoove-tag::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 2px; opacity: 0.85; } /* ── LES PASTILLES D'ICÔNE S'ASSUMENT ────────────────────────────────── */ /* Elles étaient si pâles qu'on ne distinguait plus l'icône. Un fond franc et une icône blanche : chaque carte devient identifiable à sa couleur avant même d'être lue. C'est ce qui rend une grille de douze formats parcourable. */ .mode-card-icon.coral { background: var(--kmoove-coral) !important; } .mode-card-icon.purple { background: var(--kmoove-purple) !important; } .mode-card-icon.teal { background: var(--kmoove-teal) !important; } .mode-card-icon i, .mode-card-icon svg { color: var(--kmoove-white) !important; } /* ── LES CHAMPS DE SAISIE SONT DES ZONES, PAS DES LIGNES ─────────────── */ input.bg-slate-50, textarea.bg-slate-50, select.bg-slate-50, input[type="text"], input[type="email"], input[type="search"], textarea { background-color: var(--kmoove-white) !important; border: 1px solid #DFD2BC !important; border-radius: 10px !important; } /* ── LES BADGES DEVIENNENT DES ÉTIQUETTES ────────────────────────────── */ .badge-dispo, .badge-bientot, .badge-dev, .kmoove-tag { border-radius: 999px; font-weight: 600; } /* ── LA BARRE DU HAUT SE DÉTACHE DU PLAN DE TRAVAIL ──────────────────── */ .bg-white\/95 { background-color: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid #DFD2BC !important; backdrop-filter: saturate(1.2) blur(8px); } /* ── LES CARTES DE JEU DEVIENNENT DES PIÈCES ─────────────────────────── */ /* Le seul endroit où l'on peut aller un peu plus loin sans trahir le sérieux : la grille des formats de jeu. Ce sont littéralement les pièces du catalogue. Un léger redressement au survol suffit à le suggérer. */ .game-card { border-radius: 14px !important; } .game-card:hover:not(.opacity-55) { border-color: var(--kmoove-coral) !important; } /* ── LA CARTE RECOMMANDÉE PORTE SA COULEUR EN TÊTE ───────────────────── */ /* Remplace le contour corail de la passe précédente : un filet horizontal en haut de carte se lit plus vite qu'une bordure sur les quatre côtés, et ne fait pas passer la carte pour un champ sélectionné. */ .mode-card:nth-child(1) { border-color: #E6DAC6 !important; border-top: 3px solid var(--kmoove-coral) !important; padding-top: 16px !important; } /* ═══════════════════════════════════════════════════════════════════════ 24. PALETTE PÉTROLE — le teal profond devient la couleur d'action ═══════════════════════════════════════════════════════════════════════ */ /* DEMANDE UTILISATEUR (2026-08-03), sur maquette. Il est designer : la direction vient de lui, l'exécution de moi. CE QUI CHANGE DE RÔLE, ET POURQUOI ÇA COMPTE : Le corail était la couleur d'ACTION — boutons, onglet actif, tout ce qu'on déclenche. Employé partout, il perdait sa fonction : quand tout est saillant, rien ne l'est. Et un orange soutenu sur chaque bouton d'un outil professionnel pousse en permanence, ce qui fatigue à la longue. Le pétrole prend ce rôle. C'est une couleur qui AFFIRME sans presser : elle porte l'autorité sans l'urgence. Le corail redevient ce qu'il aurait dû rester — un accent parmi quatre, réservé à un domaine. LES QUATRE ACCENTS DEVIENNENT SÉMANTIQUES, un par univers : pétrole → bien-vivre et santé violet → handicap et inclusion corail → autisme et TSA ambre → éducation C'est le vrai gain de cette maquette : la couleur cesse de décorer pour devenir une clé de lecture. Un utilisateur qui connaît le code repère son domaine avant d'avoir lu un mot. ⚠️ Cette section vient EN DERNIER et l'emporte volontairement sur les sections 3, 4 et 23. On ne réécrit pas l'historique : les décisions passées restent lisibles, avec leur raison, et celle-ci les révise en connaissance de cause. Voir docs/DECISIONS.md. */ :root { /* ── LA COULEUR D'ACTION ─────────────────────────────── */ --kmoove-petrol: #12524D; --kmoove-petrol-dark: #0B3B37; --kmoove-petrol-light: #E1EFEC; /* ── LES QUATRE ACCENTS D'UNIVERS ────────────────────── */ --kmoove-accent-sante: #12524D; /* bien-vivre, santé */ --kmoove-accent-handicap: #5B4FC9; /* handicap, inclusion */ --kmoove-accent-autisme: #D4562A; /* autisme, TSA */ --kmoove-accent-educ: #E2991A; /* éducation */ --kmoove-accent-sante-pale: #E1EFEC; --kmoove-accent-handicap-pale: #EAE7FB; --kmoove-accent-autisme-pale: #FAE6DD; --kmoove-accent-educ-pale: #FBF0D8; /* ── FONDS ─────────────────────────────────────────────── Fond neutre et clair, très légèrement chaud. Le crème soutenu de la section 23 tirait vers le beige ; ici les surfaces blanches ressortent par leur propre franchise, sans que le fond ait à se teinter. */ --kmoove-cream: #F7F5F2; --kmoove-cream-2: #F1EEE9; --kmoove-cream-3: #E4E0DA; /* Encres légèrement refroidies, pour s'accorder au pétrole. */ --kmoove-ink: #1A1F1E; --kmoove-ink-2: #3A4341; --kmoove-ink-3: #5D6866; --kmoove-ink-4: #8A9391; /* Ombres neutres : une ombre brune sur un fond neutre paraît sale. */ --kmoove-shadow-pose: 0 1px 2px rgba(20, 28, 27, 0.05); --kmoove-shadow-soft: 0 1px 2px rgba(20, 28, 27, 0.05), 0 3px 8px rgba(20, 28, 27, 0.04); --kmoove-shadow-card: 0 1px 2px rgba(20, 28, 27, 0.05), 0 8px 20px -6px rgba(20, 28, 27, 0.07); --kmoove-shadow-hover: 0 2px 4px rgba(20, 28, 27, 0.06), 0 14px 32px -10px rgba(20, 28, 27, 0.13); --kmoove-shadow-haut: 0 4px 8px rgba(20, 28, 27, 0.06), 0 28px 64px -16px rgba(20, 28, 27, 0.20); } /* ── LE BÂTI REDEVIENT BLANC ─────────────────────────────────────────── */ /* La section 23 teintait la barre latérale pour la distinguer d'un fond blanc. Le fond n'étant plus blanc mais neutre, c'est l'inverse qui se produit : le blanc de la barre la détache naturellement. Une décision n'est jamais bonne dans l'absolu, seulement par rapport à ce qui l'entoure. */ aside#sidebar, aside.w-\[220px\], aside.sidebar { background-color: var(--kmoove-white) !important; border-right: 1px solid var(--kmoove-cream-3) !important; } /* L'onglet actif : jeton pétrole plein. */ aside nav a.bg-violet-50, aside .sidebar-nav a.active { background-color: var(--kmoove-petrol) !important; color: var(--kmoove-white) !important; box-shadow: 0 1px 2px rgba(11, 59, 55, 0.24), 0 4px 12px -2px rgba(11, 59, 55, 0.20); } aside nav a:not(.bg-violet-50):hover { background-color: var(--kmoove-cream-2) !important; } /* ── L'ACTION PASSE AU PÉTROLE ───────────────────────────────────────── */ .bg-violet-600, button.bg-violet-600, a.bg-violet-600, .bg-violet-600.rounded-xl, .bg-violet-600.rounded-lg, #phraseGo, .bg-\[color\:var\(--kmoove-coral\)\] { background-color: var(--kmoove-petrol) !important; border-bottom-color: var(--kmoove-petrol-dark) !important; } .bg-violet-700, button.bg-violet-600:hover, a.bg-violet-600:hover, #phraseGo:hover:not(:disabled), .hover\:bg-violet-700:hover, .active\:bg-violet-800:active { background-color: var(--kmoove-petrol-dark) !important; box-shadow: 0 4px 12px rgba(11, 59, 55, 0.24) !important; } .bg-violet-50, .bg-violet-100, .hover\:bg-violet-50:hover, .hover\:bg-violet-100:hover { background-color: var(--kmoove-petrol-light) !important; } .text-violet-500, .text-violet-600 { color: var(--kmoove-petrol) !important; } .text-violet-700, .hover\:text-violet-700:hover { color: var(--kmoove-petrol-dark) !important; } .border-violet-200, .hover\:border-violet-200:hover { border-color: #C7DDD8 !important; } .border-violet-300, .hover\:border-violet-300:hover { border-color: #A9CCC6 !important; } .border-violet-400, .border-violet-500, .hover\:border-violet-400:hover, .focus\:border-violet-400:focus, .focus\:border-violet-500:focus { border-color: var(--kmoove-petrol) !important; } .focus\:ring-violet-100:focus, .ring-violet-100 { --tw-ring-color: var(--kmoove-petrol-light) !important; } .shadow-violet-200 { box-shadow: 0 2px 8px rgba(18, 82, 77, 0.20) !important; } /* Focus, curseur et sélection suivent la couleur d'action. */ :focus-visible { outline-color: var(--kmoove-petrol) !important; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--kmoove-petrol) !important; border-color: var(--kmoove-petrol) !important; box-shadow: 0 0 0 4px rgba(18, 82, 77, 0.10); } input, textarea { caret-color: var(--kmoove-petrol); } ::selection { background: rgba(18, 82, 77, 0.14); color: var(--kmoove-ink); } ::-moz-selection { background: rgba(18, 82, 77, 0.14); color: var(--kmoove-ink); } /* ── LES PASTILLES D'UNIVERS ─────────────────────────────────────────── */ .mode-card-icon.coral { background: var(--kmoove-accent-autisme) !important; } .mode-card-icon.purple { background: var(--kmoove-accent-handicap) !important; } .mode-card-icon.teal { background: var(--kmoove-accent-sante) !important; } /* Le filet de la carte recommandée suit l'action. */ .mode-card:nth-child(1) { border-top-color: var(--kmoove-petrol) !important; } .mode-card-tag.coral { color: var(--kmoove-accent-autisme) !important; } .game-card:hover:not(.opacity-55) { border-color: var(--kmoove-petrol) !important; } /* Le filet vertical du bloc « une phrase ». */ main.flex-1 > div:has(> label[for="phraseJeu"])::before { background: var(--kmoove-petrol) !important; } /* ── LES SIX TUILES DE CONNEXION PRENNENT LES QUATRE ACCENTS ─────────── */ .bg-gradient-to-br.from-orange-500 { background-image: linear-gradient(140deg, #12524D, #0B3B37) !important; } .bg-gradient-to-br.from-teal-500 { background-image: linear-gradient(140deg, #1A6D66, #12524D) !important; } .bg-gradient-to-br.from-violet-500 { background-image: linear-gradient(140deg, #5B4FC9, #443AA3) !important; } .bg-gradient-to-br.from-blue-500 { background-image: linear-gradient(140deg, #4A3FB0, #362D8A) !important; } .bg-gradient-to-br.from-pink-500 { background-image: linear-gradient(140deg, #D4562A, #A63F1C) !important; } .bg-gradient-to-br.from-emerald-500{ background-image: linear-gradient(140deg, #E2991A, #B87610) !important; } /* Le dégradé de titre suit l'action. */ .kmoove-gradient-text { background: linear-gradient(90deg, var(--kmoove-petrol), var(--kmoove-petrol-dark)) !important; } /* ── L'AIDE ET LE BOUTON FLOTTANT ────────────────────────────────────── */ .kmoove-help-banner .help-icon { background: var(--kmoove-petrol-light) !important; color: var(--kmoove-petrol) !important; } #suggestFab:hover, [title="Suggérer une amélioration ou signaler un bug"]:hover { background: var(--kmoove-petrol) !important; border-color: var(--kmoove-petrol) !important; } /* Liens et pied de page légal. */ #qf-legal-footer a:hover { color: var(--kmoove-petrol) !important; } /* Les pastilles d'icône deviennent rondes, comme sur la maquette : un disque se distingue mieux d'un carré de contenu qu'un carré arrondi. */ .mode-card-icon { border-radius: 50% !important; } /* ── LES LIENS D'ACTION EN STYLE LIGNE ───────────────────────────────── */ /* Plusieurs liens portent `style="color:var(--kmoove-coral)"` directement dans le balisage — « Voir tous les parcours », « Nous écrire ». Un style en ligne l'emporte sur toute feuille : la seule prise est le sélecteur d'attribut. On le prend, plutôt que de modifier 21 pages pour une couleur. Ces liens sont des ACTIONS, pas des accents d'univers : ils suivent donc le pétrole. Le corail reste réservé au domaine « autisme et TSA ». */ a[style*="--kmoove-coral"], [style*="color:var(--kmoove-coral)"] { color: var(--kmoove-petrol) !important; } /* Le jeton d'identité de la barre latérale suit l'action. */ aside .bg-violet-600, aside .rounded-full.bg-violet-600 { background-color: var(--kmoove-petrol) !important; } /* Le bandeau d'aide : sa flèche est une action, pas un ornement. */ .kmoove-help-banner .help-cta { color: var(--kmoove-petrol) !important; } /* ── LE PLAN DE TRAVAIL SUIT LE JETON ────────────────────────────────── */ /* La section 23 avait écrit `#F6F1E9` EN DUR sur le body. Redéfinir le jeton `--kmoove-cream` en §24 ne l'atteignait donc pas : le fond restait crème alors que toute la palette était passée au neutre. Rappel de la règle du projet : une valeur en dur échappe au système et survit à toutes ses évolutions, en silence. Détecté en mesurant la couleur calculée en production, pas en relisant la feuille. */ body.bg-slate-50, body.kmoove-body { background-color: var(--kmoove-cream) !important; } /* ═══════════════════════════════════════════════════════════════════════ 25. UNIFICATION — reconnecter les 11 pages qui contournaient le système ═══════════════════════════════════════════════════════════════════════ */ /* CONSTAT DU 2026-08-03, mesuré : sur 21 pages, **onze redéfinissent la palette dans leur propre `:root`, en hexadécimal codé en dur**. :root { --primary: #D4572A; --bg: #FAF7F2; --text: #2B1F12; … } Cette feuille est présentée depuis des mois comme « la source unique de vérité visuelle ». Elle ne l'était pas : la moitié des pages la court-circuitaient. Changer la charte n'atteignait que l'accueil, la connexion et la communauté — les onze éditeurs, c'est-à-dire là où vos utilisateurs passent l'essentiel de leur temps, restaient à l'ancienne palette. ─── POURQUOI ON NE CORRIGE PAS LES 11 PAGES ──────────────────────────── Modifier onze blocs `