/* ==========================================================================
    PANNEAU DE CONFIGURATION
    Style pour le panneau flottant des paramètres et son bouton toggle
    ========================================================================== */
/*
* Version 1.0 - Code initial pour le panneau de configuration
* Auteur : Emile SNYERS
* Date : 2025-06-10
* Licence : CC BY-NC-SA 4.0
* (Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International)
* Cette licence permet aux utilisateurs de :
*  - Partager : copier et redistribuer le matériel sous quelque format que ce soit
*  - Adapter : remixer, transformer et créer à partir du matériel
* Sous les conditions suivantes :
*  - Attribution : Vous devez créditer Emile SNYERS, inclure un lien vers la licence
*  - Pas d'utilisation commerciale : Vous ne pouvez pas utiliser ce matériel à des fins commerciales
*  - Partage dans les mêmes conditions : Si vous remixez ou transformez ce matériel,
*    vous devez distribuer vos contributions sous la même licence que l'original
* Plus d'informations : https://creativecommons.org/licenses/by-nc-sa/4.0/
* ================================================================================
* Conditions d'utilisation : Uniquement à des fins éducatives ou associatives et non commerciales.
* Contact : emilesnyers@gmail.com
* Description : Gère les paramètres d'accessibilité (thème, police, taille du texte)
* ================================================================================
*/
/* Style principal du panneau de configuration */
.settings-panel {
     position: fixed;
     top: 20px;
     right: 20px;
     background: var(--theme-tertiary, white);
     color: var(--theme-text, #333);
     padding: 20px;
     border-radius: 10px;
     box-shadow: var(--theme-selector-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
     z-index: 1000;
     display: none;
     min-width: 250px;
     max-width: 350px;
     transition: all 0.3s ease-in-out;
     border: 1px solid var(--theme-secondary, #eaeaea);
     font-family: var(--theme-font-family, Georgia, serif);
}

/* Titre du panneau */
.settings-panel h4 {
     margin: 0 0 15px 0;
     color: var(--theme-text-titre, #333);
     font-size: calc(1.1em * var(--font-size-multiplier, 1));
     border-bottom: 2px solid var(--theme-primary, #007bff);
     padding-bottom: 8px;
}

/* Labels dans le panneau */
.settings-panel label {
     font-weight: bold;
     color: var(--theme-text, #333);
     font-size: calc(0.9em * var(--font-size-multiplier, 1));
     display: block;
     margin-bottom: 5px;
}

/* Boutons dans le panneau */
.settings-panel button {
     background: var(--theme-primary, #007bff);
     color: var(--theme-button-primary-text, white);
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s ease;
     font-family: var(--theme-font-family, Georgia, serif);
     font-size: calc(0.9em * var(--font-size-multiplier, 1));
}

.settings-panel button:hover {
     opacity: 0.8;
     transform: translateY(-1px);
}

.settings-panel button:active {
     transform: translateY(0);
}

/* Sélecteurs dans le panneau */
.settings-panel select {
     background: var(--theme-background, white);
     color: var(--theme-text, #333);
     border: 1px solid var(--theme-secondary, #ccc);
     border-radius: 4px;
     font-family: var(--theme-font-family, Georgia, serif);
     font-size: calc(0.9em * var(--font-size-multiplier, 1));
     transition: border-color 0.2s ease;
}

.settings-panel select:focus {
     outline: none;
     border-color: var(--theme-primary, #007bff);
     box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Affichage de la taille de police */
#fontSizeDisplay {
     font-weight: bold;
     color: var(--theme-primary, #007bff);
     min-width: 50px;
     text-align: center;
     display: inline-block;
     font-size: calc(1em * var(--font-size-multiplier, 1));
}

/* Style du bouton pour afficher/masquer le panneau */
.settings-toggle {
     position: fixed;
     top: 70px;
     right: 20px;
     background-color: var(--theme-primary, #007bff);
     color: var(--theme-button-primary-text, white);
     border: none;
     padding: 12px 15px;
     border-radius: 6px;
     cursor: pointer;
     z-index: 1001;
     box-shadow: var(--theme-sidebar-shadow, 0 2px 5px rgba(0, 0, 0, 0.2));
     transition: all 0.2s ease;
     font-size: 18px;
}

/* Effet de survol pour le bouton toggle */
.settings-toggle:hover {
     transform: translateY(-2px);
     box-shadow: var(--theme-header-shadow, 0 4px 8px rgba(0, 0, 0, 0.3));
     opacity: 0.9;
}

.settings-toggle:active {
     transform: translateY(0);
}

/* Responsive : adaptation mobile */
@media (max-width: 768px) {
     .settings-panel {
          top: 10px;
          right: 10px;
          left: 10px;
          max-width: none;
          min-width: auto;
     }
     
     .settings-toggle {
          top: 60px;
          right: 10px;
          padding: 10px 12px;
          font-size: 16px;
     }
}

/* Animation d'apparition du panneau */
.settings-panel.show {
     display: block;
     animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
     from {
          opacity: 0;
          transform: translateX(20px);
     }
     to {
          opacity: 1;
          transform: translateX(0);
     }
}

/* ==========================================================================
    FIN PANNEAU DE CONFIGURATION
    ========================================================================== */