/* ==========================================================================
  * Thème CSS personnalisé pour le site web
    ========================================================================== */
/*
* Auteur : Emile SNYERS
* Date : 2025-06-22
----------------------------------------
*
* Emile SNYERS - Tous droits réservés - 2025
*
* 📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
* 🚨Usage non commercial uniquement.
*
* Type d'utilisation autorisée: 
*   - Utilisation pour des projets éducatifs ou associatifs.
*   - Ne pas redistribuer sans autorisation.
*
* Critères d'attribution d'une autorisation: 
*   - Contribution à des projets éducatifs ou associatifs.
*   - L'entraide et le partage du savoir.
*   - Contribue à la promotion de l'éducation et de la culture.
*----------------------------------------
* ================================================================================
* Conditions d'utilisation : Uniquement à des fins éducatives ou associatives et non commerciales.
* Contact : emilesnyers@gmail.com
* Description :
*   - Thème CSS personnalisé pour le site web.
*   - Définit les couleurs, polices et styles pour le thème Classic et Hacker.
*   - Inclut un sélecteur de thème pour basculer entre les thèmes Classic et Hacker.
*   - Utilise des variables CSS pour une personnalisation facile.
* ================================================================================
*/


:root {
  /* Variables initialisées avec les couleurs du style existant (Thème Classic) */
  --theme-background: #faf0ce; /* Fond du body */
  --theme-text-titre: #000000; /* Texte noir pour le contraste */
  --theme-text: #2c3e50;       /* Couleur du texte principal, titres */
  --theme-primary: #c39b77;    /* Couleur principale (sidebar background, toggle btn background, strong text) */
  --theme-secondary: #f2e3b3;  /* Couleur secondaire (header background, section:hover background, action buttons background) */
  --theme-tertiary: #fef9e7;   /* Couleur tertiaire (section background) */
  --theme-quaternary: #f8f9fa; /* Couleur quaternaire (pour les sections) */            
  --theme-quaternary: #f8f9fa; /* Couleur quaternaire (pour les sections) */
  --theme-header: #eed498;     /* Couleur du footer header */
  --theme-footer: #eed498;     /* Couleur du footer background */
  --theme-accent: #28a745;     /* Couleur d'accent (utilisée pour boutons génériques background dans .content) */

  /* Ombres */
  --theme-header-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  --theme-section-shadow: 0 2px 5px rgba(0,0,0,0.1);
  --theme-sidebar-shadow: 0 2px 6px rgba(0,0,0,0.2);
  --theme-selector-shadow: 0 2px 6px rgba(0,0,0,0.2);

  /* Autres styles dynamiques */
  --theme-font-family: 'Georgia', serif; /* Police par défaut */
  --theme-section-hover-transform: translateY(-5px); /* Effet hover existant */

  /* Couleurs de texte spécifiques (assurent un bon contraste) */
  --theme-button-primary-text: white; /* Texte sur les boutons --theme-primary ou --theme-accent */
  --theme-button-secondary-text: var(--theme-text); /* Texte sur les boutons --theme-secondary */
  --theme-sidebar-text-titre: white; /* Texte dans la sidebar */
  --theme-sidebar-text: white; /* Texte dans la sidebar */
  --theme-footer-text: white; /* Texte dans le footer */
  --theme-text-shadow: none; /* Ombre de texte (pour thème hacker) */

  /* Couleurs spécifiques pour le thème hacker (pour un meilleur contraste) */
  --hacker-body-text: #00ff00; /* Vert vif */
  --hacker-primary: #00cc00;    /* Vert un peu moins vif */
  --hacker-secondary: #1a1a1a;  /* Gris très foncé */
  --hacker-tertiary: #000000;   /* Noir pur */
  --hacker-footer: #003300;     /* Vert très foncé */
  --hacker-accent: #39ff14;     /* Vert néon */

  --hacker-button-primary-text: #0a0a0a; /* Noir pour texte sur vert néon/vert un peu moins vif */
  --hacker-button-secondary-text: #00ff00; /* Vert vif pour texte sur gris très foncé */
  --hacker-sidebar-text: #00ff00; /* Vert vif */
  --hacker-footer-text: #00ff00; /* Vert vif */
}

/* --- Sélecteur de thème Styles --- */
.theme-selector {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: white; /* Fond blanc pour contraste */
  padding: 10px;
  border-radius: 8px;
  box-shadow: var(--theme-selector-shadow); /* Utilisation de la variable */
}

.theme-selector label {
  margin-right: 5px;
  font-size: 14px;
  color: #333; /* Couleur de texte statique pour la lisibilité */
    font-family: sans-serif; /* Police standard pour la lisibilité du sélecteur */
}

.theme-selector select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 14px;
  background-color: white; /* Fond blanc pour le select */
  color: #333; /* Couleur de texte pour le select */
  cursor: pointer;
    font-family: sans-serif; /* Police standard pour la lisibilité du sélecteur */
}

.theme-selector select:hover {
  background-color: #f0f0f0; /* Léger changement au survol */
}


/* Commentaire dans le code pour les développeurs  */

/*
- Tâches à faire :
  - 
*/