/* carnet.css — l'habillage du fond « carnet d'ordres ». Voir carnet.js. * * PARTAGÉ entre l'écran de connexion et la page d'attente, sous /_marque/, qui * est public : ces deux pages s'affichent avant toute session. * * Le calque reste en z-index 0 et sans événements de pointeur. Le contenu doit * être au-dessus — c'est la leçon du
qui avait délavé l'écran de * connexion : quand un décor peut casser une page, il est au mauvais endroit. */ .carnet{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.17} /* ⚠️ L'EFFET VAUT AUSSI EN SOMBRE, et il y demande un peu plus d'opacité pour porter. Les deux façons d'exprimer le thème sont couvertes : l'attribut, et la préférence système quand aucun attribut n'est posé. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .carnet{opacity:.23} } :root[data-theme="dark"] .carnet{opacity:.23} /* LE RUBAN : le seul élément qui défile, et il porte toutes les lignes. Une animation par ligne donnerait autant de calques composités, et surtout des vitesses qui divergeraient — deux séries qui ne descendent pas à la même allure finissent par se traverser. Ici tout translate d'un bloc, donc les écarts entre séries sont rigoureusement conservés. L'animation elle-même est posée par le SCRIPT et non ici : il a besoin de la relire pour savoir où placer l'impact du curseur. Voir carnet.js. */ .tapis{position:absolute; inset:0; will-change:transform} /* Une LIGNE : une flèche du logo répétée en travers de la page, et toutes ses cotations. Il y en a plusieurs, parallèles, pour remplir le fond. ⚠️ L'OPACITÉ EST POSÉE PAR LE SCRIPT, LIGNE PAR LIGNE : chacune a la sienne, et c'est ce qui donne au fond sa profondeur. La valeur écrite ici ne sert que de repli, et elle reste SOUS 1 comme toutes les autres — le survol éclaire la ligne en la remontant vers 1, et une ligne déjà opaque n'aurait plus où monter. L'opacité de `.carnet` est relevée d'autant pour que l'ensemble reste au même niveau qu'avant. */ .ligne{position:absolute; inset:0; opacity:.62; will-change:transform; transition:opacity .35s ease-out; animation:maqi-flotte var(--t) ease-in-out var(--d) infinite alternate} /* Une COTATION : le vert dessous (meilleur achat), le rouge dessus (meilleure vente), et entre les deux l'écart — le spread. C'est lui que l'ordre creuse, et c'est pour le rendre visible que les deux côtés sont appariés plutôt que dispersés. */ .paire{position:absolute; top:0; bottom:0} /* ⚠️ DEUX NIVEAUX, et c'est nécessaire. La ligne porte la dérive (animation CSS), le pivot l'impact (transform posé par le script). Sur un seul élément les deux écriraient la même propriété et le dernier effacerait l'autre : le carnet se figerait au premier mouvement de souris. ⚠️ ET PAS DE `will-change` ICI. Il y a désormais des centaines de colonnes ; en promouvoir chacune en calque composité coûterait bien plus cher que les quelques transform que le script pose autour du curseur. La dérive, elle, ne touche qu'une poignée de `.ligne` : c'est là que `will-change` a sa place. */ /* ⚠️ COURBE D'ASSOUPLISSEMENT, PAS `linear`. Le script rapproche déjà chaque colonne de sa cible par petites fractions ; la transition ne sert plus qu'à lisser les rares écritures isolées — la colonne qui se fige au passage du curseur, notamment, qui sinon sauterait d'un coup à son résidu. */ .pivot{position:absolute; left:0; right:0; height:0; display:block; transition:transform .14s cubic-bezier(.2,.7,.3,1)} .cote{position:absolute; left:0; right:0; border-radius:2px; transition:top .14s cubic-bezier(.2,.7,.3,1), bottom .14s cubic-bezier(.2,.7,.3,1)} /* ⚠️ LA BRIQUE EST UN DÉGRADÉ, PAS UN APLAT, et c'est ce qu'elle raconte : la liquidité est DENSE AU CONTACT et se raréfie en s'éloignant du prix. Un aplat dirait l'inverse — autant de monde au fond du carnet qu'à la meilleure limite — ce qui n'arrive sur aucun marché. Le côté opaque est celui qui touche l'écart : en BAS pour la vente (qui est au-dessus), en HAUT pour l'achat (qui est en dessous). Inverser les deux retourne le sens du dessin sans qu'aucun test ne s'en plaigne. C'est aussi ce qui autorise des briques hautes : les queues se croisent d'une série à l'autre sans se voir, là où deux aplats feraient un pâté. */ /* ⚠️ HUIT ARRÊTS, ET AUCUN N'EST DE TROP. `linear-gradient` interpole DROIT entre deux arrêts : trois arrêts sur une décroissance courbe donnent trois segments et deux cassures, et la cassure se voit — c'était le « ça tombe d'un coup » du premier profil, qui perdait la moitié de sa couleur sur les 16 premiers pour cent puis traînait. Ces huit-là échantillonnent (1−u)^1.6 : la pente part douce, ne casse nulle part, et la brique s'éteint au lieu de s'arrêter. ⚠️ ET LES ARRÊTS SONT EN POURCENTAGE, DONC LE PROFIL S'ÉTIRE AVEC LA HAUTEUR. Une brique deux fois plus profonde n'est pas plus franche au contact, elle est plus longue à s'éteindre — ce qui est bien ce qu'on veut dire. En revanche l'encre totale monte avec le profil : celui-ci en dépose un tiers de plus que le précédent, et l'opacité de `.carnet` a été baissée d'autant. Retoucher l'un sans l'autre change le poids du fond. */ .cote.bid{background:linear-gradient(to bottom, rgba(46,158,91,1) 0%, rgba(46,158,91,.77) 15%, rgba(46,158,91,.57) 30%, rgba(46,158,91,.39) 45%, rgba(46,158,91,.24) 60%, rgba(46,158,91,.12) 75%, rgba(46,158,91,.04) 90%, rgba(46,158,91,0) 100%)} .cote.ask{background:linear-gradient(to top, rgba(214,69,69,1) 0%, rgba(214,69,69,.77) 15%, rgba(214,69,69,.57) 30%, rgba(214,69,69,.39) 45%, rgba(214,69,69,.24) 60%, rgba(214,69,69,.12) 75%, rgba(214,69,69,.04) 90%, rgba(214,69,69,0) 100%)} /* Une dérive à peine perceptible : quelques pixels sur des dizaines de secondes. Le carnet doit paraître vivant sans jamais attirer l'œil. */ @keyframes maqi-flotte{ from{transform:translate(0,0)} to {transform:translate(var(--dx),var(--dy))} } @media (prefers-reduced-motion:reduce){ .ligne{animation:none; transition:none} .pivot,.cote{transition:none} }