From f351d3f654bf630899e6c00a1b5952c11f9ff46c Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 9 Mar 2026 18:25:14 +0100
Subject: [PATCH] =?UTF-8?q?Appliquer=20le=20th=C3=A8me=20Cr=C3=A9puscule?=
 =?UTF-8?q?=20par=20d=C3=A9faut=20et=20supprimer=20le=20s=C3=A9lecteur=20d?=
 =?UTF-8?q?e=20th=C3=A8me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThemeSwitcher.astro | 198 -----------------------------
 src/layouts/Layout.astro           |   3 -
 src/styles/global.css              |  72 +----------
 3 files changed, 7 insertions(+), 266 deletions(-)
 delete mode 100644 src/components/ThemeSwitcher.astro

diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
deleted file mode 100644
index 65e307c..0000000
--- a/src/components/ThemeSwitcher.astro
+++ /dev/null
@@ -1,198 +0,0 @@
----
-// Composant temporaire pour prévisualiser les palettes de couleurs.
-// À supprimer une fois le thème choisi.
----
-
-<div id="theme-switcher">
-  <button id="theme-toggle" aria-label="Changer de thème">
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="5"/>
-      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
-    </svg>
-  </button>
-
-  <div id="theme-panel" class="hidden">
-    <span class="panel-title">Palette</span>
-
-    <button data-set-theme="" class="theme-btn active" title="Rêverie (actuel)">
-      <span class="swatch" style="background: linear-gradient(135deg, #E0C3FC, #FF9F89)"></span>
-      <span class="label">Rêverie</span>
-      <span class="desc">Pastels actuels</span>
-    </button>
-
-    <button data-set-theme="crepuscule" class="theme-btn" title="Crépuscule & Cuivre">
-      <span class="swatch" style="background: linear-gradient(135deg, #1A1A2E, #C9956B)"></span>
-      <span class="label">Crépuscule</span>
-      <span class="desc">Cuivre & nuit</span>
-    </button>
-
-    <button data-set-theme="foret" class="theme-btn" title="Forêt enchantée">
-      <span class="swatch" style="background: linear-gradient(135deg, #3D5A47, #D4A843)"></span>
-      <span class="label">Forêt</span>
-      <span class="desc">Mousse & terre</span>
-    </button>
-
-    <button data-set-theme="nuit" class="theme-btn" title="Nuit étoilée">
-      <span class="swatch" style="background: linear-gradient(135deg, #1E1E3F, #C8A961)"></span>
-      <span class="label">Nuit</span>
-      <span class="desc">Sombre & or</span>
-    </button>
-
-    <button data-set-theme="aube" class="theme-btn" title="Aube rosée">
-      <span class="swatch" style="background: linear-gradient(135deg, #6B3A5A, #C0785A)"></span>
-      <span class="label">Aube</span>
-      <span class="desc">Prune & terracotta</span>
-    </button>
-  </div>
-</div>
-
-<style>
-  #theme-switcher {
-    position: fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
-    z-index: 9999;
-    font-family: system-ui, sans-serif;
-  }
-
-  #theme-toggle {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.85);
-    color: white;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s;
-  }
-
-  #theme-toggle:hover {
-    transform: scale(1.1);
-  }
-
-  #theme-panel {
-    position: absolute;
-    bottom: calc(100% + 0.75rem);
-    right: 0;
-    background: rgba(255, 255, 255, 0.97);
-    backdrop-filter: blur(20px);
-    border-radius: 1rem;
-    padding: 1rem;
-    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
-    min-width: 220px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .panel-title {
-    font-size: 0.65rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    color: rgba(0, 0, 0, 0.3);
-    padding: 0 0.5rem 0.5rem;
-  }
-
-  .theme-btn {
-    display: grid;
-    grid-template-columns: 1.75rem 1fr;
-    grid-template-rows: auto auto;
-    column-gap: 0.625rem;
-    row-gap: 0;
-    align-items: center;
-    padding: 0.5rem;
-    border-radius: 0.625rem;
-    border: 2px solid transparent;
-    background: transparent;
-    cursor: pointer;
-    transition: all 0.15s;
-    text-align: left;
-  }
-
-  .theme-btn:hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-
-  .theme-btn.active {
-    background: rgba(0, 0, 0, 0.06);
-    border-color: rgba(0, 0, 0, 0.15);
-  }
-
-  .swatch {
-    grid-row: 1 / 3;
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 0.5rem;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  }
-
-  .label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: #1a1a1a;
-    line-height: 1.2;
-  }
-
-  .desc {
-    font-size: 0.65rem;
-    color: rgba(0, 0, 0, 0.4);
-    line-height: 1.2;
-  }
-
-  .hidden {
-    display: none !important;
-  }
-</style>
-
-<script>
-  const toggle = document.getElementById('theme-toggle')!;
-  const panel = document.getElementById('theme-panel')!;
-  const buttons = panel.querySelectorAll<HTMLButtonElement>('[data-set-theme]');
-
-  // Appliquer le thème sauvegardé
-  const saved = localStorage.getItem('aspireves-theme');
-  if (saved) {
-    document.documentElement.setAttribute('data-theme', saved);
-  }
-
-  function updateActive() {
-    const current = document.documentElement.getAttribute('data-theme') || '';
-    buttons.forEach((btn) => {
-      btn.classList.toggle('active', btn.dataset.setTheme === current);
-    });
-  }
-  updateActive();
-
-  // Toggle du panel
-  toggle.addEventListener('click', () => {
-    panel.classList.toggle('hidden');
-  });
-
-  // Fermer si clic en dehors
-  document.addEventListener('click', (e) => {
-    const switcher = document.getElementById('theme-switcher')!;
-    if (!switcher.contains(e.target as Node)) {
-      panel.classList.add('hidden');
-    }
-  });
-
-  // Changement de thème
-  buttons.forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const theme = btn.dataset.setTheme!;
-      if (theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        localStorage.setItem('aspireves-theme', theme);
-      } else {
-        document.documentElement.removeAttribute('data-theme');
-        localStorage.removeItem('aspireves-theme');
-      }
-      updateActive();
-    });
-  });
-</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 457cb51..1a2f56b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,7 +1,6 @@
 ---
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
-import ThemeSwitcher from '../components/ThemeSwitcher.astro';
 import '../styles/global.css';
 
 interface Props {
@@ -24,7 +23,5 @@ const { title = 'Compagnie AspiRêves' } = Astro.props;
       <slot />
     </main>
     <Footer />
-    <ThemeSwitcher />
-
   </body>
 </html>
diff --git a/src/styles/global.css b/src/styles/global.css
index 39bada9..63527f8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -6,13 +6,13 @@
   --font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
   --font-display: "Fredoka", sans-serif;
 
-  --color-cloud: #F8F7FF;
-  --color-night: #2D2D3A;
-  --color-star: #FFD700;
-  --color-dream-pink: #FFD6E0;
-  --color-dream-blue: #C1D3FE;
-  --color-dream-purple: #E0C3FC;
-  --color-dream-coral: #FF9F89;
+  --color-cloud: #F5EFE6;
+  --color-night: #1A1A2E;
+  --color-star: #C9956B;
+  --color-dream-pink: #E8D5B7;
+  --color-dream-blue: #3A506B;
+  --color-dream-purple: #C9956B;
+  --color-dream-coral: #D4443B;
 }
 
 body {
@@ -114,64 +114,6 @@ body {
   animation: slideDown 0.3s ease forwards;
 }
 
-/* ═══════════════════════════════════════════
-   THÈMES - Sélecteur temporaire de palette
-   ═══════════════════════════════════════════ */
-
-/* Crépuscule & Cuivre — Théâtre classique, velours, projecteurs */
-[data-theme="crepuscule"] {
-  --color-cloud: #F5EFE6;
-  --color-night: #1A1A2E;
-  --color-star: #C9956B;
-  --color-dream-pink: #E8D5B7;
-  --color-dream-blue: #3A506B;
-  --color-dream-purple: #C9956B;
-  --color-dream-coral: #D4443B;
-}
-
-/* Forêt enchantée — Conte, nature mystérieuse, rêve enraciné */
-[data-theme="foret"] {
-  --color-cloud: #F2EDE4;
-  --color-night: #1B2D2A;
-  --color-star: #D4A843;
-  --color-dream-pink: #D4A843;
-  --color-dream-blue: #3D5A47;
-  --color-dream-purple: #7A9E6B;
-  --color-dream-coral: #C17F3E;
-}
-
-/* Nuit étoilée — Scène dans le noir, dramatique, onirique */
-[data-theme="nuit"] {
-  --color-cloud: #0D0D1A;
-  --color-night: #F0ECE2;
-  --color-star: #C8A961;
-  --color-dream-pink: #C8A961;
-  --color-dream-blue: #6B5FB5;
-  --color-dream-purple: #4A3F8A;
-  --color-dream-coral: #C8A961;
-}
-
-/* Nuit étoilée — Overrides pour les bg-white hardcodés */
-[data-theme="nuit"] nav.bg-white\/80,
-[data-theme="nuit"] nav[class*="bg-white"] {
-  background-color: rgba(13, 13, 26, 0.85) !important;
-}
-
-[data-theme="nuit"] #mobile-menu {
-  background-color: rgba(13, 13, 26, 0.95) !important;
-}
-
-/* Aube rosée — Chaleur, poésie, douceur mature */
-[data-theme="aube"] {
-  --color-cloud: #FAF4F0;
-  --color-night: #2C1A2E;
-  --color-star: #C0785A;
-  --color-dream-pink: #D4A88C;
-  --color-dream-blue: #7A4A6A;
-  --color-dream-purple: #6B3A5A;
-  --color-dream-coral: #C0785A;
-}
-
 /* Custom scrollbar */
 
 ::-webkit-scrollbar {