/* =========================================================================
   CENTRALIZED STYLES FOR COMMISSION ROMANDE DE CHIMIE WEBSITE
   =========================================================================
   This file contains all CSS styles previously scattered in HTML files.
   It includes:
   - CSS Custom Properties (Variables)
   - Theme (Light & Dark Mode)
   - Typography
   - Animations & Keyframes
   - Component Styles
   - Layout & Utilities
   ======================================================================= */

/* =========================================================================
   CSS CUSTOM PROPERTIES / ROOT VARIABLES
   ======================================================================= */
:root {
  --primary-color: #1193d4;
  --secondary-color: #89c2ff;
  --background-color: #d9f0ff;
  --text-primary: #1a202c;
  --text-secondary: #394251;
  --accent-color: #368bd5;
  --newsletter-gradient-to: #ffffff;
}

/* Dark Theme */
[data-theme="dark"] {
  --primary-color: #3db8f5;
  --secondary-color: #032582;
  --background-color: #101624;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --accent-color: #007bef;
  --newsletter-gradient-to: #1a202c;
}

/* =========================================================================
   PREMIUM APPLE-LIKE GLASS MORPHISM STYLES (iOS 16+)
   ======================================================================= */

/* Global button reset and base glass styles */
button:not(.theme-toggle),
[type="submit"]:not(.theme-toggle),
.btn,
.btn-glass,
.btn-glass-solid,
.btn-glass-minimal,
a.btn-glass,
a.btn-glass-solid,
a.btn-glass-minimal {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 16px;
  font-weight: 600;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ===== Premium Glass Button Base ===== */
.btn-glass,
button[type="submit"]:not(.theme-toggle),
[type="submit"]:not(.theme-toggle) {
  /* Premium glassmorphism effect - iOS 16+ style */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.16) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  
  /* Enhanced border with light refraction effect */
  border: 1.5px solid;
  border-color: rgba(255, 255, 255, 0.50);
  
  /* Advanced shadow for depth and light refraction */
  box-shadow: 
    /* Outer glow */
    0 8px 32px rgba(31, 162, 228, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    /* Light refraction at top */
    inset 0 1px 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 8px rgba(0, 0, 0, 0.08),
    /* Outer shadow for elevation */
    0 20px 25px -5px rgba(0, 0, 0, 0.12);
  
  color: var(--primary-color);
  font-size: 0.95rem;
  padding: 0.85rem 1.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Shine/light sweep effect on hover */
.btn-glass::before,
button[type="submit"]:not(.theme-toggle)::before,
[type="submit"]:not(.theme-toggle)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  pointer-events: none;
}

/* Border light refraction overlay */
.btn-glass::after,
button[type="submit"]:not(.theme-toggle)::after,
[type="submit"]:not(.theme-toggle)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.btn-glass:hover,
button[type="submit"]:not(.theme-toggle):hover,
[type="submit"]:not(.theme-toggle):hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.24) 100%
  );
  border-color: rgba(255, 255, 255, 0.70);
  box-shadow: 
    /* Enhanced outer glow */
    0 16px 48px rgba(31, 162, 228, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    /* Enhanced light refraction */
    inset 0 1px 3px rgba(255, 255, 255, 0.40),
    inset 0 -2px 12px rgba(0, 0, 0, 0.10),
    /* Elevated shadow */
    0 25px 40px -10px rgba(0, 0, 0, 0.18);
  transform: translateY(-3px);
}

.btn-glass:hover::before,
button[type="submit"]:not(.theme-toggle):hover::before,
[type="submit"]:not(.theme-toggle):hover::before {
  left: 100%;
}

