.hero-section[data-v-45a54fef] {
  min-height: 90vh;
  color: white;
  background-position: bottom center;
}
.bubble[data-v-45a54fef] {
  position: absolute;
  filter: blur(2px);
  z-index: 1;
  /* Effet de brillance pour les bulles blanches */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.app-image-container[data-v-45a54fef] {
  position: relative;
  max-width: 80%;
  width: 100%;
  max-width: 900px; /* Taille maximale agrandie */
}
.title-container[data-v-45a54fef] {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.title-container[data-v-45a54fef]::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Conteneur stable pour la description */
.description-container[data-v-45a54fef] {
  min-height: 120px; /* Hauteur minimale fixe pour éviter les sauts */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.description-text[data-v-45a54fef] {
  line-height: 1.6;
  max-height: 120px; /* Hauteur maximale correspondant à environ 4 lignes */
  overflow: hidden;
}

/* Animation du curseur de frappe */
.typing-cursor[data-v-45a54fef] {
  display: inline-block;
  animation: blink-45a54fef 0.7s infinite;
}
@keyframes blink-45a54fef {
0%, 100% { opacity: 1;
}
50% { opacity: 0;
}
}

/* Animation du bouton play */
.video-play-button[data-v-45a54fef] {
  animation: pulse-play-45a54fef 2s ease-in-out infinite;
}
@keyframes pulse-play-45a54fef {
0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}

/* Animation de l'indicateur de scroll */
@keyframes scroll-indicator-45a54fef {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(8px);
}
}
.animate-bounce[data-v-45a54fef] {
  animation: scroll-indicator-45a54fef 2s ease-in-out infinite;
}
@media (max-width: 768px) {
.app-image-container[data-v-45a54fef] {
    max-width: 95%;
    margin-bottom: 2rem;
}
.description-container[data-v-45a54fef] {
    min-height: 140px; /* Hauteur légèrement plus grande sur mobile */
}
.description-text[data-v-45a54fef] {
    max-height: 140px;
}
  
  /* Ensure title stays on one line on smaller screens by adjusting font size */
h1.whitespace-nowrap[data-v-45a54fef] {
    font-size: 1.75rem; /* Smaller font size on mobile */
    line-height: 1.2;
}
  
  /* Medium screens */
@media (min-width: 640px) {
h1.whitespace-nowrap[data-v-45a54fef] {
      font-size: 2.25rem;
}
}
.video-play-button[data-v-45a54fef] {
    width: 60px;
    height: 60px;
}
.video-play-button .w-8.h-8[data-v-45a54fef] {
    width: 1.5rem;
    height: 1.5rem;
}
}
@media (max-width: 480px) {
.app-image-container[data-v-45a54fef] {
    max-width: 100%;
}
h1.whitespace-nowrap[data-v-45a54fef] {
    font-size: 1.5rem;
}
.video-play-button[data-v-45a54fef] {
    width: 50px;
    height: 50px;
}
.video-play-button .w-8.h-8[data-v-45a54fef] {
    width: 1.25rem;
    height: 1.25rem;
}
.absolute.top-4.right-4 button[data-v-45a54fef] {
    width: 40px;
    height: 40px;
}
.absolute.top-4.right-4 button .w-5.h-5[data-v-45a54fef] {
    width: 1rem;
    height: 1rem;
}
}

/* Pour l'aspect ratio du iframe vidéo */
.aspect-video[data-v-45a54fef] {
  aspect-ratio: 16 / 9;
}

/* Animation d'entrée pour la popup */
@keyframes fadeIn-45a54fef {
from { opacity: 0; transform: scale(0.95);
}
to { opacity: 1; transform: scale(1);
}
}
.fixed[data-v-45a54fef] {
  animation: fadeIn-45a54fef 0.3s ease-out forwards;
}

/* Animation rapide pour le titre */
.fade-in-fast[data-v-45a54fef] {
  animation: fadeIn-45a54fef 0.5s ease-out forwards;
}

/* Animations de fade pour les éléments de la page */
.fade-in-delay[data-v-45a54fef] {
  opacity: 0;
  animation: fadeIn-45a54fef 1s ease-out 0.3s forwards;
}
.fade-in-delay-longer[data-v-45a54fef] {
  opacity: 0;
  animation: fadeIn-45a54fef 1s ease-out 0.6s forwards;
}

/* Animation pour le toggle dark/light */
@keyframes toggle-bounce-45a54fef {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.1);
}
}
.absolute.top-4.right-4 button[data-v-45a54fef]:active {
  animation: toggle-bounce-45a54fef 0.3s ease-in-out;
}

