/* ========================================================= THOMATHS — TOKENS (couleurs, formes, typographie) ========================================================= SEUL fichier à modifier pour changer le thème ou les couleurs. Aucune règle de layout ici : uniquement des variables CSS. Tout le reste du CSS (base.css, theme.css, editable.css, form.css, nav.css…) ne doit JAMAIS coder une couleur en dur : toujours passer par var(--nom-du-token). Pour créer un futur thème clair : dupliquer ce fichier en theme-light.css avec les mêmes noms de variables sous [data-theme="light"] { ... }, puis le charger conditionnellement dans base.html. La structure (layout, composants) n'a rien à changer. ========================================================= */ :root { /* ---------- Fonds (3 niveaux + puits) ---------- Palette bleu-ardoise unifiée (une seule famille de gris, teintée vers l'accent plutôt que neutre) : identité "Blue Slate" cohérente du fond aux cartes, au lieu du gris plat + accents disparates. --bg-top/--bg forment un léger dégradé vertical de fond de page (voir body dans theme.css) au lieu d'un noir uniforme plat. */ --bg-top: #101726; /* fond de page — haut */ --bg: #0d111b; /* fond de page — bas */ --bg-elev: #121826; /* header, panneaux, navbar */ --surface: #161d2d; /* cards, blocs de contenu */ --surface-2: #1b2437; /* survol / imbriqué */ --surface-3: #262f42; /* actif / sélectionné */ --inset: #0a0d15; /* puits (blocs de code, zones creuses) */ /* ---------- Bordures ---------- Volontairement discrètes : la hiérarchie se lit par l'espacement et la typographie, pas par des contours. Légèrement teintées bleu/violet (au lieu d'un gris neutre) pour s'intégrer au thème. */ --border: rgba(125, 138, 255, 0.16); --border-soft: rgba(125, 138, 255, 0.09); /* ---------- Texte ---------- */ --text: #eef1f6; /* texte principal */ --text-muted: #8992a3; /* texte secondaire */ --text-faint: #5c6478; /* texte tertiaire / désactivé — utilisé pour métadonnées, tags, badges discrets */ /* ---------- Accent (actions, liens, nav active, badges UI) ---------- Identité unique bleu-violet : tout le "chrome" applicatif (boutons, badges de type, focus, liens) dérive de cette seule teinte, à distinguer des couleurs sémantiques de contenu pédagogique ci-dessous. */ --accent: #6d7bff; --accent-strong: #5866e8; /* hover / pressed */ --accent-soft: rgba(109, 123, 255, 0.14); --accent-dim: rgba(109, 123, 255, 0.07); --on-accent: #ffffff; /* ---------- Surlignage de recherche (Ctrl+F) ---------- Volontairement hors de la famille accent : le jaune ne se confond avec aucune sélection/état de l'UI, donc les occurrences sautent aux yeux même noyées dans du LaTeX coloré (CodeMirror). */ --find-hit: rgba(255, 214, 0, 0.32); --find-hit-active: rgba(255, 198, 0, 0.6); --on-find-hit: #1a1a00; /* ---------- Échelle d'espacement ---------- À utiliser pour TOUT nouvel espacement (gap/margin/padding) afin que les blocs racontent une hiérarchie cohérente au lieu d'un intervalle uniforme partout. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 20px; --space-5: 32px; --space-6: 48px; /* ---------- Couleurs sémantiques de contenu ----------- Rôle fixe par type de bloc pédagogique — ne jamais les réutiliser pour autre chose (boutons, statuts, etc.), pour que la couleur reste un repère de lecture fiable partout dans l'app (sommaire, sidebar, badges, export). */ --content-definition: #22c55e; --content-definition-bg: rgba(34, 197, 94, 0.08); --content-proposition: var(--accent); --content-proposition-bg: var(--accent-soft); --content-proof: #22c55e; --content-proof-bg: rgba(34, 197, 94, 0.08); --content-exercise: #f97316; --content-exercise-bg: rgba(249, 115, 22, 0.08); /* Exercice dans un document (cours/TD) : violet, distinct de --content-exercise (orange) qui reste utilisé pour les favoris/notes/logo DM ailleurs dans l'app. */ --content-exercise-doc: #8b5cff; --content-exercise-doc-bg: rgba(139, 92, 255, 0.08); /* ---------- Couleurs par type de feuille (calées sur les logos) ---------- */ --kind-cours: #239157; /* vert — logo Cours (calé sur la teinte réelle du PNG, plus foncé que #12b76a) */ --kind-cours-bg: rgba(35, 145, 87, 0.1); --kind-td: #6d28d9; /* violet — logo TD */ --kind-td-bg: rgba(109, 40, 217, 0.1); --kind-resume: #2f7fe0; /* bleu — logo Résumé de cours */ --kind-resume-bg: rgba(47, 127, 224, 0.1); --kind-colle: #14a688; /* teal — logo Colle (badge de contenu, colles notées) */ --kind-colle-bg: rgba(20, 166, 136, 0.1); --kind-programme-colle: #4f9fef; /* bleu — page "Programmes de colles" (nav), distinct du badge Colle */ --kind-programme-colle-bg: rgba(79, 159, 239, 0.1); --kind-oral: #17a2ac; /* teal clair — logo Oral */ --kind-oral-bg: rgba(23, 162, 172, 0.1); --kind-probleme: #6d28d9; /* violet — logo Problèmes (même teinte que TD) */ --kind-probleme-bg: rgba(109, 40, 217, 0.1); --kind-banque: #e0219e; /* rose/magenta — logo Banque d'exercices */ --kind-banque-bg: rgba(224, 33, 158, 0.1); /* DM et DS reprennent --content-exercise / --danger (mêmes teintes orange/rouge que leurs logos) */ /* Thème de la PAGE Devoirs (Σ de la navbar, lien "Devoirs", fil d'Ariane, boutons — cf. devoirs.css). Orange et non rouge : le rouge est déjà --danger, qui signifie « action destructrice », et un thème de page rouge le viderait de son sens. L'orange est en plus la teinte du logo DM, donc cohérent avec le contenu de la page. Token dédié plutôt qu'un renvoi vers --content-exercise : celui-ci est une couleur de CONTENU, que l'en-tête de ce fichier interdit explicitement de réutiliser pour du chrome applicatif. */ --kind-devoirs: #f97316; --kind-devoirs-text: #ff9a4d; /* avivé — #f97316 manque de punch sur --bg-elev en petit texte */ /* Thème de la PAGE Devoirs surveillés (onglet DS de /devoirs/) : rouge dédié, distinct de --danger (#d9534f, « action destructrice ») et de l'orange DM — demande explicite (chaque onglet DM/DS/Colles avec son propre thème de page). Même teinte que l'ancien --devoirs-ds local (devoirs.css), promue ici en token partagé. */ --kind-ds: #e0264d; /* Global (pas seulement scopé à .devoirs-ctx-bar/#doc-devoirs-root comme la redéfinition locale de devoirs.css) : nécessaire au survol de la ligne DS dans la sidebar, qui est HORS de #doc-devoirs-root — sans ce token ici, `var(--devoirs-ds-bg)` y résolvait à rien et le survol ne montrait aucun fond (cf. bug constaté 2026-08-27). */ --devoirs-ds-bg: rgba(224, 38, 77, 0.14); /* Thème de la PAGE Correction. Teinte 282° (violet-orchidée), choisie en cherchant le plus grand trou dans la roue des teintes déjà prises : le plus grand (97°, vert-lime) est illisible sur fond sombre, celui-ci est le suivant. À 19° du violet TD mais nettement plus clair et saturé. Contraste mesuré sur --bg-elev : 4.2 pour la base, 6.1 pour l'avivée. */ --kind-correction: #b44ae0; --kind-correction-text: #cb74ee; /* ---------- Couleurs de domaine (planning annuel) ---------- */ --theme-algebre: #8b5cf6; /* violet */ --theme-algebre-bg: rgba(139, 92, 246, 0.14); --theme-analyse: #3b82f6; /* bleu */ --theme-analyse-bg: rgba(59, 130, 246, 0.14); --theme-proba: #10b981; /* émeraude */ --theme-proba-bg: rgba(16, 185, 129, 0.14); /* ---------- Ocre (session en cours, planning annuel) ---------- */ --ocre: #c9922a; --ocre-bg: rgba(201, 146, 42, 0.28); /* ---------- Couleurs de filière (Sup / Spé) ---------- Volontairement distinctes des couleurs de contenu ci-dessus pour éviter toute confusion visuelle. */ --track-sup: #8b5cff; /* violet — MPSI / PCSI */ --track-sup-bg: rgba(139, 92, 255, 0.14); --track-spe: #3b82f6; /* bleu — MP / PC / PSI */ --track-spe-bg: rgba(59, 130, 246, 0.14); /* ---------- États ---------- */ --danger: #d9534f; --danger-soft: #e5675f; /* rose-rouge, moins agressif que --danger, réservé aux menus contextuels */ --success: #4a9d6e; /* Rouge distinct de --danger, réservé aux erreurs de compilation LaTeX (aperçu Local, blocs latex_engine) */ --latex-error: #e07070; --latex-error-rgb: 224, 112, 112; /* ---------- Difficulté (étoiles) ---------- */ --star: #f5b301; /* ambre */ --star-off: #3a4150; /* étoile vide */ /* ---------- Indication (jaune franc, distinct de l'orange exercice) ---------- */ --hint: #eab308; --hint-bg: rgba(234, 179, 8, 0.08); /* ---------- Énoncé (bleu franc, distinct de --accent réservé au chrome applicatif — même logique que --hint ci-dessus pour l'indication). ---------- */ --statement: #3b82f6; --statement-bg: rgba(59, 130, 246, 0.08); /* ---------- Violet (variantes d'exercices) ---------- Distinct de --content-definition : sémantique différente (relation entre exercices, pas type de contenu de cours). */ --violet: #9d7de8; --violet-soft: rgba(157, 125, 232, 0.14); --violet-dim: rgba(157, 125, 232, 0.06); /* ---------- Blocs sémantiques exercice (énoncé/indice/solution) ---------- Les 6 tokens --statement-bg/bd, --hints-bg/bd et --solution-bg/bd ont été supprimés (2026-08-18) : aucun consommateur, ils décrivaient un rendu abandonné (fond plein coloré). Le rendu actuel vit dans theme.css — fond --surface-2 commun et bordure GAUCHE colorée, la couleur seule portant la sémantique. Seule cette bordure a besoin d'un token. (Ne jamais écrire un nom de token abrégé en "truc-*" suivi d'un slash dans un commentaire CSS : la séquence ferme le commentaire.) */ --content-hint-bd: #c79a4a; /* ambre des indices, plus sourd que --hint */ /* ---------- Largeur globale du site ---------- Désactivé pour l'instant : le calcul introduisait une gouttière asymétrique (visible seulement à droite) sur écran large. Remis à 0 en attendant un correctif propre ; la variable reste en place pour ne pas devoir toucher tous les points d'usage. */ --app-gutter: 0px; /* ---------- Forme ---------- */ --radius: 9px; --radius-sm: 6px; --shadow: 0 2px 10px rgba(0, 0, 0, 0.28); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-glow: 0 4px 20px rgba(109, 123, 255, 0.16); /* ---------- Typographie ---------- Inter et Spectral sont auto-hébergées (cf. fonts.css) : elles sont toujours disponibles, les polices qui suivent ne servent que le temps du tout premier rendu. 'Roboto' a été retirée de --font-body : elle n'est installée sur aucune machine par défaut, et tant qu'elle venait de Google Fonts elle tombait exactement en même temps qu'Inter (même feuille, même display) — elle n'a donc jamais pu jouer son rôle de secours. */ /* ===== TEST EN COURS (2026-08-17) ===== Corps de texte sur la police système (Segoe UI sous Windows) au lieu d'Inter, pour comparer en conditions réelles. Segoe UI a une hauteur d'œil plus basse et des lettres ~10% plus étroites : à taille égale elle paraît plus petite et plus légère. POUR REVENIR À INTER : remettre 'Inter' en tête de --font-body ci-dessous. Rien d'autre à toucher, les fichiers restent en place. Attention, seule cette pile est déterministe car auto-hébergée : Segoe UI dépend de la machine (absente sous macOS/Linux, qui prendront alors leur propre police système). */ --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head: 'Spectral', Georgia, 'Times New Roman', serif; } /* ---------- Repères de breakpoints (référence, non exploitables en CSS) ---------- CSS ne permet pas var() dans une condition @media : ces valeurs sont donc à recopier telles quelles dans chaque composant qui a besoin d'adapter son layout. Centraliser au moins la référence ici pour rester cohérent. --bp-mobile : 640px (téléphone) --bp-tablet : 1024px (tablette / petit laptop) ========================================================= */