.btn-glass:active,
button[type="submit"]:not(.theme-toggle):active,
[type="submit"]:not(.theme-toggle):active {
  transform: translateY(-1px);
  box-shadow: 
    0 8px 16px rgba(31, 162, 228, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 4px rgba(0, 0, 0, 0.05);
}

/* ===== Dark Mode Glass Buttons ===== */
[data-theme="dark"] .btn-glass,
[data-theme="dark"] button[type="submit"]:not(.theme-toggle),
[data-theme="dark"] [type="submit"]:not(.theme-toggle) {
  background: linear-gradient(
    135deg,
    rgba(61, 184, 245, 0.15) 0%,
    rgba(61, 184, 245, 0.08) 100%
  );
  border-color: rgba(61, 184, 245, 0.4);
  color: #3db8f5;
  box-shadow: 
    0 8px 32px rgba(61, 184, 245, 0.2),
    0 0 0 1px rgba(61, 184, 245, 0.25) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2),
    0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-glass:hover,
[data-theme="dark"] button[type="submit"]:not(.theme-toggle):hover,
[data-theme="dark"] [type="submit"]:not(.theme-toggle):hover {
  background: linear-gradient(
    135deg,
    rgba(61, 184, 245, 0.22) 0%,
    rgba(61, 184, 245, 0.15) 100%
  );
  border-color: rgba(61, 184, 245, 0.6);
  box-shadow: 
    0 16px 48px rgba(61, 184, 245, 0.3),
    0 0 0 1px rgba(61, 184, 245, 0.35) inset,
    inset 0 1px 3px rgba(255, 255, 255, 0.15),
    inset 0 -2px 12px rgba(0, 0, 0, 0.25),
    0 25px 40px -10px rgba(0, 0, 0, 0.4);
}

/* ===== Premium Solid Glass Button (Primary CTA) ===== */
.btn-glass-solid {
  background: linear-gradient(
    135deg,
    rgba(17, 147, 212, 1) 0%,
    rgba(17, 147, 212, 0.92) 50%,
    rgba(137, 194, 255, 0.92) 100%
  );
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: white;
  font-weight: 700;
  padding: 0.95rem 2.25rem;
  box-shadow: 
    0 12px 48px rgba(17, 147, 212, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    inset 0 1px 3px rgba(255, 255, 255, 0.50),
    inset 0 -3px 12px rgba(0, 0, 0, 0.12);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.btn-glass-solid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.btn-glass-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

.btn-glass-solid:hover {
  background: linear-gradient(
    135deg,
    rgba(17, 147, 212, 1) 0%,
    rgba(17, 147, 212, 0.95) 50%,
    rgba(137, 194, 255, 0.96) 100%
  );
  border-color: rgba(255, 255, 255, 0.70);
  box-shadow: 
    0 24px 64px rgba(17, 147, 212, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    inset 0 1px 4px rgba(255, 255, 255, 0.60),
    inset 0 -3px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-4px);
}

.btn-glass-solid:hover::before {
  left: 100%;
}

.btn-glass-solid:active {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 32px rgba(17, 147, 212, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Dark mode solid glass buttons */
[data-theme="dark"] .btn-glass-solid {
  background: linear-gradient(
    135deg,
    rgba(61, 184, 245, 1) 0%,
    rgba(61, 184, 245, 0.95) 50%,
    rgba(3, 37, 130, 0.95) 100%
  );
  border-color: rgba(61, 184, 245, 0.6);
  box-shadow: 
    0 12px 48px rgba(61, 184, 245, 0.35),
    0 0 0 1px rgba(61, 184, 245, 0.35) inset,
    inset 0 1px 3px rgba(255, 255, 255, 0.25),
    inset 0 -3px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .btn-glass-solid:hover {
  background: linear-gradient(
    135deg,
    rgba(61, 184, 245, 1) 0%,
    rgba(61, 184, 245, 0.98) 50%,
    rgba(3, 37, 130, 1) 100%
  );
  border-color: rgba(61, 184, 245, 0.75);
  box-shadow: 
    0 24px 64px rgba(61, 184, 245, 0.4),
    0 0 0 1px rgba(61, 184, 245, 0.45) inset,
    inset 0 1px 4px rgba(255, 255, 255, 0.2),
    inset 0 -3px 16px rgba(0, 0, 0, 0.3);
}

/* ===== Minimal Glass Button ===== */
.btn-glass-minimal {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.10) 100%
  );
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--primary-color);
  padding: 0.65rem 1.4rem;
  font-size: 0.875rem;
  box-shadow: 
    0 4px 16px rgba(31, 162, 228, 0.12),
    0 0 0 0.5px rgba(255, 255, 255, 0.20) inset,
    inset 0 0.5px 1px rgba(255, 255, 255, 0.25);
}

.btn-glass-minimal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-glass-minimal:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.16) 100%
  );
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: 
    0 8px 24px rgba(31, 162, 228, 0.16),
    0 0 0 0.5px rgba(255, 255, 255, 0.32) inset,
    inset 0 0.5px 1.5px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.btn-glass-minimal:hover::before {
  left: 100%;
}

/* Dark mode minimal buttons */
[data-theme="dark"] .btn-glass-minimal {
  background: linear-gradient(
    135deg,
    rgba(61, 184, 245, 0.12) 0%,
    rgba(61, 184, 245, 0.06) 100%
  );
  border-color: rgba(61, 184, 245, 0.32);
  color: #3db8f5;
  box-shadow: 
    0 4px 16px rgba(61, 184, 245, 0.1),
    0 0 0 0.5px rgba(61, 184, 245, 0.2) inset;
}

[data-theme="dark"] .btn-glass-minimal:hover {
  background: linear-gradient(
    135deg,
    rgba(61, 184, 245, 0.18) 0%,
    rgba(61, 184, 245, 0.1) 100%
  );
  border-color: rgba(61, 184, 245, 0.5);
  box-shadow: 
    0 8px 24px rgba(61, 184, 245, 0.15),
    0 0 0 0.5px rgba(61, 184, 245, 0.35) inset;
}

/* ===== Universal focus state for accessibility ===== */
button:not(.theme-toggle):focus-visible,
[type="submit"]:not(.theme-toggle):focus-visible,
.btn-glass:focus-visible,
.btn-glass-solid:focus-visible,
.btn-glass-minimal:focus-visible,
a.btn-glass:focus-visible,
a.btn-glass-solid:focus-visible,
a.btn-glass-minimal:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* =========================================================================
   TYPOGRAPHY & BASE STYLES
   ======================================================================= */
body {
  font-family: 'Lora', serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

/* =========================================================================
   DARK MODE OVERRIDES FOR COMMON ELEMENTS
   ======================================================================= */
[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: #334155 !important;
}

[data-theme="dark"] .border {
  border-color: #475569 !important;
}

[data-theme="dark"] .border-2 {
  border-color: #475569 !important;
}

[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode - specific overrides */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .advice-box {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .advice-box .advice-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .advice-box .advice-list {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .advice-box .icon-circle {
  background-color: rgba(4, 37, 54, 0.18) !important;
}

[data-theme="dark"] .advice-box svg {
  color: var(--text-secondary) !important;
  opacity: 1;
}

/* =========================================================================
   THEME TOGGLE BUTTON
   ======================================================================= */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--primary-color);
  color: var(--text-primary);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.theme-toggle svg {
  display: block;
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(20deg);
}

/* Neon halo effects on theme toggle button */
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-color);
  border-right-color: var(--primary-color);
  opacity: 0.8;
  animation: neon-spin 4s linear infinite;
  pointer-events: none;
  box-shadow: 0 0 10px var(--primary-color);
  filter: blur(2px);
}

.theme-toggle::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--secondary-color);
  border-left-color: var(--secondary-color);
  opacity: 0.5;
  animation: neon-spin-reverse 6s linear infinite;
  pointer-events: none;
  box-shadow: 0 0 8px var(--secondary-color);
  filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle::before, .theme-toggle::after {
    animation: none !important;
    opacity: 0.3 !important;
  }
}

