:root { /* Palette "maison de luxe" — ivoire chaud, noir profond, or mat */ --color-bg: #F5F1EA; --color-surface: #FFFFFF; --color-surface-alt: #EFEAE0; --color-text: #201E1B; --color-muted: #7A7266; --color-border: #E4DCC8; --color-primary: #221F1C; --color-primary-light: #D8CBB4; --color-accent: #A9782E; --color-accent-soft: #EFE6D3; --color-hint: #6E5A3D; --color-hint-soft: #F3EEE3; --color-success: #4B6B4E; --color-danger: #8C3A3A; /* Pastille numerotee des questions, dans le style des manuels de lycee professionnel */ --color-question-badge-bg: rgb(216, 40, 69); --color-question-badge-fg: #d1f7c4; /* Accent + fond doux du bloc situation (titre, aplats de gabarit), repris tels quels du gabarit de reference fourni */ --color-situation-accent: #53195D; --color-situation-box: #E0C4F4; /* Pastille numerotee du bloc titre d'activite, meme accent que le bloc situation (couleur identique dans le gabarit de reference) */ --color-activity-badge: #CF91D8; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Jost', 'Segoe UI', sans-serif; /* Repli defensif pour le texte de PAGE (voir editor.css:.page-sheet et export_pdf.html:.page-print, qui redefinissent les 3 variables ci-dessous en style inline par activite — Activite.police_defaut/taille_police_defaut/ couleur_texte_defaut) — jamais utilise directement pour l'UI de l'editeur lui-meme, seulement comme valeur de repli si jamais l'une de ces 2 regles venait a manquer. */ --default-font-size: 16px; --default-text-color: var(--color-text); --tracking-wide: 0.09em; --page-width: 794px; --page-height: 1123px; /* 8mm a l'echelle du gabarit A4 ci-dessus (~3.78px/mm) — doit rester en phase avec MARGIN dans canvas.js, qui l'utilise pour l'accrochage des blocs. */ --page-margin: 30px; } /* Palettes de couleurs par activite (voir Activite.palette, apps/courses/models.py) — chacune ne redefinit QUE les 7 variables ci-dessus deja scopees aux blocs de contenu "de page" (titre, pastille de question/QCM, bloc situation, bloc coup de pouce) : --color-situation-accent/--color-situation-box/--color-activity-badge/ --color-question-badge-bg/--color-question-badge-fg/--color-hint/--color-hint-soft. Ne touche jamais --color-accent/--color-primary/etc. (chrome de l'editeur — boutons, sidebar, focus rings), qui doivent rester identiques quelle que soit la palette choisie. Appliquee via une classe body.palette- : voir canvas.js (editeur, lu depuis window.BELACT_PALETTE puis change en direct au choix) et export_pdf.html (rendu statique, la classe est posee directement sur cote serveur). Aucun fichier consommateur de ces 7 variables (blocks-shared.css, editor.css, export_pdf.html) n'a besoin d'etre modifie : ils lisent deja var(--color-...), la cascade CSS fait le reste des que la classe change la valeur en amont. "classique" reprend exactement les valeurs :root ci-dessus — comportement inchange pour toute activite existante (Activite.palette vaut 'classique' par defaut). */ .palette-classique { --color-situation-accent: #53195D; --color-situation-box: #E0C4F4; --color-activity-badge: #CF91D8; --color-question-badge-bg: rgb(216, 40, 69); --color-question-badge-fg: #d1f7c4; --color-hint: #6E5A3D; --color-hint-soft: #F3EEE3; } .palette-ocean { --color-situation-accent: #1B4F72; --color-situation-box: #D6EAF8; --color-activity-badge: #85C1E9; --color-question-badge-bg: #1F6F78; --color-question-badge-fg: #E8F8F5; --color-hint: #2E4053; --color-hint-soft: #EAF2F8; } .palette-foret { --color-situation-accent: #1E5631; --color-situation-box: #D5EDDB; --color-activity-badge: #8FCB9B; --color-question-badge-bg: #B5651D; --color-question-badge-fg: #FDF2E3; --color-hint: #4A3B2A; --color-hint-soft: #F1E7D8; } .palette-corail { --color-situation-accent: #B94A48; --color-situation-box: #FBD9D3; --color-activity-badge: #F2A488; --color-question-badge-bg: #B8651F; --color-question-badge-fg: #FFF5E6; --color-hint: #7A4426; --color-hint-soft: #FBEDE2; } .palette-ardoise { --color-situation-accent: #263238; --color-situation-box: #D6DEE1; --color-activity-badge: #B0BEC5; --color-question-badge-bg: #455A64; --color-question-badge-fg: #ECEFF1; --color-hint: #37474F; --color-hint-soft: #ECEFF1; } /* Les 5 suivantes (Poudre -> Argile) elargissent l'eventail au-dela des 5 premieres, plutot sobres/professionnelles — demande explicite d'inclure aussi bien des tons tres doux (Poudre, Argile : pour les enseignants qui n'aiment pas les couleurs "nouvelle generation") que des combinaisons nettement plus modernes/oses (Aurore, Agrumes), plutot qu'une seule sensibilite esthetique pour les 10. --color-situation-accent reste toujours un hex plein (jamais rgba) sur les 10 palettes, jamais une exception : c'est aussi la couleur de TEXTE de .activite_header_title/.block-situation__titre (voir blocks-shared.css), donc doit rester assez sombre pour rester lisible sur fond blanc quelle que soit l'ambiance generale de la palette — et c'est la seule des 7 variables lue par canvas.js:resolvePaletteColor pour pre-remplir un , qui n'accepte qu'un hex strict #RRGGBB, jamais rgba(). */ .palette-poudre { --color-situation-accent: #9C6B7E; --color-situation-box: #F7EDF1; --color-activity-badge: #F0DCE4; --color-question-badge-bg: #C98FA3; --color-question-badge-fg: #FFF8FA; --color-hint: #8A6070; --color-hint-soft: #F9F2F4; } /* "Transparente" (demande explicite) interpretee comme un effet verre depoli (glassmorphism, tendance actuelle) plutot qu'une transparence totale litterale : .activity-title__number est POSITIONNEE A L'INTERIEUR du bandeau colore (.activity-title, voir blocks-shared.css) et partage sa couleur de texte avec --color-situation-accent — un fond de pastille reellement invisible (`transparent`) aurait rendu son chiffre illisible (texte de la meme couleur que ce qu'il y a derriere). A la place : des fonds tres subtils en rgba() (6-10% d'opacite) sur les grands aplats (encart, fond du coup de pouce) qui, eux, reposent sur la page blanche, et la pastille de question (--color-question-badge-bg) reste assez opaque (82%) pour rester un repere visuel clair — un "verre" qui reste fonctionnel, pas un vide. --color-activity-badge est le seul des 7 roles qui se superpose a un fond SOMBRE (le bandeau du titre, --color-situation-accent) plutot qu'a la page blanche : un recouvrement sombre-sur-sombre a faible opacite (essaye en premier, corrige apres verification visuelle) rendait le chiffre de la pastille quasi invisible, son texte utilisant la meme --color-situation-accent que ce qu'il y a juste en dessous. Corrige avec un verre depoli BLANC (rgba(255,255,255,0.75)) plutot qu'un recouvrement de la meme teinte — le vrai reflexe glassmorphism sur une surface sombre, et ca redonne un contraste net au texte sombre de la pastille. */ .palette-cristal { --color-situation-accent: #34495E; --color-situation-box: rgba(52, 73, 94, 0.10); --color-activity-badge: rgba(255, 255, 255, 0.75); --color-question-badge-bg: rgba(52, 73, 94, 0.82); --color-question-badge-fg: #FFFFFF; --color-hint: #34495E; --color-hint-soft: rgba(52, 73, 94, 0.06); } .palette-aurore { --color-situation-accent: #6D28D9; --color-situation-box: #EDE4FB; --color-activity-badge: #D8B4FE; --color-question-badge-bg: #C0257D; --color-question-badge-fg: #FDF2F8; --color-hint: #5B21B6; --color-hint-soft: #F3E8FF; } .palette-agrumes { --color-situation-accent: #C2410C; --color-situation-box: #FFEDD5; --color-activity-badge: #FED7AA; --color-question-badge-bg: #4D7C0F; --color-question-badge-fg: #F7FEE7; --color-hint: #9A3412; --color-hint-soft: #FFF7ED; } .palette-argile { --color-situation-accent: #7C2D12; --color-situation-box: #FDE8D8; --color-activity-badge: #FBCBA0; --color-question-badge-bg: #57534E; --color-question-badge-fg: #FAFAF9; --color-hint: #6B2510; --color-hint-soft: #FEF3E7; } /* "Encre" — VRAIMENT transparente (contrairement a `cristal`, une interpretation glassmorphism) : aucun aplat colore nulle part, texte noir/quasi-noir par defaut, demande explicite distincte de "cristal". --color-question-badge-fg vaut aussi #1A1A1A ici (jamais blanc, contrairement aux 10 autres palettes) puisque la pastille de question n'a elle-meme plus aucun fond opaque pour faire ressortir un texte clair. Un fond transparent seul aurait fait DISPARAITRE plusieurs formes qui n'ont jamais eu besoin de contour (le bandeau du titre, les deux pastilles) — voir les regles supplementaires .palette-encre-* ci-dessous (dans blocks-shared.css, pas ici : ce fichier ne definit QUE des variables, jamais de selecteur d'element) qui leur donnent un fin contour pour rester des reperes visuels definis plutot que de s'evanouir. */ .palette-encre { --color-situation-accent: #1A1A1A; --color-situation-box: transparent; --color-activity-badge: transparent; --color-question-badge-bg: transparent; --color-question-badge-fg: #1A1A1A; --color-hint: #1A1A1A; --color-hint-soft: transparent; }