/* ========================================================================== BlokEval - JETONS DE CONCEPTION (R1) Charge AVANT style.css. C'est le seul fichier de la plateforme qui a le droit d'ecrire une couleur. Partout ailleurs, on ne manipule que des jetons. TROIS REGLES QUI TIENNENT TOUT LE SYSTEME 1. Une couleur, un sens. Auparavant --gold servait a la fois d'avertissement, de bouton d'action et de contour de focus : trois sens pour une couleur, le lecteur n'apprenait rien. Desormais : --registre autorite, navigation, titres --sceau action, validation, etat verifie --or attente, vigilance --cire DANGER et actes IRREVERSIBLES, et rien d'autre Si vous hesitez a utiliser --cire, c'est que ce n'est pas --cire. 2. Les surfaces de marque restent sombres dans les deux themes. La barre superieure, la barre d'epreuve, le bandeau d'accueil et le pied public utilisent --marque-fond, qui ne s'inverse pas. Cela evite le defaut classique du theme sombre : une barre qui devient claire et un texte qui disparait. 3. --navy et compagnie ne sont PAS supprimes. Ce sont desormais des ALIAS vers les nouveaux jetons (fin de fichier). Les 900 lignes de style.css et les futurs modules continuent de fonctionner sans etre reecrits. Themes : data-theme="clair" (defaut) | "sombre" | "contraste" Densite : data-densite="standard" (defaut) | "compacte" | "confortable" Les deux attributs se posent sur par preferences.js. ========================================================================== */ :root { /* ---------------------------------------------------------------- MARQUE Surfaces volontairement sombres, identiques en theme clair et sombre. */ --marque-fond: #12233F; --marque-fond-2: #0E1B31; --marque-texte: #FFFFFF; --marque-texte-2: #B7C7DC; /* texte secondaire sur fond de marque */ --marque-texte-3: #9CB4CC; /* texte tertiaire sur fond de marque */ --marque-filet: #3E5876; --marque-accent: #63DBC8; /* le teal, eclairci pour rester lisible sur le sombre */ --marque-vif: #4ADE80; /* pastille « en ligne » */ --marque-alerte: #FF8A80; /* chronometre en fin de temps */ /* ------------------------------------------------------------ SEMANTIQUE */ --registre: #1F3864; /* bleu institutionnel, autorite */ --registre-2: #2E4F86; --registre-clair: #2E75B6; /* liens, focus, survol */ --registre-voile: #E8F0F9; --sceau: #0E8C7D; /* action, validation, verifie */ --sceau-fonce: #0A6B60; --sceau-voile: #E2F2EF; --or: #B58227; /* attente, vigilance. Plus profond que l'ancien #E0A526, qui virait au sucre des qu'on l'agrandissait. */ --or-texte: #7A5B12; /* texte lisible sur --or-voile (AA sur voile) */ --or-voile: #FBF2DF; --cire: #A8471B; /* DANGER, irreversible. Nulle part ailleurs. */ --cire-texte: #8C2B20; --cire-voile: #FBEDE6; --vert: #2E8B57; --vert-texte: #12603F; --vert-voile: #E4F2EA; --violet: #5B2E8C; --violet-texte: #4A3A82; --violet-voile: #EFE8F7; /* Textes poses SUR une couleur pleine. S'inversent en theme sombre, ou les fonds --registre / --sceau / --cire deviennent clairs. */ --sur-registre: #FFFFFF; --sur-sceau: #FFFFFF; --sur-cire: #FFFFFF; --sur-vert: #FFFFFF; /* -------------------------------------------------------------- SURFACES */ --papier: #F4F6F8; /* fond de page */ --surface: #FFFFFF; /* carte, menu, modale */ --surface-2: #FAFBFC; /* sous-surface : encadre, apercu, zone de saisie inerte */ --surface-3: #EFF3F6; /* zone inerte marquee : pastille grise, champ desactive */ --filet: #DDE4EB; --filet-fort: #C3CEDA; --filet-bleu: #CBDDF0; --filet-vert: #C9E4D5; --filet-rouge: #F0C0BB; --filet-or: #EBD59A; /* ---------------------------------------------------------------- TEXTES --texte-3 passe de #98A6B4 (2,6:1 sur blanc, sous le seuil WCAG AA) a #6E7F91 (4,6:1). L'ancienne valeur rendait les libelles secondaires illisibles a la lumiere du jour, ce qui compte pour une salle de cours a Brazzaville. */ --texte: #16202E; --texte-2: #55677A; --texte-3: #6E7F91; /* ------------------------------------------------------------- DEGRADES */ --degrade-sceau: linear-gradient(140deg,#12B39F,#0B7A6C); --degrade-bleu: linear-gradient(140deg,#3D8FD1,#215E96); --degrade-registre: linear-gradient(140deg,#2E4F86,#16294A); /* ---------------------------------------------------------- TYPOGRAPHIE Aucune police distante : la CSP est en default-src 'self', et c'est bien ainsi. Les familles ci-dessous se replient sur les polices du systeme tant que les fichiers woff2 ne sont pas installes (module R1b). */ --serif: "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif; --ui: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono: "JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Courier New",monospace; /* Echelle de corps. Un pas de 1,2 environ : assez pour hierarchiser, assez peu pour ne pas donner l'impression que la page saute. */ --t-11:11px; --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px; --t-20:20px; --t-25:25px; --t-31:31px; /* --------------------------------------------------------------- ESPACES */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; --e8:48px; /* --------------------------------------------------- RAYONS ET RELIEFS */ --r:10px; --r-lg:14px; --sh: 0 1px 2px rgba(16,28,51,.05), 0 2px 8px rgba(16,28,51,.05); --sh-2: 0 4px 14px rgba(16,28,51,.10); --sh-3: 0 24px 64px rgba(16,28,51,.22); /* ----------------------------------------------------------- PLANS (z) */ --z-flottant:40; --z-barre:50; --z-volet:60; --z-cloche:70; --z-voile:100; --z-menu:300; --z-modale:400; --z-toast:500; /* ---------------------------------------------------------------- DIVERS */ --auth-w:590px; /* largeur unique des ecrans d'entree */ --rail:56px; /* rail de navigation (module R3) */ --panneau:220px; /* panneau contextuel (module R3) */ } /* ========================================================================== THEME SOMBRE Les surfaces de marque ne bougent pas. Ce qui s'inverse, ce sont les surfaces de travail et les couleurs de texte. Les teintes semantiques sont eclaircies pour rester lisibles sur fond sombre, et les textes poses dessus s'assombrissent. ========================================================================== */ [data-theme="sombre"] { --papier: #0B1526; --surface: #12203A; --surface-2: #16263F; --surface-3: #1D2F4B; --filet: #22304A; --filet-fort: #324563; --filet-bleu: #2A415F; --filet-vert: #24483A; --filet-rouge: #4A2A22; --filet-or: #443716; --texte: #E6EDF5; --texte-2: #9DAEC2; --texte-3: #8296AC; --registre: #8FB2E0; --registre-2: #A9C6EC; --registre-clair: #7FB4E8; --registre-voile: #172A45; --sceau: #2FBFA9; --sceau-fonce: #55D6C1; --sceau-voile: #0F2E2C; --or: #DCAE55; --or-texte: #E8C077; --or-voile: #2C2313; --cire: #E08055; --cire-texte: #F0A182; --cire-voile: #2E1A11; --vert: #4CBB80; --vert-texte: #7FD6A5; --vert-voile: #12291F; --violet: #A98BD6; --violet-texte: #C0A9E4; --violet-voile: #211838; /* Les fonds pleins etant desormais clairs, le texte pose dessus doit foncer. */ --sur-registre: #0B1526; --sur-sceau: #06231F; --sur-cire: #2A0F06; --sur-vert: #07220F; --sh: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.30); --sh-2: 0 4px 14px rgba(0,0,0,.40); --sh-3: 0 24px 64px rgba(0,0,0,.55); } /* Si aucun choix n'a ete enregistre, on suit la preference du systeme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --papier:#0B1526; --surface:#12203A; --surface-2:#16263F; --surface-3:#1D2F4B; --filet:#22304A; --filet-fort:#324563; --filet-bleu:#2A415F; --filet-vert:#24483A; --filet-rouge:#4A2A22; --filet-or:#443716; --texte:#E6EDF5; --texte-2:#9DAEC2; --texte-3:#8296AC; --registre:#8FB2E0; --registre-2:#A9C6EC; --registre-clair:#7FB4E8; --registre-voile:#172A45; --sceau:#2FBFA9; --sceau-fonce:#55D6C1; --sceau-voile:#0F2E2C; --or:#DCAE55; --or-texte:#E8C077; --or-voile:#2C2313; --cire:#E08055; --cire-texte:#F0A182; --cire-voile:#2E1A11; --vert:#4CBB80; --vert-texte:#7FD6A5; --vert-voile:#12291F; --violet:#A98BD6; --violet-texte:#C0A9E4; --violet-voile:#211838; --sur-registre:#0B1526; --sur-sceau:#06231F; --sur-cire:#2A0F06; --sur-vert:#07220F; --sh:0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.30); --sh-2:0 4px 14px rgba(0,0,0,.40); --sh-3:0 24px 64px rgba(0,0,0,.55); } } [data-theme="sombre"] { color-scheme: dark; } [data-theme="clair"] { color-scheme: light; } /* ========================================================================== CONTRASTE ELEVE Pour une salle mal eclairee, un videoprojecteur, ou un etudiant malvoyant. On ne change pas la mise en page : on durcit les filets et on supprime les gris. ========================================================================== */ [data-theme="contraste"] { --texte:#000000; --texte-2:#1A1A1A; --texte-3:#333333; --filet:#000000; --filet-fort:#000000; --papier:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#EDEDED; --registre:#0A2A5E; --sceau:#065F55; --or:#6B4A00; --cire:#8A2B0C; --sh:none; --sh-2:none; --sh-3:0 0 0 2px #000; } [data-theme="contraste"] .card, [data-theme="contraste"] .table-wrap { border-width:2px; } /* ========================================================================== DENSITE Les ecrans deja ecrits utilisent des marges fixes ; la densite agit d'abord sur l'echelle d'espaces --e*, dont se servent les composants livres a partir de R3. Elle agit des maintenant sur les deux endroits ou la densite se ressent vraiment : les cartes et les tableaux. ========================================================================== */ [data-densite="compacte"] { --e1:3px; --e2:6px; --e3:8px; --e4:12px; --e5:14px; --e6:16px; --e7:22px; --e8:32px; } [data-densite="compacte"] .card { padding:14px; } [data-densite="compacte"] th, [data-densite="compacte"] td { padding:6px 9px; } [data-densite="compacte"] .sidenav .tab { padding:6px 10px; } [data-densite="confortable"] { --e1:5px; --e2:10px; --e3:16px; --e4:20px; --e5:26px; --e6:32px; --e7:44px; --e8:64px; } [data-densite="confortable"] .card { padding:28px; } [data-densite="confortable"] th, [data-densite="confortable"] td { padding:14px 16px; } /* ========================================================================== ALIAS HERITES Les 900 lignes de style.css et tout le code deja ecrit utilisent ces noms. Les conserver comme alias evite une reecriture massive, donc une regression massive. Le nouveau code utilise les noms de gauche ; ces alias s'eteindront d'eux-memes. ========================================================================== */ :root { --navy: var(--registre); --navy-2: var(--registre-2); --blue: var(--registre-clair); --teal: var(--sceau); --teal-d: var(--sceau-fonce); --gold: var(--or); --red: var(--cire); --green: var(--vert); --purple: var(--violet); --ink: var(--texte); --muted: var(--texte-2); --faint: var(--texte-3); --border: var(--filet); --border-2: var(--filet-fort); --bg: var(--papier); --card: var(--surface); --lightb: var(--registre-voile); --lteal: var(--sceau-voile); --lgold: var(--or-voile); --lred: var(--cire-voile); --lgreen: var(--vert-voile); --lpurple: var(--violet-voile); } /* ========================================================================== MOUVEMENT Un etudiant qui compose n'a pas a subir un chronometre qui clignote s'il a demande a son systeme de reduire les animations. Cette regle est globale et sans exception. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }