body {
            font-family: 'Manrope', sans-serif;
            overflow-x: hidden;
        }
        .glass {
            background: rgba(81, 140, 196, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(221, 221, 221, 0.1);
        }
        .glitch-border {
            position: relative;
        }
        .glitch-border::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(90deg, #518CC4, transparent, #0F4B81);
            z-index: -1;
            opacity: 0.5;
        }
        .text-outline {
            -webkit-text-stroke: 1px rgba(221, 221, 221, 0.3);
            color: transparent;
        }
        .vertical-text {
            writing-mode: vertical-rl;
        }



.menu-line{
width:32px;
height:2px;
background:#cbd5e1; /* gris clair */
position:relative;
margin-top:6px;
}

.menu-line::after{
content:"";
position:absolute;
top:-4px;
right:0;
width:0;
height:2px;
background:#14A3B8; /* couleur accent */
transition:0.3s;
}

/* animation hover */
.group:hover .menu-line::after{
width:100%;
}

/* page active */
.group.active .menu-line::after{
width:100%;
}


@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-slow {
  animation: slowRotate 40s linear infinite;
}

@keyframes growBar {

  0% {
    transform: scaleY(0);
    opacity: 0.3;
  }

  40% {
    transform: scaleY(1);
    opacity: 1;
  }

  60% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
    opacity: 0.3;
  }

}

.bar-animate {
  transform-origin: bottom;
  animation: growBar 3s ease-in-out infinite;
}

.bar-animate:nth-child(1){animation-delay:.2s}
.bar-animate:nth-child(2){animation-delay:.5s}
.bar-animate:nth-child(3){animation-delay:.8s}
.bar-animate:nth-child(4){animation-delay:1.1s}
.bar-animate:nth-child(5){animation-delay:1.4s}



@keyframes floatCard {

  0% {
    transform: translateY(0px) rotate(-12deg);
  }

  50% {
    transform: translateY(-15px) rotate(-10deg);
  }

  100% {
    transform: translateY(0px) rotate(-12deg);
  }

}

@keyframes floatCard2 {

  0% {
    transform: translateY(0px) rotate(8deg);
  }

  50% {
    transform: translateY(15px) rotate(10deg);
  }

  100% {
    transform: translateY(0px) rotate(8deg);
  }

}

.card-float-1{
  animation: floatCard 4s ease-in-out infinite;
}

.card-float-2{
  animation: floatCard2 5s ease-in-out infinite;
}
/* animation a l'entrée*/
@keyframes slideTitle {

  0%{
    transform: translateX(-120px);
    opacity: 0;
  }

  100%{
    transform: translateX(0);
    opacity: 1;
  }

}

.title-enter{
  animation: slideTitle 1.2s cubic-bezier(.22,1,.36,1) forwards;
}


@keyframes floatLogo {

0%{
transform:translateY(0px) scale(1);
}

50%{
transform:translateY(-6px) scale(1.03);
}

100%{
transform:translateY(0px) scale(1);
}

}

.logo-animate{
animation:floatLogo 4s ease-in-out infinite;
}




@keyframes neonBeat {

0%{
color: rgb(0 240 255 / 0.15);
text-shadow:0 0 10px rgba(0,240,255,0.2);
transform:scale(1) skewX(12deg);
}

20%{
color: rgb(0 240 255 / 0.5);
text-shadow:
0 0 10px rgba(0,240,255,0.6),
0 0 25px rgba(0,240,255,0.6);
transform:scale(1.05) skewX(12deg);
}

40%{
color: rgb(0 240 255 / 0.25);
transform:scale(1) skewX(12deg);
}

60%{
color: rgb(0 240 255 / 0.8);
text-shadow:
0 0 15px rgba(0,240,255,0.9),
0 0 40px rgba(0,240,255,0.7);
transform:scale(1.07) skewX(12deg);
}

100%{
color: rgb(0 240 255 / 0.15);
text-shadow:0 0 10px rgba(0,240,255,0.2);
transform:scale(1) skewX(12deg);
}

}

.heartbeat-text{
animation:neonBeat 9s infinite ease-in-out;
}


/*----------------------*/
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float-soft {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse-icon {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

.float-soft {
  animation: float-soft 6s ease-in-out infinite;
}

.pulse-icon {
  animation: pulse-icon 2.5s ease-in-out infinite;
}