/* =========================================================================
   NAVIGATION LINKS
   ======================================================================= */
.nav-link:hover {
  color: var(--primary-color);
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: none;
  padding-bottom: 0;
}

/* Custom breakpoint: 1235px for navigation */
@media (max-width: 1235px) {
  .nav-menu-desktop {
    display: none !important;
  }
  
  .nav-menu-mobile {
    display: flex !important;
  }
}

@media (min-width: 1236px) {
  .nav-menu-desktop {
    display: flex !important;
  }
  
  .nav-menu-mobile {
    display: none !important;
  }
}

/* Menu déroulant mobile */
[data-nav-mobile] {
  display: none !important;
}

[data-nav-mobile].show {
  display: block !important;
}

/* =========================================================================
   ANIMATIONS & KEYFRAMES
   ======================================================================= */
@keyframes float-slow {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes float-molecule {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  50% { transform: translateY(-3px) rotate(-1.5deg); }
  75% { transform: translateY(-8px) rotate(2.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes float-cycle {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  30% { transform: translateY(-6px) rotate(3deg) scale(1.05); }
  60% { transform: translateY(-10px) rotate(-2deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes speed-lines {
  0% { transform: translateY(0) scaleY(1); opacity: 0.9; }
  25% { transform: translateY(-5px) scaleY(1.3); opacity: 0.4; }
  50% { transform: translateY(-10px) scaleY(0.8); opacity: 0.9; }
  75% { transform: translateY(-3px) scaleY(1.2); opacity: 0.5; }
  100% { transform: translateY(0) scaleY(1); opacity: 0.9; }
}

@keyframes neon-spin {
  0% { transform: rotate(0deg); opacity: 0.7; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.7; }
}

@keyframes neon-spin-reverse {
  0% { transform: rotate(0deg); opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { transform: rotate(-360deg); opacity: 0.5; }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -5px, 0);
  }
  70% {
    transform: translate3d(0, -3px, 0);
  }
  90% {
    transform: translate3d(0, -1px, 0);
  }
}

/* =========================================================================
   DECORATIVE ELEMENTS & ANIMATIONS
   ======================================================================= */
.chem-decor {
  position: absolute;
  right: -60px;
  top: -10px;
  opacity: 0.5;
  animation: float-slow 8s ease-in-out infinite;
}

.molecule-decor {
  animation: float-molecule 6s ease-in-out infinite;
}

.cycle-decor {
  animation: float-cycle 5s ease-in-out infinite;
}

.cycle-decor-delayed {
  animation: float-cycle 7s ease-in-out infinite;
  animation-delay: -2.5s;
}

.speed-lines {
  animation: speed-lines 1.5s ease-in-out infinite;
}

/* SVG color in light theme */
:root .molecule-decor,
:root .cycle-decor {
  opacity: 0.5 !important;
  color: #0ea5e9 !important;
}

/* SVG color in dark theme */
[data-theme="dark"] .molecule-decor,
[data-theme="dark"] .cycle-decor {
  opacity: 0.5 !important;
  color: var(--primary-color) !important;
}

/* =========================================================================
   BACKGROUND PATTERNS
   ======================================================================= */
.hero-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(17, 147, 212, 0.08) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  background-attachment: fixed;
  pointer-events: none;
}

/* =========================================================================
   CARD & HOVER EFFECTS
   ======================================================================= */
.card-hover {
  transition: all 0.25s ease;
  border-color: transparent;
}

.card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: 0 10px 25px rgba(17, 147, 212, 0.12);
}

.event-item {
  transition: all 0.2s ease;
}

.event-item:hover {
  background-color: var(--secondary-color);
}

.news-item {
  transition: all 0.2s ease;
}

.btn-blue {
  transition: all 0.2s ease;
}

.btn-blue:hover {
  filter: brightness(0.95);
  box-shadow: 0 8px 20px rgba(17, 147, 212, 0.25);
}

/* =========================================================================
   CALENDAR STYLES
   ======================================================================= */
.calendar-day {
  transition: all 0.2s ease;
  cursor: pointer;
}

.calendar-day:hover {
  background-color: var(--secondary-color);
}

.calendar-day.selected {
  background-color: var(--primary-color);
  color: white;
}

/* Today marker - distinct color (red) */
.calendar-day.today {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 2px solid #ef4444 !important;
  color: #7f1d1d !important;
}

[data-theme="dark"] .calendar-day.today {
  background-color: rgba(248, 113, 113, 0.2) !important;
  border-color: #f87171 !important;
  color: #fee2e2 !important;
}

.calendar-day.has-event {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  color: #92400e;
}

/* When today also has an event */
.calendar-day.has-event.today {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
  background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.04), rgba(239, 68, 68, 0.03));
  position: relative;
}

.calendar-day.has-event.today::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid white;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.06);
}

