/* ═══════════════════════════════════════════════════════════════════════════ BUNBOX — LA MATIÈRE DU CHROME, POUR LES PAGES DE SERVICE --------------------------------------------------------------------------- Écrit le 06/09/2026. Les trois grandes pages — la vitrine, l'écran d'entrée et l'Atelier — ont reçu le nouveau thème ce jour-là. Les huit autres, non : mesuré au rendu, `404`, `success`, `cancel`, `deconnexion` et les quatre pages légales affichaient **0 cerne et 0 tranche** sur la totalité de leurs objets, sur un fond plat `#fdf8f5` doublé du vieux halo de `marque.css` — celui-là même qu'on venait de retirer des trois autres. Deux grammaires à un lien d'écart, et les pages légales s'ouvrent DANS l'app, en iframe. ⚠️ UNE SEULE FEUILLE, PAS HUIT BLOCS RECOPIÉS. C'est la leçon que ce projet a déjà payée trois fois (les rayons, la lèvre, les couleurs de marque) : une recette recopiée ne casse pas, elle DÉRIVE. Tout ce qui suit est écrit ici une fois, et les huit pages n'ajoutent qu'un ``. ⚠️ ELLE NE CONCERNE PAS `index.html`. L'application ne charge ni `marque.css` ni cette feuille, délibérément : elle doit tenir hors ligne et porter les couleurs de son univers. Elle a ses propres copies, comparées par `tests/couleurs-coherentes.js`. Dépend de `tokens.css` (les jetons `--bx-*`) et de `marque.css` (l'arc de marque). Les deux doivent être chargées AVANT. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── LES TROIS COULEURS DE LA MATIÈRE ────────────────────────────────── Mêmes valeurs que `accueil.html` et `atelier.html`, au caractère près : deux recettes « qui se ressemblent » se trahissent au passage de l'une à l'autre. La règle du système : la tranche est TOUJOURS l'ombre de la couleur portée — « un noir importé fait un autocollant, l'ombre fait un objet moulé ». */ --chrome-cerne:var(--bx-sur-degrade,#2b0d14); --chrome-tranche-marque:color-mix(in srgb,var(--bx-rose) 60%,#000); --chrome-tranche-carte:color-mix(in srgb,var(--carte,#fff) 44%,var(--bx-sur-degrade,#2b0d14) 56%); } /* ⚠️ `hidden` NE SUFFIT PAS QUAND UNE RÈGLE D'AUTEUR POSE `display`. Le navigateur écrit `[hidden]{display:none}` dans SA feuille, la plus faible de toutes. Mesuré le 06/09 : le bouton « Se déconnecter » de `/deconnexion` portait `hidden` et s'affichait quand même — la page annonçait « Aucun compte connecté » et proposait d'en déconnecter un — parce que `button{display:block}` gagnait. Une ligne, une fois. */ [hidden]{display:none!important} /* ══ LE CHAMP ══════════════════════════════════════════════════════════════ Le fond de la première page, à l'identique — la même déclaration, pas une teinte approchante. `fixed` parce que les pages légales défilent longtemps : un dégradé qui défile avec le texte se lit comme une bande. */ body{ background:linear-gradient(178deg,#fff6f2 0%,var(--bx-voile) 52%,#ffd9c9 100%); background-attachment:fixed; } /* ⚠️ ET SA NUIT. Le champ écrit DEUX arrêts clairs en dur et n'en fait varier qu'un (`--bx-voile`) : sans cette règle, le mode sombre ne donne pas un fond sombre mais un fond crème avec une bande prune au milieu, sous une encre claire. Le sombre est gelé depuis le 06/09 ; la règle est là pour que la page soit juste le jour où on le rendra. */ :root[data-theme="sombre"] body{ background:linear-gradient(178deg,#000000 0%,#050506 60%,#08080a 100%); } /* Le halo de `marque.css` tombe ici comme il est tombé sur les trois autres pages : c'est LUI qui faisait diverger les fonds. */ body::before{display:none} /* ══ LES SURFACES ══════════════════════════════════════════════════════════ `.doc` et `.note` viennent des pages légales, `.panneau` est le nom neutre pour tout ce qu'on ajoutera. Contour FIN : ce sont des surfaces qu'on lit, pas des objets qu'on presse — le cerne épais est réservé à ce qui se touche. */ .doc, .note, .bx-panneau{ border:var(--bx-contour-fin) solid color-mix(in srgb,var(--chrome-cerne) 55%,transparent); border-radius:var(--bx-r-carte); box-shadow:0 var(--bx-relief-mini) 0 var(--chrome-tranche-carte),var(--bx-brillance); } /* ══ CE QUI SE PRESSE ══════════════════════════════════════════════════════ La recette du design system, mot pour mot : cerne, tranche pleine sans flou, halo teinté, liseré de lumière à l'intérieur. */ .btn, .bx-touche{ border:var(--bx-contour) solid var(--chrome-tranche-marque); border-radius:var(--bx-r-touche); box-shadow:0 var(--bx-relief) 0 var(--chrome-tranche-marque), 0 18px 26px -12px var(--bx-halo), var(--bx-brillance); } /* L'action secondaire porte la même forme et un autre matériau : c'est la couleur qui dit le rôle, jamais la forme. */ .bx-touche--doux, .second{ border:var(--bx-contour) solid color-mix(in srgb,var(--chrome-cerne) 34%,transparent); border-radius:var(--bx-r-touche); background:var(--carte,#fff); box-shadow:0 var(--bx-relief) 0 var(--chrome-tranche-carte),var(--bx-brillance); } /* Le sceau du logo, en haut des pages légales : un petit objet, donc la tranche mini et le rayon mini. */ .badge{ border:var(--bx-contour-fin) solid var(--chrome-tranche-marque); border-radius:var(--bx-r-touche-mini); box-shadow:0 var(--bx-relief-mini) 0 var(--chrome-tranche-marque),var(--bx-brillance); } /* ══ LE GESTE ══════════════════════════════════════════════════════════════ ⚠️ `translate` ET `scale`, JAMAIS `transform` — la règle du CLAUDE.md. `transform` appartient aux univers, et surtout : les trois propriétés se COMPOSENT au lieu de se remplacer. Mesuré le 06/09 sur la vitrine, où les deux écritures coexistaient : la porte descendait de 15 px pour une tranche de 8 px — elle traversait sa propre ombre. L'objet descend exactement de son épaisseur, et sa tranche disparaît. */ .btn, .bx-touche, .bx-touche--doux, .second, .badge{ transition:translate var(--bx-t-geste) var(--bx-ressort), scale var(--bx-t-geste) var(--bx-ressort), box-shadow var(--bx-t-geste) var(--bx-ressort); } .btn:active, .bx-touche:active{ translate:0 calc(var(--bx-relief) - 1px); scale:.985; box-shadow:0 1px 0 var(--chrome-tranche-marque),var(--bx-brillance); } .bx-touche--doux:active, .second:active{ translate:0 calc(var(--bx-relief) - 1px); scale:.985; box-shadow:0 1px 0 var(--chrome-tranche-carte),var(--bx-brillance); } /* ⚠️ MÊME SPÉCIFICITÉ QUE LES RÈGLES QU'ELLE ANNULE — c'est écrit noir sur blanc à la fin du design system, et ça s'est encore payé aujourd'hui dans `index.html` : un garde-fou écrit en classes ne peut pas annuler une règle qui porte un identifiant. Ici tout est en classes des deux côtés, et la liste est la même, dans le même ordre. */ @media (prefers-reduced-motion:reduce){ .btn, .bx-touche, .bx-touche--doux, .second, .badge{transition:none} .btn:active, .bx-touche:active, .bx-touche--doux:active, .second:active{translate:none; scale:none} }