/* Styles pour la recherche visuelle avec icônes Gemini AI et Caméra */

/* Container du formulaire de recherche */
.search-form-container {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
}

/* Icônes dans l'input de recherche */
.search-icon-left,
.search-icon-right {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.3s ease;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* Icône Gemini AI à gauche */
.search-icon-left {
    left: 12px !important;
    right: auto !important;
    color: #0d6efd !important; /* Bootstrap primary */
}

.search-icon-left:hover {
    color: #0a58ca !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Icône Caméra à droite */
.search-icon-right {
    right: 55px !important;
    left: auto !important;
    color: #198754 !important; /* Bootstrap success */
}

.search-icon-right:hover {
    color: #146c43 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Input de recherche avec padding pour les icônes */
.search-input-with-icons {
    padding-left: 40px !important;
    padding-right: 55px !important;
}

/* Forcer le positionnement pour tous les contextes */
form.input-group.search-form-container {
    position: relative !important;
}

form.input-group.search-form-container .search-icon-left {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

form.input-group.search-form-container .search-icon-right {
    position: absolute !important;
    right: 55px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Animation de pulsation pour attirer l'attention */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Animation au chargement de la page (première fois) */
.search-icon-left.animate-once,
.search-icon-right.animate-once {
    animation: pulse 2s ease-in-out 3;
}