feat: add theme switching

src/assets/css/styles.css

@@ -27,6 +27,35 @@
     --rouge-clair: #FF6B9D;         /* Rose corail */
 }
 
+/* Thème Clair */
+html.light-theme,
+html.light-theme body {
+    /* Couleurs inversées pour le mode clair */
+    --noir-oki: #FFF8E7;            /* Fond clair */
+    --blanc-creme: #0D0D0D;         /* Texte sombre */
+
+    /* Ajustements pour la lisibilité */
+    --noir-profond: #F5F0E8;        /* Fond de section clair */
+    --gris-sombre: #E8DDD0;         /* Gris clair */
+
+    /* Couleurs vives assombries pour WCAG AA (contraste 4.5:1 minimum) */
+    --or-oki: #B87A00;              /* Or assombri pour contraste suffisant */
+    --vert-oki: #006B3D;            /* Vert assombri */
+    --rouge-oki: #A01030;           /* Rouge assombri */
+    --turquoise-caraibes: #006B75;  /* Turquoise assombri */
+    --violet-nuit: #6B2D5C;         /* Violet ok */
+    --bleu-ocean: #004B7F;          /* Bleu assombri */
+
+    /* Couleurs dérivées plus claires pour bordures/décorations */
+    --or-clair: #D99000;            /* Or clair pour éléments secondaires */
+    --vert-clair: #008C4F;          /* Vert clair */
+    --rouge-clair: #C01545;         /* Rouge clair */
+
+    /* Couleurs d'accentuation */
+    --jaune-soleil: #B87A00;        /* Aligné avec l'or */
+    --orange-flamme: #C85000;       /* Orange assombri */
+}
+
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     background:
@@ -51,6 +80,108 @@ nav {
     border-bottom: 2px solid var(--or-oki);
 }
 
+html.light-theme nav {
+    background: rgba(255, 248, 231, 0.95);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+html.light-theme .nav-links a {
+    color: #0D0D0D;
+}
+
+html.light-theme .nav-links a:hover {
+    color: var(--or-oki);
+}
+
+/* Ajustements de contraste pour le thème clair (WCAG 2 AA) */
+html.light-theme .tag {
+    background: rgba(184, 122, 0, 0.15);
+    box-shadow: 0 4px 15px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .value-card {
+    background: rgba(184, 122, 0, 0.08);
+    border: 3px solid rgba(184, 122, 0, 0.3);
+    box-shadow: 0 6px 20px rgba(184, 122, 0, 0.12);
+}
+
+html.light-theme .value-card:hover {
+    background: rgba(184, 122, 0, 0.15);
+    box-shadow: 0 12px 35px rgba(184, 122, 0, 0.25);
+}
+
+html.light-theme .hosting-banner {
+    background: rgba(184, 122, 0, 0.12);
+    box-shadow: 0 10px 30px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .donation-amount {
+    background: rgba(184, 122, 0, 0.15);
+    box-shadow: 0 6px 20px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .donation-amount:hover {
+    box-shadow: 0 10px 30px rgba(184, 122, 0, 0.4);
+}
+
+html.light-theme .donation-amount.monthly {
+    background: rgba(0, 107, 61, 0.15);
+}
+
+html.light-theme .service-card {
+    background: rgba(0, 107, 61, 0.1);
+    box-shadow: 0 10px 30px rgba(0, 107, 61, 0.15);
+}
+
+html.light-theme .btn-primary:hover {
+    box-shadow: 0 15px 40px rgba(184, 122, 0, 0.4);
+}
+
+html.light-theme .public-benefits {
+    background: rgba(184, 122, 0, 0.12);
+    border: 2px solid rgba(184, 122, 0, 0.3);
+}
+
+html.light-theme .publics-footer {
+    background: rgba(184, 122, 0, 0.12);
+    border: 2px solid rgba(184, 122, 0, 0.3);
+}
+
+html.light-theme .faq-item {
+    background: rgba(255, 255, 255, 0.5);
+    border: 3px solid rgba(184, 122, 0, 0.3);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+
+html.light-theme .faq-item:hover {
+    box-shadow: 0 8px 25px rgba(184, 122, 0, 0.25);
+}
+
+html.light-theme .faq-item.active {
+    box-shadow: 0 10px 35px rgba(184, 122, 0, 0.35);
+}
+
+html.light-theme .engagement-card {
+    background: rgba(184, 122, 0, 0.12);
+    box-shadow: 0 10px 30px rgba(184, 122, 0, 0.2);
+}
+
+html.light-theme .engagement-card:hover {
+    box-shadow: 0 25px 50px rgba(184, 122, 0, 0.35);
+}
+
+html.light-theme .contact {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+html.light-theme .contact-links a {
+    color: #0D0D0D;
+}
+
+html.light-theme .contact-links a:hover {
+    color: var(--or-oki);
+}
+
 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
@@ -101,6 +232,54 @@ nav {
     color: var(--or-oki);
 }
 
+/* Theme Toggle Button */
+.theme-toggle {
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid var(--or-oki);
+    border-radius: 20px 10px 20px 10px;
+    padding: 0.5rem 0.8rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    font-size: 1.2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.theme-toggle:hover {
+    background: rgba(253, 184, 19, 0.2);
+    border-color: var(--jaune-soleil);
+    transform: scale(1.05);
+}
+
+.theme-icon {
+    transition: all 0.4s ease;
+    display: inline-block;
+}
+
+.theme-icon-light {
+    display: none;
+}
+
+html.light-theme .theme-icon-dark {
+    display: none;
+}
+
+html.light-theme .theme-icon-light {
+    display: inline-block;
+}
+
+html.light-theme .theme-toggle {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: var(--or-oki);
+}
+
+html.light-theme .theme-toggle:hover {
+    background: rgba(232, 166, 37, 0.2);
+}
+
 .menu-toggle {
     display: none;
     flex-direction: column;
@@ -869,6 +1048,15 @@ input[type="number"]:focus {
         display: none;
     }
 
+    .nav-container {
+        gap: 1rem;
+    }
+
+    .theme-toggle {
+        padding: 0.4rem 0.6rem;
+        font-size: 1rem;
+    }
+
     .menu-toggle {
         display: flex;
     }