/* ════════════════════════════════════════════════════════════════════════ * Visago — Premium Animations (DESKTOP ONLY ≥ 721px) * ════════════════════════════════════════════════════════════════════════ * * Style cible : Apple / Hermès / Aesop — restraint premium, jamais clinquant. * * Couvre : * 1. Hover boutons (gold glow + lift subtil) * 2. Hover cards/photos (scale léger + shadow + brightness) * 3. Magnetic buttons (cursor-follow micro) * 4. Image masks reveal (clip-path animé au scroll) * 5. Smooth scroll natif * 6. Cursor custom premium (sans pointer) * * MOBILE INTACT : tout est dans @media (min-width: 721px). * REVERT : enlever le de la page, ou commenter ce fichier entier. * * Auteur : Visago · 2026 * ════════════════════════════════════════════════════════════════════════ */ /* ─── Smooth scroll natif (toutes tailles) ─── */ html { scroll-behavior: smooth; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ DESKTOP UNIQUEMENT (≥ 721px) ║ ╚══════════════════════════════════════════════════════════════════╝ */ @media (min-width: 721px) { /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * HOVER BOUTONS — gold glow + lift subtil * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .btn, .cta, button.btn-validate, a.button, .pack-cta, .price-card .cta, [data-pack], .launch50-banner__cta { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* Boutons primaires (charcoal/noir) → lift léger + shadow douce */ .btn:hover, .cta:hover, button.btn-validate:hover, a.button:hover, .pack-cta:hover, .launch50-banner__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(15, 15, 16, 0.25), 0 4px 8px -2px rgba(15, 15, 16, 0.10); } /* Boutons gold/premium → glow gold subtle */ .btn.gold:hover, .cta-gold:hover, [class*="gold-btn"]:hover { box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.4), 0 10px 28px -8px rgba(184, 149, 106, 0.45), 0 4px 12px -2px rgba(184, 149, 106, 0.25); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * HOVER CARDS — lift + shadow premium * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pack-card, .price-card, .style-card, .testimonial-card, .feature-card, [class*="feature-"][class*="card"], [class*="pack-"][class*="card"] { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .pack-card:hover, .price-card:hover, .style-card:hover, .testimonial-card:hover, .feature-card:hover, [class*="feature-"][class*="card"]:hover, [class*="pack-"][class*="card"]:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(15, 15, 16, 0.18), 0 8px 16px -4px rgba(15, 15, 16, 0.08); } /* Featured pack card → glow gold au hover */ .price-card.featured:hover, .pack-card.featured:hover { box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.3), 0 24px 56px -16px rgba(184, 149, 106, 0.35), 0 8px 20px -4px rgba(184, 149, 106, 0.15); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * HOVER PHOTOS — zoom subtil + brightness * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Containers qui contiennent une image (overflow hidden + zoom au hover) */ .style-card .img, .pack-card .img, .gallery-item, .testimonial-card .photo, [class*="photo-"][class*="container"] { overflow: hidden; position: relative; } .style-card .img img, .pack-card .img img, .gallery-item img, .testimonial-card .photo img, [class*="photo-"][class*="container"] img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease-out; will-change: transform, filter; } .style-card:hover .img img, .pack-card:hover .img img, .gallery-item:hover img, .testimonial-card:hover .photo img, [class*="photo-"][class*="container"]:hover img { transform: scale(1.05); filter: brightness(1.04) saturate(1.05); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * LIENS NAV — soulignement animé gold * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .nav a:not(.btn):not(.cta):not(.nav-logo), nav a:not(.btn):not(.cta):not(.nav-logo) { position: relative; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .nav a:not(.btn):not(.cta):not(.nav-logo)::after, nav a:not(.btn):not(.cta):not(.nav-logo)::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--gold, #B8956A); transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .nav a:not(.btn):not(.cta):not(.nav-logo):hover::after, nav a:not(.btn):not(.cta):not(.nav-logo):hover::after { transform: scaleX(1); transform-origin: left; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * LOGO NAV — micro-scale au hover * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .nav-logo, .nav-logo-text { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; } .nav-logo:hover, .nav-logo-text:hover { transform: scale(1.04); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * SECTIONS — fade-in renforcé au scroll * (utilise .reveal qui existe déjà + ajoute variantes premium) * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Variante : reveal qui slide depuis la gauche (élégant pour textes) */ .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-left.is-visible, .reveal-left.visible { opacity: 1; transform: translateX(0); } /* Variante : reveal qui slide depuis la droite */ .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-right.is-visible, .reveal-right.visible { opacity: 1; transform: translateX(0); } /* Variante : reveal qui zoom subtilement */ .reveal-zoom { opacity: 0; transform: scale(0.96); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-zoom.is-visible, .reveal-zoom.visible { opacity: 1; transform: scale(1); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * CTA STICKY HEADER — apparition douce au scroll * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Nav qui devient légèrement opaque au scroll (déjà géré par scroll JS) */ .nav.is-scrolled, nav.is-scrolled { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); background: rgba(244, 240, 234, 0.88); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * ICÔNES / SVG hover — bounce léger * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .btn svg, .cta svg, a svg.arrow, a svg.chevron { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .btn:hover svg, .cta:hover svg, a:hover svg.arrow { transform: translateX(4px); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * DETAILS FAQ — chevron qui pivote doux + ouverture smooth * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ details summary .toggle, details summary span[class*="toggle"] { display: inline-block; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } details[open] summary .toggle, details[open] summary span[class*="toggle"] { transform: rotate(45deg); } details summary { cursor: pointer; transition: color 0.3s ease-out; } details summary:hover { color: var(--gold, #B8956A); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * STYLE CARDS — checkmark gold sur sélection + hover-glow * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .style-card .check { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease-out; } .style-card.selected, .style-card[aria-checked="true"] { box-shadow: 0 0 0 2px var(--gold, #B8956A) inset !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * CHECKBOX / RADIO — micro-bounce à la sélection * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ input[type="checkbox"]:checked, input[type="radio"]:checked { animation: visago-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes visago-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * PRIX BARRÉS LAUNCH50 — pulse gold subtle * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .launch50-promo, .launch50-discount-badge { animation: visago-glow-soft 3.5s ease-in-out infinite; } @keyframes visago-glow-soft { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px rgba(184, 149, 106, 0.4); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * SECTIONS LIGHT-DARK — séparateurs animés * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Section qui passe de cream à charcoal → fade smooth entre les 2 */ section + section { position: relative; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * ACCESSIBILITÉ — respect prefers-reduced-motion * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* fin du @media (min-width: 721px) */