/* ===================================================================== BUNBOX — jetons de marque partagés --------------------------------------------------------------------- Une seule identité pour les trois pages (vente, atelier, application). Avant ce fichier : la page de vente portait le dégradé du logo, l'Atelier un magenta #d6336c qui n'existe nulle part ailleurs, et l'or médiéval #d9ac4c traînait dans les deux. Règle : les trois couleurs du logo ne bougent JAMAIS. Tout ce qui doit porter du texte est un dérivé MESURÉ (rapport de contraste indiqué en commentaire, calculé sur les fonds réels des pages). Les univers du cadeau (25 palettes) ne sont pas concernés : ils ont leur propre direction artistique, c'est le produit. ===================================================================== */ :root{ /* Les commandes NATIVES du navigateur — l'intérieur d'un menu déroulant, les barres de défilement, les sélecteurs de date — ne suivent pas nos couleurs : elles suivent cette propriété. Sans elle, le navigateur les dessine TOUJOURS en clair. En mode sombre, ouvrir le choix de la langue faisait donc surgir un panneau blanc au milieu d'une page sombre. Un seul mot, ici, corrige les trois pages. */ color-scheme: light dark; /* Mouvement « ludique » : le rebond est dans la courbe, pas dans la durée. C'est ce qui donne aux boutons leur élasticité de petit jeu. */ --bx-ressort: cubic-bezier(.34, 1.56, .64, 1); /* ══ RELEVÉ SUR LE FICHIER DU LOGO, PAS SUR UN SOUVENIR (13/08/2026) ══ Brice : « les couleurs du logo ne sont pas du tout respectées, je veux de l'orange pétant ». J'ai donc échantillonné `/img/logo.png` au lieu de faire confiance à ces jetons. Ce que la mesure dit, par fréquence : #fe4040 8,8 % #fe3051 6,9 % #fe5031 6,7 % #fd295b 5,1 % #fd700f 4,9 % #fe7c01 2,6 % Deux enseignements qui changent tout : 1. Le ROUGE est TOUJOURS à fond (253-254). Seuls le vert et le bleu bougent. Le logo n'est donc pas « du rose ET de l'orange » : c'est UN SEUL ARC DE TEINTE à rouge maximal, du rose vers l'orange. 2. Le centre de gravité est le VERMILLON (#fe4040 / #fe5031), pas le rose. Je servais jusqu'ici l'extrémité froide de l'arc, diluée — d'où l'impression de rose pâle, puis de marron une fois posée sur du beige. RÈGLE : toute couleur de marque doit se trouver SUR cet arc. Rien qui sorte du rouge saturé n'a le droit d'entrer dans le chrome. */ --bx-rose:#fd295b; --bx-vermillon:#fe4a38; /* le centre de gravité du logo */ --bx-orange:#fd7e02; --bx-lueur:#fffdaf; --bx-marque:#fe4a38; /* Le dégradé de marque suit l'arc COMPLET, en trois arrêts. À deux arrêts, il passait par un mélange qui n'existe nulle part sur le logo. */ --bx-degrade:linear-gradient(120deg,var(--bx-rose) 0%,var(--bx-vermillon) 46%,var(--bx-orange) 100%); /* Encre posée SUR le dégradé. Le blanc échouait : 3,74:1 côté rose et 2,57:1 côté orange, pour un libellé de 15,4 px en graisse 650 (donc seuil 4,5:1). Cette encre chaude mesure 4,80:1 sur le rose et 6,97:1 sur l'orange — le dégradé du logo est conservé intact. */ --bx-sur-degrade:#2b0d14; /* Encre de marque sur fond clair : liens, chiffres, accents de texte. 5,45:1 sur #faf6f4, 5,32:1 sur le blanc pur. */ --bx-encre-marque:#c9083f; /* Fond ténu pour les puces et les états sélectionnés. */ --bx-voile:#ffe9e4; /* Halo chaud tiré du logo (ombres portées des boutons). */ --bx-halo:color-mix(in srgb, var(--bx-rose) 60%, transparent); } @media (prefers-color-scheme: dark){ :root{ /* Sur fond sombre le rose profond devient illisible : on remonte la clarté en gardant la teinte. 8,64:1 sur #161114. */ --bx-encre-marque:#ff8fa3; --bx-voile:#141416; } } /* ── Choix manuel du thème (réglages de l'Atelier) ── Les règles ci-dessus suivent le SYSTÈME. Dès que le créateur impose un thème, il faut aussi imposer l'encre de marque : sans ces deux règles, un Atelier forcé en sombre sur un système clair garderait le rose profond (#c9083f) sur un fond nuit — illisible. Placées après la media query, elles la battent. */ :root[data-theme="clair"]{ --bx-encre-marque:#c9083f; --bx-voile:#ffe9e4; } :root[data-theme="sombre"]{ /* F1+ (15/09/2026) : en sombre le chrome est MONOCHROME (décision de Brice, voir tokens.css). Le logo garde ses couleurs ; l'interface passe au blanc. */ --bx-voile:#141416; --bx-encre-marque:var(--nuit-blanc); --bx-degrade:linear-gradient(120deg,var(--nuit-blanc) 0%,var(--nuit-blanc) 100%); --bx-sur-degrade:var(--nuit-noir); --bx-halo:rgba(255,255,255,.1); --bx-marque:var(--nuit-blanc); --chrome-cerne:var(--nuit-fil); --chrome-tranche-marque:var(--nuit-tranche-claire); --bx-contour:1.5px; --bx-contour-fin:1px; --bx-relief:5px; --bx-relief-mini:3px; --levre:5px; --levre-forte:5px; } /* ══════════ GRAMMAIRE DE MOUVEMENT ══════════ Une seule famille de courbes pour tout le produit. Le haut de gamme ne tient pas à la quantité d'animation mais à sa CONSTANCE : deux durées, deux courbes, et rien n'apparaît jamais d'un coup. · --bx-sortie : décélération franche, pour ce qui ENTRE (contenu, écrans). Rapide au départ, calme à l'arrivée — l'interface répond tout de suite et se pose sans rebondir. · --bx-ressort : rebond léger, réservé au GESTE (boutons enfoncés, puces). Deux durées seulement : 140 ms pour un retour tactile, 240 ms pour une apparition. Au-delà, on attend ; en deçà, on n'a rien vu. */ :root{ /* ══ UN SYSTÈME DE FORMES (14/08/2026) ══ Relevé sur l'Atelier : 5, 12, 14, 99 et 999 px sur un même écran ; sur l'app, jusqu'à huit valeurs. Chaque ajout avait posé son chiffre. Quatre crans, un métier chacun — c'est ce qui fait qu'un écran paraît voulu. Les mêmes valeurs sont redéclarées dans `index.html`, qui ne charge pas cette feuille (il doit tenir hors-ligne) : même raison que pour la grammaire de mouvement, et même piège — n'en recopier que la moitié. */ /* ══════════════════════════════════════════════════════════════════════ LA LÈVRE — l'épaisseur de ce qui se touche (05/09/2026) ══════════════════════════════════════════════════════════════════════ Brice : « je veux une vraie identité, comme un jeu vidéo ultra moderne, un truc à la Mario, très doux, très lisse, très propre. » ⚠️ CE JETON N'INVENTE RIEN : IL RASSEMBLE. La lèvre existait déjà en TROIS endroits, sous trois formes et sans jamais se rencontrer — · la vitrine, `.porte` : « une lèvre sans flou sous chaque porte lui donne de l'épaisseur, et l'appui la fait descendre exactement de cette hauteur. C'est ce qui rend le geste physique — l'esprit des petits jeux. » → 6 px, jeton local `--levre` · l'Atelier, `.btn` : même mécanique, « la lèvre vient du cadre » → 4 px et 3 px, écrits en dur · l'app, `skin-arcade` et `skin-papier-decoupe` : `3px 3px 0` en DIAGONALE, sur deux univers qui ne sont plus servis. Trois épaisseurs pour une seule idée, sur trois fichiers : c'est « deux grammaires pour une marque » descendu au niveau du pixel. Et le 05/09, en portant la lèvre dans l'application, j'ai commencé par lui donner un QUATRIÈME nom (`--relief`) avant de trouver les trois autres. *Chercher le système existant dans les trois feuilles — y compris celles qu'on ne modifie pas ce jour-là.* LA RECETTE, partout la même : une tranche PLEINE sous l'objet (jamais floue), un liseré clair à l'intérieur en haut, un halo teinté de l'encre du contexte et jamais noir, et à l'appui l'objet descend exactement de son épaisseur pendant que sa tranche disparaît. Sur `--bx-ressort`. La grammaire est universelle ; le MATÉRIAU appartient au contexte — le dégradé de marque sur la vitrine, la teinte de l'univers dans le cadeau, l'encre pleine sur vintage. ⚠️ LA LÈVRE N'EST PAS DE LA MISE EN PAGE. `box-shadow` ne participe ni à la hauteur ni au défilement : elle ne peut pas faire déborder un écran. Mais elle DESSINE sous l'objet — tout empilement doit garder un écart au moins égal à l'épaisseur, sinon la tranche mord sur le voisin. */ --levre-mini: 3px; /* pastilles, puces, jetons */ --levre: 5px; /* la norme : ce qui se presse */ --levre-forte: 6px; /* les grands objets — les portes de la vitrine */ --r-touche: 16px; /* le rayon de ce qui se presse */ --r-touche-mini: 13px; --r-mini: 8px; /* les marques : pastilles, badges, petites puces */ --r-champ: 12px; /* ce qui se touche ou se remplit */ --r-carte: 20px; /* les surfaces : cartes, panneaux, images */ --r-rond: 999px; /* les pilules, et rien d'autre */ --bx-sortie: cubic-bezier(.22, 1, .36, 1); --bx-t-geste: 140ms; --bx-t-entree: 240ms; } /* Ce qui entre : une montée de 6 px et un fondu. Jamais plus — un contenu qui voyage sur 30 px se fait remarquer, or c'est le contenu qu'on doit regarder, pas son arrivée. */ /* ⚠️ `translate` ET NON `transform` (06/09/2026). Cette animation est posée sur `[data-screen]`, c'est-à-dire sur les écrans du cadeau — le territoire des univers, qui écrivent leurs inclinaisons en `transform`. Une animation qui occupe la propriété la REMPLACE le temps qu'elle dure. `translate` fait exactement le même trajet et se compose au lieu d'écraser. */ @keyframes bxEntree{ from{opacity:0; translate:0 6px} to{opacity:1; translate:none} } .bx-entre{ animation: bxEntree var(--bx-t-entree) var(--bx-sortie) both } /* Attente : un voile qui respire, calé sur les couleurs du thème en cours. Un rectangle gris fixe dit « c'est cassé » ; celui-ci dit « ça arrive ». */ @keyframes bxRespire{ 0%,100%{opacity:.55} 50%{opacity:.9} } .bx-squelette{ background: linear-gradient(100deg, color-mix(in srgb, currentColor 7%, transparent) 0%, color-mix(in srgb, currentColor 13%, transparent) 50%, color-mix(in srgb, currentColor 7%, transparent) 100%); border-radius: 8px; animation: bxRespire 1.6s ease-in-out infinite; } /* Quelqu'un qui a demandé moins de mouvement en reçoit zéro — et voit tout le contenu immédiatement, jamais un écran figé à mi-transition. */ @media (prefers-reduced-motion: reduce){ .bx-entre, .bx-squelette{ animation: none } .bx-entre{ opacity: 1; translate: none } } /* ═══════════════════════════════════════════════════════════════════════ FINITIONS D'APPLICATION (02/08/2026) --------------------------------------------------------------------- Ce qui trahit une page web déguisée en application ne tient pas au graphisme : ce sont quatre comportements que le navigateur impose par défaut et que personne ne pense à reprendre. Mesuré : aucun n'était traité sur les six pages. ⚠️ index.html ne charge PAS cette feuille (il porte les couleurs des 25 univers, pas le chrome de marque) : les mêmes règles y sont redéfinies localement, avec une sélection tirée du thème. ═══════════════════════════════════════════════════════════════════════ */ html{ /* Le texte ne gonfle plus tout seul quand on tourne le téléphone. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; /* « Tirer pour recharger » d'Android : recharger l'application au milieu d'un cadeau n'a aucun sens, et le geste part tout seul quand on remonte un peu vite. `contain` garde le rebond, coupe le rechargement et empêche le défilement de fuir vers la page qui nous contient. */ overscroll-behavior-y:contain; } /* Le rectangle gris qui clignote à CHAQUE appui sur Android : c'est le signal n°1 d'un site web. Nos boutons ont déjà leur propre réponse au doigt (la lèvre qui s'enfonce), ce clignotement ne fait que la salir. */ *{ -webkit-tap-highlight-color:transparent } /* La sélection de texte prenait le bleu du système, qui n'appartient à personne. */ ::selection{ background:var(--bx-voile); color:var(--bx-encre-marque) } /* Un défilement programmé (ancre, retour en haut) ne saute plus. */ @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } } /* ══════════ RIEN NE PART EN TRAVERS (08/08/2026) ══════════ Un défilement HORIZONTAL n'est jamais un inconfort : c'est du contenu perdu, parce que personne ne pense à pousser une page de côté. Deux cas mesurés le même jour : · un mot trop long pour sa colonne — arrivé pour de vrai en masquant un
qui séparait deux mots collés dans le HTML ; · le texte agrandi à 200 % (le premier réglage d'une personne malvoyante) : le bouton de la page d'annulation dépassait alors de 41 px à 320 px. `break-word` ne fait RIEN tant que tout tient : il ne coupe un mot que lorsque l'alternative est de pousser la page hors de l'écran. Et BUNBOX vise l'Europe, où l'allemand empile volontiers trente lettres. */ h1, h2, h3, p, li, button, .btn, .door, .opt{ overflow-wrap:break-word } /* ═══════════════════════════════════════════════════════════════════════ LA LUMIÈRE SORT DE LA BOÎTE (13/08/2026) --------------------------------------------------------------------- Demande de Brice : que les pages de marque soient un UNIVERS, pas un habillage — et aux couleurs du logo. L'idée ne vient pas d'un catalogue de tendances, elle vient du logo : c'est une boîte dont le couvercle est ouvert et d'où sort de la lumière. On traite donc la page comme un objet ÉCLAIRÉ, par une source unique posée juste au-dessus du bord haut de l'écran — comme si la boîte venait de s'ouvrir hors champ. Deux couches, et rien d'autre : · LE HALO — la rampe de température d'une vraie lumière chaude : lueur (#fffdaf, le cœur blanc-jaune du logo) → orange → rose → rien. C'est cette RAMPE qui la fait lire comme de la lumière ; un dégradé à deux arrêts ne ferait qu'un fond coloré de plus. · LES RAYONS — des filaments qui DIVERGENT de ce même point. Un `repeating-conic-gradient` posé sur la source donne des rayons, pas une trame régulière. Ils sont estompés par un masque qui les éteint avant le milieu de l'écran : on les sent, on ne les regarde pas. Les deux partagent `--bx-source-*` : déplacer la source déplace le halo ET les rayons ensemble, parce qu'il n'y a qu'une lumière. Pourquoi en `fixed` : la lumière appartient à la SCÈNE, pas au document. Elle ne défile pas avec le contenu — sinon la source « tombe » quand on descend, et l'illusion d'un objet éclairé s'effondre. ⚠️ `index.html` ne charge pas cette feuille : côté destinataire, l'univers du cadeau fait loi (les dix palettes), la marque n'a rien à y faire. ═══════════════════════════════════════════════════════════════════════ */ :root{ --bx-source-x:50%; --bx-source-y:-8%; --bx-lumiere:.92; /* intensité globale, baissée en mode sombre */ } body{ position:relative; isolation:isolate } body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; /* derrière le contenu, devant le fond du body */ } /* LE HALO ⚠️ Ces arrêts ont été REMONTÉS le 13/08/2026. Ils valaient 74/30/17 % — sur les anciens neutres beiges, ça donnait du marron (mesuré : 26 % et 9 % de saturation sur des pages censées porter un logo à 85 %). Une fois la base passée au rose, la même lumière pouvait enfin être une VRAIE lumière : on monte les arrêts et on ajoute une seconde source, plus basse et plus rose, pour que la page ait une profondeur au lieu d'un seul dégradé du haut. L'ordre des arrêts EST la température : blanc-jaune au cœur, orange, puis rose en s'éloignant. C'est ce qui distingue une lumière d'un aplat coloré. */ body::before{ /* L'ORANGE MÈNE, le vermillon suit, le rose ferme. C'est l'ordre du logo lu du centre vers le bord — et c'était l'inverse jusqu'au 13/08/2026, ce qui donnait une page rose là où la marque est chaude. */ background: radial-gradient(126% 64% at var(--bx-source-x) var(--bx-source-y), color-mix(in srgb,var(--bx-lueur) 96%,transparent) 0%, color-mix(in srgb,var(--bx-orange) 78%,transparent) 16%, color-mix(in srgb,var(--bx-vermillon) 52%,transparent) 34%, color-mix(in srgb,var(--bx-rose) 28%,transparent) 54%, transparent 76%), radial-gradient(92% 48% at 86% 106%, color-mix(in srgb,var(--bx-vermillon) 34%,transparent) 0%, color-mix(in srgb,var(--bx-orange) 20%,transparent) 44%, transparent 78%); opacity:var(--bx-lumiere); } /* LES RAYONS */ body::after{ background:repeating-conic-gradient(from 186deg at var(--bx-source-x) var(--bx-source-y), color-mix(in srgb,var(--bx-orange) 26%,transparent) 0deg .09deg, transparent .09deg 2.7deg); /* Ils naissent à la source et s'éteignent avant d'atteindre le contenu : sans ce masque, des rayures traversent la page entière et on ne lit plus. */ -webkit-mask-image:radial-gradient(96% 58% at var(--bx-source-x) var(--bx-source-y), #000 6%, rgba(0,0,0,.55) 26%, transparent 68%); mask-image:radial-gradient(96% 58% at var(--bx-source-x) var(--bx-source-y), #000 6%, rgba(0,0,0,.55) 26%, transparent 68%); opacity:calc(var(--bx-lumiere) * .5); } /* En mode sombre la même lumière suffit à éblouir : on garde la teinte, on baisse l'intensité. Une lampe dans le noir n'est pas plus forte. */ @media (prefers-color-scheme:dark){ :root{ --bx-lumiere:.42 } } :root[data-theme="clair"]{ --bx-lumiere:.92 } :root[data-theme="sombre"]{ --bx-lumiere:.42 } /* Les surfaces sont éclairées PAR CETTE SOURCE : une arête chaude sur le bord haut, là où la lumière frappe. C'est ce qui rattache les cartes à la scène au lieu d'en faire des rectangles posés dessus. Un filet, pas un aplat. */ .card, .porte, .bloc, .tel, details.bx-bloc{ position:relative; } .card::before, .porte::before, .bloc::before{ content:""; position:absolute; left:12%; right:12%; top:0; height:1px; border-radius:inherit; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--bx-lueur) 70%,transparent) 22%, color-mix(in srgb,var(--bx-orange) 60%,transparent) 50%, color-mix(in srgb,var(--bx-lueur) 70%,transparent) 78%, transparent); opacity:.55; }