/* Effet de glow pour le mode dark */
.brightness-90[data-v-45a54fef] {
  filter: brightness(0.9) contrast(1.1);
}

/* Animation pour le badge "Voir la démo" */
@keyframes slide-up-45a54fef {
from {
    opacity: 0;
    transform: translateY(20px) translateX(-50%);
}
to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
}
}
.group:hover .absolute.bottom-6[data-v-45a54fef] {
  animation: slide-up-45a54fef 0.3s ease-out forwards;
}

/* Effet de rotation pour les icônes du toggle */
@keyframes icon-spin-45a54fef {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.absolute.top-4.right-4 button:hover .w-5.h-5[data-v-45a54fef] {
  animation: icon-spin-45a54fef 0.5s ease-in-out;
}

/* Amélioration de l'effet de brillance */
@keyframes shine-enhanced-45a54fef {
0% { 
    transform: translateX(-100%) skewX(-15deg);
    opacity: 0;
}
50% { 
    opacity: 1;
}
100% { 
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
}
}
.group:hover .absolute.inset-0.bg-gradient-to-r[data-v-45a54fef] {
  animation: shine-enhanced-45a54fef 1.5s ease-in-out;
}

/* Effet de pulsation pour l'indicateur de scroll */
@keyframes pulse-glow-45a54fef {
0%, 100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
}
.w-6.h-10.border-2[data-v-45a54fef] {
  animation: pulse-glow-45a54fef 2s ease-in-out infinite;
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
.video-play-button[data-v-45a54fef],
  .animate-bounce[data-v-45a54fef],
  .typing-cursor[data-v-45a54fef] {
    animation: none !important;
}
.group:hover .absolute.inset-0.bg-gradient-to-r[data-v-45a54fef] {
    animation: none !important;
}
}

/* Focus states améliorés */
.video-play-button[data-v-45a54fef]:focus,
.absolute.top-4.right-4 button[data-v-45a54fef]:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Amélioration du contraste en mode high contrast */
@media (prefers-contrast: high) {
.bg-white\/20[data-v-45a54fef] {
    background-color: rgba(255, 255, 255, 0.4);
}
.border-white\/30[data-v-45a54fef] {
    border-color: rgba(255, 255, 255, 0.6);
}
.text-white\/90[data-v-45a54fef] {
    color: rgba(255, 255, 255, 0.95);
}
}

/* Animation de chargement pour l'image */
@keyframes image-load-45a54fef {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.app-image-container img[data-v-45a54fef] {
  animation: image-load-45a54fef 0.8s ease-out forwards;
}

/* Effet de transition pour le changement d'image dark/light */
.app-image-container img[data-v-45a54fef] {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Amélioration de la popup vidéo */
.fixed.inset-0 > div[data-v-45a54fef] {
  animation: fadeIn-45a54fef 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Effet de hover pour l'indicateur de scroll */
.inline-flex.flex-col:hover .w-6.h-10[data-v-45a54fef] {
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
  transition: all 0.3s ease;
}
.inline-flex.flex-col:hover .w-1.h-3[data-v-45a54fef] {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Animation de typing améliorée */
@keyframes typing-enhanced-45a54fef {
0%, 100% { 
    opacity: 1; 
    transform: scaleY(1);
}
50% { 
    opacity: 0; 
    transform: scaleY(0.8);
}
}
.typing-cursor[data-v-45a54fef] {
  animation: typing-enhanced-45a54fef 1s ease-in-out infinite;
  transform-origin: bottom;
}

/* Effet de parallax subtil pour les bulles */
@keyframes parallax-float-45a54fef {
0%, 100% { transform: translateY(0px) translateX(0px);
}
25% { transform: translateY(-10px) translateX(5px);
}
50% { transform: translateY(-5px) translateX(-5px);
}
75% { transform: translateY(-15px) translateX(3px);
}
}
.bubble[data-v-45a54fef]:nth-child(odd) {
  animation: parallax-float-45a54fef 8s ease-in-out infinite;
}
.bubble[data-v-45a54fef]:nth-child(even) {
  animation: parallax-float-45a54fef 10s ease-in-out infinite reverse;
}

/* Amélioration de la performance */
.app-image-container[data-v-45a54fef],
.video-play-button[data-v-45a54fef],
.absolute.top-4.right-4 button[data-v-45a54fef] {
  will-change: transform;
}

/* Effet de transition pour le backdrop-blur */
.backdrop-blur-sm[data-v-45a54fef],
.backdrop-blur-md[data-v-45a54fef] {
  transition: -webkit-backdrop-filter 0.3s ease;
  transition: backdrop-filter 0.3s ease;
  transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

/* Style pour les écrans haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.app-image-container img[data-v-45a54fef] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
}

/* Pattern de points pour le background */
.bg-dot-pattern[data-v-86664f87] {
  background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Animations modernes */
@keyframes fade-in-up-86664f87 {
from {
    opacity: 0;
    transform: translateY(30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.animate-fade-in-up[data-v-86664f87] {
  animation: fade-in-up-86664f87 0.8s ease-out forwards;
}

/* Animation personnalisée pour les éléments décoratifs */
@keyframes float-gentle-86664f87 {
0%, 100% { 
    transform: translateY(0px) scale(1);
}
50% { 
    transform: translateY(-10px) scale(1.05);
}
}
.absolute.-top-4[data-v-86664f87],
.absolute.-bottom-4[data-v-86664f87],
.absolute.top-1\/2[data-v-86664f87] {
  animation: float-gentle-86664f87 4s ease-in-out infinite;
}

/* Responsive moderne */
@media (max-width: 1024px) {
.lg\:grid-cols-3[data-v-86664f87] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.md\:grid-cols-2[data-v-86664f87] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.text-4xl.md\:text-6xl[data-v-86664f87] {
    font-size: 2.5rem;
}
.py-32[data-v-86664f87] {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.text-3xl.md\:text-4xl[data-v-86664f87] {
    font-size: 1.875rem;
}
.text-lg.md\:text-xl[data-v-86664f87] {
    font-size: 1.125rem;
}
}
@media (max-width: 640px) {
.grid[data-v-86664f87] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-8[data-v-86664f87] {
    gap: 1.5rem;
}
.text-xl[data-v-86664f87] {
    font-size: 1.125rem;
}
.absolute.-top-4[data-v-86664f87],
  .absolute.-bottom-4[data-v-86664f87],
  .absolute.top-1\/2[data-v-86664f87] {
    display: none; /* Masquer les éléments décoratifs sur mobile */
}
}

/* Effets de hover avancés */
.group:hover .w-14.h-14[data-v-86664f87] {
  box-shadow: 0 20px 40px -12px rgba(147, 51, 234, 0.4);
}

/* Animation des particules */
@keyframes float-86664f87 {
0%, 100% { 
    transform: translateY(0px) rotate(0deg);
}
50% { 
    transform: translateY(-10px) rotate(180deg);
}
}
.group:hover .absolute.top-6[data-v-86664f87],
.group:hover .absolute.top-10[data-v-86664f87],
.group:hover .absolute.bottom-10[data-v-86664f87] {
  animation: float-86664f87 3s ease-in-out infinite;
}

/* Effet glassmorphism */
.backdrop-blur-xl[data-v-86664f87] {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.backdrop-blur-sm[data-v-86664f87] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Amélioration des transitions */
.transition-all[data-v-86664f87] {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de brillance personnalisé */
.group:hover .absolute.inset-0.bg-gradient-to-r[data-v-86664f87] {
  animation: shine-86664f87 2s ease-in-out infinite;
}
@keyframes shine-86664f87 {
0% { 
    transform: translateX(-100%) skewX(-15deg);
}
50% { 
    transform: translateX(100%) skewX(-15deg);
}
100% { 
    transform: translateX(100%) skewX(-15deg);
}
}

/* Animation de chargement pour les cartes */
@keyframes card-load-86664f87 {
0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}
100% {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
.group[data-v-86664f87] {
  animation: card-load-86664f87 0.6s ease-out forwards;
}

/* Effet de gradient animé pour les bordures */
@keyframes gradient-shift-86664f87 {
0% { background-position: 0% 50%;
}
50% { background-position: 100% 50%;
}
100% { background-position: 0% 50%;
}
}
.bg-gradient-to-r[data-v-86664f87] {
  background-size: 200% 200%;
  animation: gradient-shift-86664f87 3s ease infinite;
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
[data-v-86664f87],[data-v-86664f87]::before,[data-v-86664f87]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
}

/* Focus states pour l'accessibilité */
.group[data-v-86664f87]:focus-within {
  outline: 2px solid #9333ea;
  outline-offset: 2px;
}

/* Amélioration des contrastes */
@media (prefers-contrast: high) {
.text-gray-600[data-v-86664f87] {
    color: #374151;
}
.text-gray-700[data-v-86664f87] {
    color: #1f2937;
}
}

/* Effet de rotation subtile au hover */
.group[data-v-86664f87]:hover {
  transform: translateY(-12px) rotateX(5deg);
  transform-style: preserve-3d;
}

/* Amélioration des ombres */
.shadow-lg[data-v-86664f87] {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.hover\:shadow-2xl[data-v-86664f87]:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.shadow-2xl[data-v-86664f87] {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Effet de survol pour les boutons */
.group:hover .relative.z-10[data-v-86664f87] {
  transform: translateY(-1px);
}

/* Animation de rotation pour les icônes */
@keyframes icon-rotate-86664f87 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.group:hover .w-7.h-7[data-v-86664f87] {
  animation: icon-rotate-86664f87 2s linear infinite;
}

/* Effet de vague pour le background */
@keyframes wave-86664f87 {
0% { transform: translateX(-100%);
}
100% { transform: translateX(100%);
}
}
.bg-gradient-to-r.from-transparent[data-v-86664f87] {
  animation: wave-86664f87 3s ease-in-out infinite;
}

/* Animation pour le titre principal */
@keyframes title-glow-86664f87 {
0%, 100% { 
    text-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}
50% { 
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}
}
.bg-gradient-to-r.from-purple-600.to-blue-600[data-v-86664f87] {
  animation: title-glow-86664f87 3s ease-in-out infinite;
}

/* Animations personnalisées */
@keyframes float-9fe438cc {
0%, 100% { transform: translateY(0px);
}
50% { transform: translateY(-10px);
}
}
@keyframes pulse-glow-9fe438cc {
0%, 100% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}
50% { box-shadow: 0 0 40px rgba(147, 51, 234, 0.6);
}
}
.animate-float[data-v-9fe438cc] {
  animation: float-9fe438cc 3s ease-in-out infinite;
}
.animate-pulse-glow[data-v-9fe438cc] {
  animation: pulse-glow-9fe438cc 2s ease-in-out infinite;
}

/* Effets de survol améliorés */
.group:hover .group-hover\:translate-x-2[data-v-9fe438cc] {
  transform: translateX(0.5rem);
}

/* Amélioration des ombres */
.drop-shadow-xl[data-v-9fe438cc] {
  filter: drop-shadow(0 20px 25px rgb(0 0 0 / 0.15));
}

/* Responsive amélioré */
@media (max-width: 1024px) {
.lg\:text-4xl[data-v-9fe438cc] {
    font-size: 2.5rem;
}
.space-y-32[data-v-9fe438cc] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 6rem;
}
}
@media (max-width: 768px) {
.md\:text-6xl[data-v-9fe438cc] {
    font-size: 3rem;
}
.text-3xl[data-v-9fe438cc] {
    font-size: 2rem;
}
.space-y-32[data-v-9fe438cc] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 4rem;
}
}

/* Effet de brillance sur les images */
.hover\:scale-105[data-v-9fe438cc]:hover {
  transform: scale(1.05);
}

/* Animation des particules */
@keyframes bounce-custom-9fe438cc {
0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
}
40%, 43% {
    transform: translate3d(0,-8px,0);
}
70% {
    transform: translate3d(0,-4px,0);
}
90% {
    transform: translate3d(0,-2px,0);
}
}
.animate-bounce[data-v-9fe438cc] {
  animation: bounce-custom-9fe438cc 2s infinite;
}

.pricing-card[data-v-225c9a95] {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.pricing-card[data-v-225c9a95]:hover {
  transform: translateY(-5px);
}

/* Style spécial pour le plan Pro (mise en évidence) */
.pricing-card[data-v-225c9a95]:nth-child(2) {
  border-top: 4px solid #4338CA;
  box-shadow: 0 10px 30px rgba(67, 56, 202, 0.1);
}

/* Animation pour les boutons */
button[data-v-225c9a95] {
  transition: all 0.2s ease;
}
button[data-v-225c9a95]:active {
  transform: scale(0.98);
}

/* Responsive pour le centrage avec flexbox */
@media (max-width: 1024px) {
.flex-wrap[data-v-225c9a95] {
    justify-content: center;
}
}
@media (max-width: 768px) {
.flex-wrap[data-v-225c9a95] {
    flex-direction: column;
    align-items: center;
}
.pricing-card[data-v-225c9a95] {
    max-width: 400px;
}
}
@media (max-width: 640px) {
.pricing-card[data-v-225c9a95] {
    max-width: 100%;
}
}

@keyframes fadeIn-f8aab9c3 {
from { 
    opacity: 0; 
    transform: translateY(20px);
}
to { 
    opacity: 1; 
    transform: translateY(0);
}
}
.pt-48[data-v-f8aab9c3] {
    padding-top: 16rem!important;
}
.animate-fadeIn[data-v-f8aab9c3] {
  animation: fadeIn-f8aab9c3 1s ease-in-out forwards;
}
.bubble[data-v-f8aab9c3] {
  position: absolute;
  filter: blur(2px);
  z-index: 1;
  /* Glow effect for white bubbles */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.payment-success-container[data-v-b76658d3] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}
.success-card[data-v-b76658d3] {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px;
  text-align: center;
  max-width: 500px;
  width: 100%;
}
.success-icon[data-v-b76658d3] {
  font-size: 64px;
  color: #28a745;
  margin-bottom: 20px;
}
h1[data-v-b76658d3] {
  color: #28a745;
  margin-bottom: 20px;
}
.btn-primary[data-v-b76658d3] {
  background-color: #007bff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}

.payment-cancel-container[data-v-4ce8ef62] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}
.cancel-card[data-v-4ce8ef62] {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px;
  text-align: center;
  max-width: 500px;
  width: 100%;
}
.cancel-icon[data-v-4ce8ef62] {
  font-size: 64px;
  color: #dc3545;
  margin-bottom: 20px;
}
h1[data-v-4ce8ef62] {
  color: #dc3545;
  margin-bottom: 20px;
}
.btn[data-v-4ce8ef62] {
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}
.btn-primary[data-v-4ce8ef62] {
  background-color: #007bff;
  border: none;
  color: white;
}
.btn-secondary[data-v-4ce8ef62] {
  background-color: #6c757d;
  border: none;
  color: white;
  margin-left: 10px;
}
.ml-2[data-v-4ce8ef62] {
  margin-left: 10px;
}