/* ============================================================================ LES REPÈRES — feuille de style du dispositif d'accompagnement 2026-08-24. Compagnon de `reperes.js`, qui porte le pourquoi de l'ensemble. ⚠️ CETTE FEUILLE SE LIE APRÈS `styles.css`, ET CE N'EST PAS UN DÉTAIL DE GOÛT. `charte-visuelle.mjs` vérifie la symétrie des deux thèmes en lisant `document.styleSheets[0]` — la PREMIÈRE feuille de la page. Passée devant, celle-ci deviendrait `styleSheets[0]` et le contrôle mesurerait le mauvais fichier : il chercherait les jetons du produit dans une feuille qui ne les porte pas. Vérifié le 2026-08-24 dans `charte-visuelle.mjs`, fonction `symetrie`. ── CE QUI SE POSE SUR LE VOILE NE SUIT PAS LE THÈME ────────────────────── Le voile est sombre dans les DEUX thèmes : de jour aussi, c'est lui qui éteint l'écran pour ne laisser qu'une chose allumée. Ce qui se pose DESSUS (les étiquettes, les traits, l'anneau) garde donc les mêmes valeurs des deux côtés — l'orange vif en aplat, l'encre sombre dessus, exactement la combinaison mesurée à 6,84:1 par la charte du produit. Les jetons sont quand même écrits DANS LES DEUX BLOCS DE THÈME, à la même place et dans le même ordre : c'est la règle de styles.css (« tout jeton défini dans l'un l'est dans l'autre »), et un jeton présent d'un seul côté tomberait en silence. La BULLE, elle, suit le thème : elle appartient à l'application, pas au voile. Nuit : `--surface-2` (#17303A) sous `--text` (#E6F0F2). Jour : blanc sous `--text` (#0A181C), soit plus de 15:1 — la valeur qu'il faut pour lire à bout de bras en plein soleil. ── AUCUN `backdrop-filter`, NULLE PART ─────────────────────────────────── Le corpus `barres-fixes.mjs` le refuse déjà sur les barres qui recouvrent du contenu, et pour une bonne raison : une couche de composition de plus à chaque défilement sur un téléphone d'entrée de gamme. Un voile opaque coûte zéro et se lit mieux au soleil. ============================================================================ */ [data-theme="nuit"] { /* Le voile. Un peu plus dense de nuit : le fond de l'application est déjà sombre, il faut plus d'écart pour que la séparation se voie. */ --rep-voile: rgba(2, 6, 8, .82); --rep-anneau: #FF7A18; /* l'aplat historique — identique dans les deux thèmes */ --rep-halo: rgba(255, 122, 24, .34); --rep-etiq-fond: #FF7A18; --rep-etiq-encre: #14181C; /* 6,84:1 sur le vif — la paire mesurée du produit */ --rep-trait: #FF7A18; --rep-bulle: #17303A; /* = --surface-2 côté nuit */ --rep-bulle-bord: #2E5866; } [data-theme="jour"] { --rep-voile: rgba(3, 12, 16, .80); --rep-anneau: #FF7A18; --rep-halo: rgba(255, 122, 24, .38); --rep-etiq-fond: #FF7A18; --rep-etiq-encre: #14181C; --rep-trait: #FF7A18; --rep-bulle: #FFFFFF; /* = --surface côté jour */ --rep-bulle-bord: #C6D3D6; } /* ── LE DISPOSITIF ────────────────────────────────────────────────────────── `z-index: 110`. La hiérarchie du produit, relevée dans styles.css : · 25 la barre collante des actions du devis · 40 la barre du haut · 50 la barre du bas · 100 les modales — dont `#modaleCatalogue`, où vit le repère 6 : le voile doit donc pouvoir passer DEVANT · 150 `#modaleDemande`, la question qui attend une réponse · 200 le bandeau de confirmation Un repère passe devant l'application, jamais devant une question posée à l'artisan ni devant un message qui lui répond. `#reperes` lui-même n'intercepte rien : ce sont les quatre panneaux qui prennent les clics, et le rectangle de la cible reste LIBRE. */ #reperes { position: fixed; inset: 0; z-index: 110; pointer-events: none; } #reperes[hidden] { display: none; } /* ── LES QUATRE PANNEAUX ─────────────────────────────────────────────────── Le voile est découpé en quatre plutôt que creusé d'un `box-shadow` : un élément qui porte le trou occuperait le rectangle de la cible et avalerait le clic. Ici, rien ne couvre la cible — c'est ce que `reperes.mjs` vérifie avec `elementFromPoint`. Ils sont cliquables : un appui dessus ferme le repère. C'est le geste naturel de quelqu'un qui a compris et veut continuer. */ .rep-voile { position: fixed; background: var(--rep-voile); pointer-events: auto; animation: rep-entree .18s ease both; } /* ── L'ANNEAU ────────────────────────────────────────────────────────────── Il ne fait que cercler le trou, il ne le recouvre pas : `pointer-events: none` est ce qui garde la cible touchable. Le halo extérieur lui donne son épaisseur sans mordre à l'intérieur (`box-shadow` posé vers l'extérieur). */ .rep-anneau { position: fixed; /* ⚠️ ÉCRIT ICI, ALORS QUE styles.css POSE DÉJÀ `* { box-sizing: border-box }`. Sans lui, la bordure de 3 px s'ajoute AU DEHORS et l'anneau déborde le trou de 6 px — mesuré au banc d'essai du 2026-08-24, sur une page où la règle globale n'était pas là. Une feuille qui dépend d'un réglage écrit ailleurs se casse le jour où on la lit seule. */ box-sizing: border-box; border: 3px solid var(--rep-anneau); box-shadow: 0 0 0 5px var(--rep-halo); pointer-events: none; animation: rep-battement 2.4s ease-out infinite; } /* ⛔ IL N'Y A PAS DE MAIN DESSINÉE. B.6 en prévoyait une ; elle a été écrite, photographiée au banc du 2026-08-24 à quatre fois la résolution, et retirée : à 34 px, entre l'anneau et la bulle, elle se lisait comme un petit peigne, et son trait de 1,7 px est le premier à disparaître au soleil. Le voile, l'anneau qui bat et la bulle posée juste dessous désignent déjà sans ambiguïté. Écart argumenté, capture à l'appui — voir la note dans reperes.js. */ /* ── LA BULLE ────────────────────────────────────────────────────────────── ⚠️ C'EST UN `