[data-theme="dark"] .calendar-day.has-event.today {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
  background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.02), rgba(248, 113, 113, 0.06));
}

[data-theme="dark"] .calendar-day.has-event.today::after {
  border: 2px solid #0b1220;
}

[data-theme="dark"] .calendar-day.has-event {
  background-color: #4450c2ac;
  border-color: #3b82f6;
  color: #dbeafe;
}

.calendar-day.has-event.selected {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

/* Calendar legend */
.calendar-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.calendar-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.calendar-legend .swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
  border: 2px solid transparent;
}

.calendar-legend .swatch.today {
  background-color: rgba(239, 68, 68, 0.08);
  border-color: #ef4444;
}

.calendar-legend .swatch.event {
  background-color: #fef3c7;
  border-color: #f59e0b;
}

.calendar-legend .swatch.selected {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-theme="dark"] .calendar-legend .swatch.today {
  background-color: rgba(248, 113, 113, 0.12);
  border-color: #f87171;
}

[data-theme="dark"] .calendar-legend .swatch.event {
  background-color: rgba(68, 80, 194, 0.18);
  border-color: #3b82f6;
}

[data-theme="dark"] .calendar-legend .swatch.selected {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

/* Event text wrapping */
.event-item .text-sm {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.event-item .text-sm a {
  display: inline-block;
  overflow-wrap: anywhere;
  word-break: break-all;
  color: inherit;
}

/* =========================================================================
   FORM STYLES
   ======================================================================= */
.form-input {
  background-color: var(--background-color);
  border: 2px solid #e2e8f0;
  color: var(--text-primary);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(17, 147, 212, 0.1);
  outline: none;
}

[data-theme="dark"] .form-input {
  background-color: #334155;
  border-color: #475569;
  color: var(--text-primary);
}

[data-theme="dark"] .form-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 184, 245, 0.1);
}

