/* ================================================================
   HopMoment — Design system "Doux & amical" + Mode nuit
   ================================================================ */

/* ── Reset tap ─────────────────────────────────────────────────── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* ================================================================
   VARIABLES — Mode clair (défaut)
   ================================================================ */
:root {
  --hm-purple:        #7B6FE0;
  --hm-purple-light:  #F0EFFE;
  --hm-purple-mid:    #E4E1FC;
  --hm-purple-dark:   #4D44A8;
  --hm-green:         #2FAE85;
  --hm-green-light:   #EAFAF3;
  --hm-orange:        #E8825A;
  --hm-orange-light:  #FFF0EB;
  --hm-red:           #E84F6A;
  --hm-yellow:        #F5A623;
  --hm-radius:        16px;
  --hm-radius-sm:     10px;

  /* Tokens sémantiques — clair */
  --bg-page:          #F5F4FF;
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #FAFAFE;
  --bg-input:         #F8F7FF;
  --bg-subtle:        #F0EFFE;

  --text-primary:     #1A1630;
  --text-secondary:   #4A4468;
  --text-muted:       #8B86B0;
  --text-placeholder: #AAA6CC;

  --border-card:      rgba(123,111,224,.13);
  --border-input:     rgba(123,111,224,.22);
  --border-subtle:    rgba(123,111,224,.10);

  --shadow-card:      0 2px 12px rgba(123,111,224,.08);
  --shadow-btn:       0 2px 8px  rgba(123,111,224,.30);
  --shadow-btn-hover: 0 4px 16px rgba(123,111,224,.42);

  --header-bg:        rgba(255,255,255,.95);
  --footer-bg:        #F0EFFE;
  --footer-color:     #9E99CC;

  --scrollbar-thumb:  rgba(123,111,224,.25);

  color-scheme: light;
}

/* ================================================================
   VARIABLES — Mode nuit (data-theme="dark")
   ================================================================ */
[data-theme="dark"] {
  --bg-page:          #0F0E1A;
  --bg-card:          #1A1830;
  --bg-card-hover:    #201E38;
  --bg-input:         #16142A;
  --bg-subtle:        #211F38;

  --text-primary:     #EAE8FF;
  --text-secondary:   #B0AACF;
  --text-muted:       #706A95;
  --text-placeholder: #554F78;

  --border-card:      rgba(123,111,224,.20);
  --border-input:     rgba(123,111,224,.30);
  --border-subtle:    rgba(123,111,224,.12);

  --shadow-card:      0 2px 16px rgba(0,0,0,.40);
  --shadow-btn:       0 2px 8px  rgba(123,111,224,.45);
  --shadow-btn-hover: 0 4px 20px rgba(123,111,224,.60);

  --header-bg:        rgba(15,14,26,.92);
  --footer-bg:        #14122A;
  --footer-color:     #6B66A0;

  --scrollbar-thumb:  rgba(123,111,224,.35);
  --hm-purple-light:  #1E1C3A;
  --hm-purple-mid:    #2A2748;
  --hm-green-light:   #0D2420;
  --hm-orange-light:  #251810;

  color-scheme: dark;
}

/* ================================================================
   APPLICATION DES TOKENS
   ================================================================ */

body {
  background:    var(--bg-page) !important;
  color:         var(--text-primary);
  letter-spacing:-.01em;
  transition: background .25s ease, color .25s ease;
}

/* Cartes */
.bg-white {
  background:  var(--bg-card) !important;
  box-shadow:  var(--shadow-card) !important;
  color:       var(--text-primary);
}
[data-theme="dark"] .bg-white {
  background: var(--bg-card) !important;
}

/* Fonds gris → tokens */
.bg-gray-50  { background: var(--bg-subtle)  !important; }
.bg-gray-100 { background: var(--bg-subtle)  !important; }

/* Textes */
.text-gray-800 { color: var(--text-primary)   !important; }
.text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-500 { color: var(--text-muted)     !important; }
.text-gray-400 { color: var(--text-muted)     !important; }

/* Bordures */
.border-gray-100 { border-color: var(--border-subtle) !important; }
.border-gray-200 { border-color: var(--border-card)   !important; }

/* Inputs */
input, textarea, select {
  background:   var(--bg-input)   !important;
  color:        var(--text-primary) !important;
  border-color: var(--border-input) !important;
  transition: border-color .15s, box-shadow .15s, background .25s;
}
input::placeholder, textarea::placeholder {
  color: var(--text-placeholder) !important;
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(123,111,224,.18) !important;
  border-color: var(--hm-purple) !important;
  outline: none;
}

/* Header */
header.bg-white {
  background:         var(--header-bg) !important;
  backdrop-filter:    blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-subtle) !important;
  transition: background .25s;
}

/* Footer */
footer {
  background: var(--footer-bg)   !important;
  color:      var(--footer-color) !important;
  border-top-color: var(--border-subtle) !important;
  transition: background .25s;
}

/* ── Bouton principal violet ────────────────────────────────── */
.bg-brand-600 {
  box-shadow:  var(--shadow-btn) !important;
  transition:  all .18s ease !important;
}
.bg-brand-600:hover {
  box-shadow:  var(--shadow-btn-hover) !important;
  transform:   translateY(-1px);
}
.bg-brand-600:active {
  transform:   translateY(0) scale(.98);
  box-shadow:  0 1px 4px rgba(123,111,224,.20) !important;
}

/* ── Focus accessible ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--hm-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Avatars ────────────────────────────────────────────────── */
.avatar-0 { background: #7B6FE0 }
.avatar-1 { background: #2FAE85 }
.avatar-2 { background: #E8825A }
.avatar-3 { background: #E84F6A }
.avatar-4 { background: #3B9EE0 }
.avatar-5 { background: #F5A623 }
.avatar-6 { background: #8B5CF6 }
.avatar-7 { background: #059669 }

/* ── Mode nuit : ajustements spécifiques ────────────────────── */
[data-theme="dark"] .bg-mint-50  { background: var(--hm-green-light)  !important; }
[data-theme="dark"] .bg-brand-50 { background: var(--hm-purple-light) !important; }
[data-theme="dark"] .bg-peach-50 { background: var(--hm-orange-light) !important; }
[data-theme="dark"] .text-mint-600, [data-theme="dark"] .text-mint-700 { color: #4DD9A8 !important; }
[data-theme="dark"] .text-brand-600 { color: #9A90F0 !important; }
[data-theme="dark"] .text-brand-700 { color: #B0AAFF !important; }
[data-theme="dark"] .text-brand-800 { color: #C5C0FF !important; }
[data-theme="dark"] .border-brand-200 { border-color: rgba(123,111,224,.30) !important; }
[data-theme="dark"] .border-brand-400 { border-color: #7B6FE0 !important; }
[data-theme="dark"] .vote-row  { border-color: var(--border-card) !important; }

/* Overlay d'ombre douce sur les cartes dark */
[data-theme="dark"] .bg-white {
  border: 1px solid var(--border-card);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0)    }
}
@keyframes popIn {
  0%   { transform:scale(.8); opacity:0 }
  70%  { transform:scale(1.06) }
  100% { transform:scale(1);   opacity:1 }
}
@keyframes confettiFall {
  0%   { transform:translateY(-10px) rotate(0deg);   opacity:1 }
  100% { transform:translateY(220px) rotate(360deg); opacity:0 }
}
@keyframes pulse-soft {
  0%,100% { box-shadow:0 0 0 0 rgba(123,111,224,.3) }
  50%      { box-shadow:0 0 0 8px rgba(123,111,224,0) }
}
@keyframes moonrise {
  from { transform: rotate(-30deg) scale(.7); opacity:0 }
  to   { transform: rotate(0deg)   scale(1);  opacity:1 }
}
.animate-fade-in-up { animation: fadeInUp .22s ease-out both }
.animate-pop-in     { animation: popIn .28s cubic-bezier(.34,1.56,.64,1) both }
.animate-pulse-soft { animation: pulse-soft 2s infinite }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up, .animate-pop-in, .animate-pulse-soft, .confetti-piece { animation: none }
}

/* ── Confettis ──────────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall 1.4s ease-out both;
}

/* ── Vote row hover ─────────────────────────────────────────── */
.vote-row { transition: box-shadow .15s ease, transform .15s ease; }
.vote-row:hover {
  box-shadow: 0 4px 16px rgba(123,111,224,.10) !important;
  transform: translateY(-1px);
}

/* ── Toast ──────────────────────────────────────────────────── */
#vote-toast {
  pointer-events: none;
  border-radius: 12px !important;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}
[data-theme="dark"] #vote-toast:not([style*="dc2626"]) {
  background: #2A2748 !important;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: rgba(123,111,224,.50) }

/* ── Sélection de texte ─────────────────────────────────────── */
::selection { background: rgba(123,111,224,.22); color: var(--text-primary) }

/* ── Graisse globale — 600 minimum ─────────────────────────── */
* { font-weight: 600; }
h1, h2, h3, .font-semibold, .font-bold,
button, [type="submit"], [type="button"] { font-weight: 700 !important; }
.font-medium { font-weight: 600 !important; }
.text-xs, .text-sm, .text-base { font-weight: 600; }

/* ── Bouton de thème dans le footer ─────────────────────────── */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  margin-top: 10px;
}
#theme-toggle:hover {
  border-color: var(--hm-purple);
  color: var(--hm-purple);
  box-shadow: 0 2px 8px rgba(123,111,224,.15);
}
#theme-toggle .theme-icon {
  font-size: 16px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] #theme-toggle .theme-icon {
  animation: moonrise .4s ease-out both;
}

/* ================================================================
   PALETTES — 8 thèmes × 2 modes
   Chaque palette surcharge :
     - --bg-page       : fond de page
     - --bg-card       : fond des cartes
     - --bg-subtle     : fonds secondaires
     - --hm-purple*    : couleur d'accent (boutons, liens, bordures)
     - .bg-brand-*     : surcharge directe des classes Tailwind
   ================================================================ */

/* Helper : applique la couleur primaire à toutes les classes brand */
/* 
   Pour chaque palette, on surcharge :
   [data-palette="X"] .bg-brand-600      → bouton principal
   [data-palette="X"] .bg-brand-800      → hover bouton
   [data-palette="X"] .text-brand-600    → textes liens
   [data-palette="X"] .border-brand-400  → bordures focus
   [data-palette="X"] .bg-brand-50       → fonds légers
   etc.
*/

/* ── Macro réutilisable (on la duplique pour chaque palette) ── */

/* ── 1. Violet — défaut ──────────────────────────────────────── */
/* (déjà défini dans :root, pas de surcharge nécessaire) */

/* ── 2. Ocean — bleu vif ─────────────────────────────────────── */
[data-palette="ocean"] {
  --hm-purple: #2563EB; --hm-purple-dark: #1D4ED8;
  --hm-purple-light: #EFF6FF; --hm-purple-mid: #DBEAFE;
  --bg-page: #F0F6FF; --bg-subtle: #EFF6FF;
}
[data-palette="ocean"] .bg-brand-600        { background-color: #2563EB !important; box-shadow: 0 2px 8px rgba(37,99,235,.30) !important; }
[data-palette="ocean"] .bg-brand-800,
[data-palette="ocean"] .hover\:bg-brand-800:hover { background-color: #1D4ED8 !important; }
[data-palette="ocean"] .bg-brand-50         { background-color: #EFF6FF !important; }
[data-palette="ocean"] .text-brand-600      { color: #2563EB !important; }
[data-palette="ocean"] .text-brand-700      { color: #1D4ED8 !important; }
[data-palette="ocean"] .text-brand-800      { color: #1E40AF !important; }
[data-palette="ocean"] .border-brand-400    { border-color: #60A5FA !important; }
[data-palette="ocean"] .border-brand-200    { border-color: #BFDBFE !important; }
[data-palette="ocean"] .border-brand-300    { border-color: #93C5FD !important; }
[data-palette="ocean"] .hover\:border-brand-400:hover { border-color: #60A5FA !important; }
[data-palette="ocean"] :focus-visible       { outline-color: #2563EB; }
[data-palette="ocean"][data-theme="dark"] {
  --bg-page: #060E1F; --bg-card: #0D1B35; --bg-subtle: #111D38;
  --hm-purple-light: #0D1B35; --hm-purple-mid: #142040;
}
[data-palette="ocean"][data-theme="dark"] .text-brand-600 { color: #60A5FA !important; }
[data-palette="ocean"][data-theme="dark"] .text-brand-700 { color: #93C5FD !important; }
[data-palette="ocean"][data-theme="dark"] .text-brand-800 { color: #BFDBFE !important; }
[data-palette="ocean"][data-theme="dark"] .bg-brand-50    { background-color: #0D1B35 !important; }

/* ── 3. Forest — vert sapin ──────────────────────────────────── */
[data-palette="forest"] {
  --hm-purple: #16A34A; --hm-purple-dark: #15803D;
  --hm-purple-light: #F0FDF4; --hm-purple-mid: #DCFCE7;
  --bg-page: #F0FDF6; --bg-subtle: #F0FDF4;
}
[data-palette="forest"] .bg-brand-600        { background-color: #16A34A !important; box-shadow: 0 2px 8px rgba(22,163,74,.30) !important; }
[data-palette="forest"] .bg-brand-800,
[data-palette="forest"] .hover\:bg-brand-800:hover { background-color: #15803D !important; }
[data-palette="forest"] .bg-brand-50         { background-color: #F0FDF4 !important; }
[data-palette="forest"] .text-brand-600      { color: #16A34A !important; }
[data-palette="forest"] .text-brand-700      { color: #15803D !important; }
[data-palette="forest"] .text-brand-800      { color: #166534 !important; }
[data-palette="forest"] .border-brand-400    { border-color: #4ADE80 !important; }
[data-palette="forest"] .border-brand-200    { border-color: #BBF7D0 !important; }
[data-palette="forest"] .border-brand-300    { border-color: #86EFAC !important; }
[data-palette="forest"] .hover\:border-brand-400:hover { border-color: #4ADE80 !important; }
[data-palette="forest"] :focus-visible       { outline-color: #16A34A; }
[data-palette="forest"][data-theme="dark"] {
  --bg-page: #05120A; --bg-card: #0A1F12; --bg-subtle: #0F2618;
  --hm-purple-light: #0A1F12; --hm-purple-mid: #102818;
}
[data-palette="forest"][data-theme="dark"] .text-brand-600 { color: #4ADE80 !important; }
[data-palette="forest"][data-theme="dark"] .text-brand-700 { color: #86EFAC !important; }
[data-palette="forest"][data-theme="dark"] .bg-brand-50    { background-color: #0A1F12 !important; }

/* ── 4. Sunset — orange chaud ────────────────────────────────── */
[data-palette="sunset"] {
  --hm-purple: #EA580C; --hm-purple-dark: #C2410C;
  --hm-purple-light: #FFF7ED; --hm-purple-mid: #FFEDD5;
  --bg-page: #FFF8F3; --bg-subtle: #FFF7ED;
}
[data-palette="sunset"] .bg-brand-600        { background-color: #EA580C !important; box-shadow: 0 2px 8px rgba(234,88,12,.30) !important; }
[data-palette="sunset"] .bg-brand-800,
[data-palette="sunset"] .hover\:bg-brand-800:hover { background-color: #C2410C !important; }
[data-palette="sunset"] .bg-brand-50         { background-color: #FFF7ED !important; }
[data-palette="sunset"] .text-brand-600      { color: #EA580C !important; }
[data-palette="sunset"] .text-brand-700      { color: #C2410C !important; }
[data-palette="sunset"] .text-brand-800      { color: #9A3412 !important; }
[data-palette="sunset"] .border-brand-400    { border-color: #FB923C !important; }
[data-palette="sunset"] .border-brand-200    { border-color: #FED7AA !important; }
[data-palette="sunset"] .border-brand-300    { border-color: #FDBA74 !important; }
[data-palette="sunset"] .hover\:border-brand-400:hover { border-color: #FB923C !important; }
[data-palette="sunset"] :focus-visible       { outline-color: #EA580C; }
[data-palette="sunset"][data-theme="dark"] {
  --bg-page: #180B02; --bg-card: #261408; --bg-subtle: #2E180A;
  --hm-purple-light: #261408; --hm-purple-mid: #311A0C;
}
[data-palette="sunset"][data-theme="dark"] .text-brand-600 { color: #FB923C !important; }
[data-palette="sunset"][data-theme="dark"] .text-brand-700 { color: #FDBA74 !important; }
[data-palette="sunset"][data-theme="dark"] .bg-brand-50    { background-color: #261408 !important; }

/* ── 5. Rose — framboise ─────────────────────────────────────── */
[data-palette="rose"] {
  --hm-purple: #DB2777; --hm-purple-dark: #BE185D;
  --hm-purple-light: #FFF0F6; --hm-purple-mid: #FCE7F3;
  --bg-page: #FFF5F9; --bg-subtle: #FFF0F6;
}
[data-palette="rose"] .bg-brand-600        { background-color: #DB2777 !important; box-shadow: 0 2px 8px rgba(219,39,119,.30) !important; }
[data-palette="rose"] .bg-brand-800,
[data-palette="rose"] .hover\:bg-brand-800:hover { background-color: #BE185D !important; }
[data-palette="rose"] .bg-brand-50         { background-color: #FFF0F6 !important; }
[data-palette="rose"] .text-brand-600      { color: #DB2777 !important; }
[data-palette="rose"] .text-brand-700      { color: #BE185D !important; }
[data-palette="rose"] .text-brand-800      { color: #9D174D !important; }
[data-palette="rose"] .border-brand-400    { border-color: #F472B6 !important; }
[data-palette="rose"] .border-brand-200    { border-color: #FBCFE8 !important; }
[data-palette="rose"] .border-brand-300    { border-color: #F9A8D4 !important; }
[data-palette="rose"] .hover\:border-brand-400:hover { border-color: #F472B6 !important; }
[data-palette="rose"] :focus-visible       { outline-color: #DB2777; }
[data-palette="rose"][data-theme="dark"] {
  --bg-page: #180510; --bg-card: #260D1C; --bg-subtle: #2E1122;
  --hm-purple-light: #260D1C; --hm-purple-mid: #320F23;
}
[data-palette="rose"][data-theme="dark"] .text-brand-600 { color: #F472B6 !important; }
[data-palette="rose"][data-theme="dark"] .text-brand-700 { color: #F9A8D4 !important; }
[data-palette="rose"][data-theme="dark"] .bg-brand-50    { background-color: #260D1C !important; }

/* ── 6. Slate — gris bleuté ──────────────────────────────────── */
[data-palette="slate"] {
  --hm-purple: #475569; --hm-purple-dark: #334155;
  --hm-purple-light: #F8FAFC; --hm-purple-mid: #F1F5F9;
  --bg-page: #F8FAFC; --bg-subtle: #F1F5F9;
}
[data-palette="slate"] .bg-brand-600        { background-color: #475569 !important; box-shadow: 0 2px 8px rgba(71,85,105,.25) !important; }
[data-palette="slate"] .bg-brand-800,
[data-palette="slate"] .hover\:bg-brand-800:hover { background-color: #334155 !important; }
[data-palette="slate"] .bg-brand-50         { background-color: #F8FAFC !important; }
[data-palette="slate"] .text-brand-600      { color: #475569 !important; }
[data-palette="slate"] .text-brand-700      { color: #334155 !important; }
[data-palette="slate"] .text-brand-800      { color: #1E293B !important; }
[data-palette="slate"] .border-brand-400    { border-color: #94A3B8 !important; }
[data-palette="slate"] .border-brand-200    { border-color: #CBD5E1 !important; }
[data-palette="slate"] .border-brand-300    { border-color: #94A3B8 !important; }
[data-palette="slate"] .hover\:border-brand-400:hover { border-color: #94A3B8 !important; }
[data-palette="slate"] :focus-visible       { outline-color: #475569; }
[data-palette="slate"][data-theme="dark"] {
  --bg-page: #0C1118; --bg-card: #141C26; --bg-subtle: #1A2432;
  --hm-purple-light: #141C26; --hm-purple-mid: #1C2A3A;
}
[data-palette="slate"][data-theme="dark"] .text-brand-600 { color: #94A3B8 !important; }
[data-palette="slate"][data-theme="dark"] .text-brand-700 { color: #CBD5E1 !important; }
[data-palette="slate"][data-theme="dark"] .bg-brand-50    { background-color: #141C26 !important; }

/* ── 7. Indigo — nuit étoilée ────────────────────────────────── */
[data-palette="indigo"] {
  --hm-purple: #4F46E5; --hm-purple-dark: #4338CA;
  --hm-purple-light: #EEF2FF; --hm-purple-mid: #E0E7FF;
  --bg-page: #F5F3FF; --bg-subtle: #EEF2FF;
}
[data-palette="indigo"] .bg-brand-600        { background-color: #4F46E5 !important; box-shadow: 0 2px 8px rgba(79,70,229,.30) !important; }
[data-palette="indigo"] .bg-brand-800,
[data-palette="indigo"] .hover\:bg-brand-800:hover { background-color: #4338CA !important; }
[data-palette="indigo"] .bg-brand-50         { background-color: #EEF2FF !important; }
[data-palette="indigo"] .text-brand-600      { color: #4F46E5 !important; }
[data-palette="indigo"] .text-brand-700      { color: #4338CA !important; }
[data-palette="indigo"] .text-brand-800      { color: #3730A3 !important; }
[data-palette="indigo"] .border-brand-400    { border-color: #818CF8 !important; }
[data-palette="indigo"] .border-brand-200    { border-color: #C7D2FE !important; }
[data-palette="indigo"] .border-brand-300    { border-color: #A5B4FC !important; }
[data-palette="indigo"] .hover\:border-brand-400:hover { border-color: #818CF8 !important; }
[data-palette="indigo"] :focus-visible       { outline-color: #4F46E5; }
[data-palette="indigo"][data-theme="dark"] {
  --bg-page: #07060F; --bg-card: #100F22; --bg-subtle: #161430;
  --hm-purple-light: #100F22; --hm-purple-mid: #1A183A;
}
[data-palette="indigo"][data-theme="dark"] .text-brand-600 { color: #818CF8 !important; }
[data-palette="indigo"][data-theme="dark"] .text-brand-700 { color: #A5B4FC !important; }
[data-palette="indigo"][data-theme="dark"] .bg-brand-50    { background-color: #100F22 !important; }

/* ── 8. Teal — turquoise nordique ────────────────────────────── */
[data-palette="teal"] {
  --hm-purple: #0D9488; --hm-purple-dark: #0F766E;
  --hm-purple-light: #F0FDFA; --hm-purple-mid: #CCFBF1;
  --bg-page: #F0FDFB; --bg-subtle: #F0FDFA;
}
[data-palette="teal"] .bg-brand-600        { background-color: #0D9488 !important; box-shadow: 0 2px 8px rgba(13,148,136,.30) !important; }
[data-palette="teal"] .bg-brand-800,
[data-palette="teal"] .hover\:bg-brand-800:hover { background-color: #0F766E !important; }
[data-palette="teal"] .bg-brand-50         { background-color: #F0FDFA !important; }
[data-palette="teal"] .text-brand-600      { color: #0D9488 !important; }
[data-palette="teal"] .text-brand-700      { color: #0F766E !important; }
[data-palette="teal"] .text-brand-800      { color: #115E59 !important; }
[data-palette="teal"] .border-brand-400    { border-color: #2DD4BF !important; }
[data-palette="teal"] .border-brand-200    { border-color: #99F6E4 !important; }
[data-palette="teal"] .border-brand-300    { border-color: #5EEAD4 !important; }
[data-palette="teal"] .hover\:border-brand-400:hover { border-color: #2DD4BF !important; }
[data-palette="teal"] :focus-visible       { outline-color: #0D9488; }
[data-palette="teal"][data-theme="dark"] {
  --bg-page: #041210; --bg-card: #071E1C; --bg-subtle: #0A2826;
  --hm-purple-light: #071E1C; --hm-purple-mid: #0D2E2A;
}
[data-palette="teal"][data-theme="dark"] .text-brand-600 { color: #2DD4BF !important; }
[data-palette="teal"][data-theme="dark"] .text-brand-700 { color: #5EEAD4 !important; }
[data-palette="teal"][data-theme="dark"] .bg-brand-50    { background-color: #071E1C !important; }

/* ── Sélecteur de palette dans le footer ─────────────────────── */
#palette-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.palette-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  outline: none;
  position: relative;
}
.palette-swatch:hover  { transform: scale(1.2); }
.palette-swatch.active {
  border-color: var(--text-primary, #1A1630);
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--bg-page, #F5F4FF),
              0 0 0 4px var(--text-primary, #1A1630);
}