/* STYLE ULTRA-KITCH SKYBLOG POUR PASCALE ! */


* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


body {

  font-family: "Comic Neue", cursive;

  background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff0080);

  background-size: 400% 400%;

  animation: gradientShift 3s ease infinite;

  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="%23ff00ff"/><text x="10" y="15" text-anchor="middle" font-size="12">✨</text></svg>'),

    auto;

  overflow-x: hidden;

  min-height: 100vh;

}


/* Background animé */

.animated-bg {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: radial-gradient(

      circle at 20% 50%,

      transparent 20%,

      rgba(255, 0, 255, 0.3) 21%,

      rgba(255, 0, 255, 0.3) 30%,

      transparent 31%

    ),

    radial-gradient(

      circle at 80% 50%,

      transparent 20%,

      rgba(0, 255, 255, 0.3) 21%,

      rgba(0, 255, 255, 0.3) 30%,

      transparent 31%

    ),

    radial-gradient(

      circle at 40% 80%,

      transparent 20%,

      rgba(255, 255, 0, 0.3) 21%,

      rgba(255, 255, 0, 0.3) 30%,

      transparent 31%

    );

  animation: bgPulse 4s ease-in-out infinite alternate;

  z-index: -3;

}


/* Étoiles scintillantes */

.stars {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent),

    radial-gradient(2px 2px at 40px 70px, #ff00ff, transparent),

    radial-gradient(1px 1px at 90px 40px, #00ffff, transparent),

    radial-gradient(1px 1px at 130px 80px, #ffff00, transparent),

    radial-gradient(2px 2px at 160px 30px, #fff, transparent);

  background-repeat: repeat;

  background-size: 200px 100px;

  animation: sparkle 3s linear infinite;

  z-index: -2;

}


/* Confettis */

.confetti {

  position: fixed;

  top: -10px;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: -1;

}


.confetti::before,

.confetti::after {

  content: "������������✨������������";

  position: absolute;

  top: -50px;

  left: 0;

  width: 100%;

  font-size: 30px;

  animation: confettiFall 8s linear infinite;

}


.confetti::after {

  animation-delay: 4s;

  content: "������������������������⭐";

}


/* Header */

.main-header {

  text-align: center;

  padding: 2rem;

  position: relative;

  background: linear-gradient(

    45deg,

    rgba(255, 0, 255, 0.8),

    rgba(0, 255, 255, 0.8)

  );

  border-bottom: 5px solid #ffff00;

  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);

}


.glitter-text h1 {

  font-family: "Fredoka One", cursive;

  font-size: 3rem;

  margin-bottom: 1rem;

  text-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 15px #ff00ff,

    0 0 20px #ff00ff;

  animation: glowPulse 2s ease-in-out infinite alternate;

}


.subtitle {

  font-size: 1.5rem;

  font-weight: bold;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}


.birthday-cake {

  position: absolute;

  top: 10px;

  right: 20px;

  font-size: 4rem;

  animation: bounce 2s infinite;

}


/* Navigation néon */

.neon-nav {

  background: rgba(0, 0, 0, 0.8);

  padding: 1rem 0;

  text-align: center;

  border-bottom: 3px solid #00ffff;

  position: sticky;

  top: 0;

  z-index: 100;

}


.neon-nav ul {

  list-style: none;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;

}


.nav-btn {

  display: inline-block;

  padding: 0.5rem 1rem;

  text-decoration: none;

  color: #fff;

  font-weight: bold;

  border-radius: 20px;

  transition: all 0.3s ease;

  text-shadow: 0 0 5px currentColor;

  border: 2px solid currentColor;

  animation: neonBlink 3s infinite;

}


.nav-btn:hover {

  transform: scale(1.1);

  box-shadow: 0 0 20px currentColor;

  animation: none;

}


/* Couleurs des boutons */

.nav-btn.pink {

  color: #ff69b4;

  border-color: #ff69b4;

}

.nav-btn.yellow {

  color: #ffff00;

  border-color: #ffff00;

}

.nav-btn.blue {

  color: #00bfff;

  border-color: #00bfff;

}

.nav-btn.red {

  color: #ff1493;

  border-color: #ff1493;

}

.nav-btn.green {

  color: #00ff7f;

  border-color: #00ff7f;

}

.nav-btn.purple {

  color: #da70d6;

  border-color: #da70d6;

}

.nav-btn.orange {

  color: #ff8c00;

  border-color: #ff8c00;

}

.nav-btn.cyan {

  color: #00ffff;

  border-color: #00ffff;

}

.nav-btn.magenta {

  color: #ff00ff;

  border-color: #ff00ff;

}

.nav-btn.gold {

  color: #ffd700;

  border-color: #ffd700;

}


/* Sections */

.category-section {

  margin: 3rem 0;

  padding: 2rem;

  background: linear-gradient(

    135deg,

    rgba(255, 255, 255, 0.1),

    rgba(255, 255, 255, 0.2)

  );

  border: 3px solid rgba(255, 255, 255, 0.5);

  border-radius: 20px;

  backdrop-filter: blur(10px);

  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);

  position: relative;

  overflow: hidden;

}


.category-section::before {

  content: "";

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: conic-gradient(

    from 0deg,

    transparent,

    rgba(255, 255, 255, 0.1),

    transparent

  );

  animation: rotate 10s linear infinite;

  z-index: -1;

}


.section-header {

  text-align: center;

  margin-bottom: 2rem;

}


.section-title {

  font-family: "Fredoka One", cursive;

  font-size: 2.5rem;

  margin-bottom: 1rem;

  color: #fff;

  text-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 15px #00ffff;

}


.section-desc {

  font-size: 1.2rem;

  color: #fff;

  font-weight: bold;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}


/* Carrousels */

.carousel-container {

  position: relative;

  max-width: 600px;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 15px;

  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);

  aspect-ratio: 1/1; /* Format carré pour le conteneur */

}


