/* ============================
   Définition des couleurs globales
   ============================ */
:root {
  --primary-color: #d4aa37;         /* Couleur principale (doré) */
  --secondary-color: #000000;       /* Couleur secondaire (noir) */
  --text-color: #000000;            /* Couleur du texte par défaut (noir) */
  --background-color: #ffffff;      /* Couleur de fond (blanc) */
  --accent-color: #f5f5f5;          /* Couleur d'accent (gris clair) */

  /* Couleurs spécifiques pour les éléments */
  --header-footer-bg: #000000;      /* Fond noir pour header et footer */
  --hover-color: #b9912d;           /* Couleur au survol des boutons (doré foncé) */
}

/* ============================
Définition des couleurs globales
============================ */

/* ============================
Thème sombre
============================ */
body.dark-theme {
    --primary-color: #bb86fc;         /* Couleur principale (violet clair) */
    --secondary-color: #121212;       /* Couleur secondaire (gris foncé) */
    --text-color: #ffffff;            /* Couleur du texte par défaut (blanc) */
    --background-color: #121212;      /* Couleur de fond (gris foncé) */
    --accent-color: #1e1e1e;          /* Couleur d'accent (gris très foncé) */

    /* Couleurs spécifiques pour les éléments */
    --header-footer-bg: #1e1e1e;      /* Fond gris très foncé pour header et footer */
    --hover-color: #9a6de0;           /* Couleur au survol des boutons (violet foncé) */
}

/* ============================
Transitions de couleur
============================ */
body, .section, .service, form, input, textarea, button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================
Icône dynamique lune/soleil
============================ */
#theme-toggle::before {
    content: '☀'; /* Icône soleil par défaut */
    display: inline-block;
    margin-right: 8px;
}

body.dark-theme #theme-toggle::before {
    content: '☾'; /* Icône lune pour le thème sombre */
}