/* =========================================================================== Awoui — socle de jetons, deux thèmes. Chargé avant awoui.css / home.css / cours.css. Aucune règle de composant ici : uniquement des valeurs. Les feuilles produit ne déclarent plus de couleur, elles lisent ces jetons (et leurs alias historiques, plus bas). Sombre = défaut (identité de la marque). Clair = quand le système le demande, ou quand l'utilisateur l'a choisi via data-theme sur . Ratios vérifiés : tout texte >= 4.5:1 sur les quatre surfaces du thème, tout bord de contrôle >= 3:1. Cf. la charte graphique. =========================================================================== */ :root{ /* ---- surfaces (loi commune écosystème, 13/07/2026) ---- */ --bg-0:#0A0D16; /* le fond, ce sur quoi tout repose */ --bg-1:#0D1019; /* le chrome : rail, barre du haut, panneaux */ --bg-2:#10141F; /* ce qui porte du contenu : cartes, champs */ --bg-3:#161B28; /* ce qui réagit : survol, élément actif */ /* ---- filets ---- line/line-2 sont décoratifs (exemptés par WCAG 1.4.11). line-strong est le SEUL admis sur un bord qui identifie un contrôle. */ --line:#232A3A; --line-2:#2C3242; --line-strong:#5D6980; /* ---- texte ---- */ --text:#ECEEF5; --muted:#9AA3B6; --faint:#8A93A8; /* était #6C7488 : 4,15:1, sous le seuil AA */ --on-accent:#06130D; /* texte posé SUR un aplat d'accent — valeur d'origine */ /* ---- accents ---- */ /* ---- typographie ---- Native, aucun fichier servi : les @font-face declarent src:local() sans source, le navigateur rend donc la police du poste. Zero octet, aucun swap au chargement, aucun hote tiers dans la CSP. En contrepartie l'empan d'un titre varie d'environ 14 % d'un systeme a l'autre — d'ou le text-wrap:balance sur les titres et les largeurs en ch, jamais en px. */ --fd:"AwouiDisplay","Space Grotesk","SF Pro Display",system-ui,sans-serif; --fb:"AwouiBody","Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; --fm:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,monospace; /* ---- couleurs de MARQUE, jamais retouchees ---- A distinguer des accents ci-dessous : --emerald / --cyan / --iris sont les accents LISIBLES, ils descendent en clair pour tenir 4,5:1. Les --brand-* sont l'identite elle-meme et ne bougent dans aucun theme. A n'employer que la ou la couleur est decorative et ne porte pas de texte : aplat du bouton, mot du heros, anneau des scores. */ --brand-emerald:#3FE0A2; --brand-cyan:#57C8E6; --brand-iris:#8A7CF6; --brand-gold:#E8C565; /* la quatrieme, ajoutee pour le cycle du heros */ /* LES MEMES, EN PROFOND. Quatre tons sombres de la MEME teinte, pour les degrades du cycle : un anneau va de son ton profond a sa couleur de marque et revient. Comme les --brand-*, ils sont declares UNE fois et ne suivent pas le theme — ils peignent un ruban de marque, pas une surface de page. Luminosite ramenee a ~55 % de l'originale, teinte et saturation gardees : c'est un ecart de valeur, jamais un changement de couleur. */ --brand-emerald-deep:#1B8A60; --brand-cyan-deep:#2A7E96; --brand-iris-deep:#4B3FA8; --brand-gold-deep:#9C7C22; --brand-conic:conic-gradient(from 0deg,var(--brand-emerald),var(--brand-cyan) 38%,var(--brand-iris) 68%,var(--brand-emerald)); /* ---- verre pose SUR une image, jamais retouche ---- Une pastille posee sur une CAPTURE ne suit pas le theme : l'image, elle, ne change pas quand le visiteur bascule. Ces valeurs sont donc declarees une seule fois, comme les couleurs de marque — les redeclarer en clair donnerait du blanc sur blanc au-dessus d'une capture d'interface claire. Employees par les points de la section « la console ». */ --on-shot:#ECEEF5; /* texte et chiffres poses sur ce verre */ --on-shot-bg:rgba(10,13,22,.74); --on-shot-line:rgba(255,255,255,.30); --on-shot-glow:rgba(63,224,162,.20); --emerald:#3FE0A2; --cyan:#57C8E6; --iris:#8A7CF6; /* accents propres a la Console : son cyan et son bleu de degrade */ --accent:#26D6E6; --accent-2:#1A9FFF; --accent-grad:linear-gradient(135deg,#2FE9D6,#1A9FFF); --accent-soft:#132D39; --accent-line:#17525F; --accent-3:var(--iris); --ok:#3DDC97; --warn:#FF7A6B; --gold:#E8C565; /* TROIS dégradés, trois emplois. Chacun a une contrainte différente, les confondre casse forcément l'un des trois. --grad filets fins, marques décoratives. Descend en clair, sinon un trait de 3 px en émeraude d'origine disparaît sur du blanc. --grad-text le mot de marque du héros. Garde les couleurs d'origine dans les deux thèmes — choix d'identité assumé. --grad-fill l'aplat du bouton principal. Il porte du TEXTE : c'est lui qui décide de --on-accent. En sombre, couleurs d'origine + encre (11,2:1). En clair, du blanc est demandé — or le blanc sur l'émeraude d'origine ne tient que 1,69:1. L'aplat descend donc à l'encre, où le blanc tient 5,9:1 sur les trois bornes. */ --grad:linear-gradient(100deg,var(--emerald),var(--cyan) 48%,var(--iris)); --grad-text:linear-gradient(100deg,var(--brand-emerald),var(--brand-cyan) 48%,var(--brand-iris)); --grad-fill:linear-gradient(100deg,var(--brand-emerald),var(--brand-cyan) 48%,var(--brand-iris)); /* ---- fonds doux + bords d'état (solides : un rgba composé sur quatre surfaces donne quatre couleurs) ---- */ --emerald-soft:#162F30; --emerald-line:#1F5549; --cyan-soft:#192B39; --cyan-line:#274E5F; --iris-soft:#20223B; --iris-line:#373564; --ok-soft:#162E2F; --ok-line:#1E5445; --warn-soft:#2F2129; --warn-line:#5C3537; --gold-soft:#2C2B28; --gold-line:#554D35; /* ---- relief ---- En sombre la hiérarchie se lit au filet : une ombre noire sur fond noir n'existe pas. sh-1 est donc un liseré de relief, pas une ombre. */ --sh-0:none; --sh-1:inset 0 1px 0 rgba(255,255,255,.06); --sh-2:0 34px 70px -28px rgba(0,0,0,.75); --sh-ac:0 8px 30px -10px rgba(63,224,162,.5); /* En sombre le libelle du bouton est deja une encre foncee sur un aplat lumineux : une ombre noire le salirait. Elle n'existe qu'en clair. */ --btn-label-shadow:none; --sh-ac-hover:0 14px 40px -10px rgba(63,224,162,.6); /* ---- verre Awoui ---- Fond quasi transparent + bord qui accroche la lumière + liseré de relief. Tout ce qui compose avec le dessous change de sens entre les deux thèmes : c'est ici, et nulle part ailleurs, que la recette est écrite. */ --glass-fill:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)) padding-box, rgba(13,18,33,.42); --glass-fill-hover:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)) padding-box, rgba(13,18,33,.46); --glass-solid:rgba(13,18,33,.92); --glass-border:rgba(255,255,255,.10); --glass-border-hover:rgba(255,255,255,.14); --glass-blur:blur(18px) saturate(1.2); --glass-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 24px 60px -28px rgba(0,0,0,.7); --glass-shadow-float:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px -40px rgba(0,0,0,.7); --glass-edge:linear-gradient(120deg,rgba(63,224,162,.34),rgba(87,200,230,.22) 50%,rgba(138,124,246,.30)); /* ---- chrome : verre liquide ---- Approche « Liquid Glass » : le matériau est presque transparent, il prend sa couleur du contenu derrière (saturate), porte un reflet spéculaire sur l'arête haute et une ombre interne en bas qui lui donne une épaisseur. Actif dès le premier affichage — le halo du héro traverse et continue sous la barre au lieu d'être coupé par elle. Ce que le CSS ne sait PAS reproduire : la réfraction (le contenu tordu au bord de la lentille). Il faudrait une carte de déplacement SVG recalculée à chaque image de défilement — trop cher sur une barre collante. */ /* Au repos, le remplissage est presque nul : la barre ne doit pas être une teinte de plus mais la MÊME couleur que la page, floutée. Mesuré : à .48 elle rendait 3 points plus clair que le pixel juste en dessous, ce qui se voit comme un bandeau. À .16 l'écart tombe à 1 point. Le matériau tient par le flou, la saturation et le spéculaire — pas par un aplat. */ --chrome:rgba(10,13,22,.16); --chrome-home:rgba(10,13,22,.14); /* --chrome-volet : un VOLET, pas un bandeau. Meme teinte, meme flou, meme filet que la barre — mais la barre ne couvre que quelques mots, alors qu'un volet de dix entrees tombe en plein sur le titre du heros. A 14 % le flou ne suffit pas : un titre de 80 px reste lisible a travers blur(20px). L'opacite monte donc pour le volet, et pour lui seul. */ --chrome-volet:rgba(10,13,22,.92); --chrome-scrolled:rgba(10,13,22,.62); --chrome-blur:blur(20px) saturate(150%); --chrome-line:transparent; /* aucune couture au repos */ --chrome-line-on:rgba(255,255,255,.07); /* le filet n'arrive qu'au défilement */ --chrome-spec:rgba(255,255,255,.16); --chrome-edge:inset 0 -1px 0 rgba(0,0,0,.35), 0 8px 24px -14px rgba(0,0,0,.55); --glass-menu:rgba(13,17,28,.97); --glass-item-hover:rgba(255,255,255,.06); /* ---- surfaces translucides diverses ---- */ --inset:rgba(255,255,255,.02); /* aplat à peine posé (sommaire, case inerte) */ --inset-2:rgba(255,255,255,.04); --ghost-bg:rgba(255,255,255,.03); --ghost-bg-hover:rgba(255,255,255,.07); --sheen:rgba(255,255,255,.12); /* filet de séparation en dégradé */ --dotgrid:rgba(255,255,255,.05); --dot-inert:#2A3145; --sel:rgba(63,224,162,.28); /* ---- couches de la Console ---- */ --overlay:rgba(12,14,17,.97); /* plein ecran opaque : catalogue de formations */ --scrim:rgba(0,0,0,.5); /* voile cliquable derriere le rail en mobile */ --shadow-soft:rgba(0,0,0,.5); --shadow-med:rgba(0,0,0,.65); --shadow-strong:rgba(0,0,0,.7); --glow:rgba(63,224,162,.55); /* L'ombre de relief du disque central du cycle. Elle etait un filtre SVG (feDropShadow, flood-opacity .22) ; le halo anime l'a remplacee par un drop-shadow CSS, qui a besoin d'une couleur nommee. Declaree une fois : une ombre portee est noire dans les deux themes. */ --ombre-disque:rgba(0,0,0,.22); --glow-soft:rgba(63,224,162,.22); /* ---- fond vidéo et halos ---- */ --video-display:block; --video-filter:none; --veil:linear-gradient(180deg,rgba(10,13,22,.50),rgba(10,13,22,.56)); --veil-uni:linear-gradient(180deg,rgba(10,13,22,0) 55%,rgba(10,13,22,.55) 100%); --halo-1:rgba(63,224,162,.10); --halo-2:rgba(138,124,246,.12); --halo-hero-1:rgba(63,224,162,.16); --halo-hero-2:rgba(138,124,246,.18); --halo-hero-3:rgba(87,200,230,.10); /* ---- logotype ---- Servi tel quel dans les deux thèmes : le fichier est fait pour ça. Seul le mode de composition change, et seulement là où une surface le compose déjà (le rail de la Console est en `screen`). */ --logo-blend:screen; /* DEUX icones pour TROIS themes, et c'est un choix. Une troisieme icone a ete posee puis retiree le 16/09/2026 : assets/awoui.css n'a pas d'empreinte de version, il peut rester des heures en cache CDN, et sur une page servie avec l'ancienne feuille le bouton se serait retrouve VIDE en sombre. Le soleil dit donc « on va vers le clair » pour les deux themes foncés, et c'est « Nuit » dans le panneau qui fait decouvrir le troisieme. Un bouton toujours juste vaut mieux qu'un bouton parfois nu. */ --icon-sun:block; --icon-moon:none; color-scheme:dark; } /* ========================================================================= CLAIR — « A · Papier ». Le canvas est à 2,4 % du blanc (1,053:1), teinte de --ink (269,9° OKLCh), chroma 0,0041. Le bleu est un rappel de l'encre, pas une couleur de gris. Deux blocs identiques : le média pour « système », l'attribut pour un choix explicite. Ne jamais définir une couleur ICI seulement — toute valeur naît dans :root et n'est que redéfinie. ========================================================================= */ @media (prefers-color-scheme:light){ /* Le second :not() exclut « nuit » (famille sombre, cf. theme.js) : sans lui, un poste dont le système préfère le clair posait ici l'encre claire (#0F1524) sur les fonds nuit (#101B38) — texte invisible sur tout le site. */ :root:not([data-theme="dark"]):not([data-theme="nuit"]){ /* La page est le cran le plus CLAIR ; ce sont les cartes qui portent le gris bleuté. L'échelle descend donc vers l'avant, à l'inverse du sombre — c'est exactement ce que « --bg-3 = le cran qui réagit » autorisait. */ --bg-0:#F8F9FC; --bg-1:#F2F3F8; --bg-2:#EBEDF2; --bg-3:#DFE2E8; --line:#D5D8E0; --line-2:#C6CAD5; --line-strong:#7C818C; --text:#0F1524; --muted:#4A5468; --faint:#5A6478; --emerald:#007347; --cyan:#006D84; --iris:#6257B5; --accent:#006E7B; --accent-2:#0066B0; --accent-grad:linear-gradient(135deg,#006E7B,#0066B0); --accent-soft:#DBF6F9; --accent-line:#9CD9E0; --ok:#007342; --warn:#A94339; --gold:#7B6109; /* Seul --grad descend. --grad-text ET --grad-fill gardent les couleurs d'origine, avec du blanc par-dessus — décision d'identité, prise en connaissance de la mesure : blanc sur l'émeraude d'origine = 1,69:1, sur le cyan 1,94:1, sur l'iris 3,34:1. Le seuil AA « grand texte » est de 3:1 : seule la borne iris le franchit. Si un jour vous voulez le rattraper sans changer les couleurs, une seule ligne suffit sur .btn-primary : text-shadow:0 1px 2px rgba(0,0,0,.38) elle relève le blanc sans toucher au dégradé. */ --grad:linear-gradient(100deg,#007347,#006D84 48%,#6257B5); --on-accent:#FFFFFF; --emerald-soft:#DCF8E9; --emerald-line:#9FDCBC; --cyan-soft:#DFF5FB; --cyan-line:#A5D5E4; --iris-soft:#EDEDFF; --iris-line:#C6C4FA; --ok-soft:#DDF8E8; --ok-line:#9FDCB9; --warn-soft:#FFE8E3; --warn-line:#F8B7AE; --gold-soft:#F7F0DC; --gold-line:#D9C9A1; /* le relief se lit à l'ombre, plus au filet ; ombre teintée de l'encre, jamais du noir pur (une ombre neutre sur un gris froid vire au sale) */ --sh-0:0 1px 2px rgba(15,21,36,.06); --sh-1:0 4px 12px -3px rgba(15,21,36,.10); --sh-2:0 18px 40px -14px rgba(15,21,36,.16); --sh-ac:0 6px 18px -8px rgba(0,120,75,.35); --btn-label-shadow:0 1px 2px rgba(0,0,0,.38); --btn-label-shadow:0 1px 2px rgba(0,0,0,.38); --sh-ac-hover:0 10px 26px -8px rgba(0,120,75,.45); /* La carte est un aplat teinté avec un voile clair en haut, pas une vitre : en clair il n'y a plus de vidéo derrière, le flou ne filtrerait rien et coûterait une couche de composition par carte. */ --glass-fill:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14)) padding-box, var(--bg-2); --glass-fill-hover:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45)) padding-box, var(--bg-2); --glass-solid:var(--bg-2); --glass-border:rgba(15,21,36,.09); --glass-border-hover:rgba(15,21,36,.15); --glass-blur:none; --glass-shadow:0 1px 2px rgba(15,21,36,.05); --glass-shadow-float:0 2px 4px rgba(15,21,36,.05),0 22px 48px -26px rgba(15,21,36,.20); --glass-edge:linear-gradient(120deg,rgba(0,120,75,.30),rgba(9,114,137,.20) 50%,rgba(103,91,186,.26)); /* Le verre est actif dès le premier affichage : les halos colorés du héro passent DESSOUS et se lisent à travers, au lieu d'être tranchés net par la barre. Le reflet spéculaire est ce qui la fait exister sans aplat. */ --chrome:rgba(248,249,252,.16); --chrome-home:rgba(248,249,252,.14); --chrome-volet:rgba(248,249,252,.95); --chrome-scrolled:rgba(248,249,252,.74); --chrome-blur:blur(20px) saturate(180%); --chrome-line:transparent; --chrome-line-on:rgba(15,21,36,.07); --chrome-spec:rgba(255,255,255,.85); --chrome-edge:inset 0 -1px 0 rgba(15,21,36,.05), 0 8px 24px -14px rgba(15,21,36,.16); --glass-menu:rgba(255,255,255,.97); --glass-item-hover:rgba(15,21,36,.05); --inset:rgba(15,21,36,.025); --inset-2:rgba(15,21,36,.05); --ghost-bg:rgba(15,21,36,.02); --ghost-bg-hover:rgba(15,21,36,.05); --sheen:rgba(15,21,36,.14); --dotgrid:rgba(15,21,36,.06); --dot-inert:#C9CCD4; --sel:rgba(0,120,75,.20); /* En clair une ombre noire salit : elle prend la teinte de l'encre et perd les deux tiers de son alpha, l'oeil compensant sur fond clair. */ --overlay:rgba(248,249,252,.97); --scrim:rgba(15,21,36,.38); --shadow-soft:rgba(15,21,36,.14); --shadow-med:rgba(15,21,36,.18); --shadow-strong:rgba(15,21,36,.22); /* En clair une ombre noire salit : elle prend la teinte de l'encre et perd les deux tiers de son alpha, l'oeil compensant sur fond clair. */ --overlay:rgba(248,249,252,.97); --scrim:rgba(15,21,36,.38); --shadow-soft:rgba(15,21,36,.14); --shadow-med:rgba(15,21,36,.18); --shadow-strong:rgba(15,21,36,.22); --glow:rgba(0,120,75,.45); --glow-soft:rgba(0,120,75,.18); /* La boucle est très sombre (luminance mesurée 11/255) : la voiler ne faisait que grisr la page. On l'INVERSE plutôt : elle passe à L=244, dynamique 225-255, soit des volutes sombres qui dérivent sur du blanc au lieu d'un aplat gris. Le contraste est légèrement réduit pour que les volutes les plus marquées ne descendent pas sous 232. C'est aussi ce qui redonne au verre de la barre du haut quelque chose à révéler : sans mouvement derrière, un matériau translucide ne se voit pas. On ne teinte PAS : le teintage écrase la dynamique à 11 points et pose un voile cyan uniforme. La couleur vient des halos, qui bougent avec le héros. Le voile est réglé au point d'équilibre mesuré : à .30 la boucle composait à 228 sur une page à 250 — la page redevenait grise. À .66 elle compose entre 239 et 248 : la page reste blanche et il reste 9 points de dynamique, ce que l'œil attrape parce que ça BOUGE, pas parce que c'est contrasté. */ --video-display:block; --video-filter:invert(1) brightness(1.02) contrast(.92); --veil:linear-gradient(180deg,rgba(248,249,252,.66),rgba(248,249,252,.80)); --veil-uni:linear-gradient(180deg,rgba(248,249,252,0) 55%,rgba(248,249,252,.60) 100%); /* Un cran plus francs qu'au premier jet : ce sont eux qui doivent se lire À TRAVERS le verre de la barre du haut. Trop discrets, le matériau n'a rien à révéler et la barre redevient un aplat. */ --halo-1:rgba(0,120,75,.09); --halo-2:rgba(103,91,186,.10); --halo-hero-1:rgba(0,120,75,.12); --halo-hero-2:rgba(103,91,186,.13); --halo-hero-3:rgba(9,114,137,.08); /* Le logotype est servi tel quel : il est fait pour les deux fonds. Seule la composition change — `screen` effacerait le lettrage sur du blanc, donc composition normale en clair. */ --logo-blend:normal; --icon-sun:none; --icon-moon:block; color-scheme:light; } } :root[data-theme="light"]{ /* La page est le cran le plus CLAIR ; ce sont les cartes qui portent le gris bleuté. L'échelle descend donc vers l'avant, à l'inverse du sombre — c'est exactement ce que « --bg-3 = le cran qui réagit » autorisait. */ --bg-0:#F8F9FC; --bg-1:#F2F3F8; --bg-2:#EBEDF2; --bg-3:#DFE2E8; --line:#D5D8E0; --line-2:#C6CAD5; --line-strong:#7C818C; --text:#0F1524; --muted:#4A5468; --faint:#5A6478; --emerald:#007347; --cyan:#006D84; --iris:#6257B5; --accent:#006E7B; --accent-2:#0066B0; --accent-grad:linear-gradient(135deg,#006E7B,#0066B0); --accent-soft:#DBF6F9; --accent-line:#9CD9E0; --ok:#007342; --warn:#A94339; --gold:#7B6109; /* Seul --grad descend. --grad-text ET --grad-fill gardent les couleurs d'origine, avec du blanc par-dessus — décision d'identité, prise en connaissance de la mesure : blanc sur l'émeraude d'origine = 1,69:1, sur le cyan 1,94:1, sur l'iris 3,34:1. Le seuil AA « grand texte » est de 3:1 : seule la borne iris le franchit. Si un jour vous voulez le rattraper sans changer les couleurs, une seule ligne suffit sur .btn-primary : text-shadow:0 1px 2px rgba(0,0,0,.38) elle relève le blanc sans toucher au dégradé. */ --grad:linear-gradient(100deg,#007347,#006D84 48%,#6257B5); --on-accent:#FFFFFF; --emerald-soft:#DCF8E9; --emerald-line:#9FDCBC; --cyan-soft:#DFF5FB; --cyan-line:#A5D5E4; --iris-soft:#EDEDFF; --iris-line:#C6C4FA; --ok-soft:#DDF8E8; --ok-line:#9FDCB9; --warn-soft:#FFE8E3; --warn-line:#F8B7AE; --gold-soft:#F7F0DC; --gold-line:#D9C9A1; --sh-0:0 1px 2px rgba(15,21,36,.06); --sh-1:0 4px 12px -3px rgba(15,21,36,.10); --sh-2:0 18px 40px -14px rgba(15,21,36,.16); --sh-ac:0 6px 18px -8px rgba(0,120,75,.35); --sh-ac-hover:0 10px 26px -8px rgba(0,120,75,.45); /* La carte est un aplat teinté avec un voile clair en haut, pas une vitre : en clair il n'y a plus de vidéo derrière, le flou ne filtrerait rien et coûterait une couche de composition par carte. */ --glass-fill:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14)) padding-box, var(--bg-2); --glass-fill-hover:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45)) padding-box, var(--bg-2); --glass-solid:var(--bg-2); --glass-border:rgba(15,21,36,.09); --glass-border-hover:rgba(15,21,36,.15); --glass-blur:none; --glass-shadow:0 1px 2px rgba(15,21,36,.05); --glass-shadow-float:0 2px 4px rgba(15,21,36,.05),0 22px 48px -26px rgba(15,21,36,.20); --glass-edge:linear-gradient(120deg,rgba(0,120,75,.30),rgba(9,114,137,.20) 50%,rgba(103,91,186,.26)); /* Le verre est actif dès le premier affichage : les halos colorés du héro passent DESSOUS et se lisent à travers, au lieu d'être tranchés net par la barre. Le reflet spéculaire est ce qui la fait exister sans aplat. */ --chrome:rgba(248,249,252,.16); --chrome-home:rgba(248,249,252,.14); --chrome-volet:rgba(248,249,252,.95); --chrome-scrolled:rgba(248,249,252,.74); --chrome-blur:blur(20px) saturate(180%); --chrome-line:transparent; --chrome-line-on:rgba(15,21,36,.07); --chrome-spec:rgba(255,255,255,.85); --chrome-edge:inset 0 -1px 0 rgba(15,21,36,.05), 0 8px 24px -14px rgba(15,21,36,.16); --glass-menu:rgba(255,255,255,.97); --glass-item-hover:rgba(15,21,36,.05); --inset:rgba(15,21,36,.025); --inset-2:rgba(15,21,36,.05); --ghost-bg:rgba(15,21,36,.02); --ghost-bg-hover:rgba(15,21,36,.05); --sheen:rgba(15,21,36,.14); --dotgrid:rgba(15,21,36,.06); --dot-inert:#C9CCD4; --sel:rgba(0,120,75,.20); --glow:rgba(0,120,75,.45); --glow-soft:rgba(0,120,75,.18); --video-display:block; --video-filter:invert(1) brightness(1.02) contrast(.92); --veil:linear-gradient(180deg,rgba(248,249,252,.66),rgba(248,249,252,.80)); --veil-uni:linear-gradient(180deg,rgba(248,249,252,0) 55%,rgba(248,249,252,.60) 100%); /* Un cran plus francs qu'au premier jet : ce sont eux qui doivent se lire À TRAVERS le verre de la barre du haut. Trop discrets, le matériau n'a rien à révéler et la barre redevient un aplat. */ --halo-1:rgba(0,120,75,.09); --halo-2:rgba(103,91,186,.10); --halo-hero-1:rgba(0,120,75,.12); --halo-hero-2:rgba(103,91,186,.13); --halo-hero-3:rgba(9,114,137,.08); --logo-blend:normal; --icon-sun:none; --icon-moon:block; color-scheme:light; } /* Le choix explicite « sombre » doit aussi battre un système en clair. */ :root[data-theme="dark"]{ color-scheme:dark } /* ========================================================================= NUIT — le troisième thème, ajouté le 16/09/2026 ========================================================================= Il ne redéfinit QUE les surfaces et ce qui en dérive. Tout le reste — accents, couleurs de marque, texte, ombres, verre blanc — vit déjà pour un fond foncé et n'a aucune raison de bouger : c'est ce qui fait qu'un thème de la famille sombre coûte vingt lignes quand le clair en coûte cent. Le bleu est PLUS CLAIR que l'encre d'origine (#0A0D16) et franchement plus saturé : c'est là tout l'écart demandé. Mesure sur le fond #101B38 — texte 14,66:1, muted 6,71:1, faint 5,52:1, et les quatre accents de 5,09 (iris) à 10,20 (or). Le filet fort tient 4,50:1, au-dessus des 3:1 exigés d'un bord qui identifie un contrôle. Les quelques jetons teintés à l'encre (verre plein, chrome, voiles) sont repris avec le bleu : sans eux, l'en-tête et les menus garderaient un sous-ton noir qui jurerait sur la page. */ :root[data-theme="nuit"]{ --bg-0:#101B38; --bg-1:#14203F; --bg-2:#192747; --bg-3:#1F2F54; --line:#2B3A63; --line-2:#35477A; --line-strong:#7183AE; --glass-solid:rgba(20,32,66,.92); --glass-menu:rgba(20,31,64,.97); --chrome:rgba(16,27,56,.16); --chrome-home:rgba(16,27,56,.14); --chrome-volet:rgba(16,27,56,.93); --chrome-scrolled:rgba(16,27,56,.62); --veil:linear-gradient(180deg,rgba(16,27,56,.50),rgba(16,27,56,.56)); --veil-uni:linear-gradient(180deg,rgba(16,27,56,0) 55%,rgba(16,27,56,.55) 100%); /* comme en sombre : le soleil annonce la sortie de la famille foncée */ --icon-sun:block; --icon-moon:none; color-scheme:dark; } /* ========================================================================= Alias historiques — permettent de ne PAS réécrire les 800 lignes de règles existantes. Apex parle ink/panel, la Console parle bg/surface : les deux vocabulaires pointent désormais sur la même échelle. ========================================================================= */ :root{ --ink:var(--bg-0); --ink-2:var(--bg-1); --panel:var(--bg-2); /* était #121728 — hors de la loi commune */ --panel-2:var(--bg-3); /* était #161C30 — idem */ --emerald-ink:var(--on-accent); } /* ========================================================================= Deux règles qui ne peuvent pas vivre dans une feuille produit, parce qu'elles concernent les deux. ========================================================================= */ /* Le logotype est servi tel quel dans les deux thèmes — aucun filtre. --logo-blend n'existe que pour les surfaces qui le composent déjà en `screen` (la Console) : sur un fond clair, `screen` efface le lettrage. Apex ne compose pas son logo : rien à faire ici pour lui. */ /* WCAG 2.2 · 1.4.11 — 3:1 sur la limite d'un composant qu'on doit pouvoir identifier. --line plafonne à 1,32:1 : parfait pour séparer deux blocs, insuffisant partout où c'est le bord qui dit « ceci est un contrôle ». */ input,select,textarea{border-color:var(--line-strong)} input:focus,select:focus,textarea:focus{border-color:var(--emerald)} /* ========================================================================= Pont vers le Shadow DOM d'Awoui Universe (fenetre Formations de la Console). Deux noms du socle entrent en collision avec ceux du jeu : --line et --chrome existent des DEUX cotes. Dans le shadow, « --line:var(--line) » serait une auto-reference, donc invalide, et la variable tomberait a vide. Ce miroir donne les memes valeurs sous des noms qui ne collisionnent pas. Les autres jetons (--bg-0, --text, --muted...) sont lus directement : leurs noms different deja de ceux d'Universe. ========================================================================= */ :root{ --u-line:var(--line); --u-chrome:var(--chrome-scrolled); } /* — Barres de défilement : fines et fondues dans le thème, PARTOUT. Sans cela, Chrome/Edge sous Windows dessinent la barre système (large, claire) sur la page comme dans chaque zone qui déborde (textarea, listes, panneaux). Propriétés standard d'abord (Firefox, Chrome 121+), repli ::-webkit-scrollbar pour les Chromium plus anciens et Safari. --line et --line-strong suivent chaque thème (sombre, clair, nuit) : le pouce reste visible sans crier. Posé ici car c'est la seule feuille chargée par toutes les pages (head.html) et que la couleur d'une barre est une affaire de thème. — */ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--line-strong)} ::-webkit-scrollbar-corner{background:transparent}