/* 
   Ce fichier peut être utilisé pour des styles personnalisés 
   qui sont difficiles à obtenir avec Tailwind seul, ou pour créer 
   des composants réutilisables avec @apply.
*/

/* Classe personnalisée pour les liens de navigation avec effet de survol */
.nav-link {
    @apply font-medium text-gray-800 no-underline relative py-2 transition-colors duration-300;
}
.nav-link:hover {
    @apply text-black;
}
.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-[2px] bg-gray-800 transform scale-x-0 origin-left transition-transform duration-300;
}
.nav-link:hover::after {
    @apply scale-x-100;
}

/* Classe pour mettre en surbrillance le produit sélectionné */
.product-item-selected {
    @apply ring-2 ring-pink-500 ring-offset-2 rounded-md shadow-lg;
}

/* Conteneur pour rendre l'iframe de la vidéo responsive */
.video-container {
    @apply relative w-full overflow-hidden rounded-lg;
    padding-top: 56.25%; /* Ratio 16:9 */
}

.video-container iframe {
    @apply absolute top-0 left-0 w-full h-full border-0;
}