/* Styles pour le slogan dynamique du hero */

/* Import de la police manuscrite */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

/* Police manuscrite personnalisée */
.font-handwriting {
    font-family: 'Kalam', cursive;
    font-weight: 400;
}

/* Container du slogan */
.slogan-container {
    position: relative;
    display: inline-block;
}

/* Verbe du slogan */
.slogan-verb {
    position: relative;
    display: inline-block;
    padding: 0 2px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

/* Effet de survol sur le verbe */
.slogan-verb:hover {
    background-color: rgba(124, 58, 237, 0.1);
    transform: translateY(-1px);
}



/* Menu déroulant discret */
.slogan-verb select {
    font-family: 'Kalam', cursive;
    font-size: 1em;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

/* Options du menu déroulant */
.slogan-verb select option {
    background: transparent;
    color: inherit;
}

/* Style pour le focus du menu */
.slogan-verb select:focus {
    background: transparent;
    outline: none;
}



/* Indicateur du menu déroulant */
.menu-indicator {
    font-family: 'Kalam', cursive;
    font-size: 0.75rem;
    color: #9ca3af;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.menu-indicator:hover {
    opacity: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    .slogan-verb {
        font-size: 0.9em;
    }
}

/* Effet de focus pour l'accessibilité */
.slogan-verb:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Animation de pulsation pour attirer l'attention */
@keyframes pulse-attention {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Appliquer l'animation de pulsation au survol du menu */
.slogan-verb:hover {
    animation: pulse-attention 2s infinite;
}