/* --- THÈME NATURE ET BOTANIQUE --- */
body { 
    font-family: sans-serif; 
    max-width: 800px; 
    margin: 2em auto; 
    background-color: #f5fdf5; 
    color: #3e4a3e;
}
h1, h2 { color: #2e7d32; text-align: center; }
.tab-buttons { border-bottom: 2px solid #c8e6c9; display: flex; flex-wrap: wrap; }
.tab-button { 
    padding: 10px 20px; 
    cursor: pointer; 
    background-color: #e8f5e9; /* Couleur de l'onglet inactif */
    border: 1px solid #c8e6c9; 
    border-bottom: none; 
    margin-right: 5px; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    color: #3e4a3e;
    position: relative;
    top: 2px; /* Aligner avec la bordure du bas */
}
.tab-button.active { 
    background-color: #fff; /* Même couleur que le contenu */
    border-bottom: 2px solid #fff; /* Fusionne avec le contenu */
    font-weight: bold;
    color: #2e7d32; /* Couleur plus foncée pour le texte actif */
}
.tab-content { 
    display: none; 
    padding: 20px; 
    border: 2px solid #c8e6c9; 
    border-top: none; 
    border-radius: 0 8px 8px 8px; 
    background-color: #fff;
}
.tab-content.active { display: block; }

/* Styles de l'application */
#app-container { text-align: center; }
.slider-container { 
    display: grid; 
    grid-template-columns: 1fr 3fr 1fr; 
    align-items: center; 
    margin-bottom: 1em; 
    padding: 10px; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    background-color: #fdfdfd;
}
label { text-align: right; margin-right: 1em; }
button { padding: 0.8em 1.5em; font-size: 1em; cursor: pointer; margin-top: 1em; }
#prediction { margin-top: 1.5em; font-size: 1.5em; font-weight: bold; color: #2e7d32; /* Couleur du thème */ }
.presets { margin-top: 2em; border-top: 1px solid #c8e6c9; padding-top: 1em; }
.presets button { background-color: #8d6e63; color: white; border: none; border-radius: 5px; transition: background-color 0.2s; }
.presets button:hover { background-color: #6d4c41; }

/* Styles pour le code et CSV */
#code-container { position: relative; }
pre { background-color: #2d2d2d; color: #f1f1f1; padding: 15px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; max-height: 500px; overflow-y: auto; }
#copy-btn { position: absolute; top: 25px; right: 25px; padding: 5px 10px; background-color: #444; color: white; border: 1px solid #666; cursor: pointer; }

/* Styles pour la visualisation */
.chart-container { margin-top: 20px; }

/* Styles pour l'arbre de décision graphique */
#model-container ul { list-style-type: none; padding-left: 20px; }
#model-container li { margin: 5px 0; }
.node { background-color: #c8e6c9; border: 1px solid #a5d6a7; padding: 5px; border-radius: 4px; }
.leaf { background-color: #fff9c4; border: 1px solid #fff59d; padding: 5px; border-radius: 4px; font-weight: bold; }

/* Bouton principal */
button:not(.presets button) { 
    background-color: #4CAF50; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    transition: background-color 0.2s;
}
button:not(.presets button):hover { background-color: #388e3c; }