/*******************************
Feuille de Style pour Moteur de Recherche - Thème Terminal
Basé sur le style Terminal Unifié
Version Adaptée pour recherche.css avec couleurs mises à jour
*******************************/

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

:root { 
    --terminal-bg: #1E1E1E; /* Anthracite */
    --terminal-main-text: #E0E0E0; /* Blanc Cassé - Texte Principal */
    --terminal-accent: #3DCC91; /* Vert Terminal - Accent / Positif */
    --terminal-warning: #FFBF00; /* Ambre - Avertissement */
    --terminal-error: #D9534F; /* Rouge Système - Erreur */
    --terminal-font: 'Source Code Pro', 'Courier New', monospace;
    --form-font: 'IBM Plex Mono', 'Courier New', monospace;
}

/* Conteneur principal du formulaire de recherche */
#mvp-search-container {
    max-width: 600px;
    margin: 30px auto; 
    position: relative;
    padding: 0; 
    background-color: transparent; /* Fond transparent pour le moteur */
    color: var(--terminal-main-text);
    font-family: var(--form-font);
    border: 1px solid var(--terminal-accent); /* Ajout d'un cadre de couleur #3DCC91 */
    border-radius: 5px; /* Coins arrondis de 5px */
    box-shadow: 0 0 15px rgba(61, 204, 145, 0.2); /* Conserver l'ombre */
}

/* Style pour le label du champ de recherche (ajouté pour rendre visible et stylisé) */
#mvp-search-container label {
    display: block;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--terminal-accent); /* Utilisation du vert accent pour le libellé */
    margin-bottom: 10px;
    border-bottom: 1px dotted var(--terminal-accent);
    padding-bottom: 5px;
}

/* Le champ de saisie de la recherche */
#mvp-search-input {
    width: 100%;
    padding: 12px 20px;
    border: none; /* Suppression du cadre du champ de recherche */
    border-radius: 5px; /* Bordure arrondie de 5px comme demandé */
    box-sizing: border-box;
    font-size: 16px;
    background-color: transparent; /* Pas de couleur de fond */
    color: var(--terminal-accent); /* Texte de saisie en vert #3DCC91 */
    font-family: var(--form-font);
    transition: all 0.2s ease-out;
}

#mvp-search-input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(61, 204, 145, 0.3);
    background-color: rgba(61, 204, 145, 0.1);
}

/* Conteneur pour les résultats en direct */
#mvp-search-results {
    margin-top: 5px;
    border: 1px solid var(--terminal-accent);
    border-radius: 5px;
    background-color: transparent; /* Fond transparent pour l'affichage des résultats */
    box-shadow: 0 4px 8px rgba(61, 204, 145, 0.1);
    overflow-y: auto;
    max-height: 400px;
    padding: 0; 
    color: var(--terminal-main-text);
    font-family: var(--form-font);
}

/* Cache le conteneur des résultats s'il est vide */
#mvp-search-results:empty {
    display: none;
}

/* Style pour les titres H3 dans les résultats (ex: "Protocole à déclencher pour...") */
#mvp-search-results h3 {
    text-align: left;
    font-size: 0.9em;
    color: var(--terminal-accent); /* Libellés en vert #3DCC91 */
    margin: 10px 0 5px 0;
    padding: 0 15px; 
    font-weight: bold;
    border-bottom: 1px dotted var(--terminal-accent);
}

/* Style pour la liste des résultats */
#mvp-search-results ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 10px 0; 
}

/* Style pour chaque élément de liste de résultat */
#mvp-search-results li {
    border-bottom: 1px solid rgba(61, 204, 145, 0.3);
    text-align: left;
    padding: 0; 
}

#mvp-search-results li:last-child {
    border-bottom: none;
}

/* Style pour les liens individuels des résultats (protocoles et vibrances non-suggestions) */
#mvp-search-results li a {
    display: block;
    padding: 8px 15px; 
    color: var(--terminal-accent); /* Libellés des résultats en vert #3DCC91 */
    font-size: 0.85em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#mvp-search-results li a:hover {
    background-color: rgba(61, 204, 145, 0.1);
    color: var(--terminal-main-text);
}

/* Style pour les messages "Recherche en cours..." ou "Aucun résultat" */
#mvp-search-results > p { 
    padding: 15px;
    margin: 0;
    font-style: italic;
    color: var(--terminal-main-text);
    opacity: 0.8;
    text-align: left; 
}

/* --- STYLES SPÉCIFIQUES AUX ÉLÉMENTS DE RÉSULTATS --- */

/* Style pour la vibrance qui est une correspondance exacte (100%) */
#mvp-search-results ul li.mvp-exact-vibrance {
    background-color: rgba(61, 204, 145, 0.1);
    padding: 5px 10px; 
    margin-bottom: 5px;
    border-radius: 4px;
    font-weight: bold;
}
/* Le lien à l'intérieur d'une vibrance exacte */
#mvp-search-results ul li.mvp-exact-vibrance a {
    color: inherit; 
    text-decoration: none;
    padding: 0; 
}
#mvp-search-results ul li.mvp-exact-vibrance a:hover {
    background-color: transparent; 
    color: var(--terminal-main-text);
}


/* Style pour tous les éléments de protocole */
#mvp-search-results ul li.mvp-protocole-item {
    background-color: rgba(61, 204, 145, 0.05);
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
}
/* Le lien à l'intérieur d'un protocole */
#mvp-search-results ul li.mvp-protocole-item a {
    color: inherit; 
    text-decoration: none;
    padding: 0; 
}
#mvp-search-results ul li.mvp-protocole-item a:hover {
    background-color: transparent; 
    color: var(--terminal-main-text);
}


/* Style spécifique pour le protocole recommandé */
#mvp-search-results ul li.mvp-protocole-recommended {
    background-color: rgba(61, 204, 145, 0.2);
    font-weight: bold;
    border: 1px solid var(--terminal-accent);
}
#mvp-search-results ul li.mvp-protocole-recommended a {
    color: inherit; 
    text-decoration: none;
}
#mvp-search-results ul li.mvp-protocole-recommended a:hover {
    background-color: transparent;
    color: var(--terminal-main-text); 
}


/* --- STYLES DES SUGGESTIONS D'ÉMOTIONS (QUAND AUCUN RÉSULTAT) --- */

/* Titre des suggestions */
#mvp-search-results h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--terminal-accent); /* Libellés en vert #3DCC91 */
    font-size: 1.2em;
    font-weight: normal;
    padding: 0 15px; 
    border-bottom: 1px dotted var(--terminal-accent);
}

/* Liste des suggestions */
ul.mvp-emotion-suggestions {
    list-style-type: none;
    padding: 10px 15px; 
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px; 
}

ul.mvp-emotion-suggestions li {
    display: inline-block;
}

ul.mvp-emotion-suggestions li a {
    display: block;
    padding: 3px 8px; 
    background-color: transparent; 
    border: 1px solid var(--terminal-accent);
    border-radius: 15px; 
    color: var(--terminal-main-text);
    text-decoration: none;
    font-weight: normal;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: none;
    font-size: 0.75em; 
}

ul.mvp-emotion-suggestions li a:hover {
    background-color: var(--terminal-accent); 
    border-color: var(--terminal-accent);
    color: var(--terminal-bg);
    box-shadow: none;
}