/* ===================================================================== CLARIO — clario_charte.css · LA CHARTE, APPLIQUÉE PARTOUT. R23. Le constat d'Anthony, de sa mère, et de la mesure. « Ça éclaire l'app et ça la rend plus jeune. » La maquette proposait trois couleurs sur le bleu nuit. Elles sont ici, mesurées : LE LIME #C3F53C — 13,6:1 sur le bleu nuit. C'est L'ACTION, et rien d'autre. Un écran n'a qu'un seul bouton lime : celui par lequel on commence. LE VIOLET #6F3CF5 — le blanc dessus donne 5,77:1. C'est la SURFACE de ce qui passe en premier ce soir. Jamais du texte : le violet écrit sur le bleu nuit tombe à 4,23:1. Quand il doit être lu, c'est #B79CFF (7,6:1). LE JAUNE #FFD43B — 12,2:1. L'ATTENTION : un contrôle, une date, ce qui est encore fragile. ET LE VERT DE LA MARQUE NE BOUGE PAS. #6EE7A7 est le vert du logo. Il reste le logo. C'est précisément parce que l'action change de couleur que la marque peut redevenir une marque au lieu d'être aussi le bouton, l'onglet actif, la jauge et le contour de focus. POURQUOI UNE FEUILLE ET PAS 353 RETOUCHES. Les écrans lisent déjà `--acc`, `--acc2`, `--navy` : une couleur de gamme est une donnée (D16), posée sur par clario_marque.js. Cette feuille redonne à ces jetons leur nouvelle valeur et ne réécrit à la main que ce qui était peint en dur — les teintes menthe des étiquettes, et les boutons dessinés avant que les jetons existent. LE SEUIL EST MESURÉ, PAS ESPÉRÉ. Toutes les paires de cette feuille ont été passées au navigateur sur les 353 écrans, fonds semi-transparents composités et couches de dégradé dans l'ordre où elles se peignent. Le détail est dans le journal de livraison. SOMBRE ET CLAIR. 345 écrans sur 353 sont sur le bleu nuit ; 8 sont clairs. `data-surface` est écrit sur de chaque fichier à partir de la couleur RÉELLEMENT calculée par le navigateur, pas devinée depuis le CSS. Rien ici ne s'applique sans savoir sur quoi il se pose : c'est l'erreur qui avait éteint la crème du site. ===================================================================== */ :root{ --lime:#C3F53C; /* l'action */ --lime-sombre:#9FD400; /* le lime quand il doit tenir sur du clair */ --violet:#6F3CF5; /* la surface prioritaire */ --violet-clair:#B79CFF; /* le violet quand il doit être lu, sur sombre */ --violet-fonce:#4A1FBF; /* le violet quand il doit être lu, sur clair */ --jaune:#FFD43B; /* l'attention */ --jaune-sombre:#8A6A00; /* l'attention, lisible sur du clair */ --marque:#6EE7A7; /* le vert du logo — la marque, pas l'action */ } /* ===================================================================== 0. LA POLICE DE LA MARQUE — Inter, auto-hébergée (R26.2.3). Mesuré le 04/10/2026 : aucune police n'était réellement chargée. Sept familles différentes étaient déclarées en premier (Inter, Trebuchet, Verdana, Segoe UI, system-ui, Arial, et Times New Roman par accident) ; sur Android, aucune des quatre premières n'existe : chaque écran retombait sur une police système différente. Inter est désormais servie par l'application (polices/, sous-ensemble latin, woff2, licence OFL), déclarée ICI et nulle part ailleurs : elle fonctionne hors ligne et ne dépend d'aucun service extérieur. Le confort de lecture passe avant : la police adaptée (Verdana, OpenDyslexic) choisie par l'enfant n'est jamais écrasée. ===================================================================== */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/app-beta/polices/inter-400.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500 600;font-display:swap;src:url(/app-beta/polices/inter-600.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/app-beta/polices/inter-700.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800 900;font-display:swap;src:url(/app-beta/polices/inter-800.woff2) format('woff2')} :root{ --police-marque:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } html[data-surface]:not([data-confort="1"]) body:not(.police-alt):not(.confort):not(.lecture-facile):not(.dys), html[data-surface]:not([data-confort="1"]) body:not(.police-alt):not(.confort):not(.lecture-facile):not(.dys) :is(h1,h2,h3,h4,button,input,select,textarea){ font-family:var(--police-marque); } /* ===================================================================== 1. LES JETONS, SUR LES ÉCRANS SOMBRES. Le cockpit posait encore une couleur par gamme — menthe au primaire, turquoise au collège, or au lycée — c'est-à-dire trois produits. Une seule palette désormais ; ce qui distingue les gammes reste l'ÉCHELLE (taille du texte, des cibles, densité), écrite dans clario_marque.js. La spécificité est volontairement plus forte que `body[data-gamme]` pour reprendre la main sans toucher aux écrans. ===================================================================== */ html[data-surface="sombre"], html[data-surface="sombre"] body, html[data-surface="sombre"] body[data-gamme]{ --acc:var(--lime); --acc2:var(--jaune); } /* ===================================================================== 2. L'ACTION — UN SEUL BOUTON LIME PAR ÉCRAN. LA CONVENTION, UNE FOIS POUR TOUTES : .btn / .btn-primaire / .principal / .go / .next / .cta → l'action .btn.ghost · .btn-ghost · .go.sec · .btn.sec → la porte de côté .btn.voix · .btn-audio → écouter Trois de mes fichiers récents (listes, repères, leçon du cours) suivaient la convention INVERSE — `.btn` pour le secondaire. Résultat mesuré à l'écran : deux boutons lime côte à côte, dont « Annuler ». Ils ont été ramenés à la convention majoritaire plutôt que d'ajouter une exception dans cette feuille. Les quatre familles de bouton principal rencontrées dans l'app, ramenées à la même recette : lime plein, texte bleu nuit. Mesuré : 13,6:1, contre 4,04:1 pour l'ancien `--vert-d` #1F8A56 à texte blanc — qui était sous le seuil sur 80 écrans. ===================================================================== */ html[data-surface="sombre"] .btn:not(.ghost):not(.btn-ghost):not(.sec):not(.or):not(.voix):not(.btn-audio), html[data-surface="sombre"] .btn-primaire, html[data-surface="sombre"] .principal, html[data-surface="sombre"] button.next, html[data-surface="sombre"] .go:not(.sec), html[data-surface="sombre"] .cta{ background:var(--lime); background-image:none; color:#0D1B2A; border-color:var(--lime); box-shadow:0 6px 18px rgba(195,245,60,.18); font-weight:800; } html[data-surface="sombre"] .btn:not(.ghost):not(.btn-ghost):not(.sec):not(.or):not(.voix):not(.btn-audio):hover, html[data-surface="sombre"] .btn-primaire:hover, html[data-surface="sombre"] .go:not(.sec):hover{ box-shadow:0 8px 24px rgba(195,245,60,.32); } /* Le second bouton n'est pas une deuxième action : c'est une porte de côté. Le beige #eee5d2 venait des écrans conçus sur fond clair ; posé sur le bleu nuit il criait plus fort que l'action elle-même. */ html[data-surface="sombre"] .btn.ghost, html[data-surface="sombre"] .btn-ghost, html[data-surface="sombre"] .go.sec, html[data-surface="sombre"] .btn.sec, html[data-surface="sombre"] .btn.voix, html[data-surface="sombre"] .btn-audio{ background:rgba(255,255,255,.07); background-image:none; color:#EAF1F8; border:1px solid rgba(255,255,255,.22); box-shadow:none; } /* ===================================================================== 3. LE VIOLET — CE PAR QUOI ON COMMENCE CE SOIR. Une carte, pas une teinte de texte. Le cockpit marque cette carte avec la classe `prioritaire` ; partout ailleurs le violet ne sert qu'à l'étiquette, en #B79CFF. ===================================================================== */ html[data-surface="sombre"] .une.prioritaire{ background:var(--violet); background-image:none; border:1px solid var(--violet); border-left:1px solid var(--violet); color:#fff; } html[data-surface="sombre"] .une.prioritaire h3, html[data-surface="sombre"] .une.prioritaire .obj, html[data-surface="sombre"] .une.prioritaire p{ color:#fff; } html[data-surface="sombre"] .une.prioritaire .etiq{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); color:#fff; } html[data-surface="sombre"] .une.prioritaire .tag{ background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.30); color:#fff; } /* Le bouton reste lime SUR le violet : 9,4:1, et c'est toujours la même couleur qui veut dire « appuie ici ». */ html[data-surface="sombre"] .une.prioritaire .go:not(.sec){ box-shadow:0 6px 18px rgba(0,0,0,.28); } /* ===================================================================== 4. LES TEINTES ÉCRITES EN DUR. Ces rgba() menthe ne suivent aucun jeton : elles étaient peintes à la main dans le cockpit. Sans ces quatre règles, l'écran du soir serait resté à moitié à l'ancienne palette. ===================================================================== */ html[data-surface="sombre"] .etiq{ color:var(--violet-clair); background:rgba(111,60,245,.18); border-color:rgba(183,156,255,.42); } html[data-surface="sombre"] .porte-ajout{ border-color:var(--lime); background:rgba(195,245,60,.10); } html[data-surface="sombre"] .porte-ajout .e{ color:var(--lime); } html[data-surface="sombre"] .copilote-titre{ color:var(--lime); } /* ===================================================================== 5. L'ATTENTION. Le jaune ne dit qu'une chose : c'est daté, ou c'est fragile. ===================================================================== */ html[data-surface="sombre"] .tag.urgent, html[data-surface="sombre"] .echeance, html[data-surface="sombre"] .st-a_reactiver{ color:var(--jaune); } /* ===================================================================== 6. LA MARQUE RESTE LA MARQUE. Le « C » et le bandeau gardent leur vert : c'est le logo, pas une commande. Le contour de focus, lui, suit l'action. ===================================================================== */ .cl-marque img, .cl-bandeau img, .cl-puce{ filter:none; } html[data-surface="sombre"] a.cl-bandeau:focus-visible{ outline-color:var(--lime); } /* ===================================================================== 7. LES HUIT ÉCRANS CLAIRS. Sur du blanc, le lime en texte donne 1,4:1 : il n'y sera jamais du texte. L'action y devient violette à texte blanc (5,77:1), et le lime ne revient qu'en pastille à texte bleu nuit (13,6:1). Même famille, lecture inversée. ===================================================================== */ html[data-surface="clair"] .btn:not(.ghost):not(.btn-ghost):not(.sec):not(.voix):not(.btn-audio), html[data-surface="clair"] .btn-primaire, html[data-surface="clair"] .principal, html[data-surface="clair"] button.next, html[data-surface="clair"] .go:not(.sec), html[data-surface="clair"] .cta{ background:var(--violet); background-image:none; color:#fff; border-color:var(--violet); font-weight:800; } html[data-surface="clair"] .etiq{ color:var(--violet-fonce); background:rgba(111,60,245,.10); border-color:rgba(111,60,245,.35); } html[data-surface="clair"] .puce-lime{ background:var(--lime); color:#0D1B2A; } /* ===================================================================== 8. LE CONFORT PASSE AVANT LA CHARTE. Un enfant qui a demandé de gros caractères ne doit pas les perdre parce qu'une feuille de couleurs est arrivée après. ===================================================================== */ html[data-taille="grand"] .btn, html[data-taille="grand"] .go{ font-size:1.06em; } @media (prefers-reduced-motion:reduce){ html[data-surface="sombre"] .btn, html[data-surface="sombre"] .go{ transition:none; } } /* ===================================================================== 9. LE LOGO DU BANDEAU — UNE VRAIE CIBLE. Mesuré : 32 px de haut. C'est la hauteur de l'image, pas celle d'un bouton ; le même fichier note ailleurs que 44 px est le plancher sous lequel un doigt rate sa cible. On agrandit la ZONE sans agrandir le dessin, et on lui donne un contour de focus : un enfant qui navigue au clavier doit voir où il est. ===================================================================== */ #bLogo, a.cl-bandeau{ display:inline-flex; align-items:center; min-height:44px; padding:6px 4px; margin:-6px -4px; border-radius:10px; -webkit-tap-highlight-color:transparent; } #bLogo:focus-visible, a.cl-bandeau:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; } /* ===================================================================== 10. LE BLOC « MON QUOTIDIEN AVEC CLARIO ». Il était peint à la main en #6ee7a7 — le vert du LOGO — sur un fond vert sombre. C'est le dernier endroit où la marque servait de couleur d'interface, et c'est le plus visible : il occupe le tiers bas du plan du soir. Le bloc garde son relief, avec les couleurs de la charte. ===================================================================== */ html[data-surface="sombre"] .copilote-principal{ border-color:var(--lime); background:linear-gradient(135deg,#1B3050,#152640); } html[data-surface="sombre"] .copilote-principal h2{ color:var(--lime); } html[data-surface="sombre"] .copilote-principal .porte-ajout{ background:var(--lime); color:#0D1B2A; border-color:var(--lime); } html[data-surface="sombre"] .copilote-principal .porte-ajout .e{ color:#0D1B2A; } /* ===================================================================== 11. LE BOUTON « ← MON COPILOTE ». Il est injecté par `commun/mission-identite.js` sur les écrans repris des Passerelles, et peint en dur en #6ee7a7 — le vert du LOGO. C'était donc, sur ces écrans, le bouton le plus voyant de la page : un RETOUR criant plus fort que l'action. Et il n'a aucune classe : les règles par classe de cette feuille ne l'atteignaient pas. Il redevient ce qu'il est — une porte de côté — et le vert retourne au logo. ===================================================================== */ html[data-surface="sombre"] #cl-retour-copilote > a{ background:rgba(255,255,255,.07); color:#EAF1F8; border:1px solid rgba(255,255,255,.22); box-shadow:none; } html[data-surface="sombre"] #cl-retour-copilote > a:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; } html[data-surface="clair"] #cl-retour-copilote > a{ background:#fff; color:#0D1B2A; border:1px solid #DCE3EC; box-shadow:none; } /* R24.1 — le lecteur utilise --accent, les autres écrans --acc. */ html[data-surface="sombre"] { --accent:var(--lime); } /* Retirer le cadre des titres après une navigation au pointeur seulement. Le focus clavier et celui des commandes restent visibles. */ :is(h1,h2,h3,h4,h5,h6)[tabindex="-1"]:focus:not(:focus-visible){outline:none!important;box-shadow:none!important} /* R25.13 : déclarer le thème géré par Clario aux navigateurs mobiles. */ :root { color-scheme: dark; } html[data-surface="clair"] { color-scheme: only light; } /* R25.32 : repères neutres, lime réservé au geste principal. */ #clario-onglets a[aria-current="page"]{background:rgba(180,201,154,.12);border-top:2px solid #B4C99A} html[data-surface="sombre"] .seg.on,html[data-surface="sombre"] .segment.on{background:#354557!important;color:#F5F1E8!important} html[data-surface="sombre"] .pas i.on{background:#B4C99A!important} html[data-surface="sombre"] .quit,html[data-surface="sombre"] .lien{color:#F5F1E8!important} html[data-surface="sombre"] .carte .go,html[data-surface="sombre"] .carte .btn,html[data-surface="sombre"] .porte .go{background:transparent!important;color:#F5F1E8!important;border:1px solid #87988D!important;box-shadow:none!important} html[data-surface="sombre"] .copilote-titre,html[data-surface="sombre"] #copilote-title{color:#F5F1E8!important} html[data-surface="sombre"] .cs-etape{color:#F5F1E8!important;background:#354557!important} html[data-surface="sombre"] .dem-go,html[data-surface="sombre"] .cs-suivant,html[data-surface="sombre"] .cs-absence-save{color:#F5F1E8!important;background:transparent!important;border:1px solid #87988D!important;box-shadow:none!important} html[data-surface="sombre"] .mat[aria-pressed="true"]{background:#B4C99A!important;border-color:#B4C99A!important;color:#0D1B2A!important} html[data-surface="sombre"] .g .okk{color:#B4C99A!important} /* ===================================================================== 12. R26.2.3 — L'AUDIT DE FORME : CE QUI RESTAIT DE L'ÉTÉ, ET DE TRAVERS. ===================================================================== */ /* L'ambre de la Passerelle d'été (#FFB347) n'a plus de sens dans l'année scolaire : les jetons de couleur « été » des écrans hérités reprennent les couleurs de la charte — le jaune pour l'attention, le lime pour l'action. */ html[data-surface="sombre"]{ --ambre:#FFD43B; --amber:#FFD43B; --or:#FFD43B; --sun:#FFD43B; --solaire:#FFD43B; --ambre-halo:rgba(255,212,59,.18); --halo:rgba(255,212,59,.18); --peche:#FFD43B; } /* La barre d'accès de la bibliothèque CM2 (commun/cm2-scope-r9.js) était une bande BLANCHE à filet doré au-dessus d'écrans bleu nuit. */ html body > aside:has(+ #cm2-contenu){ background:#152640!important;color:#EAF1F8!important; border-bottom:1px solid rgba(255,255,255,.12)!important; font:15px/1.5 var(--police-marque)!important;padding:10px 16px!important; } html body > aside:has(+ #cm2-contenu) a{color:#EAF1F8!important} html body > aside:has(+ #cm2-contenu) p{margin:4px 0 0;color:#9DB0C6!important} /* Le fil d'Ariane des passerelles CM2 n'avait pas de couleur : il héritait du bleu nuit, sur fond bleu nuit (contraste 1:1). */ html[data-surface="sombre"] .filariane a{color:#9DB0C6;text-decoration:none} html[data-surface="sombre"] .filariane a:last-of-type{color:#EAF1F8;font-weight:700} /* La « peau premium » de l'été (cm2/clario-theme.css) : halo ambré en fond, filets et étiquettes or. Elle reste chargée par 30 écrans CM2 ; ses teintes d'été sont ramenées ici à celles de l'année. */ html:has(link[href*="clario-theme.css"]) body{ background-image:radial-gradient(1100px 540px at 82% -12%, rgba(111,60,245,.10), transparent 60%), radial-gradient(900px 480px at 0% 110%, rgba(110,231,167,.05), transparent 60%)!important; } html:has(link[href*="clario-theme.css"]) body :is(.carte,.at-carte,.card){border-color:rgba(255,255,255,.12)!important} html:has(link[href*="clario-theme.css"]) body header{border-bottom-color:rgba(255,255,255,.08)!important} html:has(link[href*="clario-theme.css"]) body .tag{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.22)!important;color:#EAF1F8!important} html:has(link[href*="clario-theme.css"]) body :is(input[type=text],input.code,textarea,select,.inp){border-color:rgba(255,255,255,.25)!important} html:has(link[href*="clario-theme.css"]) body ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)} html:has(link[href*="clario-theme.css"]) body .bandeau:hover{border-color:rgba(195,245,60,.45)!important} /* La Maison de Barnabé (CE1-CE2) : le gros bouton d'action était ambre d'été. L'action est lime partout ; le bouton « doux » reste la porte de côté. */ html[data-surface="sombre"] .gros-btn:not(.doux){ background:var(--lime);background-image:none;color:#0D1B2A;box-shadow:0 4px 0 #8FB821; } html[data-surface="sombre"] .gros-btn:not(.doux):active{box-shadow:0 1px 0 #8FB821} /* 5ᵉ, le QG du Crew : l'étiquette d'état d'une semaine (« à faire », « ouvrir ») porte la classe .go et recevait le lime de l'action — trois limes dans le même écran. C'est un état, pas un bouton. */ html[data-surface="sombre"] .wstat.go{ background:transparent!important;background-image:none!important;color:var(--jaune)!important; border:1px solid rgba(255,212,59,.5)!important;box-shadow:none!important; } /* RENFORT-SAMSUNG 2026-10 : la page gère déjà son thème sombre ; les surfaces claires ne doivent jamais être assombries. */ @media (prefers-color-scheme: dark){:root{color-scheme:dark}html[data-surface="clair"]{color-scheme:only light}}