/* ========================================================================
   FICHIER : recherche.css

   BUT     : Mise en forme de l'interface du moteur de recherche.
             - Gestion des dalles (tuiles) de sélection des fruits.
             - Design de la boîte de résultats (autocomplétion).
             - Adaptabilité sur tablettes et smartphones (Responsive).
             - Styles des alertes "Aucun résultat trouvé".
   ======================================================================== */

/* --- 1. ZONE DE RECHERCHE (STABLE) --- */
.moteur-zone {
    margin-top: 20px;
    position: relative;
    min-height: 250px;
}

.moteur-zone .recherche-ligne {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    position: relative; 
}

.moteur-zone .recherche-ligne label {
    display: inline-block;
    width: 80px; 
    font-weight: bold;
    color: #006C50; /* Vert Arboschwin */
}

.moteur-zone #moteur {
    width: 180px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* --- 2. LE SABLIER --- */
.loader-search {
    display: none; 
    position: absolute;
    left: 285px; 
    top: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #006C50; 
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 3. BOÎTE DE RÉSULTATS (VOTRE CONFIGURATION STABLE) --- */
.moteur-zone #resultats-box {
    display: none;
    position: absolute;
    top: 130px; 
    right: 0;
    width: 320px;
    max-height: 350px;
    background: transparent;
    padding: 0;
    overflow-y: scroll !important; /* ASCENSEUR PERMANENT */
    overflow-x: hidden !important;
    border: none !important;
    box-shadow: none;
    z-index: 2000;
}

.moteur-zone #liste-fruits { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    background-color: #F4F9F2 !important; 
    border: 1px solid #006C50 !important;
    border-radius: 8px;
    scrollbar-color: #006C50 #f0f0f0;
}

.moteur-zone #liste-fruits li {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
    transition: all 0.1s ease-in-out;
}

.moteur-zone #liste-fruits li:hover { 
    background-color: #FFF9E6 !important; 
    cursor: pointer; 
}

/* --- 4. CONFIGURATION DES TUILES "ONGLET VERT" (AFFINÉES) --- */
.choix-fruits-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    justify-content: flex-start;
    width: 350px; 
}

.fruit-btn {
    width: 105px;
    flex: none;
    cursor: pointer;
}

.fruit-btn input {
    position: absolute;
    opacity: 0;
}

.fruit-btn span {
    display: block;
    padding: 8px 2px;
    background-color: #F8F9FA;  
    border: 1px solid #E0E0E0;   
    border-bottom: 4px solid #D1D1D1; /* Assise grise */
    border-radius: 6px;
    font-weight: bold;
    color: #757575;             
    text-align: center;
    font-size: 0.85em;
    transition: all 0.2s ease-in-out;
}

.fruit-btn span:hover {
    background-color: #FFFFFF;
    border-bottom-color: #006C50;
    color: #006C50;
}

.fruit-btn input:checked + span {
    background-color: #F4F9F2 !important;
    color: #006C50 !important;            
    border: 1px solid #006C50 !important;  
    border-bottom: 6px solid #006C50 !important; /* Barre verte épaisse */
    transform: translateY(-2px);           /* Monte légèrement */
    box-shadow: 0 4px 8px rgba(0, 108, 80, 0.15); 
    font-weight: 900 !important;
}

/* --- 5. PARTIE RESPONSIVE (SMARTPHONES) --- */
@media (max-width: 600px) {
    .moteur-zone .recherche-ligne { flex-direction: column; align-items: flex-start; }
    .moteur-zone .recherche-ligne label { width: 100%; margin-bottom: 5px; }
    .moteur-zone #moteur { width: 100%; box-sizing: border-box; }
    
    /* On repositionne la boîte sous les éléments en mobile */
    .moteur-zone #resultats-box { 
        position: relative; 
        top: 10px; 
        width: 100%; 
        max-height: 135px; 
        overflow-y: scroll; 
    }

    .loader-search { left: auto; right: 10px; top: 42px; }

    /* Tuiles sur mobile : 3 colonnes propres */
    .choix-fruits-container { width: 100%; gap: 6px; }
    .fruit-btn { width: calc(33.33% - 6px); min-width: 95px; }
    .fruit-btn span { font-size: 0.8em; padding: 10px 2px; }
}

/* --- 6. BOUTON RETOUR ET ALERTES --- */
#bouton-retour-recherche, #bouton-retour-recherche:hover, #bouton-retour-recherche:active, #bouton-retour-recherche:focus {
    display: inline-block;
    font-size: 14px;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    outline: none;
}

/* Style de l'alerte orange si rien n'est trouvé */
#liste-fruits.alerte-orange { 
    border: 2px solid #E2C4B1 !important; 
    background-color: #FEF9F3 !important; 
    border-radius: 8px; 
    padding: 10px; 
}
.item-alerte { color: #8E3A1F; list-style: none; }
.item-alerte a { display: inline-block; margin-top: 10px; font-weight: bold; text-decoration: underline; }

/* Zone Astuce en bas */
.moteur-zone .astuce-container { margin-top: 50px; padding: 10px 15px; background-color: #f9fdf9; border-left: 4px solid #75C254; display: inline-flex; flex-direction: column; width: fit-content; border-radius: 0 4px 4px 0; }
.moteur-zone .astuce-label { align-self: flex-start; background-color: #006C50; color: white; padding: 2px 10px; border-radius: 4px; font-size: 0.7em; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; }
.moteur-zone .astuce-texte { font-size: 0.85em; color: #555; font-style: italic; line-height: 1.5; }