/* ===================================================================== MI12 FUN CENTER — chrome.css L'habillage du navigateur : barre de défilement, curseur, bouton du son. Trois choses que le visiteur ne « lit » pas mais qui décident du niveau de finition perçu. Tout suit la même signature que le reste du site : l'inclinaison de 8° du logo (--skew), le rouge de marque, zéro rayon. ===================================================================== */ /* ===================================================================== 1) BARRE DE DÉFILEMENT Deux syntaxes, aucune n'est universelle : `scrollbar-*` (standard, Firefox) et `::-webkit-scrollbar` (Chrome, Edge, Safari). On écrit les deux ; le navigateur prend celle qu'il connaît. Le rail porte la trame diagonale du site — la seule barre de défilement possible sur MI12, et sur aucun autre site. ===================================================================== */ :root { --sbw: 12px; } /* Pas de défilement horizontal, jamais. Les révélations `data-reveal="skew"` penchent des blocs pleine largeur : tant qu'elles ne sont pas jouées, la boîte des cartes dépasse de deux pixels à droite et un téléphone affiche une barre horizontale parasite. Mesuré à 390 px : masquer `.acts` ramenait la page de 392 à 390. La coupe est posée sur le bloc lui-même, pas sur `body` : sur `body` elle est propagée à la fenêtre par le moteur de rendu et ne coupe plus rien (vérifié : la page restait à 392). */ .acts { overflow: hidden; } html { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--accent) var(--void); } ::-webkit-scrollbar { width: var(--sbw); height: var(--sbw); } ::-webkit-scrollbar-track { background: repeating-linear-gradient( 98deg, /* 8° de plus que la verticale */ rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px ), var(--void); border-left: 1px solid var(--line); } ::-webkit-scrollbar-thumb { /* Le pouce est un aplat rouge strié de noir : vu de loin, un bloc de couleur ; vu de près, la trame penchée du site. */ background: repeating-linear-gradient( 98deg, rgba(0, 0, 0, 0.34) 0 2px, transparent 2px 8px ), var(--accent); border-top: 3px solid var(--void); border-bottom: 3px solid var(--void); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } ::-webkit-scrollbar-thumb:active { background: var(--accent-soft); } ::-webkit-scrollbar-corner { background: var(--void); } /* Les zones qui défilent horizontalement (bandeau des formules, tableaux de la console) reçoivent une barre plus discrète. */ .formulas::-webkit-scrollbar, [data-scroll-x]::-webkit-scrollbar { height: 8px; } /* ===================================================================== 2) CURSEUR PERSONNALISÉ Deux pièces : un carré plein qui colle au pixel près, et un cadre penché qui suit avec du retard. Le retard, c'est ce qui donne l'impression de poids. Il n'apparaît QUE si js/cursor.js a posé `.has-cursor` sur — c'est-à-dire pointeur fin, pas de tactile, pas de « mouvement réduit ». Sans cela, le curseur du système reste, entier. ===================================================================== */ .cur { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; /* ne doit JAMAIS intercepter un clic */ opacity: 0; transition: opacity var(--t-fast); will-change: transform; } .has-cursor .cur.is-on { opacity: 1; } /* Le point : petit carré plein, sans retard. */ .cur__dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--accent); transform: skewX(var(--skew)); } /* Le cadre : plus grand, vide, en retard d'une fraction de seconde. */ .cur__ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--line-strong); transform: skewX(var(--skew)); transition: width var(--t-fast), height var(--t-fast), margin var(--t-fast), border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast); } /* Au-dessus d'un élément cliquable : le cadre se resserre et rougit. */ .has-cursor.cur-link .cur__ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: var(--accent); background: var(--accent-glow); } .has-cursor.cur-link .cur__dot { opacity: 0; } /* Au-dessus d'un champ de saisie : le curseur redevient une barre de texte. Un rond au-dessus d'un formulaire, on ne sait plus où on écrit. */ .has-cursor.cur-text .cur__ring { width: 2px; height: 26px; margin: -13px 0 0 -1px; border: 0; background: var(--text); transform: skewX(var(--skew)); } .has-cursor.cur-text .cur__dot { opacity: 0; } /* Pendant l'appui : tout se contracte. */ .has-cursor.cur-down .cur__ring { transform: skewX(var(--skew)) scale(0.82); } /* On masque le curseur du système, mais UNIQUEMENT quand le nôtre est en place. `cursor: none` sans remplacement, c'est un site inutilisable. */ .has-cursor, .has-cursor a, .has-cursor button, .has-cursor input, .has-cursor select, .has-cursor textarea, .has-cursor label, .has-cursor [role="button"] { cursor: none; } /* Filet de sécurité : si le JS meurt en cours de route, la classe part et le curseur du système revient tout seul. */ /* ===================================================================== 3) BOUTON DU SON Deux barres qui montent et descendent quand le son est actif, figées et grisées quand il ne l'est pas. L'état se lit sans le survoler. ===================================================================== */ .sfx { display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; width: 38px; height: 38px; padding: 0 0 11px; background: transparent; border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .sfx:hover { border-color: var(--line-strong); color: var(--text); } .sfx:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sfx__b { display: block; width: 2px; height: 5px; background: currentColor; transform: skewX(var(--skew)); transform-origin: bottom; } .sfx[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); } .sfx[aria-pressed="true"] .sfx__b { animation: sfx-eq 0.9s ease-in-out infinite; } .sfx[aria-pressed="true"] .sfx__b:nth-child(2) { animation-delay: 0.15s; } .sfx[aria-pressed="true"] .sfx__b:nth-child(3) { animation-delay: 0.3s; } .sfx[aria-pressed="true"] .sfx__b:nth-child(4) { animation-delay: 0.45s; } @keyframes sfx-eq { 0%, 100% { height: 4px; } 50% { height: 15px; } } /* Au repos, les barres dessinent un profil de haut-parleur coupé. */ .sfx[aria-pressed="false"] .sfx__b:nth-child(1) { height: 4px; } .sfx[aria-pressed="false"] .sfx__b:nth-child(2) { height: 8px; } .sfx[aria-pressed="false"] .sfx__b:nth-child(3) { height: 12px; } .sfx[aria-pressed="false"] .sfx__b:nth-child(4) { height: 6px; } /* Dans l'en-tête, il se range juste avant le bouton « Réserver ». `margin-left: auto` vaut à TOUTES les largeurs : sous 1024 px la navigation et le bouton « Réserver » disparaissent, et sans cette poussée le bouton du son restait planté au milieu de la barre, à 28 px du logo, sans rien pour le justifier. Il doit rester collé au burger, du côté des commandes. */ .header__sfx { margin-left: auto; } @media (max-width: 1024px) { .header__sfx { margin-right: 4px; } } @media (prefers-reduced-motion: reduce) { .sfx[aria-pressed="true"] .sfx__b { animation: none; height: 9px; } .cur { display: none; } }