/* fx3d-site.css — couche 3D de TOUT forxell.com (fichier NEUF, additif). * * Injecté par nginx sur les 1 673 pages, comme nav-burger.css. C'est la seule * façon d'habiller le site entier sans éditer un seul fichier HTML existant — * la règle « ajout seul » du 25/07 y tient, et 1 673 diffs seraient de toute * façon impossibles à relire. * * ⚠️ Tout est porté par `html.fx3d-site`, classe posée par fx3d-site.js à son * exécution. Si le script échoue ou est bloqué, AUCUNE de ces règles ne * s'applique : le site reste exactement celui d'avant, jamais à moitié * transformé. C'est volontaire — une page à moitié animée est pire qu'une page * sans animation. * * ⚠️ La maquette /apercu-3d/ porte `html.fx3d` et sa propre couche : le script * s'y abstient pour ne pas superposer deux scènes. */ /* ───────────────────── 1. Champ de points en arrière-plan ────────────────── */ /* `isolation: isolate` fait de un contexte d'empilement. Sans lui, un enfant en z-index -1 passerait DERRIÈRE le dégradé de fond du body et on ne verrait rien. Avec lui, il se place entre le fond et le contenu — exactement la couche voulue. La propriété n'a aucun effet de mise en page. */ html.fx3d-site body { isolation: isolate; } html.fx3d-site .fx3d-amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease .25s; } html.fx3d-site .fx3d-amb.ready { opacity: 1; } html.fx3d-site .fx3d-amb canvas { display: block; width: 100%; height: 100%; } /* ──────────────────── 2. Cartes : inclinaison et reflet ──────────────────── */ /* La classe est posée par le script sur les blocs qui sont des SURFACES (une carte de module, un plan tarifaire, une fiche d'aide), jamais sur les commandes (onglets, puces, éléments de menu) : incliner un bouton qu'on s'apprête à cliquer donne une impression de flottement, pas de matière. */ html.fx3d-site .fx-tilt { position: relative; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s, border-color .3s; } /* `will-change` seulement au survol : posé en permanence sur les 200 cartes d'une page, il réserve une couche GPU par carte et coûte plus qu'il ne rend. */ html.fx3d-site .fx-tilt.fx-on { will-change: transform; } html.fx3d-site .fx-tilt.fx-on { box-shadow: 0 28px 64px -26px rgba(7,13,36,.9), 0 0 0 1px rgba(91,91,245,.26); border-color: rgba(91,91,245,.42); } /* Reflet spéculaire suivant le pointeur : c'est lui qui fait lire une surface inclinée plutôt qu'une image déformée. ⚠️ `.video-wrap` est exclu — il utilise DÉJÀ ::after pour son dégradé de bas de cadre (index.html), que cette règle remplacerait en silence. */ html.fx3d-site .fx-tilt:not(.video-wrap)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(120,140,255,.15), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; } html.fx3d-site .fx-tilt.fx-on:not(.video-wrap)::after { opacity: 1; } /* ─────────────────── 3. Arrivée des blocs depuis la profondeur ───────────── */ html.fx3d-site .fx-rise { opacity: 0; transform: perspective(1500px) translate3d(0, 26px, -90px) rotateX(5deg); transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .9s cubic-bezier(.22,.8,.3,1); } html.fx3d-site .fx-rise.fx-in { opacity: 1; transform: none; } /* ───────────────────────── 4. Logo, boutons, liens ───────────────────────── */ /* Le X du logo de la barre tourne EN CONTINU sur son axe vertical. * * Seul le X tourne, pas le mot : « ForXell » vu de profil ne se lit plus, et un * nom de marque illisible une seconde sur deux est un contresens. Le X, lui, est * symétrique — il reste lui-même sous tous les angles. * * 9 s par tour : assez lent pour qu'on ne le regarde pas, assez présent pour * qu'on le remarque. Une rotation rapide sur un élément permanent de * l'interface devient vite fatigante. * * La perspective est posée sur le PARENT : sans elle, rotateY se réduit à une * compression horizontale — aucune profondeur, le X a l'air de se replier à plat. */ html.fx3d-site .logo { perspective: 460px; } html.fx3d-site .logo-x { transform-style: preserve-3d; animation: fx3d-logo-tourne 9s linear infinite; } /* Au survol il accélère : le logo répond à la main sans changer de nature. */ html.fx3d-site .logo:hover .logo-x { animation-duration: 2.2s; } @keyframes fx3d-logo-tourne { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } html.fx3d-site .btn { transition: transform .26s cubic-bezier(.22,.8,.3,1), box-shadow .26s, filter .26s; } html.fx3d-site .btn:hover { transform: translateY(-2px) scale(1.015); } /* ────────────────── 5. Respect de « animations réduites » ────────────────── */ @media (prefers-reduced-motion: reduce) { html.fx3d-site .fx-tilt, html.fx3d-site .btn, html.fx3d-site .logo-x { animation: none !important; } html.fx3d-site .logo-x, html.fx3d-site .fx-rise, html.fx3d-site .fx3d-amb { transition: none !important; } html.fx3d-site .fx-rise { opacity: 1; transform: none; } } /* ═════════ 6. Sélecteur de langue : le défaut de toutes les pages ══════════ * * Mesuré le 16/09 à 1440 px, identique sur la home, tarifs, faq, aide… : * `
` est un enfant direct de