/* =====================================================
   IrMoving — Styles custom (animations, clips, forms)
   Ces styles complètent Tailwind CDN
   ===================================================== */


/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Clip-path décoratifs */
.wavy-clip {
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}
.wavy-right {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
}
.organic-blob {
  border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
}

/* Étoiles remplies */
.star-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Blog card hover zoom */
.blog-card-img {
  transition: transform 0.6s ease;
}
.blog-card:hover .blog-card-img {
  transform: scale(1.05);
}

/* Animation flottante */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(6deg); }
  50%       { transform: translateY(-10px) rotate(6deg); }
}
.float-anim {
  animation: float 3s ease-in-out infinite;
}

/* Bandeau défilant (marquee) */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-inner {
  animation: marquee 20s linear infinite;
}

/* Formulaire — label flottant */
input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-1.5rem) scale(0.75);
  color: #afc9ea;
}
.input-label {
  transition: transform 0.2s ease, color 0.2s ease;
  transform-origin: left;
}

/* Ligne de focus animée sous les inputs */
.bottom-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: #afc9ea;
  transition: left 0.3s ease, right 0.3s ease;
}
.bottom-line:focus-within::after {
  left: 0;
  right: 0;
}