/* ... Garde tout ton CSS précédent (body, container, tables, etc) ... */
/* ... AJOUTE CECI À LA FIN OU REMPLACE LA SECTION SEARCH-AREA ... */

body {
    background-color: #1a1a1a;
    color: #eee;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 20px;
}

.container { width: 100%; max-width: 1000px; text-align: center; }
h1 { font-size: 3rem; margin-bottom: 5px; }
.highlight { color: #a64bf4; text-shadow: 0 0 10px #a64bf4; }

/* --- NOUVEAU SYSTÈME AUTOCOMPLETE --- */
.search-area {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative; /* Important pour le menu déroulant */
    z-index: 100;
}

.autocomplete-wrapper {
    position: relative;
    width: 60%;
}

input {
    padding: 12px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    width: 100%; /* Prend 100% du wrapper */
    outline: none;
    box-sizing: border-box;
}

/* La boite des suggestions */
.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #333;
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #444;
}

.suggestion-item:hover {
    background-color: #a64bf4;
    color: white;
}

/* Petite image dans la liste déroulante */
.thumb-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%; /* Rond */
    background-color: black;
}

button {
    padding: 12px 25px;
    font-size: 16px;
    background-color: #a64bf4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* --- LE RESTE DU TABLEAU (Garde ton CSS d'avant pour .results-container etc.) --- */
.results-container { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; z-index: 1; }
.header-row, .guess-row {
    display: grid;
    grid-template-columns: 60px 1.5fr 0.8fr 0.6fr 1fr 0.6fr 1.2fr 0.6fr; 
    gap: 5px; align-items: center; font-size: 0.9rem;
}
.header-row div { font-weight: bold; border-bottom: 2px solid #555; padding-bottom: 5px; color: #aaa; }
.guess-row div { padding: 10px 5px; border-radius: 4px; background-color: #333; display: flex; align-items: center; justify-content: center; text-align: center; word-break: break-word; min-height: 40px; }
.char-img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; border: 1px solid #555; }
.correct { background-color: #4caf50 !important; }
.wrong { background-color: #f44336 !important; }
.partial { background-color: #ff9800 !important; }
.hidden { display: none; }
#winMessage { margin-top: 30px; padding: 20px; background-color: #2d2d2d; border: 2px solid #a64bf4; border-radius: 10px; }
#winImage { max-width: 200px; border-radius: 10px; margin-top: 15px; box-shadow: 0 0 15px #a64bf4; }