/* Styles pour le mode expert */

/* Style du bouton mode expert */
#expert-mode {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

#expert-mode.active {
    box-shadow: none;
    border: 2.5px solid var(--accent-color-3);
    padding: 7px 17px;
}

/* Style de base des boutons d'option en mode expert */
.expert-mode .option-button {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Barre de couleur originale (partie gagnante) */
.expert-mode .progress-bar-color {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
}

/* Barre grise (partie perdante) */
.expert-mode .progress-bar-gray {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: var(--dark-gray);
    opacity: 0.5;
    z-index: 1;
}

/* Texte du bouton */
.expert-mode .option-button span {
    position: relative;
    z-index: 2;
    color: white;
}

/* Styles pour les paramètres avancés */
.advanced-settings {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 20px;
    margin-top: 20px;
    border-left: 10px solid var(--accent-color-5);
}

.advanced-settings.disabled .settings-content {
    opacity: 0.5;
    pointer-events: none;
}

/* Style du conteneur de titre - même style que les autres titres de section */
.advanced-settings .title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    background-color: rgba(236, 240, 241, 0.7);
    border-radius: 5px;
    padding: 8px 0;
    margin-bottom: 15px;
}

.advanced-settings .section-title {
    margin: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}

/* Conteneur pour la case à cocher */
.checkbox-container {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.unlock-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 15px;
    background-color: var(--light-gray);
    border-radius: 5px;
}

.unlock-checkbox input {
    margin-right: 8px;
}

.setting-group {
    background-color: var(--light-gray);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.setting-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.setting-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.exploration-value, .games-value {
    font-weight: bold;
    color: var(--accent-color-3);
}

#exploration-slider, #training-games-slider {
    width: 100%;
    margin: 10px 0;
}

.setting-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dark-gray);
}