.carousel {

  display: flex;

  transition: transform 0.5s ease-in-out;

  position: relative;

}


.carousel-item {

  min-width: 100%;

  position: relative;

  text-align: center;

  aspect-ratio: 1/1; /* Format carré */

  overflow: hidden;

}


.carousel-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 10px;

  filter: brightness(1.1) contrast(1.1) saturate(1.2);

  transition: all 0.3s ease;

}


.carousel-item:hover img {

  transform: scale(1.05);

  filter: brightness(1.2) contrast(1.2) saturate(1.3);

  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);

}


/* Contrôles carrousel */

.carousel-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(255, 0, 255, 0.8);

  color: white;

  border: none;

  padding: 1rem;

  font-size: 2rem;

  cursor: pointer;

  border-radius: 50%;

  z-index: 10;

  transition: all 0.3s ease;

  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);

}


.carousel-btn:hover {

  background: rgba(255, 0, 255, 1);

  transform: translateY(-50%) scale(1.1);

  box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);

}


.carousel-btn.prev {

  left: 10px;

}


.carousel-btn.next {

  right: 10px;

}


/* Indicateurs */

.carousel-indicators {

  text-align: center;

  margin-top: 1rem;

}


.indicator {

  display: inline-block;

  width: 15px;

  height: 15px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.5);

  margin: 0 5px;

  cursor: pointer;

  transition: all 0.3s ease;

}


.indicator.active {

  background: #ff00ff;

  box-shadow: 0 0 10px #ff00ff;

  transform: scale(1.2);

}


/* Vidéo */

.video-container {

  text-align: center;

  max-width: 600px;

  margin: 0 auto;

}


.fun-video {

  width: 100%;

  max-width: 600px;

  border-radius: 15px;

  border: 5px solid #ff00ff;

  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);

  filter: brightness(1.1) contrast(1.1);

}


/* Footer */

.kitch-footer {

  background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);

  background-size: 400% 400%;

  animation: gradientShift 3s ease infinite;

  padding: 2rem;

  text-align: center;

  margin-top: 3rem;

  border-top: 5px solid #fff;

}


.footer-content p {

  font-size: 1.2rem;

  font-weight: bold;

  margin: 0.5rem 0;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}


.hearts {

  font-size: 2rem;

  animation: heartBeat 1.5s infinite;

}


/* ANIMATIONS */

@keyframes gradientShift {

  0% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

  100% {

    background-position: 0% 50%;

  }

}


@keyframes sparkle {

  0% {

    opacity: 0;

  }

  50% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}


@keyframes confettiFall {

  0% {

    transform: translateY(-100vh) rotate(0deg);

  }

  100% {

    transform: translateY(100vh) rotate(360deg);

  }

}


@keyframes glowPulse {

  0% {

    text-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 15px #ff00ff,

      0 0 20px #ff00ff;

  }

  100% {

    text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff,

      0 0 40px #ff00ff;

  }

}


@keyframes bounce {

  0%,

  20%,

  50%,

  80%,

  100% {

    transform: translateY(0);

  }

  40% {

    transform: translateY(-30px);

  }

  60% {

    transform: translateY(-15px);

  }

}


@keyframes neonBlink {

  0%,

  50%,

  100% {

    opacity: 1;

  }

  25%,

  75% {

    opacity: 0.5;

  }

}


@keyframes rotate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}


@keyframes heartBeat {

  0%,

  50%,

  100% {

    transform: scale(1);

  }

  25%,

  75% {

    transform: scale(1.2);

  }

}


@keyframes bgPulse {

  0% {

    opacity: 0.3;

  }

  100% {

    opacity: 0.7;

  }

}


/* Classes utilitaires */

.rainbow-text {

  background: linear-gradient(

    45deg,

    #ff0000,

    #ff8000,

    #ffff00,

    #80ff00,

    #00ff00,

    #00ff80,

    #00ffff,

    #0080ff,

    #0000ff,

    #8000ff,

    #ff00ff,

    #ff0080

  );

  background-size: 400% 400%;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: gradientShift 3s ease infinite;

  font-weight: bold;

}


.blink {

  animation: blink 1.5s infinite;

}


@keyframes blink {

  0%,

  50% {

    opacity: 1;

  }

  51%,

  100% {

    opacity: 0.3;

  }

}


.glowing {

  animation: glowPulse 2s ease-in-out infinite alternate;

}


/* Responsive */

@media (max-width: 768px) {

  .glitter-text h1 {

    font-size: 2rem;

  }


  .section-title {

    font-size: 1.8rem;

  }


  .neon-nav ul {

    flex-direction: column;

    gap: 0.5rem;

  }


  .nav-btn {

    display: block;

    margin: 0.5rem;

  }


  .birthday-cake {

    position: static;

    display: block;

    margin-top: 1rem;

  }


  .carousel-container {

    max-width: 90vw;

    aspect-ratio: 1/1; /* Maintenir le format carré sur mobile */

  }

}


/* Curseur personnalisé pour les liens */

a:hover {

  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12" cy="12" r="10" fill="%23ff00ff"/><text x="12" y="18" text-anchor="middle" font-size="14">������</text></svg>'),

    pointer;

}