.form-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.success-message {
  animation: bounce 1s;
}

/* =========================================================================
   FOCUS ACCESSIBILITY
   ======================================================================= */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================================
   SHARE BUTTONS
   ======================================================================= */
.share-btn {
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.share-btn:hover {
  background-color: var(--secondary-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.share-toast {
  opacity: 0.5;
  transform: translateY(10px);
}

/* =========================================================================
   NEWS PAGE STYLES
   ======================================================================= */
.news-header-gradient {
  background: linear-gradient(135deg, var(--background-color) 0%, rgba(17, 147, 212, 0.25) 100%);
}

[data-theme="dark"] .news-header-gradient {
  background: linear-gradient(135deg, var(--background-color) 0%, rgba(61, 184, 245, 0.2) 100%);
}

.news-header-gradient h2,
.news-header-gradient p {
  position: relative;
  z-index: 10;
}

.month-section {
  scroll-margin-top: 100px;
}

/* =========================================================================
   GRADIENT BOX (QUI SOMMES NOUS PAGE)
   ======================================================================= */
.gradient-box {
  background: linear-gradient(to right, var(--secondary-color), white);
}

[data-theme="dark"] .gradient-box {
  background: linear-gradient(to right, var(--secondary-color), #1a202c) !important;
}

[data-theme="dark"] .gradient-box p {
  color: var(--text-primary) !important;
}

/* Canton cards with hover effect */
.canton-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.canton-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(17, 147, 212, 0.15);
}

[data-theme="dark"] .canton-card:hover {
  box-shadow: 0 12px 24px rgba(61, 184, 245, 0.15);
}

/* Action cards with hover effect */
.action-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.action-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(17, 147, 212, 0.15);
}

[data-theme="dark"] .action-card:hover {
  box-shadow: 0 12px 24px rgba(61, 184, 245, 0.15);
}

/* =========================================================================
   ICON ANIMATIONS (NEO EFFECT)
   ======================================================================= */
.icon-container {
  position: relative;
}

.icon-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-color);
  border-right-color: var(--primary-color);
  opacity: 0.7;
  animation: neon-spin 4s linear infinite;
  pointer-events: none;
  box-shadow: 
    0 0 10px var(--primary-color),
    inset 0 0 10px rgba(31, 162, 228, 0.3);
  filter: blur(1px);
}

.icon-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--secondary-color);
  border-left-color: var(--secondary-color);
  opacity: 0.5;
  animation: neon-spin-reverse 6s linear infinite;
  pointer-events: none;
  box-shadow: 
    0 0 8px var(--secondary-color),
    inset 0 0 8px rgba(137, 194, 255, 0.2);
  filter: blur(1px);
}

/* Variations for different boxes */
.icon-container.orbit-reverse::before {
  animation: neon-spin-reverse 5s linear infinite;
  border-top-color: var(--accent-color);
  border-right-color: var(--accent-color);
  box-shadow: 
    0 0 12px var(--accent-color),
    inset 0 0 12px rgba(54, 139, 213, 0.3);
}

.icon-container.orbit-reverse::after {
  animation: neon-spin 7s linear infinite;
}

.icon-container.orbit-fast::before {
  animation: neon-spin 3s linear infinite;
  border-width: 4px;
  box-shadow: 
    0 0 15px var(--primary-color),
    inset 0 0 15px rgba(31, 162, 228, 0.4);
}

.icon-container.orbit-fast::after {
  animation: neon-spin-reverse 4s linear infinite;
  border-width: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .icon-container::before,
  .icon-container::after {
    animation: none !important;
    opacity: 0.3 !important;
  }
}

/* =========================================================================
   ACTION CARDS (QUI SOMMES NOUS PAGE)
   ======================================================================= */
.action-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.action-card:hover {
  box-shadow: 0 4px 8px rgba(31, 162, 228, 0.2);
}

.action-card:hover .icon-container::before {
  animation: neon-spin 2s linear infinite !important;
  opacity: 1 !important;
  border-width: 4px;
}

.action-card:hover .icon-container::after {
  animation: neon-spin-reverse 3s linear infinite !important;
  opacity: 0.9 !important;
  border-width: 3px;
}

.action-card .icon-container {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-card h4 {
  transition: transform 0.3s ease;
}

.action-card:hover h4 {
  transform: scale(1.05);
}

.action-card p {
  transition: color 0.3s ease;
}

.action-card:hover p {
  color: var(--text-primary) !important;
}

/* =========================================================================
   QUESTION MARK ANIMATION (QUI SOMMES NOUS PAGE)
   ======================================================================= */
.question-figure-wrapper {
  position: absolute;
  top: 50%;
  right: clamp(2rem, 8vw, 5rem);
  transform: translateY(-50%);
  width: min(22vw, 200px);
  height: min(40vw, 260px);
  pointer-events: auto;
}

.question-orbit {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transform: translateY(0) scaleY(1) scaleX(-1);
  color: var(--primary-color);
  filter: drop-shadow(0 12px 24px rgba(17, 147, 212, 0));
  transition: transform 0.6s ease, filter 0.6s ease;
  cursor: pointer;
  outline: none;
}

.question-orbit svg {
  width: 100%;
  height: 100%;
}

.question-stem {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.question-dot {
  fill: currentColor;
}

.question-orbit:focus-visible {
  box-shadow: 0 0 0 4px rgba(17, 147, 212, 0);
  border-radius: 999px;
}

.question-orbit.is-spinning {
  animation: question-spin 1s ease-in-out;
}

@keyframes question-spin {
  0% {
    transform: translateY(0) scaleY(1) scaleX(-1) rotate(0deg);
    filter: drop-shadow(0 12px 24px rgba(17, 147, 212, 0));
  }
  50% {
    filter: drop-shadow(0 12px 24px rgba(17, 147, 212, 0));
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(-1) rotate(360deg);
    filter: drop-shadow(0 12px 24px rgba(17, 147, 212, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-orbit,
  .question-stem,
  .question-dot {
    animation: none !important;
    opacity: 0.85 !important;
  }

  .question-orbit {
    transition: transform 0.3s ease;
  }

  .question-orbit.is-reduced-tap {
    transform: translateY(0) scaleY(1) scaleX(-1) scale(0.95);
  }
}

/* =========================================================================
   PRICING BOX (TABLEAU PERIODIQUE PAGE)
   ======================================================================= */
.pricing-box {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}

[data-theme="dark"] .pricing-box {
  background-color: #374151 !important;
  color: #e5e7eb !important;
}

.pricing-box p,
.pricing-box li {
  color: inherit !important;
}

/* =========================================================================
   COLOR GRADIENTS (LIENS UTILES PAGE)
   ======================================================================= */
/* Light Mode Gradients */
.bg-gradient-to-r.from-blue-50 {
  background: linear-gradient(to right, #f8fafc, #dbeafe, #3b82f6) !important;
}

.bg-gradient-to-r.from-green-50 {
  background: linear-gradient(to right, #f8fafc, #d1fae5, #22c55e) !important;
}

.bg-gradient-to-r.from-purple-50 {
  background: linear-gradient(to right, #f8fafc, #e9d5ff, #a855f7) !important;
}

.bg-gradient-to-r.from-orange-50 {
  background: linear-gradient(to right, #f8fafc, #fed7aa, #fb923c) !important;
}

.bg-gradient-to-r.from-red-50 {
  background: linear-gradient(to right, #f8fafc, #fecaca, #f87171) !important;
}

.bg-gradient-to-r.from-teal-50 {
  background: linear-gradient(to right, #f8fafc, #ccfbf1, #2dd4bf) !important;
}

.bg-gradient-to-r.from-indigo-50 {
  background: linear-gradient(to right, #f8fafc, #e0e7ff, #818cf8) !important;
}

.bg-gradient-to-r.from-gray-50 {
  background: linear-gradient(to right, #f8fafc, #e5e7eb, #9ca3af) !important;
}

.bg-gradient-to-r.from-cyan-50 {
  background: linear-gradient(to right, #f8fafc, #cffafe, #06b6d4) !important;
}

.bg-gradient-to-r.from-pink-50 {
  background: linear-gradient(to right, #f8fafc, #fce7f3, #ec4899) !important;
}

.bg-gradient-to-r.from-yellow-50 {
  background: linear-gradient(to right, #f8fafc, #fef3c7, #eab308) !important;
}

/* Dark Mode Gradients */
[data-theme="dark"] .bg-gradient-to-r.from-blue-50 {
  background: linear-gradient(to right, #0f172a, #1e3a8a, #3b82f6) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-green-50 {
  background: linear-gradient(to right, #0f172a, #166534, #22c55e) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-purple-50 {
  background: linear-gradient(to right, #0f172a, #581c87, #a855f7) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-orange-50 {
  background: linear-gradient(to right, #0f172a, #c2410c, #fb923c) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-red-50 {
  background: linear-gradient(to right, #0f172a, #b91c1c, #f87171) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-teal-50 {
  background: linear-gradient(to right, #0f172a, #0d9488, #2dd4bf) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-indigo-50 {
  background: linear-gradient(to right, #0f172a, #3730a3, #818cf8) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-gray-50 {
  background: linear-gradient(to right, #0f172a, #374151, #9ca3af) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-cyan-50 {
  background: linear-gradient(to right, #0f172a, #0e7490, #06b6d4) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-pink-50 {
  background: linear-gradient(to right, #0f172a, #be185d, #ec4899) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-yellow-50 {
  background: linear-gradient(to right, #0f172a, #a16207, #eab308) !important;
}

/* =========================================================================
   LINK CARDS - HOVER ANIMATION (LIENS UTILES PAGE)
   ======================================================================= */
.link-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.link-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="dark"] .link-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important;
}

/* =========================================================================
   CATEGORY HOVER EFFECTS (LIENS UTILES PAGE)
   ======================================================================= */
.cat-yellow:hover { border-color: #eab308 !important; }
.cat-blue:hover { border-color: #0983d4 !important; }
.cat-green:hover { border-color: #08d352 !important; }
.cat-purple:hover { border-color: #8e09cb !important; }
.cat-orange:hover { border-color: #ff996d !important; }
.cat-red:hover { border-color: #c90707 !important; }
.cat-teal:hover { border-color: #07cfb1 !important; }
.cat-indigo:hover { border-color: #9da7ff !important; }
.cat-gray:hover { border-color: #ffffff !important; }
.cat-pink:hover { border-color: #e40395 !important; }

/* =========================================================================
   SHARE BUTTONS (News page)
   ======================================================================= */
.share-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.12)) !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  border-radius: 10px !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

.share-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
  z-index: -1;
}

.share-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.20)) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  color: var(--primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 162, 228, 0.20) !important;
}

.share-btn:hover::before {
  left: 100%;
}

/* Dark mode share buttons */
[data-theme="dark"] .share-btn {
  background: linear-gradient(135deg, rgba(61, 184, 245, 0.12), rgba(61, 184, 245, 0.06)) !important;
  border-color: rgba(61, 184, 245, 0.3) !important;
  color: #3db8f5 !important;
}

[data-theme="dark"] .share-btn:hover {
  background: linear-gradient(135deg, rgba(61, 184, 245, 0.2), rgba(61, 184, 245, 0.12)) !important;
  border-color: rgba(61, 184, 245, 0.5) !important;
  box-shadow: 0 8px 24px rgba(61, 184, 245, 0.15) !important;
}