/* ============================================================================ EFFETS « WOW » — cartes neon, halo au pointeur, revelation en cascade ---------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE. Notes de Matt du 2026-08-05, posees dans l'editeur sur les cartes de drone.html et d'agence-web.html : · « la selection est dificil, je veux que les case soit neon quelle bouge quelle est un effet wow » (drone.html, .features) · « la selection ce fait mal, le prix soit plus clair plus de couleur dans les case et que ca bouge, toujour de lanimation » (agence-web, .options) MESURE avant correction : les cartes etaient plates (fond #131a2b, bordure 1px grise), le prix ecrit en 0,7rem monospace — plus petit que le texte courant. Un client ne voyait NI qu'une carte etait cliquable, NI son prix. COMMENT C'EST FAIT. Ce fichier ne cible que des classes DEJA presentes dans les pages (.feature, .option-card, .price-card, .metier-card) : aucun HTML a reecrire, donc les tests de tarifs (test:formules, test:metiers) continuent de voir exactement la meme structure. 100 % LOCAL : aucune bibliotheque, aucun CDN. Tout est du CSS natif. Les seuls prerequis sont @property et conic-gradient, disponibles dans tous les navigateurs a jour depuis 2024. ========================================================================== */ /* Angle anime de la bordure neon. Il FAUT @property : une variable CSS ordinaire n'est pas interpolable, l'animation sauterait de 0 a 360. */ @property --wow-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes wow-tourne { to { --wow-angle: 360deg; } } /* ---- 1. BORDURE NEON QUI TOURNE ------------------------------------------- Un cadre lumineux tourne lentement autour de la carte au survol. Pose sur un ::after en `inset:-1px` pour recouvrir exactement la bordure existante. */ .feature, .option-card, .price-card { /* isolation : le halo et la bordure ne debordent pas sur les voisines */ isolation: isolate; } .feature::after, .option-card::after, .price-card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient( from var(--wow-angle), transparent 0%, var(--wow-teinte, #ff6a3d) 12%, var(--wow-teinte2, #b878ff) 22%, transparent 34%, transparent 100% ); /* Ne garder QUE le liseré : le masque evide l'interieur du degrade. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 2; } .feature:hover::after, .option-card:hover::after, .price-card:hover::after, .option-card.selected::after, .price-card.selected::after { opacity: 1; animation: wow-tourne 3.2s linear infinite; } /* Teintes : bleu electrique cote drone, orange/violet cote web. */ .feature { --wow-teinte: #00d4ff; --wow-teinte2: #7ff3ff; } .option-card, .price-card { --wow-teinte: #ff6a3d; --wow-teinte2: #b878ff; } /* ---- 2. HALO QUI SUIT LE POINTEUR ----------------------------------------- --mx / --my sont mises a jour par js/wow.js. Elles existaient deja dans les pages mais AUCUN style ne s'en servait : l'effet etait ecrit et invisible. */ .feature::before, .option-card::before, .price-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--wow-teinte, #ff6a3d) 22%, transparent), transparent 62% ); opacity: 0; transition: opacity .4s; pointer-events: none; /* z-index NEGATIF, et surtout PAS « contenu en position:relative ». PANNE MESUREE le 2026-08-05 : en posant `.option-card > * {position:relative}` pour faire passer le texte au-dessus du halo, la pastille de choix (.pick-check), qui est en position:absolute, a repris comme reference son propre bloc au lieu de la carte — elle a saute du coin haut-droit au ras du prix. Une regle de decor ne doit JAMAIS changer le `position` d'un enfant. Ici -1 suffit : la carte porte `isolation:isolate`, donc le halo se peint au-dessus de son fond et sous le contenu, sans toucher a personne. */ z-index: -1; } .feature:hover::before, .option-card:hover::before, .price-card:hover::before { opacity: 1; } /* La barre lumineuse d'origine de .feature vivait sur ::before, qui sert maintenant au halo. On la redonne a un element dedie pose par js/wow.js. */ .feature .wow-trait { position: absolute; top: 0; left: -100%; width: 100%; height: 1px; z-index: 4; background: linear-gradient(90deg, transparent, var(--wow-teinte), transparent); transition: left .8s ease-out; } .feature:hover .wow-trait { left: 100%; } /* ---- 3. LE PRIX SE VOIT ---------------------------------------------------- Demande de Matt : « le prix soit plus clair ». Il passait en 0,7rem monospace gris-orange. Il devient le deuxieme element le plus gros de la carte, apres le titre. */ .option-price { font-size: 1.55rem !important; letter-spacing: 0 !important; line-height: 1.1; margin-bottom: 10px !important; color: var(--gold-bright, #ff9466) !important; text-shadow: 0 0 18px color-mix(in srgb, var(--gold, #ff6a3d) 55%, transparent); transition: text-shadow .3s, transform .3s; } .option-card:hover .option-price { transform: scale(1.06); transform-origin: left center; text-shadow: 0 0 26px var(--gold, #ff6a3d); } /* Une option COMPRISE dans la formule reste barree : c'est une information de facturation, elle ne doit jamais devenir plus visible que le prix reel. */ .option-card.incluse .option-price { font-size: 1.1rem !important; } /* ---- 4. LA SELECTION SE VOIT ---------------------------------------------- « la selection ce fait mal » : la carte choisie ne se distinguait que par une bordure. Elle respire maintenant, et sa pastille se remplit. */ @keyframes wow-respire { 0%, 100% { box-shadow: 0 0 0 2px var(--gold, #ff6a3d), 0 20px 44px -16px rgba(255,106,61,.45); } 50% { box-shadow: 0 0 0 2px var(--gold, #ff6a3d), 0 0 34px -2px rgba(255,106,61,.75), 0 20px 44px -16px rgba(255,106,61,.45); } } .option-card.selected, .price-card.selected { animation: wow-respire 2.6s ease-in-out infinite; } /* ---- 5. RELIEF AU SURVOL (inclinaison 3D) --------------------------------- Les angles sont poses par js/wow.js en degres, plafonnes a 6 : au-dela on lit moins bien le texte, et l'effet passe du « premium » au « gadget ». */ .feature, .option-card, .price-card { transform-style: preserve-3d; will-change: transform; } .feature.wow-incline, .option-card.wow-incline, .price-card.wow-incline { transform: perspective(900px) rotateX(var(--wow-rx, 0deg)) rotateY(var(--wow-ry, 0deg)) translateY(-6px); } /* ---- 6. REVELATION EN CASCADE --------------------------------------------- Les cartes d'une meme grille n'arrivent plus toutes ensemble : elles se posent l'une apres l'autre. Le delai est pose par js/wow.js (--wow-rang). */ .wow-cascade { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--wow-rang, 0) * 90ms); } .wow-cascade.wow-vu { opacity: 1; transform: none; } /* ---- 7. RESPECT DU REGLAGE SYSTEME ---------------------------------------- Un visiteur qui a demande « moins d'animations » (mal des transports, epilepsie photosensible) recoit la page SANS mouvement, mais complete. */ @media (prefers-reduced-motion: reduce) { .feature::after, .option-card::after, .price-card::after { animation: none; } .option-card.selected, .price-card.selected { animation: none; } .wow-cascade { opacity: 1; transform: none; transition: none; } .feature.wow-incline, .option-card.wow-incline, .price-card.wow-incline { transform: none; } }