/* * Julien Orbit Motion — couche 3D et mouvement. * * Ce fichier ne redéfinit aucune couleur du thème : il ajoute la profondeur, * le relief au survol, les révélations et les scènes WebGL. Tout se désactive * d'un bloc si le visiteur a demandé à réduire les animations. */ /* ------------------------------------------------------------------ * 1. Scènes WebGL * ------------------------------------------------------------------ */ .jwd-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .jwd-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; } .jwd-scene canvas.is-live { opacity: 1; } /* Lueur au point de fuite : donne un fond au tunnel avant même le rendu 3D. */ .jwd-scene::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(70vw, 780px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient( circle, color-mix(in srgb, var(--jwd-blue) 26%, transparent) 0%, color-mix(in srgb, var(--jwd-blue) 8%, transparent) 38%, transparent 68% ); pointer-events: none; } .jwd-scene--soft::after { opacity: 0.45; } .jwd-scene--none::after { display: none; } /* * Le contenu passe toujours devant la scène. * * Attention : ne jamais imposer « position » à un élément qui se place déjà * lui-même. L'indicateur de défilement du héros est en position absolue ; * le repasser en relatif le réinjecte dans le flux flex du héros, où il * ampute la largeur du conteneur de contenu et supprime la marge de gauche * du titre. Seul le plan de superposition est déclaré ici. */ .hero__inner, .section > .site-shell, .section > .site-shell + .site-shell { position: relative; z-index: 1; } .hero__scroll { z-index: 1; } /* ------------------------------------------------------------------ * 2. Relief des cartes au survol * ------------------------------------------------------------------ */ .jwd-3d { perspective: 1100px; perspective-origin: 50% 50%; } [data-jwd-tilt] { --tilt-x: 0deg; --tilt-y: 0deg; --gloss-x: 50%; --gloss-y: 0%; position: relative; transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease; } /* La promotion en calque n'a lieu que pendant le survol, pas en permanence. */ [data-jwd-tilt].is-tilting { will-change: transform; transition: transform 90ms linear, box-shadow 420ms ease; box-shadow: 0 26px 60px -30px rgba(2, 8, 23, 0.9), 0 0 42px -12px color-mix(in srgb, var(--jwd-blue) 45%, transparent); } /* Reflet spéculaire qui suit le pointeur. */ [data-jwd-tilt]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 380px circle at var(--gloss-x) var(--gloss-y), color-mix(in srgb, var(--jwd-blue) 22%, transparent), transparent 62% ); opacity: 0; transition: opacity 320ms ease; pointer-events: none; z-index: 1; } [data-jwd-tilt].is-tilting::before { opacity: 1; } /* * Aucun style de positionnement n'est imposé aux enfants : forcer * position:relative casserait les éléments que le thème place en absolu, * comme l'étiquette « offre mise en avant ». */ [data-jwd-tilt].is-tilting h3, [data-jwd-tilt].is-tilting .service-card__icon, [data-jwd-tilt].is-tilting .price-card__price { transform: translateZ(34px); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } [data-jwd-tilt] h3, [data-jwd-tilt] .service-card__icon, [data-jwd-tilt] .price-card__price { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------------ * 3. Révélations en profondeur * ------------------------------------------------------------------ */ /* * Seuls l'opacité et la transformation sont animées. Un flou animé force le * navigateur à recomposer l'image à chaque image de l'animation : c'est le * premier responsable des saccades, et sur certaines configurations la * transition ne démarre même pas. La profondeur est rendue par la seule * perspective, sans coût de rendu. */ .jwd-js .reveal[data-jwd-reveal] { opacity: 0; transition: opacity 820ms cubic-bezier(0.22, 1, 0.36, 1), transform 980ms cubic-bezier(0.22, 1, 0.36, 1); } .jwd-js .reveal[data-jwd-reveal="depth"] { transform: perspective(1200px) translate3d(0, 44px, -170px) rotateX(9deg); } .jwd-js .reveal[data-jwd-reveal="rise"] { transform: translate3d(0, 58px, 0); } .jwd-js .reveal[data-jwd-reveal="tilt"] { transform: perspective(1200px) translate3d(0, 40px, -90px) rotateY(-11deg); } .jwd-js .reveal[data-jwd-reveal="zoom"] { transform: perspective(1200px) scale(0.88) translateZ(-70px); } .jwd-js .reveal[data-jwd-reveal].is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------------ * 4. Titres décomposés mot à mot * ------------------------------------------------------------------ */ /* * Le thème met les de titre en display:block pour placer la partie * colorée sur sa propre ligne. Les mots découpés doivent rester en ligne : * ces sélecteurs passent devant cette règle sans recourir à !important. */ .jwd-split-ready .jwd-word, .jwd-split-ready span .jwd-word { display: inline-block; overflow: hidden; vertical-align: bottom; /* Laisse respirer les jambages sans les rogner. */ padding-bottom: 0.14em; margin-bottom: -0.14em; } /* * Les enveloppes ajoutées par le découpage sont des , elles hériteraient * sinon du dégradé réservé à la portion colorée du titre. On les remet à plat : * seul l'élément d'origine conserve son propre style. */ .jwd-split-ready .jwd-word, .jwd-split-ready .jwd-word__inner, .jwd-split-ready span .jwd-word, .jwd-split-ready span .jwd-word__inner { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; } /* Une portion de titre traitée en bloc ne doit pas être rognée. */ .jwd-split-ready .jwd-word--unit { overflow: visible; display: block; } .jwd-split-ready .jwd-word__inner, .jwd-split-ready span .jwd-word__inner { display: inline-block; transform: translateY(112%) rotate(4deg); opacity: 0; transition: transform 880ms cubic-bezier(0.16, 1, 0.3, 1), opacity 620ms ease; transition-delay: calc(var(--word-index, 0) * 62ms); } .jwd-split-ready.is-revealed .jwd-word__inner { transform: none; opacity: 1; } /* ------------------------------------------------------------------ * 5. Parallaxe et progression * ------------------------------------------------------------------ */ [data-jwd-parallax] { --parallax: 0px; transform: translate3d(0, var(--parallax), 0); } /* Filet lumineux de progression, alimenté par --jwd-progress. */ .jwd-fx .page-progress span { background: linear-gradient(90deg, var(--jwd-blue), var(--jwd-orange)); box-shadow: 0 0 18px color-mix(in srgb, var(--jwd-blue) 60%, transparent); } /* ------------------------------------------------------------------ * 6. Contours lumineux animés * ------------------------------------------------------------------ */ /* * Sans cette déclaration, la variable serait traitée comme une chaîne et la * teinte basculerait d'un coup au milieu de l'animation au lieu de glisser. * Les navigateurs qui ignorent @property se contentent de ce basculement : * l'effet est moins fin, jamais cassé. */ @property --jwd-glow-tint { syntax: ""; initial-value: #1687ff; inherits: false; } .jwd-glow-border { position: relative; isolation: isolate; } /* * La bordure lumineuse a d'abord été dessinée à la manière habituelle : un * dégradé conique découpé en anneau d'un pixel par « mask-composite: exclude ». * C'est la technique que l'on trouve partout, et elle a un défaut sérieux — * elle repose sur la composition de deux masques sur un coin arrondi, que * certains rastériseurs ne recomposent pas exactement. Quand ça rate, le * dégradé ne reste pas dans l'anneau : il traverse la carte en diagonale. * Vérifié ici, sur la carte tarifaire mise en avant. * * Un site dont le métier est de paraître irréprochable ne peut pas embarquer * un effet dont l'échec ressemble à une rayure. L'anneau est donc redessiné * sans masque et sans dégradé conique : deux ombres portées, l'une à * l'intérieur pour le filet, l'autre à l'extérieur pour le halo, dont la * teinte glisse du bleu à l'orange. Aucune géométrie à recomposer, donc aucun * artefact possible ; et le navigateur n'a plus qu'une couleur à animer. */ .jwd-glow-border::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--jwd-glow-tint, var(--jwd-blue)), 0 0 22px -6px var(--jwd-glow-tint, var(--jwd-blue)); opacity: 0; transition: opacity 400ms ease; pointer-events: none; z-index: 3; animation: jwd-glow-hue 6s ease-in-out infinite; } @keyframes jwd-glow-hue { 0%, 100% { --jwd-glow-tint: var(--jwd-blue); } 50% { --jwd-glow-tint: var(--jwd-orange); } } .jwd-glow-border:hover::after, .jwd-glow-border.is-tilting::after, .price-card--featured.jwd-glow-border::after { opacity: 1; } /* ------------------------------------------------------------------ * 7. Profondeur ajoutée aux sections existantes * ------------------------------------------------------------------ */ .jwd-fx .section { position: relative; isolation: isolate; } .jwd-fx .services-grid, .jwd-fx .pricing-grid, .jwd-fx .projects-grid, .jwd-fx .about-values { perspective: 1400px; } .jwd-fx .hero__signal { transform-style: preserve-3d; } /* ------------------------------------------------------------------ * 8. Respect des préférences et des petits écrans * ------------------------------------------------------------------ */ @media (max-width: 780px) { [data-jwd-tilt] { transform: none; } .jwd-scene::after { width: 120vw; } } @media (prefers-reduced-motion: reduce) { .jwd-scene canvas, .jwd-glow-border::after { display: none !important; } .jwd-word__inner, .jwd-js .reveal[data-jwd-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; } [data-jwd-tilt] { transform: none !important; transition: none !important; } [data-jwd-parallax] { transform: none !important; } } /* ------------------------------------------------------------------ * 9. Ajustements des blocs qui reçoivent une scène 3D * ------------------------------------------------------------------ */ /* * Voile directionnel : la scène 3D est spectaculaire mais ne doit jamais * disputer la lisibilité au titre. Un dégradé part du bord gauche, là où se * trouve le texte, et s'efface avant le point de fuite. */ .hero--scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, var(--jwd-ink) 0%, color-mix(in srgb, var(--jwd-ink) 88%, transparent) 24%, color-mix(in srgb, var(--jwd-ink) 46%, transparent) 44%, color-mix(in srgb, var(--jwd-ink) 12%, transparent) 62%, transparent 78% ); } .hero--scene .hero__inner, .hero--scene .hero__scroll { z-index: 2; } /* Bannière : la scène remplace l'image, qui ne subsiste qu'en fond discret. */ .hero--scene .hero__media--behind { opacity: 0.26; } .hero--scene .hero__grid { opacity: 0.35; } .hero--scene .hero__trajectory { opacity: 0.55; } /* Section SEO : le globe WebGL occupe la colonne, les libellés restent en orbite. */ .results-visual--scene { position: relative; min-height: 610px; display: grid; place-items: center; } .results-visual--scene .jwd-scene { inset: -6%; } .search-orbit--labels { position: relative; z-index: 2; pointer-events: none; } .search-orbit--labels::before, .search-orbit--labels::after { display: none; } .search-orbit--labels .search-orbit__ring { border-color: transparent; } /* Les sections à scène gardent leur contenu au-dessus du rendu. */ .services-section > .site-shell, .work-section > .site-shell, .pricing-section > .site-shell, .process-section > .site-shell, .about-section > .site-shell, .contact-section > .site-shell, .results-section > .site-shell { position: relative; z-index: 1; } /* Le panneau de contact reste lisible par-dessus le champ de particules. */ .contact-panel { position: relative; z-index: 2; } /* ------------------------------------------------------------------ * 10. Libellés en orbite autour du globe 3D * ------------------------------------------------------------------ */ /* * Les anneaux tournent, les libellés doivent rester lisibles : chacun tourne * en sens inverse de son anneau, à la même vitesse. La propriété `rotate` * agit indépendamment de `transform`, l'inclinaison d'origine est préservée. */ @keyframes jwd-counter-spin { to { rotate: -360deg; } } @keyframes jwd-counter-spin-two { to { rotate: 412deg; } } .search-orbit--labels .search-orbit__ring--one i { animation: jwd-counter-spin 13s linear infinite; } .search-orbit--labels .search-orbit__ring--two i { animation: jwd-counter-spin-two 19s linear infinite; } .search-orbit--labels .search-orbit__ring--three i { animation: jwd-counter-spin 25s linear infinite; } /* Sur le globe, les pastilles s'allègent pour ne pas masquer le maillage. */ .search-orbit--labels .search-orbit__ring i { background: color-mix(in srgb, var(--jwd-ink) 62%, transparent); border-color: color-mix(in srgb, var(--jwd-blue) 34%, transparent); backdrop-filter: blur(6px); color: #dcebff; } @media (prefers-reduced-motion: reduce) { .search-orbit--labels .search-orbit__ring i { animation: none !important; } } /* ------------------------------------------------------------------ * 11. Interrupteur général (Personnaliser → Julien Orbit — Effets 3D) * ------------------------------------------------------------------ */ .jwd-fx-soft .jwd-scene canvas { opacity: 0.45; } .jwd-fx-soft .jwd-scene::after { opacity: 0.5; } .jwd-fx-soft [data-jwd-tilt].is-tilting { box-shadow: 0 18px 42px -28px rgba(2, 8, 23, 0.8); } .jwd-fx-soft .jwd-glow-border::after { animation-duration: 14s; } .jwd-fx-off .jwd-scene, .jwd-fx-off .jwd-glow-border::after { display: none; } .jwd-fx-off [data-jwd-tilt] { transform: none !important; transition: none !important; } .jwd-fx-off .jwd-word__inner, .jwd-fx-off .jwd-js .reveal[data-jwd-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; } /* ------------------------------------------------------------------ * 11 bis. Défilement inertiel * * Dès que le JavaScript prend la main sur la molette, le défilement adouci * natif doit disparaître : les deux mécanismes se disputent sinon la même * position, et chaque image annule la précédente — la page cesse alors de * bouger. La classe n'est posée que si le module s'est réellement initialisé. * ------------------------------------------------------------------ */ html.jwd-smooth { scroll-behavior: auto; } /* ------------------------------------------------------------------ * 12. Grain de film * * Une trame fine posée sur toute la page. C'est le détail qui unifie un * design : elle casse les aplats de dégradé, masque le banding sur les fonds * sombres et donne à l'ensemble une matière photographique. * ------------------------------------------------------------------ */ .jwd-grain::after { content: ""; position: fixed; inset: -120px; z-index: 9998; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation: jwd-grain-drift 620ms steps(1) infinite; } @keyframes jwd-grain-drift { 0% { transform: translate(0, 0); } 25% { transform: translate(-38px, 22px); } 50% { transform: translate(26px, -34px); } 75% { transform: translate(-18px, -20px); } 100% { transform: translate(30px, 16px); } } /* ------------------------------------------------------------------ * 13. Pointeur orange feu * * Une vraie flèche, pas un anneau, et c'est le curseur natif du navigateur — * pas un élément qui court après la souris. * * Ce choix vaut mieux que le précédent pour une raison simple : un curseur * dessiné en JavaScript accuse toujours un retard d'une image ou deux sur le * pointeur réel, et pendant un défilement il décroche franchement. Le curseur * natif est peint par le système, donc collé au doigt, et il continue de * fonctionner si le JavaScript échoue. * * La flèche porte un contour très sombre. C'est lui qui la garde lisible quand * elle passe sur la zone claire du héros : sans contour, une flèche orange sur * un dégradé orange disparaît. Le dégradé intérieur, ambre en haut et feu en * bas, lui donne du relief à vingt-huit pixels. * * Le point chaud est à la pointe (2 2), comme pour toute flèche : cliquer doit * viser ce que la pointe touche, pas le centre du dessin. * ------------------------------------------------------------------ */ /* * Deux images pour chaque forme, et l'ordre compte : le navigateur prend la * première qu'il sait lire. Chrome, Edge et Firefox prennent le SVG, net à * n'importe quelle définition d'écran. Safari ignore les curseurs SVG depuis * toujours : il passe au PNG, qui fait le même dessin. Sans ce second recours, * les visiteurs sur Mac et iPad auraient retrouvé la flèche grise du système. */ :root { --jwd-fleche: url("data:image/svg+xml,") 2 2, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAADRUlEQVR4nLyWXUhTYRjH/2ebZ26WOSt1ZloyUJkNRPOizwvv1gcZCIVG5J0WhBCVlXcRRlfRRYgFWkEgRVJdCHnRRRRCGZQaIkRgU0vdnEz3efb2vOfMtXSzzU0fdnjPec/H7/0/z/9932mwwaFa3mEUUU9HK50KWIdY8dF8Ed8EAaWM4aXfh/ppwIUUhirKCNRyK+C4KOJDPrATKYwVQEa/YuMmXD9l5tByiPicl4a9SFGoovYStclqQldLNXSi2qAW8I7XFusBpJQKjAqIgISa8hz0te1X5WZp1SoBT6i+7UjSTDEVIhgEJAmmXD36b+xTWwozGaX4yg4Rr6mueqQUyEMiYJArDcKg16C3pUqorczj+qyCiIG1mikGkClAUigrJahIibzXUIZrR4o51LxWM8VOqQwMHaH08vPmwwXobjQLujSVbCZKcR2SBmIZcCm9IXiNKQt9Fyyq3Mw0NantIegtxGmmGApZBExRxl2rpFdpTdla9DftUVuMekao1njNFFthMFKZFDaQ0vJBMBjSVeg9WyLUmg1hM22j1RGJAPlKI+fmH0Xsr4GkiGuCymY6tgtXD8kOLhe1spmqYwE1iKmQKYClORnRdg5M4dWwHbOLATbnljDvlQQWeo34OWSmt4iR3mhAptRQCkMCAYZxhxu7Deny9fDkIgZtRBMwS8/YobQOetpOZDv1TyEBhYrbJJ7cIFzuABqejuHjzwW8aSxB2fZ0NFZk49mQXUOQ9xM+nEQCsco8lOB0+VH3aFSG8egY+C0bx5Kjw4HCDL6b1NL6WoqkgUScmffiRNcovv5yh3tfjDgw6fTKRjpfsXWp+zKSBU44fTjaNcrG7B7ObrN5+Q6C0zzLDz/NyHU8WKBDiUHkj5/531RYFci3Jw99edzppw+j2ebDTXkQPvTQvYnHQ3PweALyHG2pzOZp1WjTcAlxRjSFblLDyG3nbH7cj+gPkm/vLPiD4FBeY2uRDkWbNXyladoCGLAWIA38IpnTSrDu5fcCXjyggTg7vzgw7Qrg7qADHpoyBEzP0KAKcUTCuzff9flGHNH1g1J/mwbYAcXfqQWSQYxaEd/pyyP0cjvV+Dl4teOMdfmzu1posMHxBwAA///4EeMyAAAABklEQVQDAFbedbk/5qWxAAAAAElFTkSuQmCC") 2 2; --jwd-fleche-survol: url("data:image/svg+xml,") 2 2, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAADUUlEQVR4nLyWS0hUURjH/3dmvJOvYkqd1Mw0ISVRgmxhtShpoyFpuShtoVChLSKQTCOUlFBqUbhIsSAxIqRIskTIKMi0IIrotbBMEh80vsZ83nncvnOcxsl5NOOMfszMuffcx+/8v+9/zhkVVjkUSzvCReTSt5QOBaxA2L00QsRXQUC8LOORQUKuDpiCD0PhYARK3grIFEV0RwBR8GHYAWX6xMZsxoWSUwQVEiHi/UY/pMBHoXDcLaOwIBu368rh76/WKAV0stpiJYCUUkE2mwHjPNJ2J6P9Xo1CG6ZRKgTcofpWw0szOVUIo8ShcVGh6LhbpUyK3yJTXUsiRTymugbAp0BZ5jCYDLzVBKvRUlcsZB1IYfrSBRFvlmsmF0BSaCCo0cBbUWFGbdkxlJ3IYBbevlwzuUgpUygttoaFtuhIKhov5Qn+aj9uJkpxDrwG2irkMGkhvZbztB3RaL+Wr9BuCFJSipsJehlumsm1aUy20Pl/oHHaIHRczVUmxYbKhCp110zOFdrBpEUjWc41AQq0lGcKWalbrWYKodXRIyBbaXhulsK4gezPRRhRezIV5w8nM2iiqOZm2uUMqHLcbVFoMtIhLQJmas0m67eh7QNau3sxOjkrT0xLmJyRBNnyJA02jMz0Ak7Sq3JIYyllChiMoEaaGv3D44jRBvPzzz90ePddZ6S7RunuMaKwdpyeHSPyGKVoGB4oFKw1JDVT07PIq27D255feFqZgYTItSjYF4v7r3pVBOkalJAND8K5S0mhXv8bOZWtHMaivu0TN07SpiDsiQ9hW1gWra/x8BpICkfG9DhU0YqPfaPW7oevf2JIN8mhp/dH/+0+B2+Bg6NTOFjxRO4Z0jOxFwfmaQeRcdREP7eefePu3BsXhG1a7ovj/5sKLoFse5ozmNA/Mk01RNGAhCo+CAnNdG2wqbMfczMzfI09mxbB0qpS+6EYboYjhbMkRCa35Q8YcMOmn02KK9OSCU1dAzyt6QmBiF4vspWmcB2gwXKAJjPO0GxIJ1jj0mvEuEkq9Q0vh6CbmMH158OYM5hZWtYEqrATboTHuzfb9dlGbNPVR6mvoQHWg9vbx0AySLhaRC+9+Qs9XE01fgBWbTdjRf7sugoVVjn+AAAA//+TIxNqAAAABklEQVQDAF0liAk7BZL9AAAAAElFTkSuQmCC") 2 2; --jwd-barre-texte: url("data:image/svg+xml,") 9 14, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAcCAYAAABsxO8nAAABDUlEQVR4nOyVPY8BURSG3ztz9zuZYpPNZneb3WZLBULpD+jpdCp/Ric6v0IlSg0iOioKEdEpkMy41xmEiRxMEJp5k8nce07mOR/FOxJXkmRi5ucDokLjhftAC8xGNup0XHjjwnv5cgECFXosHJHWmFChxMBGi+2IqOnk36uVT3zgWRosZO4o5Kpjq9yfpujKg7ZAIeBDxl4TO+2P9iYFOpnfVe6/1MPU0f5GG66X+P4jEVMCIToXvHmlkFVAm1s2N9pi4KBG3dlMrkmQBhPnd3SOAlAACkC3AXE26Hp2nN4RJhfe5Ewc6+iUZxsGim7l78cLPLu7ccr7evYhcZ7NlTZdzyZDfmIhfn6Ql2gJAAD//7ZaBJgAAAAGSURBVAMA2CZfxMhoh3gAAAAASUVORK5CYII=") 9 14; } html, body { cursor: var(--jwd-fleche), auto; } /* Sur ce qui se clique, la flèche s'éclaircit : le changement se voit sans qu'on ait à chercher pourquoi. */ a, button, summary, label, [data-magnetic], [data-jwd-tilt], [role="button"], .button, input[type="submit"], input[type="button"], select { cursor: var(--jwd-fleche-survol), pointer; } /* Les champs de saisie gardent une barre de texte — mais en orange elle aussi, parce qu'un curseur système gris au milieu d'un site orange se remarque. */ input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], textarea { cursor: var(--jwd-barre-texte), text; } [disabled], [aria-disabled="true"] { cursor: not-allowed; } /* * Écran tactile : il n'y a pas de pointeur à habiller, et un curseur * personnalisé sur ces appareils ne fait qu'alourdir la page pour rien. */ @media (pointer: coarse) { html, body, a, button, summary, label, [data-magnetic], [data-jwd-tilt], [role="button"], .button { cursor: auto; } } @media (prefers-reduced-motion: reduce) { .jwd-grain::after { animation: none; } /* * Le pointeur n'est plus une animation : c'est le curseur natif, une image * fixe. Il n'y a donc rien à désactiver ici — une flèche immobile ne gêne * personne, et la rendre grise priverait ce réglage d'un repère utile. */ }