/* ============ DriveLux — Shared styles v2 ============ */ :root { --ember: #f26c20; --navy: #1d3557; --trustpilot: #00b67a; } body { font-family: 'Inter', system-ui, sans-serif; color: #0d1b2a; background: #fcfbf7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, .display { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; } /* Reveal animations */ /* Reveal animations — ne se cachent QUE si le JS est prêt (classe js-ready sur ). Sans JS (ou si le JS plante), le contenu reste visible : pas de page vide. */ .js-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js-ready .reveal.in { opacity: 1; transform: none; } .js-ready .reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js-ready .reveal-left.in { opacity: 1; transform: none; } .js-ready .reveal-right { opacity: 0; transform: translateX(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js-ready .reveal-right.in { opacity: 1; transform: none; } .js-ready .reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js-ready .reveal-scale.in { opacity: 1; transform: none; } .delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; } .delay-4 { transition-delay: .32s; } .delay-5 { transition-delay: .40s; } /* Marquee */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marqueeReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } .marquee-track { animation: marquee 50s linear infinite; } .marquee-track-slow { animation: marquee 70s linear infinite; } .marquee-reverse { animation: marqueeReverse 60s linear infinite; } /* Pulse */ @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(242,108,32,.6); } 70% { box-shadow: 0 0 0 14px rgba(242,108,32,0); } 100% { box-shadow: 0 0 0 0 rgba(242,108,32,0); } } .pulse-ring { animation: pulseRing 2s infinite; } /* Vehicle card */ .vehicle-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; will-change: transform; } .vehicle-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(13,27,42,.15); } .vehicle-card:hover .card-img { transform: scale(1.08); } .card-img { transition: transform .9s cubic-bezier(.2,.7,.2,1); } /* Link underline */ .link-draw { position: relative; display: inline-block; } .link-draw::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.2,.7,.2,1); } .link-draw:hover::after { transform: scaleX(1); transform-origin: left; } /* Button shimmer */ .btn-shine { position: relative; overflow: hidden; isolation: isolate; } .btn-shine::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4), transparent 70%); transform: translateX(-100%); transition: transform .7s; z-index: -1; } .btn-shine:hover::before { transform: translateX(100%); } /* Float */ @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float-y { animation: floatY 3s ease-in-out infinite; } @keyframes floatRotate { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(2deg); } 100% { transform: translateY(0) rotate(0deg); } } .float-rotate { animation: floatRotate 6s ease-in-out infinite; } /* Spin */ @keyframes spinSlow { to { transform: rotate(360deg); } } .spin-slow { animation: spinSlow 30s linear infinite; } /* Word reveal */ .word-reveal .word { display: inline-block; opacity: 0; transform: translateY(20px); animation: wordIn .8s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes wordIn { to { opacity: 1; transform: none; } } .counter { font-variant-numeric: tabular-nums; } .tab-num { font-variant-numeric: tabular-nums; } .lead { font-size: 1.0625rem; line-height: 1.7; color: #4b5563; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d4cdb8; border-radius: 10px; } .hero-fade { background: linear-gradient(180deg, rgba(252,251,247,0) 0%, rgba(252,251,247,0.4) 65%, rgba(252,251,247,1) 100%); } .step-glow { box-shadow: 0 0 0 6px rgba(242, 108, 32, 0.15); } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Trustpilot stars */ .tp-stars { display: inline-flex; gap: 2px; } .tp-star { width: 22px; height: 22px; background: var(--trustpilot); display: flex; align-items: center; justify-content: center; } .tp-star.half { background: linear-gradient(to right, var(--trustpilot) 50%, #dcdce6 50%); } .tp-star svg { width: 14px; height: 14px; fill: white; } /* Social proof toast */ @keyframes toastIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } } @keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-30px); } } .toast-in { animation: toastIn .5s cubic-bezier(.2,.7,.2,1) both; } .toast-out { animation: toastOut .5s cubic-bezier(.2,.7,.2,1) both; } /* Big step number */ .big-step-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(80px, 12vw, 180px); font-weight: 800; line-height: 0.85; letter-spacing: -0.08em; background: linear-gradient(180deg, rgba(29,53,87,0.18) 0%, rgba(29,53,87,0.02) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Grid bg */ .grid-bg { background-image: linear-gradient(rgba(13,27,42,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,42,0.04) 1px, transparent 1px); background-size: 40px 40px; } /* Animated gradient text */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .gradient-text { background: linear-gradient(90deg, #f26c20, #1d3557, #f26c20); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 5s ease-in-out infinite; } /* Carousel */ .carousel-track { transition: transform .6s cubic-bezier(.2,.7,.2,1); } /* Quote */ .quote-mark { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 100px; line-height: 0.5; color: rgba(242, 108, 32, 0.2); font-weight: 800; } /* Blob */ @keyframes blobMorph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } } .blob { animation: blobMorph 12s ease-in-out infinite; } /* Sticky mobile CTA */ @media (max-width: 768px) { .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #e6e2d6; padding: 12px; z-index: 40; box-shadow: 0 -10px 30px rgba(0,0,0,0.06); } } /* Shimmer */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient(90deg, #f3f1ea 25%, #faf8f2 50%, #f3f1ea 75%); background-size: 200% 100%; animation: shimmer 2s infinite; } /* ===== Hero slider ===== */ .slide { z-index: 1; } .slide.active { z-index: 2; opacity: 1 !important; } .slide.active .slide-zoom { animation: slideZoom 7s ease-out forwards; } @keyframes slideZoom { from { transform: scale(1); } to { transform: scale(1.08); } } .slide-zoom { transform: scale(1); transform-origin: center; will-change: transform; } .slide-caption { z-index: 3; } .slide-caption.active { opacity: 1 !important; } /* Les enfants sont visibles par défaut ; l'animation n'est qu'un effet d'entrée */ .slide-caption.active > * { opacity: 1; animation: slideTextIn .8s cubic-bezier(.2,.7,.2,1); } .slide-caption.active > *:nth-child(2) { animation-delay: .12s; } .slide-caption.active > *:nth-child(3) { animation-delay: .24s; } .slide-caption.active > *:nth-child(4) { animation-delay: .36s; } @media (prefers-reduced-motion: reduce) { .slide-caption.active > * { animation: none !important; opacity: 1 !important; transform: none !important; } } @keyframes slideTextIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .slide-anim-in { animation: slideTextIn .8s cubic-bezier(.2,.7,.2,1) both; } .slide-dot.active .dot-fill { width: 100% !important; } .slide-dot:not(.active) .dot-fill { width: 0% !important; } /* ===== Favoris ===== */ .favorite-btn.is-favorite { background: #fff; } /* Le cœur Lucide est dessiné en stroke : on force fill + stroke en orange quand favori */ .favorite-btn.is-favorite svg { fill: #f26c20 !important; stroke: #f26c20 !important; color: #f26c20 !important; } .favorite-btn .fill-ember { fill: #f26c20 !important; color: #f26c20 !important; } @keyframes favPulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } .fav-pulse { animation: favPulse .3s ease-in-out; } /* ============================================================ ANIMATIONS PARCOURS RÉSERVATION (Lot 4 — finitions) ============================================================ */ /* Apparition en fondu + montée (cascade) */ @keyframes dlxFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Apparition en fondu + montée (cascade). Par défaut le contenu est VISIBLE (pas de risque de page blanche). Quand le JS est prêt (js-ready), on cache brièvement puis on anime l'entrée. */ .js-ready .dlx-anim { opacity: 0; animation: dlxFadeUp .6s cubic-bezier(.2,.7,.2,1) forwards; } /* Délais en cascade */ .js-ready .dlx-d1 { animation-delay: .1s; } .js-ready .dlx-d2 { animation-delay: .25s; } .js-ready .dlx-d3 { animation-delay: .4s; } .js-ready .dlx-d4 { animation-delay: .55s; } .js-ready .dlx-d5 { animation-delay: .7s; } /* Check de succès animé (cercle qui se dessine + coche) */ @keyframes dlxCircle { from { stroke-dashoffset: 166; } to { stroke-dashoffset: 0; } } @keyframes dlxCheck { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } } @keyframes dlxPop { 0% { transform: scale(0); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } } .dlx-success-ring { stroke-dasharray: 166; stroke-dashoffset: 166; } .js-ready .dlx-success-ring { animation: dlxCircle .6s ease-out forwards; } .dlx-success-check { stroke-dasharray: 48; stroke-dashoffset: 48; } .js-ready .dlx-success-check { animation: dlxCheck .4s .5s ease-out forwards; } .js-ready .dlx-success-pop { animation: dlxPop .5s cubic-bezier(.2,.8,.2,1.2) both; } /* Skeleton loader (RIB) */ @keyframes dlxShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .dlx-skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 800px 100%; animation: dlxShimmer 1.4s infinite linear; border-radius: 8px; } /* Spinner (bouton chargement + loader RIB) */ @keyframes dlxSpin { to { transform: rotate(360deg); } } .dlx-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: dlxSpin .7s linear infinite; display: inline-block; } .dlx-spinner-navy { border-color: rgba(29,53,87,.2); border-top-color: #1d3557; } /* Timeline qui se dessine (suivi) */ @keyframes dlxDrawLine { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes dlxStepPop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .js-ready .dlx-step { animation: dlxStepPop .45s cubic-bezier(.2,.8,.2,1.2) both; } /* Confettis */ .dlx-confetti-piece { position: fixed; top: -10px; width: 9px; height: 14px; opacity: 0; pointer-events: none; z-index: 200; border-radius: 2px; } @keyframes dlxConfettiFall { 0% { opacity: 1; transform: translateY(0) rotateZ(0deg); } 100% { opacity: 0; transform: translateY(105vh) rotateZ(720deg); } } /* ===== Sliders du simulateur de financement ===== */ .dlx-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: #e6e2d6; outline: none; cursor: pointer; } .dlx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #f26c20; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer; } .dlx-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #f26c20; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer; border-color: #fff; } /* ===== Impression de la fiche véhicule ===== */ @media print { header, footer, #reveal-phone, #open-interest, #open-devis, #share-vehicle, [onclick*="window.print"], .favorite-btn, a[href*="/reservation"], #devis-modal, #interest-modal, .no-print { display: none !important; } /* Cartes et images visibles proprement */ body { background: #fff !important; } .vehicle-card, .bg-white { box-shadow: none !important; border-color: #ddd !important; } /* Affiche les liens utiles */ a[href]:after { content: ""; } } /* Champ anti-spam (honeypot) — invisible pour les humains, rempli par les robots */ .hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }