/* ==========================================
   PLANESTO - SYSTÈME DE THÈMES
   ========================================== */

/* 🎨 Variables de couleur pour le thème par défaut (Vert Émeraude) */
:root,
html[data-theme="default"] {
  /* --- Couleur principale du thème --- */
  --theme-primary-50: #ecfdf5;
  --theme-primary-100: #d1fae5;
  --theme-primary-200: #a7f3d0;
  --theme-primary-300: #6ee7b7;
  --theme-primary-400: #34d399;
  --theme-primary-500: #10b981;
  --theme-primary-600: #059669;   /* Vert soutenu principal */
  --theme-primary-700: #047857;   /* Vert plus foncé (2 tons) */
  --theme-primary-800: #065f46;
  --theme-primary-900: #064e3b;
  --theme-primary-950: #022c22;

  /* --- Header / Navigation --- */
  --theme-header-bg: #f1f5f9;
  --theme-header-border: rgba(5, 150, 105, 0.1);
  --theme-header-logo-text: var(--theme-primary-700);
  --theme-header-company-from: var(--theme-primary-700);
  --theme-header-company-to: var(--theme-primary-800);
  --theme-header-btn-bg-from: var(--theme-primary-600);
  --theme-header-btn-bg-to: var(--theme-primary-700);
  --theme-header-btn-shadow: rgba(5, 150, 105, 0.3);
  
  /* --- Boutons CTA (Call To Action) --- */
  --theme-cta-bg: var(--theme-primary-600);
  --theme-cta-bg-hover: var(--theme-primary-700);
  --theme-cta-border: transparent;
  --theme-cta-border-hover: transparent;
  --theme-cta-text: #ffffff;
  --theme-cta-text-hover: #ffffff;
  --theme-cta-shadow: rgba(5, 150, 105, 0.3);
  /* Pour désactiver l'ombre, définir : --theme-cta-box-shadow: none; */
  --theme-cta-box-shadow: 0 2px 4px var(--theme-cta-shadow);
  --theme-cta-box-shadow-hover: 0 4px 8px var(--theme-cta-shadow);
  
  /* --- Page Banners (planesto-page-banner) --- */
  --theme-header-bg-gradient: linear-gradient(to bottom right, rgba(236, 253, 245, 1) 0%, rgba(209, 250, 229, 0.8) 50%, rgba(236, 253, 245, 1) 100%);
  --theme-header-overlay-gradient: linear-gradient(to bottom right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  --theme-header-icon-bg: rgba(255, 255, 255, 0.9);
  --theme-header-icon-color: var(--theme-primary-600);
  
  /* --- Calendar Colors (Dashboard & Planning Year) --- */
  --theme-calendar-day-empty-bg: rgba(236, 253, 245, 0.3);
  --theme-calendar-day-empty-border: #a7f3d0;
  --theme-calendar-day-filled-bg: rgba(209, 250, 229, 0.6);
  --theme-calendar-day-filled-border: #6ee7b7;
  --theme-calendar-day-today-bg: var(--theme-primary-600);
  --theme-calendar-hours-text: var(--theme-primary-600);
  --theme-calendar-persons-text: #10b981;

  /* --- Texte et liens --- */
  --theme-text-primary: #1f2937;
  --theme-text-secondary: #6b7280;
  --theme-link-hover: var(--theme-primary-600);
  
  /* --- Boutons --- */
  --theme-btn-primary-bg: var(--theme-primary-600);
  --theme-btn-primary-hover: var(--theme-primary-700);
  --theme-btn-primary-text: #ffffff;
  
  /* --- Bannières de page (Admin) --- */
  --theme-banner-bg-from: var(--theme-primary-50);
  --theme-banner-bg-to: var(--theme-primary-100);
  --theme-banner-icon-bg: rgba(255, 255, 255, 0.9);
  --theme-banner-icon-color: var(--theme-primary-600);
  --theme-banner-title: #374151;
  --theme-banner-subtitle: #6b7280;
  --theme-banner-border: #e5e7eb;
  --theme-banner-glow: rgba(255, 255, 255, 0.2);
  
  /* --- Arrière-plans --- */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f1f5f9;
  --theme-bg-accent: rgba(236, 253, 245, 0.3);
  
  /* --- Menu latéral --- */
  --theme-menu-bg: #ffffff;
  --theme-menu-border: #e5e7eb;
  --theme-menu-item-text: #4b5563;
  --theme-menu-item-hover-bg: var(--theme-primary-600);
  --theme-menu-item-hover-text: #ffffff;
  --theme-menu-item-active-bg: var(--theme-primary-600);
  --theme-menu-item-active-text: #ffffff;
  --theme-menu-user-bg: #f9fafb;
  --theme-menu-user-avatar-from: var(--theme-primary-500);
  --theme-menu-user-avatar-to: var(--theme-primary-600);

  /* --- Planning 7-30 --- */
  --theme-planning-surface-bg: var(--theme-features-card-bg);
  --theme-planning-surface-border: var(--theme-menu-border);
  --theme-planning-surface-text: var(--theme-text-primary);
  --theme-planning-surface-muted: var(--theme-text-secondary);
  --theme-planning-surface-button-bg: var(--theme-features-card-bg);
  --theme-planning-surface-button-border: var(--theme-menu-border);
  --theme-planning-surface-button-text: var(--theme-text-primary);
  --theme-planning-surface-button-hover-bg: var(--theme-bg-secondary);
  --theme-planning-person-menu-bg: #ffffff;
  --theme-planning-person-menu-text: var(--theme-text-primary);
  --theme-planning-vacation-text: var(--theme-text-primary);
  --theme-planning-day-badge-bg: transparent;
  --theme-planning-day-badge-border: var(--theme-menu-border);
  --theme-planning-day-badge-text: var(--theme-text-primary);
  
  /* --- Landing Page / Hero Section --- */
  --theme-hero-bg-from: var(--theme-primary-50);
  --theme-hero-bg-to: var(--theme-primary-100);
  --theme-hero-title: #111827;
  --theme-hero-title-accent: var(--theme-primary-700);
  --theme-hero-subtitle: #374151;
  --theme-hero-badge-bg: rgba(255, 255, 255, 0.8);
  --theme-hero-badge-border: rgba(255, 255, 255, 0.5);
  --theme-hero-badge-text: var(--theme-primary-700);
  --theme-cta-secondary-bg: transparent;
  --theme-cta-secondary-border: var(--theme-primary-600);
  --theme-cta-secondary-text: var(--theme-primary-700);
  --theme-cta-secondary-bg-hover: rgba(255, 255, 255, 0);
  --theme-cta-secondary-border-hover: var(--theme-primary-700);
  --theme-cta-secondary-text-hover: var(--theme-primary-700);
  --theme-features-bg: #f9fafb;
  --theme-features-card-bg: #ffffff;
  
  /* --- Section Blog --- */
  --theme-blog-bg: #f9fafb;
  --theme-blog-card-bg: #ffffff;
  --theme-blog-title: #111827;
  --theme-blog-subtitle: #6b7280;
  
  /* --- Section Tarif --- */
  --theme-tarif-bg: #f9fafb;
  --theme-tarif-card-bg: #ffffff;
  --theme-tarif-title: #111827;
  --theme-tarif-subtitle: #6b7280;
  --theme-tarif-accent: var(--theme-primary-600);
  
  /* --- Section Contact --- */
  --theme-contact-bg: #f9fafb;
  --theme-contact-card-bg: #ffffff;
  --theme-contact-title: #111827;
  --theme-contact-subtitle: #6b7280;
  --theme-contact-accent: var(--theme-primary-600);
  
  /* --- Footer --- */
  --theme-footer-wrapper-bg: #f9fafb;
  --theme-footer-bg: #374151;
  --theme-footer-title: #ffffff;
  --theme-footer-text: #d1d5db;
  --theme-footer-link: #d1d5db;
  --theme-footer-link-hover: #34d399;
  --theme-footer-separator: #4b5563;
  --theme-footer-social-bg: #4b5563;
  --theme-footer-social-hover: var(--theme-primary-600);
}

/* 🌙 Mode sombre - ajustements pour thème par défaut (Vert) */
html.dark,
html.dark[data-theme="default"] {
  --theme-header-bg: #1f2937;
  --theme-header-border: rgba(5, 150, 105, 0.2);
  --theme-header-logo-text: var(--theme-primary-400);
  --theme-header-company-from: var(--theme-primary-300);
  --theme-header-company-to: var(--theme-primary-400);
  
  /* --- Boutons CTA Dark Mode --- */
  --theme-cta-bg: var(--theme-primary-500);
  --theme-cta-bg-hover: var(--theme-primary-600);
  --theme-cta-border: transparent;
  --theme-cta-border-hover: transparent;
  --theme-cta-text: #ffffff;
  --theme-cta-text-hover: #ffffff;
  --theme-cta-shadow: rgba(16, 185, 129, 0.4);
  /* Pour désactiver l'ombre, définir : --theme-cta-box-shadow: none; */
  --theme-cta-box-shadow: 0 2px 4px var(--theme-cta-shadow);
  --theme-cta-box-shadow-hover: 0 4px 8px var(--theme-cta-shadow);
  
  /* --- Page Banners Dark Mode --- */
  --theme-header-bg-gradient: linear-gradient(to bottom right, rgba(6, 78, 59, 0.4) 0%, rgba(5, 46, 22, 0.5) 50%, rgba(6, 78, 59, 0.4) 100%);
  --theme-header-overlay-gradient: linear-gradient(to bottom right, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 50%, transparent 100%);
  --theme-header-icon-bg: rgba(16, 185, 129, 0.2);
  --theme-header-icon-color: var(--theme-primary-400);
  
  /* --- Calendar Colors Dark --- */
  --theme-calendar-day-empty-bg: rgba(6, 78, 59, 0.2);
  --theme-calendar-day-empty-border: #064e3b;
  --theme-calendar-day-filled-bg: rgba(6, 78, 59, 0.3);
  --theme-calendar-day-filled-border: #047857;
  --theme-calendar-day-today-bg: var(--theme-primary-500);
  --theme-calendar-hours-text: var(--theme-primary-400);
  --theme-calendar-persons-text: #34d399;
  
  --theme-text-primary: #f9fafb;
  --theme-text-secondary: #d1d5db;
  --theme-link-hover: var(--theme-primary-400);
  
  --theme-banner-bg-from: var(--theme-primary-900);
  --theme-banner-bg-to: #064e3b;
  --theme-banner-icon-bg: rgba(16, 185, 129, 0.1);
  --theme-banner-icon-color: var(--theme-primary-400);
  --theme-banner-title: #f3f4f6;
  --theme-banner-subtitle: #d1d5db;
  --theme-banner-border: #374151;
  
  /* --- Arrière-plans Dark Mode --- */
  --theme-bg-primary: #111827;
  --theme-bg-secondary: #1f2937;
  --theme-bg-accent: rgba(6, 78, 59, 0.2);
  
  /* --- Menu latéral Dark Mode --- */
  --theme-menu-bg: #1f2937;
  --theme-menu-border: #374151;
  --theme-menu-item-text: #d1d5db;
  --theme-menu-item-hover-bg: var(--theme-primary-500);
  --theme-menu-item-active-bg: var(--theme-primary-600);
  --theme-menu-user-bg: #111827;
  --theme-menu-user-avatar-from: var(--theme-primary-400);
  --theme-menu-user-avatar-to: var(--theme-primary-500);

  /* --- Planning 7-30 Dark --- */
  --theme-planning-surface-bg: var(--theme-features-card-bg);
  --theme-planning-surface-border: var(--theme-menu-border);
  --theme-planning-surface-text: var(--theme-text-primary);
  --theme-planning-surface-muted: var(--theme-text-secondary);
  --theme-planning-surface-button-bg: var(--theme-features-card-bg);
  --theme-planning-surface-button-border: var(--theme-menu-border);
  --theme-planning-surface-button-text: var(--theme-text-primary);
  --theme-planning-surface-button-hover-bg: var(--theme-bg-secondary);
  --theme-planning-person-menu-bg: #111827;
  --theme-planning-person-menu-text: var(--theme-text-primary);
  --theme-planning-vacation-text: var(--theme-text-primary);
  --theme-planning-day-badge-bg: transparent;
  --theme-planning-day-badge-border: var(--theme-menu-border);
  --theme-planning-day-badge-text: var(--theme-text-primary);
  
  /* --- Landing Page / Hero Section Dark Mode --- */
  --theme-hero-bg-from: rgba(6, 78, 59, 0.3);
  --theme-hero-bg-to: rgba(5, 46, 22, 0.4);
  --theme-hero-title: #f9fafb;
  --theme-hero-title-accent: var(--theme-primary-400);
  --theme-hero-subtitle: #d1d5db;
  --theme-hero-badge-bg: rgba(16, 185, 129, 0.15);
  --theme-hero-badge-border: rgba(16, 185, 129, 0.2);
  --theme-hero-badge-text: var(--theme-primary-300);
  --theme-cta-secondary-bg: transparent;
  --theme-cta-secondary-border: var(--theme-primary-400);
  --theme-cta-secondary-text: var(--theme-primary-300);
  --theme-cta-secondary-bg-hover: rgba(255, 255, 255, 0);
  --theme-cta-secondary-border-hover: var(--theme-primary-300);
  --theme-cta-secondary-text-hover: var(--theme-primary-300);
  --theme-features-bg: #111827;
  --theme-features-card-bg: #1f2937;
  
  /* --- Section Blog Dark --- */
  --theme-blog-bg: #111827;
  --theme-blog-card-bg: #1f2937;
  --theme-blog-title: #f9fafb;
  --theme-blog-subtitle: #d1d5db;
  
  /* --- Section Tarif Dark --- */
  --theme-tarif-bg: #111827;
  --theme-tarif-card-bg: #1f2937;
  --theme-tarif-title: #f9fafb;
  --theme-tarif-subtitle: #d1d5db;
  --theme-tarif-accent: var(--theme-primary-400);
  
  /* --- Section Contact Dark --- */
  --theme-contact-bg: #111827;
  --theme-contact-card-bg: #1f2937;
  --theme-contact-title: #f9fafb;
  --theme-contact-subtitle: #d1d5db;
  --theme-contact-accent: var(--theme-primary-400);
  
  /* --- Footer Dark --- */
  --theme-footer-wrapper-bg: #111827;
  --theme-footer-bg: #1f2937;
  --theme-footer-title: #f9fafb;
  --theme-footer-text: #d1d5db;
  --theme-footer-link: #d1d5db;
  --theme-footer-link-hover: var(--theme-primary-400);
  --theme-footer-separator: #374151;
  --theme-footer-social-bg: #374151;
  --theme-footer-social-hover: var(--theme-primary-500);
}

/* ==========================================
   CLASSES POUR LE HEADER
   ========================================== */

/* Container du header */
.theme-header {
  background: var(--theme-header-bg) !important;
  background-color: var(--theme-header-bg) !important;
  border-bottom: 1px solid var(--theme-header-border);
  box-shadow: 0 1px 3px 0 var(--theme-header-btn-shadow);
  opacity: 1 !important;
}

/* Force le background opaque en dark mode */
html.dark .theme-header,
html.dark[data-theme] .theme-header {
  background: var(--theme-header-bg) !important;
  background-color: var(--theme-header-bg) !important;
  opacity: 1 !important;
}

/* Logo SVG - prend la couleur du thème */
.theme-header-logo {
  color: var(--theme-header-logo-text) !important;
  filter: none;
}

/* Logo et titre PLANESTO */
.theme-header-logo-text {
  color: var(--theme-header-logo-text);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Nom du restaurant */
.theme-header-company-name {
  background: linear-gradient(135deg, var(--theme-header-company-from) 0%, var(--theme-header-company-to) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Bouton principal du header (Connexion / Inscription / Faire le planning) */
.theme-header-btn-primary {
  background: var(--theme-cta-bg) !important;
  box-shadow: var(--theme-cta-box-shadow) !important;
  color: var(--theme-cta-text) !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--theme-cta-border) !important;
  transition: all 0.3s ease;
}

.theme-header-btn-primary:hover {
  background: var(--theme-cta-bg-hover, var(--theme-cta-bg)) !important;
  color: var(--theme-cta-text-hover, var(--theme-cta-text)) !important;
  border-color: var(--theme-cta-border-hover, var(--theme-cta-border)) !important;
  transform: scale(1.05);
  box-shadow: var(--theme-cta-box-shadow-hover) !important;
}

/* Bouton secondaire du header (Inscription) */
.theme-header-btn-secondary {
  background: var(--theme-cta-secondary-bg) !important;
  border: 2px solid var(--theme-cta-secondary-border) !important;
  color: var(--theme-cta-secondary-text) !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.theme-header-btn-secondary:hover {
  background: var(--theme-cta-secondary-bg-hover) !important;
  border-color: var(--theme-cta-secondary-border-hover) !important;
  color: var(--theme-cta-secondary-text-hover) !important;
  transform: scale(1.05);
}

/* Lien secondaire du header */
.theme-header-link {
  color: var(--theme-text-secondary);
  transition: color 0.2s ease;
}

.theme-header-link:hover {
  color: var(--theme-link-hover);
}

/* ==========================================
   THÈME NATURE FRAÎCHE
   ========================================== */

/* 🌿 Thème Nature Fraîche */
html[data-theme="nature"] {
  --theme-primary-50: #f0f9f9;
  --theme-primary-100: #d9f2f2;
  --theme-primary-200: #b3e5e6;
  --theme-primary-300: #7dd4d6;
  --theme-primary-400: #4ab8bb;
  --theme-primary-500: #2d9da0;
  --theme-primary-600: #0d7680;
  --theme-primary-700: #0a5e67;
  --theme-primary-800: #084b52;
  --theme-primary-900: #073e44;
  --theme-primary-950: #042729;

  /* Couleurs secondaires et accents */
  --theme-secondary-400: #87a03c;
  --theme-secondary-500: #6f8832;
  --theme-accent-400: #c6d449;
  --theme-accent-500: #b3c03d;
  --theme-blue-medium: #5a8fa8;

  --theme-header-bg: #f0f9f9;
  --theme-header-logo-text: #0d7680;
  --theme-header-company-from: #5a8fa8;
  --theme-header-company-to: #0d7680;
  --theme-header-btn-bg-from: #c6d449;
  --theme-header-btn-bg-to: #87a03c;
  --theme-header-btn-shadow: rgba(198, 212, 73, 0.4);
  
  /* --- Boutons CTA Nature --- */
  --theme-cta-bg: #c6d449;
  --theme-cta-bg-hover: #87a03c;
  --theme-cta-text: #073e44;
  --theme-cta-shadow: rgba(198, 212, 73, 0.4);
  
  /* --- Page Banners Nature Light --- */
  --theme-header-bg-gradient: linear-gradient(to bottom right, rgba(240, 249, 249, 1) 0%, rgba(217, 242, 242, 0.8) 50%, rgba(240, 249, 249, 1) 100%);
  --theme-header-overlay-gradient: linear-gradient(to bottom right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  --theme-header-icon-bg: rgba(255, 255, 255, 0.9);
  --theme-header-icon-color: #0d7680;
  
  --theme-banner-icon-color: #0d7680;
  --theme-link-hover: #5a8fa8;
  --theme-btn-primary-bg: #0d7680;
  --theme-btn-primary-hover: #0a5e67;
  
  /* --- Calendar Colors Nature --- */
  --theme-calendar-day-empty-bg: rgba(240, 249, 249, 0.4);
  --theme-calendar-day-empty-border: #b3e5e6;
  --theme-calendar-day-filled-bg: rgba(217, 242, 242, 0.6);
  --theme-calendar-day-filled-border: #7dd4d6;
  --theme-calendar-day-today-bg: #c6d449;
  --theme-calendar-hours-text: #0d7680;
  --theme-calendar-persons-text: #5a8fa8;
  
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f0f9f9;
  --theme-bg-accent: rgba(217, 242, 242, 0.3);
  
  --theme-menu-bg: #ffffff;
  --theme-menu-border: #e5e7eb;
  --theme-menu-item-text: #4b5563;
  --theme-menu-item-hover-bg: #0d7680;
  --theme-menu-item-hover-text: #ffffff;
  --theme-menu-item-active-bg: #5a8fa8;
  --theme-menu-item-active-text: #ffffff;
  --theme-menu-user-bg: #f0f9f9;
  --theme-menu-user-avatar-from: #c6d449;
  --theme-menu-user-avatar-to: #87a03c;

  /* --- Planning 7-30 Nature --- */
  --theme-planning-surface-bg: var(--theme-features-card-bg);
  --theme-planning-surface-border: var(--theme-menu-border);
  --theme-planning-surface-text: var(--theme-text-primary);
  --theme-planning-surface-muted: var(--theme-text-secondary);
  --theme-planning-surface-button-bg: var(--theme-features-card-bg);
  --theme-planning-surface-button-border: var(--theme-menu-border);
  --theme-planning-surface-button-text: var(--theme-text-primary);
  --theme-planning-surface-button-hover-bg: var(--theme-bg-secondary);
  --theme-planning-person-menu-bg: #ffffff;
  --theme-planning-person-menu-text: var(--theme-text-primary);
  --theme-planning-vacation-text: var(--theme-text-primary);
  --theme-planning-day-badge-bg: transparent;
  --theme-planning-day-badge-border: var(--theme-menu-border);
  --theme-planning-day-badge-text: var(--theme-text-primary);
  
  /* --- Landing Page Nature --- */
  --theme-hero-bg-from: #f0f9f9;
  --theme-hero-bg-to: #d9f2f2;
  --theme-hero-title: #0d7680;
  --theme-hero-title-accent: #5a8fa8;
  --theme-hero-subtitle: #374151;
  --theme-hero-badge-bg: rgba(255, 255, 255, 0.8);
  --theme-hero-badge-border: rgba(255, 255, 255, 0.5);
  --theme-hero-badge-text: #0d7680;
  --theme-cta-secondary-bg: transparent;
  --theme-cta-secondary-border: #0d7680;
  --theme-cta-secondary-text: #0d7680;
  --theme-cta-secondary-bg-hover: rgba(255, 255, 255, 0);
  --theme-cta-secondary-border-hover: #0d7680;
  --theme-cta-secondary-text-hover: #0d7680;
  --theme-features-bg: #f0f9f9;
  --theme-features-card-bg: #ffffff;
  
  /* --- Section Blog Nature --- */
  --theme-blog-bg: #f0f9f9;
  --theme-blog-card-bg: #ffffff;
  --theme-blog-title: #0d7680;
  --theme-blog-subtitle: #4b5563;
  
  /* --- Section Tarif Nature --- */
  --theme-tarif-bg: #f0f9f9;
  --theme-tarif-card-bg: #ffffff;
  --theme-tarif-title: #0d7680;
  --theme-tarif-subtitle: #4b5563;
  
  /* --- Section Contact Nature --- */
  --theme-contact-bg: #f0f9f9;
  --theme-contact-card-bg: #ffffff;
  --theme-contact-title: #0d7680;
  --theme-contact-subtitle: #4b5563;
  
  /* --- Footer Nature --- */
  --theme-footer-wrapper-bg: #f0f9f9;
  --theme-footer-bg: #073e44;
  --theme-footer-title: #ffffff;
  --theme-footer-text: #d9f2f2;
  --theme-footer-link: #d9f2f2;
  --theme-footer-link-hover: #c6d449;
  --theme-footer-separator: #0a5e67;
  --theme-footer-social-bg: #0a5e67;
  --theme-footer-social-hover: #c6d449;
}

/* 🌙 Dark Mode - Ajustements pour Nature */
html.dark[data-theme="nature"] {
  --theme-header-bg: #0a2326;
  --theme-header-border: rgba(13, 118, 128, 0.2);
  --theme-header-logo-text: #4ab8bb;
  --theme-header-company-from: #7dd4d6;
  --theme-header-company-to: #c6d449;
    /* --- Boutons CTA Nature Dark --- */
  --theme-cta-bg: #c6d449;
  --theme-cta-bg-hover: #b3c03d;
  --theme-cta-text: #073e44;
  --theme-cta-shadow: rgba(198, 212, 73, 0.5);
    /* --- Boutons CTA Nature Dark --- */
  --theme-cta-bg: #c6d449;
  --theme-cta-bg-hover: #b3c03d;
  --theme-cta-text: #073e44;
  --theme-cta-shadow: rgba(198, 212, 73, 0.5);
  
  /* --- Page Banners Nature Dark --- */
  --theme-header-bg-gradient: linear-gradient(to bottom right, rgba(7, 62, 68, 0.5) 0%, rgba(8, 75, 82, 0.6) 50%, rgba(7, 62, 68, 0.5) 100%);
  --theme-header-overlay-gradient: linear-gradient(to bottom right, rgba(45, 157, 160, 0.15) 0%, rgba(135, 160, 60, 0.1) 50%, transparent 100%);
  --theme-header-icon-bg: rgba(135, 160, 60, 0.2);
  --theme-header-icon-color: #c6d449;
  
  --theme-text-primary: #f9fafb;
  --theme-text-secondary: #d1d5db;
  --theme-link-hover: #4ab8bb;
  
  --theme-banner-bg-from: #073e44;
  --theme-banner-bg-to: #084b52;
  --theme-banner-icon-bg: rgba(135, 160, 60, 0.1);
  --theme-banner-icon-color: #c6d449;
  --theme-banner-glow: rgba(135, 160, 60, 0.1);
  
  /* --- Calendar Colors Nature Dark --- */
  --theme-calendar-day-empty-bg: rgba(7, 62, 68, 0.2);
  --theme-calendar-day-empty-border: #073e44;
  --theme-calendar-day-filled-bg: rgba(7, 62, 68, 0.4);
  --theme-calendar-day-filled-border: #0a5e67;
  --theme-calendar-day-today-bg: #87a03c;
  --theme-calendar-hours-text: #c6d449;
  --theme-calendar-persons-text: #7dd4d6;
  
  --theme-bg-primary: #0a1a1c;
  --theme-bg-secondary: #0f2528;
  --theme-bg-accent: rgba(7, 62, 68, 0.2);
  
  --theme-menu-bg: #0f2528;
  --theme-menu-border: #1a3538;
  --theme-menu-item-text: #d1d5db;
  --theme-menu-item-hover-bg: #87a03c;
  --theme-menu-item-hover-text: #ffffff;
  --theme-menu-item-active-bg: #6f8832;
  --theme-menu-item-active-text: #ffffff;
  --theme-menu-user-bg: #0a1515;
  --theme-menu-user-avatar-from: #c6d449;
  --theme-menu-user-avatar-to: #87a03c;

  /* --- Planning 7-30 Nature Dark --- */
  --theme-planning-surface-bg: var(--theme-features-card-bg);
  --theme-planning-surface-border: var(--theme-menu-border);
  --theme-planning-surface-text: var(--theme-text-primary);
  --theme-planning-surface-muted: var(--theme-text-secondary);
  --theme-planning-surface-button-bg: var(--theme-features-card-bg);
  --theme-planning-surface-button-border: var(--theme-menu-border);
  --theme-planning-surface-button-text: var(--theme-text-primary);
  --theme-planning-surface-button-hover-bg: var(--theme-bg-secondary);
  --theme-planning-person-menu-bg: #0a1515;
  --theme-planning-person-menu-text: var(--theme-text-primary);
  --theme-planning-vacation-text: var(--theme-text-primary);
  --theme-planning-day-badge-bg: transparent;
  --theme-planning-day-badge-border: var(--theme-menu-border);
  --theme-planning-day-badge-text: var(--theme-text-primary);
  
  /* --- Landing Page Nature Dark --- */
  --theme-hero-bg-from: rgba(7, 62, 68, 0.3);
  --theme-hero-bg-to: rgba(8, 75, 82, 0.4);
  --theme-hero-title: #f9fafb;
  --theme-hero-title-accent: #c6d449;
  --theme-hero-subtitle: #d1d5db;
  --theme-hero-badge-bg: rgba(135, 160, 60, 0.15);
  --theme-hero-badge-border: rgba(135, 160, 60, 0.2);
  --theme-hero-badge-text: #c6d449;
  --theme-cta-secondary-bg: transparent;
  --theme-cta-secondary-border: #7dd4d6;
  --theme-cta-secondary-text: #7dd4d6;  --theme-cta-secondary-bg-hover: rgba(255, 255, 255, 0);
  --theme-cta-secondary-border-hover: #7dd4d6;
  --theme-cta-secondary-text-hover: #7dd4d6;  --theme-features-bg: #0a1a1c;
  --theme-features-card-bg: #0f2528;
  
  /* --- Section Blog Nature Dark --- */
  --theme-blog-bg: #0a1a1c;
  --theme-blog-card-bg: #0f2528;
  --theme-blog-title: #f9fafb;
  --theme-blog-subtitle: #d1d5db;
  
  /* --- Section Tarif Nature Dark --- */
  --theme-tarif-bg: #0a1a1c;
  --theme-tarif-card-bg: #0f2528;
  --theme-tarif-title: #f9fafb;
  --theme-tarif-subtitle: #d1d5db;
  
  /* --- Section Contact Nature Dark --- */
  --theme-contact-bg: #0a1a1c;
  --theme-contact-card-bg: #0f2528;
  --theme-contact-title: #f9fafb;
  --theme-contact-subtitle: #d1d5db;
  
  /* --- Footer Nature Dark --- */
  --theme-footer-wrapper-bg: #0a1a1c;
  --theme-footer-bg: #073e44;
  --theme-footer-title: #f9fafb;
  --theme-footer-text: #b3e5e6;
  --theme-footer-link: #b3e5e6;
  --theme-footer-link-hover: #c6d449;
  --theme-footer-separator: #084b52;
  --theme-footer-social-bg: #084b52;
  --theme-footer-social-hover: #87a03c;
}

/* ==========================================
   CLASSES POUR LES BANNIÈRES DE PAGE
   ========================================== */

.planesto-page-banner {
  background: linear-gradient(to top, var(--theme-banner-bg-from), var(--theme-banner-bg-to));
  border-bottom: 2px solid var(--theme-banner-border);
  position: relative;
  overflow: hidden;
}

.planesto-page-banner .icon-container {
  background: var(--theme-header-icon-bg);
  color: var(--theme-header-icon-color);
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.planesto-page-banner h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--theme-banner-title, #374151);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.planesto-page-banner p {
  color: var(--theme-banner-subtitle, #6b7280);
  position: relative;
  z-index: 1;
}

/* ==========================================
   CLASSES POUR LES SECTIONS DE LA LANDING PAGE
   ========================================== */

/* Section Blog */
.landing-blog-section {
  background: var(--theme-blog-bg);
  padding: 5rem 0;
}

.landing-blog-card {
  background: var(--theme-blog-card-bg);
  transition: all 0.3s ease;
}

.landing-blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Section Tarif */
.landing-tarif-section {
  background: var(--theme-tarif-bg);
  padding: 5rem 0;
}

.landing-tarif-card {
  background: var(--theme-tarif-card-bg);
  transition: all 0.3s ease;
}

.landing-tarif-plan-card {
  background: var(--theme-tarif-card-bg);
  transition: all 0.3s ease;
}

.landing-tarif-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.landing-tarif-plan-card-popular {
  background: var(--theme-tarif-card-bg);
  transition: all 0.3s ease;
}

/* Section Contact */
.landing-contact-section {
  background: var(--theme-contact-bg);
  padding: 5rem 0;
}

.landing-contact-card {
  background: transparent;
  transition: all 0.3s ease;
}

.landing-contact-info-card {
  background: var(--theme-contact-card-bg);
  transition: all 0.3s ease;
}

.landing-contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Section Footer */
.landing-footer-wrapper {
  background: var(--theme-footer-wrapper-bg);
  padding: 2rem 0;
}

.landing-footer {
  background: var(--theme-footer-bg);
  transition: all 0.3s ease;
}

.landing-footer-link:hover {
  color: var(--theme-footer-link-hover) !important;
}

.landing-footer-social:hover {
  background: var(--theme-footer-social-hover) !important;
}

/* ==========================================
   UTILISATION
   ========================================== 
   
   Pour changer de thème, ajouter un attribut sur <html> :
   
   // Thème par défaut (vert émeraude)
   <html>
   
   // Thème Nature Fraîche
   <html data-theme="nature">
   
   ========================================== */