───────────────────────────────────────────────────────────────── */ .bio-filaments { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } body.mode-jour .bio-filaments, html[data-theme='light'] .bio-filaments { display: none; } .filament { position: absolute; bottom: -8%; width: 1.5px; transform-origin: bottom center; opacity: 0; will-change: transform, opacity; border-radius: 50%; } /* Chaque filament a sa propre couleur et durée */ .filament:nth-child(1) { left: 5%; height: clamp(80px, 14vh, 180px); background: linear-gradient( to top, rgba(0, 229, 204, 0), rgba(0, 229, 204, 0.85), rgba(0, 229, 204, 0) ); animation: fil-sway 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 0s; } .filament:nth-child(2) { left: 12%; height: clamp(60px, 10vh, 130px); background: linear-gradient( to top, rgba(123, 79, 232, 0), rgba(123, 79, 232, 0.7), rgba(123, 79, 232, 0) ); animation: fil-sway2 18s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 1.4s; } .filament:nth-child(3) { left: 21%; height: clamp(100px, 18vh, 230px); background: linear-gradient( to top, rgba(57, 224, 117, 0), rgba(57, 224, 117, 0.75), rgba(57, 224, 117, 0) ); animation: fil-sway 21s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 0.7s; } .filament:nth-child(4) { left: 32%; height: clamp(70px, 12vh, 160px); background: linear-gradient( to top, rgba(0, 180, 216, 0), rgba(0, 180, 216, 0.8), rgba(0, 180, 216, 0) ); animation: fil-sway3 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 2.1s; } .filament:nth-child(5) { left: 44%; height: clamp(90px, 16vh, 210px); background: linear-gradient( to top, rgba(255, 195, 75, 0), rgba(255, 195, 75, 0.6), rgba(255, 195, 75, 0) ); animation: fil-sway2 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 0.3s; } .filament:nth-child(6) { left: 55%; height: clamp(65px, 11vh, 145px); background: linear-gradient( to top, rgba(0, 229, 204, 0), rgba(0, 229, 204, 0.72), rgba(0, 229, 204, 0) ); animation: fil-sway 17s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 1.8s; } .filament:nth-child(7) { left: 65%; height: clamp(110px, 19vh, 250px); background: linear-gradient( to top, rgba(123, 79, 232, 0), rgba(123, 79, 232, 0.65), rgba(123, 79, 232, 0) ); animation: fil-sway3 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 0.9s; } .filament:nth-child(8) { left: 74%; height: clamp(75px, 13vh, 170px); background: linear-gradient( to top, rgba(57, 224, 117, 0), rgba(57, 224, 117, 0.78), rgba(57, 224, 117, 0) ); animation: fil-sway2 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 2.6s; } .filament:nth-child(9) { left: 84%; height: clamp(85px, 15vh, 200px); background: linear-gradient( to top, rgba(0, 229, 204, 0), rgba(0, 229, 204, 0.68), rgba(0, 229, 204, 0) ); animation: fil-sway 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 1.1s; } .filament:nth-child(10) { left: 93%; height: clamp(70px, 12vh, 155px); background: linear-gradient( to top, rgba(255, 195, 75, 0), rgba(255, 195, 75, 0.55), rgba(255, 195, 75, 0) ); animation: fil-sway3 19s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 0.5s; } /* Trois chorégraphies de balancement différentes */ @keyframes fil-sway { 0% { transform: rotate(0deg) scaleY(0.85); opacity: 0; } 6% { opacity: 0.9; } 20% { transform: rotate(12deg) scaleY(1.05); opacity: 0.95; } 40% { transform: rotate(-9deg) scaleY(0.95); opacity: 0.85; } 58% { transform: rotate(14deg) scaleY(1.08); opacity: 0.9; } 76% { transform: rotate(-6deg) scaleY(0.92); opacity: 0.8; } 92% { transform: rotate(4deg) scaleY(0.98); opacity: 0.75; } 96% { opacity: 0.1; } 100% { transform: rotate(0deg) scaleY(0.85); opacity: 0; } } @keyframes fil-sway2 { 0% { transform: rotate(0deg) scaleY(0.8); opacity: 0; } 5% { opacity: 0.85; } 25% { transform: rotate(-14deg) scaleY(1.1); opacity: 0.92; } 48% { transform: rotate(10deg) scaleY(0.9); opacity: 0.78; } 70% { transform: rotate(-11deg) scaleY(1.06); opacity: 0.88; } 90% { transform: rotate(5deg) scaleY(0.95); opacity: 0.7; } 97% { opacity: 0.08; } 100% { transform: rotate(0deg) scaleY(0.8); opacity: 0; } } @keyframes fil-sway3 { 0% { transform: rotate(0deg) scaleY(0.9); opacity: 0; } 7% { opacity: 0.8; } 30% { transform: rotate(8deg) scaleY(1.04); opacity: 0.88; } 55% { transform: rotate(-12deg) scaleY(0.94); opacity: 0.82; } 78% { transform: rotate(7deg) scaleY(1.02); opacity: 0.76; } 95% { opacity: 0.12; } 100% { transform: rotate(0deg) scaleY(0.9); opacity: 0; } } /* Mobile : filaments plus courts et moins nombreux */ @media (max-width: 767px) { .filament:nth-child(n + 7) { display: none; } .filament { width: 1px; } } @media (prefers-reduced-motion: reduce) { .bio-filaments { display: none; } } /* ───────────────────────────────────────────────────────────────── 2. LUCIOLES NIGHT — points lumineux qui tournent en orbite douce ───────────────────────────────────────────────────────────────── */ .lucioles-night { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } body.mode-jour .lucioles-night, html[data-theme='light'] .lucioles-night { display: none; } .luciole { position: absolute; border-radius: 50%; will-change: transform, opacity; } /* 8 lucioles, orbites elliptiques décalées */ .luciole:nth-child(1) { width: 3px; height: 3px; left: 18%; top: 22%; background: rgba(0, 229, 204, 1); box-shadow: 0 0 8px 3px rgba(0, 229, 204, 0.7), 0 0 20px 6px rgba(0, 229, 204, 0.3); animation: luciole-orbit 21s ease-in-out infinite 0s; } .luciole:nth-child(2) { width: 2px; height: 2px; left: 72%; top: 18%; background: rgba(123, 79, 232, 1); box-shadow: 0 0 7px 3px rgba(123, 79, 232, 0.7), 0 0 18px 5px rgba(123, 79, 232, 0.3); animation: luciole-orbit2 28s ease-in-out infinite 3.5s; } .luciole:nth-child(3) { width: 3px; height: 3px; left: 42%; top: 60%; background: rgba(57, 224, 117, 1); box-shadow: 0 0 8px 3px rgba(57, 224, 117, 0.7), 0 0 20px 6px rgba(57, 224, 117, 0.3); animation: luciole-orbit 17s ease-in-out infinite 7s; } .luciole:nth-child(4) { width: 2px; height: 2px; left: 88%; top: 44%; background: rgba(0, 180, 216, 1); box-shadow: 0 0 7px 2px rgba(0, 180, 216, 0.7), 0 0 16px 4px rgba(0, 180, 216, 0.3); animation: luciole-orbit2 23s ease-in-out infinite 1.8s; } .luciole:nth-child(5) { width: 4px; height: 4px; left: 10%; top: 70%; background: rgba(255, 195, 75, 1); box-shadow: 0 0 9px 3px rgba(255, 195, 75, 0.6), 0 0 22px 7px rgba(255, 195, 75, 0.25); animation: luciole-orbit 31s ease-in-out infinite 5.6s; } .luciole:nth-child(6) { width: 2px; height: 2px; left: 58%; top: 12%; background: rgba(0, 229, 204, 1); box-shadow: 0 0 6px 2px rgba(0, 229, 204, 0.6), 0 0 14px 4px rgba(0, 229, 204, 0.25); animation: luciole-orbit2 19s ease-in-out infinite 2.4s; } .luciole:nth-child(7) { width: 3px; height: 3px; left: 34%; top: 84%; background: rgba(123, 79, 232, 1); box-shadow: 0 0 8px 3px rgba(123, 79, 232, 0.65), 0 0 18px 5px rgba(123, 79, 232, 0.28); animation: luciole-orbit 25s ease-in-out infinite 9.1s; } .luciole:nth-child(8) { width: 2px; height: 2px; left: 76%; top: 76%; background: rgba(57, 224, 117, 1); box-shadow: 0 0 7px 2px rgba(57, 224, 117, 0.6), 0 0 16px 4px rgba(57, 224, 117, 0.25); animation: luciole-orbit2 22s ease-in-out infinite 4.2s; } @keyframes luciole-orbit { 0% { transform: translate(0px, 0px) scale(1); opacity: 0; } 6% { opacity: 1; } 18% { transform: translate(28px, -18px) scale(1.3); opacity: 0.9; } 35% { transform: translate(48px, 14px) scale(0.8); opacity: 0.7; } 52% { transform: translate(16px, 36px) scale(1.2); opacity: 0.9; } 68% { transform: translate(-24px, 22px) scale(0.9); opacity: 0.7; } 84% { transform: translate(-14px, -8px) scale(1.1); opacity: 0.8; } 94% { opacity: 0.2; } 100% { transform: translate(0px, 0px) scale(1); opacity: 0; } } @keyframes luciole-orbit2 { 0% { transform: translate(0px, 0px) scale(1); opacity: 0; } 5% { opacity: 0.9; } 22% { transform: translate(-32px, -24px) scale(1.2); opacity: 0.85; } 44% { transform: translate(-52px, 10px) scale(0.85); opacity: 0.65; } 63% { transform: translate(-18px, 38px) scale(1.15); opacity: 0.8; } 80% { transform: translate(22px, 16px) scale(0.92); opacity: 0.7; } 93% { opacity: 0.15; } 100% { transform: translate(0px, 0px) scale(1); opacity: 0; } } @media (max-width: 767px) { .luciole:nth-child(n + 5) { display: none; } } @media (prefers-reduced-motion: reduce) { .lucioles-night { display: none; } } /* ───────────────────────────────────────────────────────────────── 3. SOUFFLE PANDORA — halo de respiration sur le fond (nuit) Pulse très subtile comme si Eywa respirait ───────────────────────────────────────────────────────────────── */ .pandora-breath { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( ellipse 70% 55% at 50% 50%, rgba(0, 229, 204, 0.04) 0%, rgba(123, 79, 232, 0.03) 40%, transparent 70% ); animation: eywa-breath 7s ease-in-out infinite; will-change: opacity, transform; } body.mode-jour .pandora-breath, html[data-theme='light'] .pandora-breath { display: none; } @keyframes eywa-breath { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .pandora-breath { animation: none; } } /* ───────────────────────────────────────────────────────────────── 4. MICRO-FLOAT DES CARTES — hover + section-enter Les cartes respirent légèrement quand elles entrent en vue ───────────────────────────────────────────────────────────────── */ /* Toutes les cartes : micro-float continu très subtil */ .card, .offre-card, .temoignage-card, .realisation-card, .univers-card, [class*='-card'] { animation: card-breathe 8s ease-in-out infinite; animation-play-state: paused; will-change: transform; } /* Démarre seulement quand la carte est en vue */ .section-enter.visible .card, .section-enter.visible .offre-card, .section-enter.visible .realisation-card, .section-enter.visible .univers-card, .section-enter.visible [class*='-card'] { animation-play-state: running; } /* Chaque carte dans une grille a son propre décalage */ .card:nth-child(2), .offre-card:nth-child(2), [class*='-card']:nth-child(2) { animation-delay: 1.2s; } .card:nth-child(3), .offre-card:nth-child(3), [class*='-card']:nth-child(3) { animation-delay: 2.4s; } .card:nth-child(4), .offre-card:nth-child(4), [class*='-card']:nth-child(4) { animation-delay: 3.6s; } .card:nth-child(5), .offre-card:nth-child(5), [class*='-card']:nth-child(5) { animation-delay: 0.8s; } .card:nth-child(6), .offre-card:nth-child(6), [class*='-card']:nth-child(6) { animation-delay: 2s; } @keyframes card-breathe { 0%, 100% { transform: translateY(0px) scale(1); } 40% { transform: translateY(-1.5px) scale(1.001); } 70% { transform: translateY(1px) scale(0.9995); } } /* Hover : petite élévation avec ombre lumineuse */ .card:hover, .offre-card:hover, .realisation-card:hover, .univers-card:hover { transform: translateY(-6px) scale(1.012) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(0, 229, 204, 0.12), 0 0 60px rgba(0, 229, 204, 0.06); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 420ms ease; } body.mode-jour .card:hover, body.mode-jour .offre-card:hover, html[data-theme='light'] .card:hover, html[data-theme='light'] .offre-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 30px rgba(91, 63, 216, 0.1), 0 0 60px rgba(255, 195, 75, 0.08); } /* Transition sortie fluide */ .card, .offre-card, .realisation-card, .univers-card { transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 600ms ease; } @media (prefers-reduced-motion: reduce) { .card, .offre-card, .realisation-card, .univers-card, [class*='-card'] { animation: none !important; } } @media (max-width: 767px) { .card, .offre-card, .realisation-card, .univers-card, [class*='-card'] { animation: none !important; } } /* ───────────────────────────────────────────────────────────────── 5. BOUTONS DANSE — pulsation organique sur CTA primaire ───────────────────────────────────────────────────────────────── */ .btn-primary { position: relative; } .btn-primary::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: transparent; border: 1.5px solid rgba(0, 229, 204, 0); animation: btn-halo 3.5s ease-in-out infinite; pointer-events: none; } body.mode-jour .btn-primary::before, html[data-theme='light'] .btn-primary::before { animation: btn-halo-jour 3.5s ease-in-out infinite; } @keyframes btn-halo { 0%, 100% { border-color: rgba(0, 229, 204, 0); transform: scale(1); } 50% { border-color: rgba(0, 229, 204, 0.45); transform: scale(1.06); } } @keyframes btn-halo-jour { 0%, 100% { border-color: rgba(91, 63, 216, 0); transform: scale(1); } 50% { border-color: rgba(91, 63, 216, 0.35); transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .btn-primary::before { animation: none; } } /* ───────────────────────────────────────────────────────────────── 6. TITRES HERO — scintillement de lettres (sélectif) Sur .hero-word.accent : chaque lettre clignote en décalé ───────────────────────────────────────────────────────────────── */ /* Hero accent : pas de scintillement néon (HIG Apple — calme, lisible) */ .hero-word.accent { display: inline-block; animation: none !important; will-change: auto; } /* ───────────────────────────────────────────────────────────────── 7. NAV — micro-glow sur le lien actif ───────────────────────────────────────────────────────────────── */ nav a.active, nav a[aria-current='page'] { animation: nav-pulse 3.5s ease-in-out infinite; } @keyframes nav-pulse { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(0, 229, 204, 0.4); } } body.mode-jour nav a.active, html[data-theme='light'] nav a.active { animation: nav-pulse-jour 3.5s ease-in-out infinite; } @keyframes nav-pulse-jour { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(91, 63, 216, 0.4); } } @media (prefers-reduced-motion: reduce) { nav a.active { animation: none; } } /* ───────────────────────────────────────────────────────────────── 8. SECTION REVEAL — entrée fluide comme une vague ───────────────────────────────────────────────────────────────── */ .section-enter { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .section-enter.visible { opacity: 1; transform: translateY(0px); } /* Décalage en cascade pour les éléments enfants */ .section-enter.visible > *:nth-child(1) { transition-delay: 80ms; } .section-enter.visible > *:nth-child(2) { transition-delay: 160ms; } .section-enter.visible > *:nth-child(3) { transition-delay: 240ms; } .section-enter.visible > *:nth-child(4) { transition-delay: 320ms; } .section-enter.visible > *:nth-child(5) { transition-delay: 400ms; } @media (max-width: 767px) { .section-enter { opacity: 1 !important; transform: none !important; transition: none !important; } }