/* ═══════════════════════════════════════════════════════════════════════════ BUNBOX — jetons du design system « console arcade moderne » --------------------------------------------------------------------------- Établi le 05/09/2026. Source : /root/bunbox-design/design-system.md ⚠️ LIRE CE DOCUMENT AVANT DE TOUCHER À L'INTERFACE — il porte les mesures qui justifient chaque valeur ici, et trois constats qui contredisent l'intuition. ⚠️ TOUTES LES COULEURS SONT ÉCHANTILLONNÉES DANS LES ASSETS KENNEY (CC0), pas choisies à l'œil : `button_rectangle_depth_flat.png` des cinq couleurs, face et tranche relevées au pixel. Les variantes « lumière » sont calculées (+42 % vers le blanc). Les contrastes sont calculés, pas espérés. ⚠️ CE FICHIER NE FAIT QUE DÉCLARER. Un jeton posé n'est pas une grammaire appliquée — c'est la leçon du 05/09. Rien ici ne change l'écran tant qu'une règle ne s'en sert pas. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── COULEURS ───────────────────────────────────────────────────────────── Chaque couleur porte SON encre. ⚠️ Le blanc ne passe QUE sur le rouge : sur bleu il tombe à 3,00:1, sur vert à 2,50, sur jaune à 1,51. Un libellé blanc sur un bouton jaune est le réflexe « arcade », et il est illisible. */ /* ⚠️ LE ROUGE EST DÉDOUBLÉ, ET CE N'EST PAS UN CAPRICE. Le rouge Kenney d'origine (#ee2747) mesure 4,19:1 en blanc ET 4,06:1 en encre sombre : AUCUNE encre ne tient dessus au seuil AA. Assombri de 4 %, il passe. */ --bx-rouge:#e42544; /* porte du texte — blanc à 4,52:1 */ --bx-rouge-o:#a41b31; --bx-rouge-l:#ef8193; --bx-sur-rouge:#ffffff; /* Le vif d'origine : surfaces sans texte, ou texte ≥ 18,66 px gras (seuil 3:1). */ --bx-rouge-vif:#ee2747; --bx-rouge-vif-o:#cd0b2a; --bx-bleu:#1c9fd7; --bx-bleu-o:#167da8; --bx-bleu-l:#7bc7e8; --bx-sur-bleu:#231a1d; /* 5,65:1 */ --bx-vert:#16bb77; --bx-vert-o:#029357; --bx-vert-l:#78d8b0; --bx-sur-vert:#231a1d; /* 6,80:1 */ --bx-jaune:#ffcc00; --bx-jaune-o:#dea312; --bx-jaune-l:#ffe16b; --bx-sur-jaune:#231a1d; /* 11,23:1 */ --bx-gris:#dadce7; --bx-gris-o:#989aaf; --bx-gris-l:#eaebf1; --bx-sur-gris:#231a1d; /* 12,43:1 */ --bx-encre:#231a1d; /* ── CONTOURS ───────────────────────────────────────────────────────────── ⚠️ NOTRE AJOUT, PAS UNE PROPRIÉTÉ DES ASSETS. Les boutons Kenney n'ont aucun contour sombre — vérifié : la tranche et le bord latéral sont la même couleur. Le cerné vient d'une autre famille de références. Il est donc assumé ici comme un choix, et sa couleur est TOUJOURS l'ombre de la couleur portée : un noir importé fait un autocollant, l'ombre fait un objet moulé. Épaisseur FIXE — un contour proportionnel devient une cerne. */ --bx-contour:3px; --bx-contour-fin:2px; /* ── RELIEF ─────────────────────────────────────────────────────────────── Ombres DURES : décalage vers le bas, flou ZÉRO. C'est la tranche de l'objet, pas son ombre. ⚠️ Elle dessine sous l'objet SANS participer à sa hauteur : tout empilement doit garder une gouttière ≥ --bx-relief, sinon la tranche mord sur le voisin. */ --bx-relief:8px; --bx-relief-mini:5px; --bx-brillance:inset 0 2px 0 rgba(255,255,255,.45); /* ── FORMES ─────────────────────────────────────────────────────────────── ⚠️ L'inclinaison se porte par `rotate:`, jamais par `transform` — voir MOUVEMENT ci-dessous. */ --bx-r-touche:22px; --bx-r-touche-mini:18px; --bx-r-carte:28px; --bx-inclinaison:-1.2deg; /* ── TYPOGRAPHIE ────────────────────────────────────────────────────────── ⚠️ Lilita One / Titan One / Fredoka sont sous SIL OFL, PAS CC0. Usage commercial et embarquement autorisés ; vente de la police seule interdite. À citer séparément dans assets/LICENSES.md le jour où elles sont posées. */ /* ⚠️ ⚠️ CES DEUX JETONS ONT FAILLI CHANGER LA TYPOGRAPHIE DE TOUT LE PRODUIT. Premier jet : `--bx-titre` et `--bx-texte`. Or **`--bx-texte` existe depuis toujours dans `type.css`** — c'est Instrument Sans, la police de TOUT le produit, appelée par `h1/h2/h3` et le corps de texte. Le redéfinir ici l'a écrasée sur les trois pages par une Fredoka qui n'est pas chargée : tout est silencieusement tombé sur la police système. Rien n'a rougi, sauf un débordement de **4 px au zoom 200 %** sur trois `h2` de l'Atelier — c'est par là que je l'ai trouvé. *Un nom de jeton se vérifie avant d'être posé : `grep` dans les trois feuilles, pas seulement dans celle qu'on écrit.* Les jetons du système arcade portent donc un préfixe qui leur est propre. */ --bx-jeu-titre:'Lilita One','Titan One',system-ui,sans-serif; --bx-jeu-texte:'Fredoka',var(--bx-texte,system-ui),sans-serif; /* Cerné de texte, en quatre ombres d'un pixel. ⚠️ RÉSERVÉ AUX TITRES posés sur une couleur ou une image. Sur du texte courant il épaissit et brouille — et il ne remplace PAS le contraste : un texte cerné qui échoue à 4,5:1 échoue quand même. */ --bx-texte-cerne: -1px -1px 0 var(--bx-cerne,var(--bx-encre)), 1px -1px 0 var(--bx-cerne,var(--bx-encre)), -1px 1px 0 var(--bx-cerne,var(--bx-encre)), 1px 1px 0 var(--bx-cerne,var(--bx-encre)); /* ── MOUVEMENT ──────────────────────────────────────────────────────────── Ressort dans la COURBE, jamais dans la durée. Ces deux courbes existaient déjà dans le produit depuis le 14/08 — on ne les réinvente pas, on les reprend. ⚠️ ON N'ANIME JAMAIS `transform` : il appartient aux univers (kiddy incline ses réponses avec, l'écraser sous le doigt redresse l'autocollant). `translate` pour l'enfoncement, `scale` pour la compression, `rotate` pour l'inclinaison — trois propriétés qui se COMPOSENT au lieu de se remplacer, et que le GPU compose exactement comme `transform`. La contrainte TWA est donc respectée. Défendu par l'épreuve `le-geste-repond.js`. */ --bx-ressort:linear(0,.402 7.4%,.711 15.3%,.933 23.7%,1.008 28.2%,1.03 32.5%,1.008 41.4%,1); --bx-sortie:cubic-bezier(.22,1,.36,1); --bx-t-geste:140ms; } /* ══ LA NUIT MONOCHROME — F1+ (15/09/2026, Brice : « F1+ c'est bien ! ») ══ Le mode sombre prend sa propre identité, inspirée de Resend : noir neutre, blanc, gris — la couleur n'y vit plus que dans le LOGO (une image, qui ne bouge jamais) et dans le lever de rideau. Les règles d'interface ne lisent que ces jetons ; aucune valeur n'est écrite ailleurs. */ :root[data-theme="sombre"]{ --nuit-blanc:#f2f2f2; /* le bouton principal, et l'encre des liens */ --nuit-noir:#0a0a0a; /* l'encre posée sur le blanc — 17,9:1 */ --nuit-cerne-clair:#dcdcdc; --nuit-tranche-claire:#8e8e8e; /* la tranche d'un objet blanc : grise, jamais rose */ --nuit-fil:rgba(255,255,255,.12); /* le fil de lumière d'une surface de verre */ --nuit-voile:rgba(255,255,255,.04); --nuit-verre:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 100%); --nuit-reflet:inset 0 1px 0 rgba(255,255,255,.09); --nuit-reflet-blanc:inset 0 1px 0 #ffffff; --nuit-halo-clair:0 22px 46px -18px rgba(255,255,255,.22); --nuit-ombre:0 24px 48px -26px rgba(0,0,0,.95); --nuit-ombre-logo:0 22px 34px -14px rgba(0,0,0,.6); --nuit-titre:linear-gradient(180deg,#ffffff 0%,#b8b8b8 100%); /* le dégradé des titres, à la Resend */ --nuit-panneau:linear-gradient(180deg,#111113 0%,#0b0b0d 100%); --nuit-erreur:#ff8a8a; /* une erreur reste une erreur : rouge doux, 8,7:1 */ } /* ══ LE PORTRAIT DU CADEAU ET LES STATUTS (15/09/2026, Brice : « C, le portrait ! ») — la carte de l'Atelier porte la photo du jour 1, entière sur un flou tiré d'elle-même ; les statuts sont une pastille fine à point. ══ */ :root{ --vign-l:4rem; --vign-h:5.125rem; --vign-r:.875rem; --vign-cerne:inset 0 0 0 1px rgba(0,0,0,.08); --vign-ombre:0 14px 26px -16px rgba(60,20,35,.45); --vign-mono:linear-gradient(180deg,#ffffff 0%,#f6efec 100%); --vign-lettre:linear-gradient(180deg,#3a2a30 0%,#8a7a80 100%); --etat-fil:rgba(0,0,0,.12); --etat-vivant:#1f9d63; --etat-halo-vivant:rgba(31,157,99,.18); --etat-paye:#2f7fd1; } :root[data-theme="sombre"]{ --vign-cerne:inset 0 0 0 1px rgba(255,255,255,.14); --vign-ombre:0 14px 26px -14px rgba(0,0,0,.8); --vign-mono:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 100%); --vign-lettre:linear-gradient(180deg,#ffffff 0%,#9a9a9a 100%); --etat-fil:rgba(255,255,255,.14); --etat-vivant:#3ddc97; --etat-halo-vivant:rgba(61,220,151,.18); --etat-paye:#70b8ff; } /* ══ L'UNIVERS « PAR DÉFAUT » (16/09/2026, Brice : « ok c'est bien, je valide ») Le thème maison : les couleurs ET la matière du chrome — écran d'entrée et Atelier — relevées au style calculé, pas devinées. ⚠️ Un seul jeton ici : le CŒUR de la lampe. Tout le reste du skin se dit avec les jetons de l'univers lui-même (`--gold` = le rose du logo, `--gold-br` = l'orange, `--frame`, `--frame-d`), pour que rien ne soit écrit en dur et que l'univers reste pilotable depuis sa palette. ⚠️ Ce cœur blanc-jaune n'est PAS dans la palette d'un univers : c'est la température de la lumière, pas une couleur d'objet. Il ne varie pas. ══ */ :root{ --defaut-lueur:#fffdaf; } /* ══ LA VALIDATION (18/09/2026, Brice : « "Générer le code" doit apparaître en vert, couleur de validation finale, dans les deux thèmes, pour montrer la voie ») — le seul vert du chrome. ⚠️ EXCEPTION NOMMÉE au chrome monochrome de la nuit : le vert dit « c'est la dernière marche », il ne décore pas. On ne s'en sert QUE pour ce qui conclut, ou pour une bonne nouvelle (un code accepté, un cadeau débloqué). Face et tranche = le vert Kenney du design system (encre à 6,80:1). Bande de bonne nouvelle : encre 6,09:1 sur sa menthe (clair), 12,03:1 (nuit). ══ */ :root{ --valide:#16bb77; --valide-o:#029357; --sur-valide:#231a1d; --valide-fond:#eaf8f1; --valide-encre:#0a6a41; --valide-fil:rgba(22,187,119,.35); } :root[data-theme="sombre"]{ --sur-valide:#0a0a0a; --valide-fond:#0b1a13; --valide-encre:#7ee8b5; --valide-fil:rgba(126,232,181,.28); } /* ══ L'INTERRUPTEUR (18/09/2026, Brice : « un toggle simple mais premium et adapté aux thèmes » ; et en sombre « les toggles sont blanc et blanc »). La pastille blanche courait sur une piste BLANCHE la nuit : `--accent` y vaut `--nuit-blanc`. Jour : piste au dégradé de la marque, pastille blanche. Nuit : piste blanche, pastille NOIRE — l'inverse, lisible. Dans un univers (écran du cadeau), la page redéfinit `--tog-piste-on` avec `--gold`. ══ */ :root{ /* ⚠️ AFFINÉ LE 20/09/2026 (Brice : « le toggle des notifications a une forme bouffie, vraiment très peu gracieuse — mets-le en mode premium »). La piste faisait 30 px pour une pastille de 24 : 3 px de blanc tout autour, une pastille qui flotte dans son fourreau. Les interrupteurs qu'on trouve beaux tiennent la pastille à 2 px du bord — c'est ce rapport-là, et non la taille, qui fait la différence. On affine la piste (28) et on garde la pastille (24) : l'objet paraît dessiné au lieu de gonflé, la course reste de 22 px et la CIBLE reste à 44 px (elle vient du padding de la boîte, pas de la piste). */ /* ⚠️ REDESSINÉ LE 21/09/2026 (Brice : « les toggles ne sont pas premium, forme très bizarre, trop arrondi »). La pilule entièrement ronde avec une pastille ronde qui touche presque les bords lisait comme une bulle. On passe à un objet USINÉ : piste en rectangle aux angles tenus (9 px), pastille carrée adoucie (6 px) — rayons CONCENTRIQUES, la pastille est à 3 px du bord partout, donc 9 − 3 = 6. C'est ce parallélisme des courbes qui fait « dessiné ». La cible reste 44 px (padding de la boîte). */ --tog-l:50px; --tog-h:28px; --tog-p:22px; --tog-r:9px; --tog-r-p:6px; --tog-piste:rgba(43,13,20,.14); --tog-piste-on:var(--bx-degrade); --tog-pastille:#ffffff; --tog-pastille-on:#ffffff; --tog-ombre:0 2px 5px rgba(43,13,20,.28),0 0 0 .5px rgba(43,13,20,.10); --tog-creux:inset 0 1px 3px rgba(43,13,20,.18); } :root[data-theme="sombre"]{ --tog-piste:rgba(255,255,255,.14); --tog-piste-on:var(--nuit-blanc); --tog-pastille:#c9c9ce; --tog-pastille-on:var(--nuit-noir); --tog-ombre:0 2px 6px rgba(0,0,0,.55); --tog-creux:inset 0 1px 2px rgba(0,0,0,.5); } /* ══ LA TRANCHE CHAUDE DE LA NUIT (18/09/2026, Brice : « dans le menu de l'accueil, les légers reflets orange en dessous des boutons, ça c'est bien ! On applique aussi au menu de l'Atelier »). Relevée au style calculé sur le menu d'entrée : rgb(33,16,21), un noir à peine teinté de la marque, sous un reflet blanc de 1,5 px. ══ */ :root[data-theme="sombre"]{ --nuit-tranche-chaude:#211015; --nuit-reflet-fort:inset 0 1.5px 0 rgba(255,255,255,.42); } /* ══ LE CŒUR POSÉ SUR LA PHOTO (18/09/2026) ══ Il vit SUR une image, pas sur l'univers : blanc, lisible sur toute photo par son ombre, rouge vif une fois donné — le code universel du « j'aime ». Même valeur partout. */ :root{ --coeur:#ff3b5c; --coeur-trait:#ffffff; --coeur-ombre:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.35)); }