@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500&display=swap);
/* purgecss start ignore */

/* ===== CHILLAX FONT FAMILY - STATIC WEIGHTS ===== */

@font-face {
  font-family: 'Chillax';

  src: url(/build/fonts/Chillax-Extralight.278406f9.woff2) format('woff2');

  font-weight: 200;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Chillax';

  src: url(/build/fonts/Chillax-Light.af355b9b.woff2) format('woff2');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Chillax';

  src: url(/build/fonts/Chillax-Regular.ba523d3c.woff2) format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

/* Chillax Medium removed - using only 200-400 weights */

/* Removed Semibold (600) and Bold (700) - never used in project (only 200-500) */

/* ===== CSS VARIABLES ===== */

:root {
  /* Font Families */
  --font-primary: 'Chillax', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Chillax', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
  /* Chillax Weights - Only using 200-400 */
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 2;
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ===== GLOBAL RESET ===== */

* {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

/* ===== HEADINGS ===== */

h1, .h1, .title-glass {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 4rem) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tighter) !important;
  margin-bottom: 1.5rem;
}

h2, .h2 {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin: 2rem 0 1.25rem 0;
}

h3, .h3 {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin: 1.75rem 0 1rem 0;
}

h4, .h4 {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-normal) !important;
  margin: 1.5rem 0 0.75rem 0;
}

h5, .h5 {
  font-family: var(--font-primary) !important;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.75vw, 1.5rem) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-normal) !important;
  margin: 1.25rem 0 0.75rem 0;
}

h6, .h6 {
  font-family: var(--font-primary) !important;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase;
  margin: 1rem 0 0.5rem 0;
}

/* ===== BODY TEXT ===== */

p, .text-body {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 1.25rem;
}

.lead-text {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

.text-large {
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
  font-weight: 300;
  line-height: var(--leading-relaxed);
}

.text-small {
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  font-weight: 300;
  line-height: var(--leading-normal);
}

/* ===== EMPHASIS ===== */

strong, b, .font-bold {
  font-family: var(--font-primary) !important;
  font-weight: 400;
}

em, i, .font-italic {
  font-family: var(--font-primary) !important;
  font-style: italic;
  font-weight: 300;
}

/* ===== BUTTONS ===== */

button, .btn, .btn-glass,
.btn-primary, .btn-secondary,
a[class*="btn-"], div[class*="btn-"] {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: none !important;
}

button:hover, .btn:hover {
  font-weight: 400;
}

/* ===== NAVIGATION ===== */

nav, .nav, .nav-glass,
.navigation, .navbar {
  font-family: var(--font-primary) !important;
}

nav a, .nav a, .nav-link,
.navigation a, .navbar a {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  transition: font-weight 0.2s ease;
}

nav a:hover, .nav a:hover,
nav a.active, .nav a.active {
  font-weight: 300;
}

/* ===== FORMS ===== */

input, textarea, select,
.input-glass, .form-control, .form-input {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
}

label, .label, .form-label {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

::-moz-placeholder {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  opacity: 0.5;
}

::placeholder {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  opacity: 0.5;
}

/* ===== QUOTES ===== */

blockquote, .quote, .quote-glass {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

/* ===== UTILITY CLASSES ===== */

.font-chillax { font-family: var(--font-primary) !important;
}

.font-extra-light { font-weight: 200;
}

.font-light { font-weight: 300;
}

.font-regular { font-weight: 400;
}

.font-medium { font-weight: 400;
} /* Maps to regular - medium removed */

.tracking-tighter { letter-spacing: var(--tracking-tighter) !important;
}

.tracking-tight { letter-spacing: var(--tracking-tight) !important;
}

.tracking-normal { letter-spacing: var(--tracking-normal) !important;
}

.tracking-wide { letter-spacing: var(--tracking-wide) !important;
}

.tracking-wider { letter-spacing: var(--tracking-wider) !important;
}

.tracking-widest { letter-spacing: var(--tracking-widest) !important;
}

.leading-none { line-height: var(--leading-none) !important;
}

.leading-tight { line-height: var(--leading-tight) !important;
}

.leading-snug { line-height: var(--leading-snug) !important;
}

.leading-normal { line-height: var(--leading-normal) !important;
}

.leading-relaxed { line-height: var(--leading-relaxed) !important;
}

.leading-loose { line-height: var(--leading-loose) !important;
}

/* ===== SPECIAL CLASSES ===== */

.chillax-hero {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(3rem, 5vw, 4.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
}

.chillax-display {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}

.chillax-caption {
  font-family: var(--font-primary) !important;
  font-weight: 300;
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  h1, .h1, .title-glass {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: var(--leading-tight) !important;
  }

  h2, .h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  h3, .h3 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }

  .chillax-hero {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }
}

/* ===== FULL HD OPTIMIZATION ===== */

@media (min-width: 1920px) {
  h1, .title-glass {
    font-size: 3.25rem !important;
    line-height: 1.15 !important;
  }

  h2, .h2 {
    font-size: 2.5rem !important;
  }

  h3, .h3 {
    font-size: 2rem !important;
  }
}

/* Force Chillax on all elements */

body * {
  font-family: var(--font-primary) !important;
}

/* purgecss end ignore */

/* purgecss start ignore */

/* ===== SUBTLE DARK GLASSMORPHISM SYSTEM - ÉLÉGANCE NOIRE RAFFINÉE ===== */

/* Import Google Fonts - Selection Minimaliste */

/* ===== CSS VARIABLES - GLASSMORPHISME NOIR SUBTIL ===== */

:root {
  /* Fonts Minimalistes */
  --font-title: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
  /* Palette Noir Glassmorphique */
  --glass-black-ultra: rgba(0, 0, 0, 0.95);
  --glass-black-heavy: rgba(0, 0, 0, 0.8);
  --glass-black-medium: rgba(0, 0, 0, 0.6);
  --glass-black-light: rgba(0, 0, 0, 0.4);
  --glass-black-subtle: rgba(0, 0, 0, 0.2);
  --glass-black-whisper: rgba(0, 0, 0, 0.1);
  /* Glassmorphisme avec Couleurs Subtiles */
  --glass-charcoal: rgba(24, 24, 27, 0.8);
  --glass-slate: rgba(30, 41, 59, 0.7);
  --glass-midnight: rgba(15, 23, 42, 0.85);
  --glass-shadow: rgba(8, 8, 12, 0.9);
  /* Accents Subtils */
  --accent-whisper: rgba(255, 255, 255, 0.03);
  --accent-ghost: rgba(255, 255, 255, 0.06);
  --accent-mist: rgba(255, 255, 255, 0.1);
  --accent-soft: rgba(255, 255, 255, 0.15);
  --accent-gentle: rgba(255, 255, 255, 0.2);
  /* Gradients Noirs Sophistiqués */
  --gradient-midnight: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(15, 15, 20, 0.8) 50%, 
    rgba(0, 0, 0, 0.95) 100%);
  --gradient-charcoal: linear-gradient(135deg,
    rgba(24, 24, 27, 0.9) 0%,
    rgba(39, 39, 42, 0.8) 50%,
    rgba(24, 24, 27, 0.9) 100%);
  --gradient-slate: linear-gradient(135deg,
    rgba(30, 41, 59, 0.8) 0%,
    rgba(51, 65, 85, 0.7) 50%,
    rgba(30, 41, 59, 0.8) 100%);
  /* Gradients de Texte Subtils */
  --text-gradient-whisper: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.85) 100%);
  --text-gradient-mist: linear-gradient(135deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(248, 250, 252, 0.6) 50%,
    rgba(255, 255, 255, 0.75) 100%);
  --text-gradient-ghost: linear-gradient(135deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(241, 245, 249, 0.4) 50%,
    rgba(255, 255, 255, 0.55) 100%);
  /* Couleurs de Texte Raffinées */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-ghost: rgba(255, 255, 255, 0.5);
  --text-whisper: rgba(255, 255, 255, 0.35);
  /* Borders Glassmorphiques */
  --border-whisper: 1px solid rgba(255, 255, 255, 0.08);
  --border-ghost: 1px solid rgba(255, 255, 255, 0.12);
  --border-mist: 1px solid rgba(255, 255, 255, 0.18);
  --border-soft: 1px solid rgba(255, 255, 255, 0.25);
  /* Shadows & Blurs Subtils */
  --blur-whisper: blur(8px);
  --blur-ghost: blur(12px);
  --blur-mist: blur(16px);
  --blur-soft: blur(20px);
  --blur-heavy: blur(24px);
  --shadow-whisper: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-ghost: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-mist: 0 12px 32px rgba(0, 0, 0, 0.2);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.25);
  --shadow-deep: 0 20px 48px rgba(0, 0, 0, 0.3);
}

/* ===== BASE GLASSMORPHISM RESET ===== */

* {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--gradient-midnight);
  min-height: 100vh;
}

/* ===== TITRES GLASSMORPHIQUES SUBTILS ===== */

h1, .h1, .title-glass {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: var(--text-gradient-whisper);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

h2, .h2 {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  background: var(--text-gradient-mist);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 2rem 0 1rem 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 1.5rem 0 0.75rem 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 1.25rem 0 0.5rem 0;
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.125rem, 2.25vw, 1.25rem);
  line-height: 1.4;
  color: var(--text-muted);
  margin: 1rem 0 0.5rem 0;
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1rem 0 0.5rem 0;
}

/* ===== BODY TEXT GLASSMORPHIQUE ===== */

p, .text-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

/* Variantes de texte subtiles */

.text-primary { color: var(--text-primary);
}

.text-secondary { color: var(--text-secondary);
}

.text-muted { color: var(--text-muted);
}

.text-ghost { color: var(--text-ghost);
}

.text-whisper { color: var(--text-whisper);
}

.text-gradient-whisper {
  background: var(--text-gradient-whisper);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-mist {
  background: var(--text-gradient-mist);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-ghost {
  background: var(--text-gradient-ghost);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== GLASSMORPHISM CONTAINERS ===== */

.glass-container-whisper {
  background: var(--glass-black-whisper);
  backdrop-filter: var(--blur-whisper);
  -webkit-backdrop-filter: var(--blur-whisper);
  border: var(--border-whisper);
  border-radius: 16px;
  box-shadow: var(--shadow-whisper);
}

.glass-container-ghost {
  background: var(--glass-black-light);
  backdrop-filter: var(--blur-ghost);
  -webkit-backdrop-filter: var(--blur-ghost);
  border: var(--border-ghost);
  border-radius: 20px;
  box-shadow: var(--shadow-ghost);
}

.glass-container-mist {
  background: var(--glass-charcoal);
  backdrop-filter: var(--blur-mist);
  -webkit-backdrop-filter: var(--blur-mist);
  border: var(--border-mist);
  border-radius: 24px;
  box-shadow: var(--shadow-mist);
}

.glass-container-soft {
  background: var(--glass-slate);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border: var(--border-soft);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

/* ===== BOUTONS GLASSMORPHIQUES ===== */

.btn-glass {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: var(--glass-black-medium);
  backdrop-filter: var(--blur-ghost);
  -webkit-backdrop-filter: var(--blur-ghost);
  border: var(--border-ghost);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
}

.btn-glass:hover {
  background: var(--glass-black-light);
  border: var(--border-mist);
  transform: translateY(-2px);
  box-shadow: var(--shadow-mist);
  color: var(--text-primary);
}

.btn-glass-subtle {
  background: var(--glass-black-whisper);
  backdrop-filter: var(--blur-whisper);
  -webkit-backdrop-filter: var(--blur-whisper);
  border: var(--border-whisper);
  color: var(--text-muted);
}

.btn-glass-subtle:hover {
  background: var(--glass-black-light);
  color: var(--text-secondary);
}

/* ===== NAVIGATION GLASSMORPHIQUE ===== */

.nav-glass {
  background: var(--glass-shadow);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border-bottom: var(--border-whisper);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-glass a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.025em;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.nav-glass a:hover,
.nav-glass a.active {
  color: var(--text-primary);
  background: var(--accent-whisper);
}

/* ===== CARDS GLASSMORPHIQUES ===== */

.card-glass {
  background: var(--glass-charcoal);
  backdrop-filter: var(--blur-ghost);
  -webkit-backdrop-filter: var(--blur-ghost);
  border: var(--border-whisper);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--shadow-ghost);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-glass:hover {
  background: var(--glass-slate);
  border: var(--border-ghost);
  transform: translateY(-4px);
  box-shadow: var(--shadow-mist);
}

/* ===== FORMES D'INPUT GLASSMORPHIQUES ===== */

.input-glass {
  background: var(--glass-black-light);
  backdrop-filter: var(--blur-whisper);
  -webkit-backdrop-filter: var(--blur-whisper);
  border: var(--border-whisper);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  width: 100%;
}

.input-glass::-moz-placeholder {
  color: var(--text-ghost);
}

.input-glass::placeholder {
  color: var(--text-ghost);
}

.input-glass:focus {
  outline: none;
  border: var(--border-ghost);
  background: var(--glass-black-medium);
  color: var(--text-primary);
}

/* ===== QUOTES GLASSMORPHIQUES ===== */

.quote-glass {
  font-family: var(--font-title);
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--glass-black-subtle);
  backdrop-filter: var(--blur-whisper);
  -webkit-backdrop-filter: var(--blur-whisper);
  border-left: 3px solid var(--accent-soft);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  position: relative;
}

.quote-glass::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent-mist);
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  line-height: 1;
}

/* ===== RESPONSIVE GLASSMORPHISM ===== */

@media (max-width: 768px) {
  .glass-container-whisper,
  .glass-container-ghost,
  .glass-container-mist,
  .glass-container-soft {
    border-radius: 16px;
    padding: 1.5rem;
  }

  .card-glass {
    padding: 1.5rem;
    border-radius: 16px;
  }

  h1, .h1, .title-glass {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
}

/* ===== ANIMATIONS SUBTILES ===== */

@keyframes glass-shimmer {
  0% { background-position: -200% 0;
  }

  100% { background-position: 200% 0;
  }
}

.glass-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-whisper) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: glass-shimmer 3s ease-in-out infinite;
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  .glass-shimmer {
    animation: none;
  }

  .btn-glass,
  .card-glass {
    transition: none;
  }
}

/* ===== SCROLLBAR GLASSMORPHIQUE ===== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--glass-black-whisper);
}

::-webkit-scrollbar-thumb {
  background: var(--glass-black-medium);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--glass-black-light);
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== QUOTE SIGNATURE STYLE - ÉLÉGANCE MAXIMALE ===== */

.quote-signature {
  position: relative;
  font-family: 'Chillax', -apple-system, sans-serif !important;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1.6;
  padding: 0.5rem 0;
  margin: 1.5rem 0;
}

/* Guillemets français élégants */

.quote-signature::before,
.quote-signature::after {
  font-family: 'Chillax', Georgia, serif;
  font-size: 1.5em;
  font-weight: 300;
  opacity: 0.4;
  position: relative;
  top: 0.1em;
}

/* Animation subtile des guillemets */

@keyframes quote-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1);
  }

  50% { opacity: 0.6; transform: scale(1.05);
  }
}

.quote-signature:hover::before,
.quote-signature:hover::after {
  animation: quote-pulse 2s ease-in-out infinite;
}

/* Ligne décorative subtile */

.quote-signature-decorated {
  position: relative;
  padding: 1.5rem 0;
}

.quote-signature-decorated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
}

.quote-signature-decorated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
}

/* Version avec accent lumineux */

.quote-signature-glow {
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(255, 255, 255, 0.05),
    0 0 60px rgba(255, 255, 255, 0.02);
  transition: text-shadow 0.3s ease;
}

.quote-signature-glow:hover {
  text-shadow: 
    0 0 25px rgba(255, 255, 255, 0.15),
    0 0 50px rgba(255, 255, 255, 0.08),
    0 0 75px rgba(255, 255, 255, 0.04);
}

/* Version avec background subtil */

.quote-signature-bg {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.02) 100%);
  border-radius: 8px;
  padding: 1rem 2rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */

@media (max-width: 768px) {
  .quote-signature {
    font-size: 1.125rem;
    letter-spacing: 0.03em;
  }

  .quote-signature::before,
  .quote-signature::after {
    font-size: 1.3em;
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== BLUR TO FOCUS ANIMATION - ULTRA SMOOTH ===== */

/* Animation principale - Blur vers Net */

@keyframes blurToFocus {
  0% {
    filter: blur(20px);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  20% {
    filter: blur(15px);
    opacity: 0.3;
    transform: translateY(8px) scale(0.96);
  }

  40% {
    filter: blur(10px);
    opacity: 0.5;
    transform: translateY(6px) scale(0.97);
  }

  60% {
    filter: blur(5px);
    opacity: 0.7;
    transform: translateY(4px) scale(0.98);
  }

  80% {
    filter: blur(2px);
    opacity: 0.9;
    transform: translateY(2px) scale(0.99);
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animation rapide - 1.2 secondes */

@keyframes blurToFocusFast {
  0% {
    filter: blur(15px);
    opacity: 0;
    transform: translateY(5px);
  }

  50% {
    filter: blur(5px);
    opacity: 0.6;
    transform: translateY(2px);
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation ultra-rapide - 0.5 secondes */

@keyframes blurToFocusUltraFast {
  0% {
    filter: blur(8px);
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* Animation instantanée - 0.3 secondes */

@keyframes blurToFocusInstant {
  0% {
    filter: blur(5px);
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* Animation progressive par lettres */

@keyframes letterBlurToFocus {
  0% {
    filter: blur(8px);
    opacity: 0;
    transform: translateX(-2px);
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== CLASSES D'APPLICATION ===== */

/* H1 avec blur to focus standard */

.blur-to-focus-title {
  animation: blurToFocus 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

/* H1 avec blur to focus rapide */

.blur-to-focus-fast {
  animation: blurToFocusFast 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

/* H1 avec blur to focus ultra-rapide */

.blur-to-focus-ultra {
  animation: blurToFocusUltraFast 0.5s ease-out forwards;
  opacity: 0;
}

/* H1 avec blur to focus instantané */

.blur-to-focus-instant {
  animation: blurToFocusInstant 0.3s ease-out forwards;
  opacity: 0;
}

/* Version avec délai progressif pour chaque mot */

.blur-to-focus-words > span {
  display: inline-block;
  animation: blurToFocusFast 0.8s ease-out forwards;
  opacity: 0;
}

.blur-to-focus-words > span:nth-child(1) { animation-delay: 0s;
}

.blur-to-focus-words > span:nth-child(2) { animation-delay: 0.1s;
}

.blur-to-focus-words > span:nth-child(3) { animation-delay: 0.2s;
}

.blur-to-focus-words > span:nth-child(4) { animation-delay: 0.3s;
}

.blur-to-focus-words > span:nth-child(5) { animation-delay: 0.4s;
}

/* Version avec effet de vague */

.blur-to-focus-wave {
  animation: blurToFocus 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* ===== VARIANTES SOPHISTIQUÉES ===== */

/* Effet de profondeur avec blur */

.blur-depth-effect {
  position: relative;
  animation: blurToFocusFast 1s ease-out forwards;
  opacity: 0;
}

.blur-depth-effect::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(3px);
  opacity: 0.3;
  animation: blurToFocus 1.5s ease-out forwards;
  animation-delay: 0.2s;
  z-index: -1;
}

/* Effet de glitch avec blur */

@keyframes blurGlitch {
  0% {
    filter: blur(10px);
    transform: translateX(0);
  }

  20% {
    filter: blur(8px);
    transform: translateX(-2px);
  }

  40% {
    filter: blur(6px);
    transform: translateX(2px);
  }

  60% {
    filter: blur(4px);
    transform: translateX(-1px);
  }

  80% {
    filter: blur(2px);
    transform: translateX(1px);
  }

  100% {
    filter: blur(0);
    transform: translateX(0);
  }
}

.blur-glitch-effect {
  animation: blurGlitch 0.8s ease-out forwards;
  opacity: 0;
  animation-fill-mode: both;
}

/* ===== RESPONSIVE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
  /* Réduction du blur sur mobile pour performance */

  @keyframes blurToFocusMobile {
    0% {
      filter: blur(8px);
      opacity: 0;
    }

    100% {
      filter: blur(0px);
      opacity: 1;
    }
  }

  .blur-to-focus-title,
  .blur-to-focus-fast,
  .blur-to-focus-ultra {
    animation-name: blurToFocusMobile;
    animation-duration: 0.6s;
  }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  .blur-to-focus-title,
  .blur-to-focus-fast,
  .blur-to-focus-ultra,
  .blur-to-focus-wave,
  .blur-to-focus-words > span,
  .blur-depth-effect,
  .blur-glitch-effect {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

.blur-to-focus-gpu {
  will-change: filter, opacity, transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px;
}

/* Force hardware acceleration */

.blur-to-focus-title,
.blur-to-focus-fast,
.blur-to-focus-ultra {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* purgecss end ignore */
/* purgecss start ignore */

/* =============================================================================
   HERO CENTERING FIX - Perfect vertical centering for hero sections
   ============================================================================= */

/**
 * Correction pour centrage vertical parfait des sections hero
 * Compense la hauteur de la navigation fixe
 */

/* Hero sections - Centrage vertical parfait */

.code-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15rem;
  padding-bottom: 4rem;
  position: relative;
}

/* Mobile responsive - Centrage vertical optimisé avec compensation menu */

@media (max-width: 768px) {
  section.code-hero {
    min-height: 100vh !important;
    padding-top: 12rem !important;
    padding-bottom: 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Ensure proper content centering */

.code-hero > div {
  width: 100%;
  margin: 0 auto;
}

/* Harmonisation des conteneurs hero pour toutes les pages */

.code-hero .max-w-6xl,
.code-hero .max-w-7xl {
  width: 100%;
  max-width: 72rem;
}

/* AIServicesPage - Centrage vertical parfait */

.ai-hero-centered {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  margin-top: -4rem !important;
}

.ai-hero-centered > div {
  margin: 0 auto;
  flex-shrink: 0;
  transform: translateY(-5vh);
}

/* Mobile - AIServicesPage centré */

@media (max-width: 768px) {
  .ai-hero-centered {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -3rem !important;
  }

  .ai-hero-centered > div {
    transform: translateY(-3vh);
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== MODAL OVERLAY SYSTEM - GLASSMORPHISME NOIR ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Overlay noir avec blur sophistiqué */
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Animation d'apparition */
  animation: modalOverlayFadeIn 0.3s ease-out;
}

/* Animation d'apparition de l'overlay */

@keyframes modalOverlayFadeIn {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
    background: rgba(0, 0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.75);
  }
}

/* Variantes d'opacity pour différents contextes */

.modal-overlay-light {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-overlay-medium {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-overlay-heavy {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.modal-overlay-ultra {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Overlay avec effet de profondeur */

.modal-overlay-depth {
  background: 
    radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 70%),
    rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Overlay avec gradient subtil */

.modal-overlay-gradient {
  background: 
    linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(10, 10, 15, 0.85) 50%, rgba(0, 0, 0, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Container modal glassmorphique */

.modal-container {
  position: relative;
  width: 100%;
  max-width: 64rem; /* max-w-4xl */
  max-height: 85vh;
  overflow: hidden;
}

.modal-content {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 
    0 0 60px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(147, 51, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  animation: modalContentSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animation du contenu modal */

@keyframes modalContentSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Gradient overlay subtil à l'intérieur de la modal */

.modal-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 30%, 
    rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
  z-index: 1;
}

.modal-content > * {
  position: relative;
  z-index: 2;
}

/* Responsive adaptations */

@media (max-width: 768px) {
  .modal-overlay {
    padding: 0.5rem;
  }

  .modal-container {
    max-height: 95vh;
  }

  .modal-content {
    border-radius: 0.75rem;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-content {
    animation: none;
  }

  .modal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .modal-overlay-light { background: rgba(0, 0, 0, 0.8);
  }

  .modal-overlay-medium { background: rgba(0, 0, 0, 0.9);
  }

  .modal-overlay-heavy { background: rgba(0, 0, 0, 0.95);
  }

  .modal-overlay-ultra { background: rgba(0, 0, 0, 0.98);
  }

  .modal-content {
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
}

/* Performance optimizations */

.modal-overlay,
.modal-content {
  will-change: opacity, backdrop-filter, transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* purgecss end ignore */
/* purgecss start ignore */

/* 🔔 SMART NOTIFICATIONS - Styles pour le système révolutionnaire */

/* ========== PULSE ANIMATIONS ========== */

@keyframes pulse-smart {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes pulse-slow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.4;
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(34, 197, 94, 0.3),
      0 0 40px rgba(34, 197, 94, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow: 
      0 0 30px rgba(34, 197, 94, 0.5),
      0 0 60px rgba(34, 197, 94, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* ========== NOTIFICATION BADGE PRINCIPAL ========== */

.smart-notification-badge {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 60000;
  max-width: 400px;
  min-width: 320px;
  pointer-events: all;
}

.notification-container {
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.notification-container:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 12px 25px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ========== TYPES DE NOTIFICATIONS ========== */

.notification-conversion {
  background: linear-gradient(135deg, 
    rgba(34, 197, 94, 0.15) 0%, 
    rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  animation: glow-pulse 3s infinite;
}

.notification-social {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.15) 0%, 
    rgba(6, 182, 212, 0.15) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.notification-urgency {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.15) 0%, 
    rgba(251, 146, 60, 0.15) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: pulse-smart 2s infinite;
}

/* ========== CONTENUS INTERNES ========== */

.notification-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.notification-content {
  flex: 1;
  color: white;
  font-weight: 200;
  font-size: 14px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.notification-close {
  flex-shrink: 0;
  padding: 4px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: scale(1.1);
}

/* ========== MINI BADGE INDICATEUR ========== */

.mini-notification-badge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 59999;
}

.mini-badge-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.2) 0%, 
    rgba(168, 85, 247, 0.2) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.mini-badge-button:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.3) 0%, 
    rgba(168, 85, 247, 0.3) 100%);
  box-shadow: 
    0 8px 25px rgba(139, 92, 246, 0.3),
    0 4px 12px rgba(168, 85, 247, 0.2);
}

.mini-badge-icon {
  width: 20px;
  height: 20px;
  color: white;
}

.mini-badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: linear-gradient(45deg, #ef4444, #f97316);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: pulse-smart 2s infinite;
}

/* ========== SCORE INDICATOR (DEV MODE) ========== */

.score-indicator {
  position: absolute;
  bottom: -24px;
  left: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: 'Monaco', 'Menlo', monospace;
}

/* ========== ANIMATIONS D'ENTRÉE ========== */

.notification-enter {
  animation: notificationSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.notification-exit {
  animation: notificationSlideOut 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes notificationSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(-20px) scale(0.9);
    filter: blur(10px);
  }

  60% {
    opacity: 0.8;
    transform: translateX(-10px) translateY(0) scale(1.02);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes notificationSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
}

/* ========== BOUNCE EFFECT ========== */

.notification-bounce {
  animation: notificationBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes notificationBounce {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.1) rotate(-10deg);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ========== RIPPLE EFFECT AU CLIC ========== */

.notification-ripple {
  position: relative;
  overflow: hidden;
}

.notification-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  z-index: -1;
}

.notification-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
  .smart-notification-badge {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    min-width: auto;
  }

  .notification-content {
    font-size: 13px;
  }

  .mini-notification-badge {
    bottom: 15px;
    right: 15px;
  }

  .mini-badge-button {
    width: 44px;
    height: 44px;
  }
}

/* ========== ACCESSIBILITY ========== */

@media (prefers-reduced-motion: reduce) {
  .notification-container,
  .mini-badge-button {
    animation: none !important;
  }

  .notification-container:hover {
    transform: none;
  }
}

/* ========== DARK MODE OPTIMIZATIONS ========== */

@media (prefers-color-scheme: dark) {
  .notification-container {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
  }
}

/* ========== HIGH CONTRAST MODE ========== */

@media (prefers-contrast: high) {
  .notification-container {
    border-width: 2px;
  }

  .notification-content {
    font-weight: 300;
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ======================================
   LIGHTER GRAY TEXT OVERRIDES
   Make all gray text lighter site-wide
   ====================================== */

/* Override Tailwind gray text colors to be lighter */

/* text-gray-300 -> lighter (was #d1d5db) */

.text-gray-300 {
  color: #e5e7eb !important; /* gray-200 value */
}

/* text-gray-400 -> lighter (was #9ca3af) */

.text-gray-400 {
  color: #d1d5db !important; /* gray-300 value */
}

/* text-gray-500 -> lighter (was #6b7280) */

.text-gray-500 {
  color: #9ca3af !important; /* gray-400 value */
}

/* text-gray-600 -> lighter (was #4b5563) */

.text-gray-600 {
  color: #6b7280 !important; /* gray-500 value */
}

/* text-gray-700 -> lighter (was #374151) */

.text-gray-700 {
  color: #4b5563 !important; /* gray-600 value */
}

/* text-gray-800 -> lighter (was #1f2937) */

.text-gray-800 {
  color: #374151 !important; /* gray-700 value */
}

/* text-gray-900 -> lighter (was #111827) */

.text-gray-900 {
  color: #1f2937 !important; /* gray-800 value */
}

/* Custom gray colors in app.css - make them lighter */

body,
.prose,
.prose-invert {
  /* Lighten general text that might be gray */
  color: #f3f4f6; /* gray-100 for body text */
}

/* Lighten specific gray color values found in CSS */

[style*="color: #374151"],
[style*="color: rgb(55, 65, 81)"] {
  color: #4b5563 !important;
}

[style*="color: #9CA3AF"],
[style*="color: rgb(156, 163, 175)"] {
  color: #d1d5db !important;
}

[style*="color: #d1d5db"],
[style*="color: rgb(209, 213, 219)"] {
  color: #e5e7eb !important;
}

/* Additional specific overrides for common elements */

p.text-gray-300,
span.text-gray-300,
div.text-gray-300 {
  color: #f3f4f6 !important; /* Even lighter for better readability */
}

p.text-gray-400,
span.text-gray-400,
div.text-gray-400 {
  color: #e5e7eb !important;
}

/* Ensure descriptions and secondary text are lighter */

.description,
.subtitle,
.meta,
.secondary-text {
  color: #e5e7eb !important;
}

/* Lighten placeholder text */

::-moz-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Lighten disabled text */

:disabled,
.disabled {
  color: #6b7280 !important;
}

/* Ensure hover states maintain good contrast */

.text-gray-300:hover {
  color: #f9fafb !important;
}

.text-gray-400:hover {
  color: #f3f4f6 !important;
}

.text-gray-500:hover {
  color: #e5e7eb !important;
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== FONT WEIGHT OVERRIDE - AMÉLIORATION GLOBALE LISIBILITÉ ===== */

/* Override global font-weight trop fins pour améliorer la lisibilité */

/* Remplacer tous les font-weight 100 et 200 par 300 */

*[style*="font-weight: 100"],
*[style*="font-weight: 200"],
.font-thin,
.font-extralight {
  font-weight: 300;
}

/* Classes spécifiques courantes */

.text-thin,
.text-extralight,
.text-ultra-thin {
  font-weight: 300;
}

/* Éléments de texte principaux */

p, span, div, h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

/* Headers avec poids plus fort pour hiérarchie */

h1 { font-weight: 400;
}

h2 { font-weight: 400;
}

h3 { font-weight: 400;
}

h4 { font-weight: 300;
}

h5 { font-weight: 300;
}

h6 { font-weight: 300;
}

/* Texte des boutons */

button, .btn {
  font-weight: 400;
}

/* Liens */

a {
  font-weight: 300;
}

/* Inputs et formulaires */

input, textarea, select {
  font-weight: 300;
}

/* Tables */

table, th, td {
  font-weight: 300;
}

/* Labels et légendes */

label, legend, caption {
  font-weight: 300;
}

/* Navigation */

nav, .nav, .navbar {
  font-weight: 300;
}

/* Code */

code, pre {
  font-weight: 300;
}

/* Quotes et blockquotes - garde un style plus fin pour l'esthétique */

blockquote, .quote {
  font-weight: 300;
}

/* Exception pour le texte très important - peut rester plus fort */

.font-bold, .text-bold, strong, b {
  font-weight: 600;
}

.font-semibold, .text-semibold {
  font-weight: 400;
}

.font-medium, .text-medium {
  font-weight: 400;
}

/* purgecss end ignore */
/*purgecss start ignore
 */

/**
 * Styles d'accessibilité (WCAG 2.1)
 * Support pour lecteurs d'écran, navigation clavier, préférences utilisateur
 */

/* === SCREEN READER ONLY === */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* === SKIP LINKS === */

.skip-links {
  position: relative;
  z-index: 1000;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  color: var(--color-gray-900);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 300;
  font-size: 14px;
  z-index: 1001;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 6px;
  outline: 2px solid var(--color-amber-400);
  outline-offset: 2px;
}

/* === FOCUS MANAGEMENT === */

*:focus {
  outline: 2px solid var(--color-indigo-500);
  outline-offset: 2px;
  outline-style: solid;
}

/* Exception pour le logo et les éléments avec focus personnalisé */

.logo-container:focus,
[class*="focus:outline-none"]:focus {
  outline: none;
}

.focus-visible {
  outline: 2px solid var(--color-indigo-500);
  outline-offset: 2px;
}

.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* === KEYBOARD NAVIGATION === */

[tabindex="-1"]:focus {
  outline: none;
}

.keyboard-navigation button:focus,
.keyboard-navigation a:focus,
.keyboard-navigation input:focus,
.keyboard-navigation select:focus,
.keyboard-navigation textarea:focus {
  outline: 3px solid var(--color-indigo-500);
  outline-offset: 2px;
}

/* === HIGH CONTRAST MODE === */

.high-contrast {
  --color-gray-50: #f0f0f0;
  --color-gray-100: #e0e0e0;
  --color-gray-200: #d0d0d0;
  --color-gray-300: #c0c0c0;
  --color-gray-400: #a0a0a0;
  --color-gray-500: #808080;
  --color-gray-600: #606060;
  --color-gray-700: #404040;
  --color-gray-800: #202020;
  --color-gray-900: #000000;
  --color-indigo-50: #f0f0ff;
  --color-indigo-100: #e0e0ff;
  --color-indigo-500: #0000ff;
  --color-indigo-600: #0000dd;
  --color-indigo-700: #0000bb;
}

.high-contrast .solution-card {
  border: 2px solid var(--color-gray-900);
}

.high-contrast .solution-card:hover {
  border-color: var(--color-indigo-600);
}

.high-contrast button {
  border: 2px solid var(--color-gray-900);
  color: var(--color-gray-900);
}

.high-contrast button:hover {
  border-color: var(--color-indigo-600);
}

/* === REDUCED MOTION === */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.reduce-motion .solution-card:hover {
  transform: none !important;
}

.reduce-motion .voice-search-btn.recording::after {
  animation: none !important;
}

/* === LARGE TEXT SUPPORT === */

@media (prefers-reduced-data: reduce) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }

  .solution-card {
    padding: 2rem;
  }

  button {
    padding: 12px 24px;
    font-size: 16px;
  }

  input {
    padding: 16px;
    font-size: 16px;
  }
}

/* === ARIA LIVE REGIONS === */

[aria-live] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.live-region-visible {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid var(--color-blue-200);
  border-radius: 0.5rem;
  color: var(--color-blue-900);
}

/* === FORM ACCESSIBILITY === */

.form-field {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: var(--color-gray-700);
}

.form-label.required::after {
  content: '*';
  color: var(--color-red-500);
  margin-left: 0.25rem;
}

.form-input:invalid {
  border-color: var(--color-red-500);
}

.form-input:invalid:focus {
  outline-color: var(--color-red-500);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--color-red-600);
  font-size: 0.875rem;
}

.form-error-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* === BUTTON ACCESSIBILITY === */

button:disabled,
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.button-loading {
  position: relative;
  color: transparent;
}

.button-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === MODAL ACCESSIBILITY === */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 1001;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.modal-content:focus {
  outline: none;
}

/* === TOOLTIP ACCESSIBILITY === */

.tooltip {
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-gray-900);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}

.tooltip:hover .tooltip-content,
.tooltip:focus .tooltip-content {
  opacity: 1;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-gray-900);
}

/* === TABLE ACCESSIBILITY === */

.accessible-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.accessible-table th,
.accessible-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.accessible-table th {
  font-weight: 300;
  color: var(--color-gray-900);
}

.accessible-table tr:hover {
  background: transparent;
}

.accessible-table caption {
  caption-side: top;
  padding: 0.75rem;
  font-weight: 300;
  text-align: left;
  color: var(--color-gray-900);
}

/* === PROGRESS INDICATORS === */

.progress-bar {
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
}

/* === RESPONSIVE ACCESSIBILITY === */

@media (max-width: 768px) {
  .skip-link {
    font-size: 16px;
    padding: 12px 16px;
  }

  button {
    min-height: 44px;
    min-width: 44px;
  }

  .form-input {
    min-height: 44px;
    font-size: 16px;
  }
}

/* === PRINT ACCESSIBILITY === */

@media print {
  .skip-links,
  [aria-hidden="true"],
  .sr-only {
    display: none !important;
  }

  .solution-card {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    margin-bottom: 1rem;
    border: 1px solid #000;
  }
}

/*purgecss end ignore
 */
/* purgecss start ignore */

/* Styles pour la page d'administration améliorée */

/* Animation pour mettre en évidence les sections */

@keyframes highlightSection {
  0% { background-color: transparent;
  }

  50% { background-color: transparent;
  }

  100% { background-color: transparent;
  }
}

.highlight-section {
  animation: highlightSection 2s ease;
  scroll-margin-top: 150px; /* Augmenter la marge supérieure pour éviter que le menu ne cache le début de la section */
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.4);
}

.highlight-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  opacity: 1;
  z-index: 5;
}

/* Styles pour l'en-tête d'administration */

.admin-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.dark .admin-header {
  background-color: transparent;
  border-bottom: 1px solid var(--gray-700);
}

.admin-page {
  --primary-color: #4f46e5;
  --primary-light: #818cf8;
  --primary-dark: #4338ca;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #3b82f6;
  /* Variables pour rgba */
  --primary-rgb: 79, 70, 229;
  --primary-light-rgb: 129, 140, 248;
  --primary-dark-rgb: 67, 56, 202;
  --success-rgb: 16, 185, 129;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 239, 68, 68;
  --info-rgb: 59, 130, 246;
  /* Couleurs en niveaux de gris */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  padding: 1.5rem;
  padding-bottom: 5rem;
  min-height: 100vh;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Animation des cartes au chargement */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.2);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

/* En-têtes de section */

.section-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gray-800);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gray-200);
}

.section-title:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 100px;
  background: transparent;
}

.dark .section-title {
  color: var(--gray-100);
  border-bottom-color: var(--gray-700);
}

/* Conteneurs de section */

.section-container {
  animation: fadeInUp 0.5s ease-out forwards;
  margin-bottom: 2.5rem;
  transition: all 0.3s ease;
}

.section-container:hover .section-title:before {
  width: 150px;
  transition: width 0.3s ease;
}

/* Cartes */

.dashboard-card {
  background-color: transparent;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: all 0.2s ease-in-out;
  border: 1px solid var(--gray-200);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dashboard-card:hover::after {
  opacity: 1;
}

.dashboard-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 1rem;
  color: var(--gray-800);
  display: flex;
  align-items: center;
}

.card-title svg {
  margin-right: 0.5rem;
  color: var(--primary-color);
}

.card-content {
  color: var(--gray-600);
}

/* Variantes de couleur pour les cartes */

.card-primary::after {
  background: transparent;
}

.card-success::after {
  background: transparent;
}

.card-warning::after {
  background: transparent;
}

.card-danger::after {
  background: transparent;
}

.card-info::after {
  background: transparent;
}

/* Badges et états */

.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 300;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.status-connected {
  background-color: transparent;
  color: var(--success-color);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-error {
  background-color: transparent;
  color: var(--danger-color);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-warning {
  background-color: transparent;
  color: var(--warning-color);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-info {
  background-color: transparent;
  color: var(--info-color);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Statistiques */

.stat-value {
  font-size: 2rem;
  font-weight: 300;
  color: var(--gray-800);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.stat-change {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.stat-change.positive {
  color: var(--success-color);
}

.stat-change.negative {
  color: var(--danger-color);
}

.stat-card {
  position: relative;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  border: 1px solid var(--gray-200);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background-color: transparent;
  color: var(--primary-color);
}

/* Tableau amélioré */

.table-container {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-200);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background-color: transparent;
  color: var(--gray-600);
  font-weight: 200;
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 1px solid var(--gray-200);
}

.admin-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.875rem;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background-color: transparent;
}

/* Boutons */

.admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-weight: 200;
  border-radius: 0.375rem;
  transition: all 0.2s;
  cursor: pointer;
  font-size: 0.875rem;
  border: none;
}

.button-primary {
  background-color: transparent;
  color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.05);
}

.button-primary:hover {
  background-color: transparent;
  transform: translateY(-1px);
}

.button-secondary {
  background-color: transparent;
  color: var(--gray-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-300);
}

.button-secondary:hover {
  background-color: transparent;
  color: var(--gray-900);
}

.button-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.button-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.button-icon {
  margin-right: 0.5rem;
}

/* Mode sombre */

.dark .admin-page {
  background-color: transparent;
  color: var(--gray-300);
}

.dark .dashboard-card {
  background-color: transparent;
  border-color: var(--gray-700);
}

.dark .card-title {
  color: var(--gray-100);
}

.dark .card-content {
  color: var(--gray-400);
}

.dark .stat-card {
  background-color: transparent;
  border-color: var(--gray-700);
}

.dark .stat-value {
  color: var(--gray-100);
}

.dark .stat-label {
  color: var(--gray-400);
}

.dark .table-container {
  border-color: var(--gray-700);
}

.dark .admin-table th {
  background-color: transparent;
  color: var(--gray-300);
  border-bottom-color: var(--gray-700);
}

.dark .admin-table td {
  border-bottom-color: var(--gray-700);
  color: var(--gray-300);
}

.dark .admin-table tr:hover td {
  background-color: transparent;
}

.dark .button-secondary {
  background-color: transparent;
  color: var(--gray-300);
  border-color: var(--gray-700);
}

.dark .button-secondary:hover {
  background-color: transparent;
  color: var(--gray-100);
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== BACKGROUND SELECTOR STYLES ===== */

/* Bouton de sélection de thème */

.theme-selector-button {
  position: relative;
  background: transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.theme-selector-button:hover {
  transform: scale(1.1) translateY(-2px);
  background: transparent;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 0, 0, 0.3);
}

.theme-selector-button:active {
  transform: scale(1.05) translateY(0px);
}

/* Icône du thème */

.theme-selector-icon {
  position: relative;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.theme-icon-gradient {
  background: transparent;
  background-size: 200% 200%;
  animation: gradientShift 3s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tooltip */

.theme-selector-tooltip {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 200;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 100;
}

.theme-selector-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.8);
}

.theme-selector-button:hover .theme-selector-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(5px);
}

/* Animation du gradient */

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Responsive */

@media (max-width: 768px) {
  .theme-selector-button {
    width: 50px;
    height: 50px;
  }

  .theme-selector-icon {
    font-size: 20px;
  }

  .theme-selector-tooltip {
    display: none;
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ========================================
   OPTIMISATION DU LOGO OLIVE
   Maximise la visibilité et la taille du logo SVG animé
   ======================================== */

/* ===== OPTIMISATIONS GÉNÉRALES DU LOGO ===== */

.logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: 100%;
}

.logo-image {
  /* Priorité maximale pour l'affichage */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Optimisation de la taille */
  object-fit: contain;
  object-position: left center;
  /* Transition fluide */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Anti-aliasing pour les SVG */
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
  /* Amélioration de la qualité d'affichage */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: crisp-edges;
}

/* ===== ÉTATS INTERACTIFS ===== */

.logo-image:hover {
  filter: brightness(1.1) contrast(1.05);
  transform: scale(1.02);
}

.logo-container:hover .logo-image {
  opacity: 0.95;
}

/* ===== OPTIMISATIONS RESPONSIVE ===== */

/* Mobile Portrait */

@media (max-width: 480px) {
  .logo-image {
    height: 60px !important;
    max-height: 60px !important;
    max-width: 160px !important;
  }
}

/* Mobile Landscape */

@media (max-width: 768px) and (orientation: landscape) {
  .logo-image {
    height: 70px !important;
    max-height: 70px !important;
    max-width: 180px !important;
  }
}

/* Tablet */

@media (min-width: 769px) and (max-width: 1024px) {
  .logo-image {
    height: 90px !important;
    max-height: 90px !important;
    max-width: 240px !important;
  }
}

/* Desktop */

@media (min-width: 1025px) and (max-width: 1440px) {
  .logo-image {
    height: 105px !important;
    max-height: 105px !important;
    max-width: 280px !important;
  }
}

/* Large Desktop */

@media (min-width: 1441px) {
  .logo-image {
    height: 120px !important;
    max-height: 120px !important;
    max-width: 320px !important;
  }
}

/* ===== CORRECTIONS POUR NAVIGATEURS SPÉCIFIQUES ===== */

/* Safari optimizations */

@supports (-webkit-appearance: none) {
  .logo-image {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
  }
}

/* Firefox optimizations */

@-moz-document url-prefix() {
  .logo-image {
    image-rendering: -moz-crisp-edges;
  }
}

/* ===== FALLBACK POUR ERREURS DE CHARGEMENT ===== */

.logo-image[src*="data:image/svg+xml"] {
  background: transparent;
  border-radius: 8px;
  padding: 8px 16px;
  color: white;
  font-family: 'Chillax', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

.logo-container,
.logo-image {
  will-change: transform;
  transform: translateZ(0);
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  .logo-image {
    transition-duration: 0.1s;
  }

  .logo-image:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .logo-image {
    filter: contrast(1.2);
  }
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
  .logo-image {
    filter: brightness(0.9);
  }

  .logo-image:hover {
    filter: brightness(1.1) contrast(1.1);
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ============================================
   BOUTONS 3D AVEC TRACKING SOURIS PARFAIT (v2 - Effet Wahou)
   Effet 3D qui suit la souris avec perspective dynamique et animations subtiles.
   RÉSULTAT PARFAIT - SOPHISTIQUÉ ET ÉLÉGANT
   ============================================ */

/* ===== VARIABLES 3D TRACKING PARFAIT ===== */

:root {
  /* Couleurs des gradients élégants */
  --mouse3d-violet-deep: rgba(147, 51, 234, 0.9);
  --mouse3d-violet-medium: rgba(126, 34, 206, 0.85);
  --mouse3d-violet-light: rgba(168, 85, 247, 0.8);
  --mouse3d-indigo-primary: rgba(99, 102, 241, 0.85);
  --mouse3d-indigo-secondary: rgba(79, 70, 229, 0.8);
  --mouse3d-indigo-dark: rgba(67, 56, 202, 0.9);
  /* Transparences pour dégradés vers noir */
  --mouse3d-black-fade: rgba(0, 0, 0, 0.25);
  --mouse3d-black-subtle: rgba(0, 0, 0, 0.15);
  --mouse3d-black-whisper: rgba(0, 0, 0, 0.08);
  /* Reflets élégants */
  --mouse3d-highlight: rgba(255, 255, 255, 0.3);
  --mouse3d-highlight-subtle: rgba(255, 255, 255, 0.15);
  --mouse3d-highlight-soft: rgba(255, 255, 255, 0.08);
  /* Variables 3D pour le tracking parfait */
  --mouse-x: 0;
  --mouse-y: 0;
  --rotation-x: 0deg;
  --rotation-y: 0deg;
  --tilt-intensity: 5deg;
  --shine-x: 50%;
  --shine-y: 50%;
  --border-glow: 0;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --perspective-intensity: 1000px;
  --transform-origin: center center;
  /* Transitions fluides */
  --transition-speed: 0.15s;
  --tracking-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== CONTENEUR PRINCIPAL AVEC PERSPECTIVE ===== */

.mouse3d-container {
  position: relative;
  display: inline-block;
  perspective: var(--perspective-intensity);
  perspective-origin: center center;
  transform-style: preserve-3d;
}

/* ===== BOUTON DE BASE AVEC TRACKING 3D ===== */

.btn-mouse3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  outline: none;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform, box-shadow, filter;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4;
  min-height: 36px;
  min-width: 36px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
  /* EFFET ÉLÉGANT: État de base avec transformation 3D stable */
  transform: rotateX(var(--rotation-x)) rotateY(var(--rotation-y)) translateZ(0px);
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), 
              box-shadow 0.4s ease-out,
              filter 0.4s ease-out,
              -webkit-backdrop-filter 0.3s ease;
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), 
              box-shadow 0.4s ease-out,
              filter 0.4s ease-out,
              backdrop-filter 0.3s ease;
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), 
              box-shadow 0.4s ease-out,
              filter 0.4s ease-out,
              backdrop-filter 0.3s ease, 
              -webkit-backdrop-filter 0.3s ease;
  /* Assurer que la zone cliquable reste stable */
  transform-origin: center center;
  backface-visibility: hidden;
  box-shadow: 0px 0px 20px 2px rgba(42, 23, 153, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Contour lumineux dégradé qui suit la souris */

.btn-mouse3d::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    calc(var(--mouse-x) * 360deg + 45deg), 
    var(--mouse3d-violet-deep) 0%,
    var(--mouse3d-indigo-primary) 25%,
    var(--mouse3d-violet-light) 50%,
    var(--mouse3d-indigo-secondary) 75%,
    var(--mouse3d-violet-deep) 100%
  );
  border-radius: 10px;
  z-index: -1;
  opacity: 0.4;
  transition: background 0.2s ease, opacity 0.2s ease;
  transform: translateZ(-1px);
}

/* Effet glow qui suit la perspective */

.btn-mouse3d::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: 
    radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      rgba(147, 51, 234, 0.5) 0%,
      rgba(99, 102, 241, 0.3) 30%,
      transparent 70%
    );
  border-radius: 12px;
  z-index: -2;
  filter: blur(8px);
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  transform: translateZ(-2px) scale(1.05);
}

/* ===== TRACKING MOUSEOVER AVEC PERSPECTIVE DYNAMIQUE ===== */

.btn-mouse3d:hover {
  /* Amplification 3D au hover (subtile) */
  --tilt-intensity: 20deg;
  /* Glassmorphisme intensifié avec opacité complète */
  background: transparent;
  border: none;
  opacity: 1;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 0 40px rgba(147, 51, 234, 0.6),
    0 0 70px rgba(99, 102, 241, 0.5);
  /* EFFET WAHOU: Tracking 3D subtil au hover - limité pour stabilité */
  transform: 
    perspective(var(--perspective-intensity))
    rotateX(var(--rotation-x))
    rotateY(var(--rotation-y))
    translateZ(3px)
    scale(1.008);
  /* Maintenir la continuité de la transformation sans reset */
  animation: none;
}

.btn-mouse3d:hover::before {
  opacity: 0.9;
  animation: border-pulse 2s ease-in-out infinite;
}

.btn-mouse3d:hover {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
  color: #ffffff !important;
  box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.8), 0px 0px 15px 2px rgba(255, 255, 255, 0.1);
  transform: perspective(var(--perspective-intensity)) rotateX(var(--rotation-x)) rotateY(var(--rotation-y)) translateZ(8px) scale(1.02);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-mouse3d:hover::after {
  opacity: 0.9;
  background: 
    radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      rgba(85, 60, 220, 0.8) 0%,
      rgba(42, 23, 153, 0.6) 50%,
      transparent 90%
    );
  filter: blur(15px);
  animation: moving-glow 3s ease-in-out infinite alternate;
}

/* ===== ANIMATIONS ===== */

/* Animation de base supprimée pour éviter les conflits de positioning */

@keyframes moving-glow {
  0% {
    transform: translateZ(-2px) translateX(-15%) translateY(-15%) scale(1.1);
  }

  100% {
    transform: translateZ(-2px) translateX(15%) translateY(15%) scale(1.1);
  }
}

@keyframes subtle-glow {
  0%, 100% {
    opacity: 0.7;
    filter: blur(10px);
    transform: translateZ(-2px) scale(1.06);
  }

  50% {
    opacity: 1;
    filter: blur(14px);
    transform: translateZ(-2px) scale(1.1);
  }
}

@keyframes border-pulse {
  0%, 100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

/* ===== VARIANTES DE BOUTONS AVEC TRACKING ===== */

/* Bouton Primary (violet-indigo) */

.btn-mouse3d-primary {
  background: linear-gradient(
    calc(var(--mouse-y) * 45deg + 135deg),
    rgba(79, 70, 229, 0.9),
    rgba(147, 51, 234, 0.9)
  );
}

.btn-mouse3d-primary:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Bouton Secondary (gris) */

.btn-mouse3d-secondary {
  background: linear-gradient(
    calc(var(--mouse-y) * 45deg + 135deg),
    rgba(107, 114, 128, 0.9),
    rgba(75, 85, 99, 0.9)
  );
}

.btn-mouse3d-secondary:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Bouton Contact (spécial avec animation) */

.btn-mouse3d-contact {
  background: linear-gradient(
    calc(var(--mouse-x) * 90deg + 135deg),
    rgba(99, 102, 241, 0.95),
    rgba(168, 85, 247, 0.95)
  );
  padding: 18px 40px;
  font-size: 1.1rem;
  /* L'animation idle-float est déjà appliquée à tous les .btn-mouse3d */
}

.btn-mouse3d-contact:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Bouton Success (vert) */

.btn-mouse3d-success {
  background: linear-gradient(
    calc(var(--mouse-y) * 45deg + 135deg),
    rgba(34, 197, 94, 0.9),
    rgba(16, 185, 129, 0.9)
  );
}

.btn-mouse3d-success:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Bouton Danger (rouge) */

.btn-mouse3d-danger {
  background: linear-gradient(
    calc(var(--mouse-y) * 45deg + 135deg),
    rgba(239, 68, 68, 0.9),
    rgba(220, 38, 38, 0.9)
  );
}

.btn-mouse3d-danger:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ===== ÉTATS ET ACCESSIBILITÉ ===== */

.btn-mouse3d:active {
  /* EFFET WAHOU: Enfoncement rapide et flash lumineux */
  transform: 
    perspective(var(--perspective-intensity))
    rotateX(var(--rotation-x))
    rotateY(var(--rotation-y))
    translateZ(-2px)
    scale(0.99);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 80px rgba(190, 150, 255, 1),
    0 0 120px rgba(150, 150, 255, 0.9);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
  animation: none;
  opacity: 1;
}

.btn-mouse3d:focus {
  outline: none;
  box-shadow: 
    0 16px 64px rgba(0, 0, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 0 0 2px rgba(99, 102, 241, 0.6),
    0 0 0 4px rgba(99, 102, 241, 0.3);
}

.btn-mouse3d:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  animation: none !important;
  --rotation-x: 0deg;
  --rotation-y: 0deg;
}

/* ===== TAILLES AVEC TRACKING ===== */

.btn-mouse3d-small {
  padding: 6px 12px;
  font-size: 0.75rem;
  min-height: 32px;
  border-radius: 8px;
}

.btn-mouse3d-large {
  padding: 12px 24px;
  font-size: 1rem;
  min-height: 44px;
  border-radius: 8px;
}

.btn-mouse3d-full {
  width: 100%;
  justify-content: center;
}

/* ===== STYLES POUR ICÔNES AVEC TRACKING ===== */

.btn-mouse3d-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transform: translateZ(2px);
}

.btn-mouse3d-icon-left {
  margin-right: 8px;
}

.btn-mouse3d-icon-right {
  margin-left: 8px;
}

.btn-mouse3d-icon-only {
  padding: 12px;
  min-width: 48px;
  min-height: 48px;
}

/* ===== ADAPTATIONS RESPONSIVE ===== */

@media (max-width: 768px) {
  .btn-mouse3d {
    /* Simplifier le tracking sur mobile */
    transform: perspective(500px) translateZ(0px);
    transition: transform 0.2s ease;
    animation: none; /* Désactiver le float sur mobile pour perf */
  }

  .btn-mouse3d:hover {
    transform: perspective(500px) translateZ(5px) scale(1.02);
  }

  .btn-mouse3d:active {
    transform: perspective(500px) translateZ(-2px) scale(0.98);
    animation: none;
    box-shadow: none;
  }

  /* Réduire les effets sur mobile */

  .btn-mouse3d::before,
  .btn-mouse3d::after {
    opacity: 0.2 !important;
    animation: none !important;
  }
}

/* Réduction de mouvement pour accessibilité */

@media (prefers-reduced-motion: reduce) {
  .btn-mouse3d {
    transition: none;
    transform: none !important;
    animation: none !important;
  }

  .btn-mouse3d::before,
  .btn-mouse3d::after {
    animation: none !important;
  }
}

/* ===== CLASSE UTILITAIRE POUR APPLIQUER LE TRACKING ===== */

/* Cette classe n'est plus nécessaire car le tracking est appliqué par défaut */

.mouse-3d-tracking .btn-mouse3d {
  /* Styles de base déjà dans .btn-mouse3d */
}

/* purgecss end ignore */

/* purgecss start ignore */

/* =============================================================================
   OLIVE SUPREME STYLES - Design Ultime et Performance Extrême
   Architecture CSS moderne pour le Tamagotchi révolutionnaire
   Version: 3.0.0-Supreme
   ============================================================================= */

:root {
  /* Palette de couleurs Supreme */
  --supreme-primary: rgba(0, 255, 136, 0.95);
  --supreme-secondary: rgba(147, 51, 234, 0.9);
  --supreme-accent: rgba(255, 215, 0, 0.85);
  --supreme-danger: rgba(239, 68, 68, 0.9);
  --supreme-success: rgba(34, 197, 94, 0.9);
  --supreme-warning: rgba(245, 158, 11, 0.9);
  /* Glassmorphisme avancé */
  --glass-ultra-strong: rgba(0, 0, 0, 0.15);
  --glass-ultra-medium: rgba(0, 0, 0, 0.1);
  --glass-ultra-light: rgba(0, 0, 0, 0.05);
  /* Noir transparent gradients */
  --glass-dark-strong: rgba(0, 0, 0, 0.4);
  --glass-dark-medium: rgba(0, 0, 0, 0.2);
  --glass-dark-light: rgba(0, 0, 0, 0.1);
  /* Reflets et highlights */
  --glass-shine: rgba(0, 0, 0, 0.3);
  --glass-shimmer: rgba(0, 0, 0, 0.15);
  /* Animations et transitions */
  --supreme-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --supreme-duration-fast: 0.2s;
  --supreme-duration-normal: 0.3s;
  --supreme-duration-slow: 0.5s;
  /* Shadows ultime */
  --shadow-supreme: 
        0 0 40px rgba(0, 255, 136, 0.4),
        inset 0 1px 0 rgba(0, 0, 0, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.2);
  --shadow-floating: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.05);
  /* Performance optimizations */
  --gpu-acceleration: translateZ(0);
  /* 🔊 Audio Controls Colors */
  --audio-primary: rgba(34, 197, 94, 0.9);
  --audio-muted: rgba(156, 163, 175, 0.8);
  --audio-background: rgba(0, 0, 0, 0.3);
  --volume-track: rgba(255, 255, 255, 0.2);
  --volume-thumb: var(--supreme-primary);
}

/* =============================================================================
   CONTENEUR PRINCIPAL OLIVE SUPREME
   ============================================================================= */

.olive-supreme-container {
  position: relative;
  width: min(650px, 95vw);
  min-height: 750px;
  max-height: min(900px, 95vh);
  /* Glassmorphisme ultime */
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid var(--supreme-primary);
  border-radius: 30px;
  padding: 0;
  /* Ombres et effets */
  box-shadow: var(--shadow-supreme);
  backdrop-filter: blur(25px) saturate(1.8);
  -webkit-backdrop-filter: blur(25px) saturate(1.8);
  /* Performance */
  will-change: transform;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* Animation d'entrée */
  animation: supremeEntrance 0.8s var(--supreme-transition);
  /* Utilisabilité */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  /* Assurer les interactions */
  pointer-events: auto;
}

@keyframes supremeEntrance {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8) rotateY(15deg);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    filter: blur(0);
  }
}

.olive-supreme-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: transparent
        45deg, 
        var(--supreme-primary) 0%,
        var(--supreme-secondary) 25%,
        var(--supreme-accent) 50%,
        var(--supreme-secondary) 75%,
        var(--supreme-primary) 100%
    );
  border-radius: 33px;
  z-index: -1;
  animation: supremeBorderFlow 4s linear infinite;
  opacity: 0.8;
}

@keyframes supremeBorderFlow {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 0.8;
  }

  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

/* États spéciaux du conteneur */

.olive-supreme-container.loading {
  pointer-events: none;
}

.olive-supreme-container.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   INTERFACE ADAPTATIVE
   ============================================================================= */

.olive-interface-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Mode complet */

.olive-interface-full {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Header interface */

.interface-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px 15px;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.olive-info {
  flex: 1;
}

.olive-name {
  font-family: 'Chillax', monospace;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--supreme-primary);
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-badge {
  background: transparent;
  color: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 300;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.settings-button,
.close-button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: auto;
  z-index: 20;
  position: relative;
}

.settings-button {
  background: transparent;
  color: var(--supreme-accent);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.close-button {
  background: transparent;
  color: var(--supreme-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.settings-button:hover {
  background: transparent;
  transform: scale(1.05) rotate(45deg);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.close-button:hover {
  background: transparent;
  transform: scale(1.05) rotate(90deg);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* Navigation par onglets */

.interface-tabs {
  display: flex;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 10px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  border-radius: 12px 12px 0 0;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  z-index: 15;
}

.tab::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transform: scaleX(0);
  transition: transform var(--supreme-duration-normal) var(--supreme-transition);
}

.tab:hover {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

.tab.active {
  background: transparent;
  color: var(--supreme-primary);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.tab.active::before {
  transform: scaleX(1);
}

.tab-icon {
  font-size: 1.2rem;
}

.tab-label {
  font-size: 0.85rem;
  font-weight: 200;
}

/* Contenu principal */

.interface-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* =============================================================================
   STATS ET BARRES DE PROGRESSION
   ============================================================================= */

.primary-stats {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.stat-group,
.stat-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  position: relative;
  overflow: hidden;
}

.stat-group:hover,
.stat-bar-container:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-floating);
}

.stat-icon {
  font-size: 1.4rem;
  width: 30px;
  text-align: center;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

.stat-name {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.9);
  min-width: 80px;
}

.stat-bar,
.stat-bar-track {
  flex: 1;
  height: 10px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.stat-bar-fill,
.stat-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s var(--supreme-transition);
  position: relative;
  overflow: hidden;
}

.stat-bar-fill::after,
.stat-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: transparent
        90deg, 
        transparent, 
        rgba(0, 0, 0, 0.4), 
        transparent
    );
  animation: statShine 2s infinite;
}

@keyframes statShine {
  0% { left: -100%;
  }

  100% { left: 100%;
  }
}

.stat-value {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.95);
  min-width: 35px;
  text-align: right;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Stats secondaires */

.secondary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.mini-stat {
  padding: 8px 12px;
  background: transparent;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
}

.mini-stat:hover {
  background: transparent;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   AFFICHAGE D'OLIVE ET HUMEUR
   ============================================================================= */

.olive-display-section {
  margin: 25px 0;
  display: flex;
  justify-content: center;
}

.olive-container {
  text-align: center;
  position: relative;
  padding: 30px;
  background: transparent;
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  transition: all var(--supreme-duration-slow) var(--supreme-transition);
}

.olive-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: transparent
        45deg, 
        transparent 0%,
        var(--supreme-primary) 25%,
        transparent 50%,
        var(--supreme-secondary) 75%,
        transparent 100%
    );
  border-radius: 27px;
  z-index: -1;
  animation: oliveAura 6s ease-in-out infinite;
}

@keyframes oliveAura {
  0%, 100% { opacity: 0.3; transform: scale(1);
  }

  50% { opacity: 0.7; transform: scale(1.02);
  }
}

.main-olive {
  transition: all var(--supreme-duration-slow) var(--supreme-transition);
  cursor: pointer;
  filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.3));
}

.main-olive:hover {
  transform: scale(1.05) rotate(2deg);
  filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.6));
}

/* Indicateur d'humeur */

.mood-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 20px;
  background: transparent;
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.mood-emoji {
  font-size: 1.8rem;
  animation: moodPulse 2.5s ease-in-out infinite;
}

@keyframes moodPulse {
  0%, 100% { transform: scale(1);
  }

  50% { transform: scale(1.15);
  }
}

.mood-details {
  text-align: left;
}

.mood-name {
  font-size: 1rem;
  font-weight: 300;
  text-shadow: 0 0 10px currentColor;
}

.mood-score {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 2px;
}

/* Animations d'humeur */

.mood-indicator.bounce {
  animation: moodBounce 1s ease-in-out infinite;
}

.mood-indicator.pulse {
  animation: moodPulseStrong 1.5s ease-in-out infinite;
}

.mood-indicator.gentle-pulse {
  animation: moodPulse 3s ease-in-out infinite;
}

.mood-indicator.sway {
  animation: moodSway 2s ease-in-out infinite;
}

@keyframes moodBounce {
  0%, 100% { transform: translateY(0);
  }

  50% { transform: translateY(-5px);
  }
}

@keyframes moodPulseStrong {
  0%, 100% { transform: scale(1);
  }

  50% { transform: scale(1.2);
  }
}

@keyframes moodSway {
  0%, 100% { transform: rotate(0deg);
  }

  25% { transform: rotate(2deg);
  }

  75% { transform: rotate(-2deg);
  }
}

/* =============================================================================
   ACTIONS ET BOUTONS
   ============================================================================= */

.actions-section {
  margin-top: 25px;
}

.actions-section h3 {
  color: rgba(0, 0, 0, 0.9);
  font-size: 1.1rem;
  margin-bottom: 15px;
  text-align: center;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.action-button,
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 300;
  cursor: pointer;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  pointer-events: auto;
  z-index: 10;
}

.action-button::before,
.action-btn::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: transparent
        45deg, 
        var(--supreme-primary) 0%,
        var(--supreme-secondary) 25%,
        var(--supreme-accent) 50%,
        var(--supreme-secondary) 75%,
        var(--supreme-primary) 100%
    );
  border-radius: 19px;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--supreme-duration-normal) var(--supreme-transition);
}

.action-button:hover::before,
.action-btn:hover::before {
  opacity: 0.6;
}

.action-button:hover,
.action-btn:hover {
  transform: perspective(1000px) rotateX(-8deg) rotateY(8deg) translateY(-4px) scale(1.05);
  box-shadow: 
        0 15px 40px rgba(0, 255, 136, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.8);
  border-color: var(--supreme-primary);
}

.action-button:active,
.action-btn:active {
  transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(2px) scale(0.98);
}

.action-button.disabled,
.action-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.action-button.pressed,
.action-btn.pressed {
  transform: scale(0.95);
  background: transparent;
}

.action-icon,
.action-emoji {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
}

.action-button:hover .action-icon,
.action-button:hover .action-emoji,
.action-btn:hover .action-icon,
.action-btn:hover .action-emoji {
  filter: drop-shadow(0 0 15px var(--supreme-primary));
  transform: scale(1.1);
}

.action-name {
  font-size: 0.8rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Indicateurs d'efficacité */

.effectiveness-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
}

.cooldown-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--supreme-warning);
  font-weight: 400;
  font-size: 0.9rem;
}

/* =============================================================================
   MODE COMPACT
   ============================================================================= */

.olive-interface-compact {
  padding: 15px;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  max-width: 300px;
}

.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.quick-stats {
  display: flex;
  gap: 8px;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border-radius: 12px;
  font-size: 0.7rem;
}

.quick-stat-icon {
  font-size: 1rem;
}

.quick-stat-bar {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  transition: width var(--supreme-duration-normal) var(--supreme-transition);
}

.quick-stat-value {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.9);
}

.compact-olive-display {
  text-align: center;
  margin: 15px 0;
}

.compact-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.compact-action {
  padding: 12px 8px;
  font-size: 0.7rem;
}

/* Toggle compact */

.compact-toggle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: auto;
  z-index: 20;
}

.compact-toggle:hover {
  background: transparent;
  transform: scale(1.1);
}

/* =============================================================================
   SYSTÈME DE NOTIFICATIONS
   ============================================================================= */

.notification-system {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 350px;
}

.notification {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: transparent;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  color: rgba(0, 0, 0, 0.95);
  font-size: 0.9rem;
  font-weight: 200;
  box-shadow: var(--shadow-floating);
  animation: notificationSlideIn 0.5s var(--supreme-transition);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  animation: notificationProgress 5s linear;
}

.notification.success::before { background: transparent;
}

.notification.warning::before { background: transparent;
}

.notification.error::before { background: transparent;
}

.notification.achievement::before { background: transparent;
}

@keyframes notificationSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes notificationProgress {
  0% { height: 100%;
  }

  100% { height: 0%;
  }
}

.notification-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
  flex-shrink: 0;
}

.notification-message {
  flex: 1;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.notification-dismiss {
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  font-size: 1.2rem;
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
  flex-shrink: 0;
}

.notification-dismiss:hover {
  color: rgba(0, 0, 0, 1);
  background: transparent;
}

/* =============================================================================
   PROGRESS BAR ET ÉLÉMENTS UI
   ============================================================================= */

.progress-container {
  margin: 8px 0;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.8);
}

.progress-numbers {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.6);
}

.progress-track {
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s var(--supreme-transition);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: transparent
        90deg, 
        transparent, 
        rgba(0, 0, 0, 0.3), 
        transparent
    );
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% { left: -100%;
  }

  100% { left: 100%;
  }
}

/* =============================================================================
   LOADING ET ÉTATS SPÉCIAUX
   ============================================================================= */

.olive-supreme-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
}

.loading-animation {
  font-size: 3rem;
  animation: loadingSpin 2s linear infinite;
  margin-bottom: 20px;
}

@keyframes loadingSpin {
  0% { transform: rotate(0deg);
  }

  100% { transform: rotate(360deg);
  }
}

.olive-supreme-loading p {
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.1rem;
  margin: 0;
}

/* États d'erreur */

.olive-supreme-error,
.olive-supreme-crash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: transparent;
  border: 2px solid var(--supreme-danger);
  border-radius: 20px;
}

.olive-supreme-error h2,
.olive-supreme-crash h1 {
  color: var(--supreme-danger);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.olive-supreme-error p,
.olive-supreme-crash p {
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;
}

.olive-supreme-error button,
.olive-supreme-crash button {
  background: transparent;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 300;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
}

.olive-supreme-error button:hover,
.olive-supreme-crash button:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-floating);
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 768px) {
  .olive-supreme-container {
    width: 98vw;
    min-height: 92vh;
    max-height: 95vh;
    border-radius: 20px;
  }

  .interface-header {
    padding: 15px 20px 10px;
  }

  .olive-name {
    font-size: 1.1rem;
  }

  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .secondary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .interface-tabs {
    padding: 0 5px;
  }

  .tab {
    padding: 10px 12px;
  }

  .tab-label {
    display: none;
  }

  .notification-system {
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .olive-supreme-container {
    border-radius: 15px;
    padding: 0;
  }

  .interface-content {
    padding: 15px;
  }

  .olive-container {
    padding: 20px;
  }

  .actions-grid {
    grid-template-columns: 1fr 1fr;
  }

  .action-button,
    .action-btn {
    padding: 12px 8px;
  }

  .action-emoji,
    .action-icon {
    font-size: 1.5rem;
  }

  .action-name {
    font-size: 0.75rem;
  }
}

/* =============================================================================
   ANIMATIONS ET MICRO-INTERACTIONS AVANCÉES
   ============================================================================= */

@keyframes float {
  0%, 100% { transform: translateY(0px);
  }

  50% { transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--supreme-primary);
  }

  50% {
    box-shadow: 0 0 40px var(--supreme-primary);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* =============================================================================
   🎯 LAYOUT RÉVOLUTIONNAIRE - INTÉGRATION SVG + STATS PARFAITE
   ============================================================================= */

.revolutionary-layout {
  min-height: 100vh;
  background: var(--supreme-gradient-dark);
  overflow-x: hidden;
}

.perfect-integration-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 32px;
  padding: 20px 32px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 80vh;
  align-items: start;
}

/* =============================================================================
   🎭 SVG OLIVE AVEC STATS INTÉGRÉES - RÉVOLUTIONNAIRE
   ============================================================================= */

.olive-display-with-stats {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 32px;
  border: 2px solid rgba(52, 211, 153, 0.3);
  padding: 32px;
  box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(52, 211, 153, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}

.olive-container-perfect {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.game-olive-wrapper-enhanced {
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 30px rgba(52, 211, 153, 0.4));
}

.game-olive-wrapper-enhanced:hover {
  transform: scale(1.05) translateY(-5px);
  filter: drop-shadow(0 0 50px rgba(52, 211, 153, 0.6));
}

.game-olive-emotional-perfect {
  animation: gentleFloat 4s ease-in-out infinite;
}

/* Stats flottantes autour du SVG */

.stats-around-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-stat {
  position: absolute;
  animation: statFloat 3s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-position-0 {
  top: 20%;
  left: -20%;
  animation-delay: 0s;
}

.stat-position-1 {
  top: 50%;
  right: -25%;
  animation-delay: 1s;
}

.stat-position-2 {
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 2s;
}

.stat-bubble {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 12px 16px;
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(52, 211, 153, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-bubble:hover {
  transform: scale(1.1);
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(52, 211, 153, 0.4);
}

.stat-icon-float {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.5));
}

.stat-value-float {
  font-weight: 400;
  font-size: 0.9rem;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.stat-bar-mini {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: 3px;
  border-radius: 2px;
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* =============================================================================
   🎮 MENU ACTIONS COMPACT - DESIGN PERFECTIONNÉ
   ============================================================================= */

.actions-menu-compact {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(52, 211, 153, 0.1);
}

.actions-menu-compact .interaction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 400px;
}

.actions-menu-compact .tamagotchi-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(6, 182, 212, 0.05));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(52, 211, 153, 0.2);
  border-radius: 16px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 80px;
  overflow: hidden;
}

.actions-menu-compact .tamagotchi-btn:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(52, 211, 153, 0.5);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(6, 182, 212, 0.1));
  box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(52, 211, 153, 0.3);
}

.actions-menu-compact .action-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.4));
  transition: all 0.3s ease;
}

.actions-menu-compact .tamagotchi-btn:hover .action-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 25px rgba(52, 211, 153, 0.6));
}

.actions-menu-compact .action-label {
  font-size: 0.8rem;
  font-weight: 300;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.actions-menu-compact .action-count {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(52, 211, 153, 0.8);
  color: #000000;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

/* =============================================================================
   🌟 MODALES RÉVOLUTIONNAIRES - SVG MEGA
   ============================================================================= */

.modal-olive-display-revolutionary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.05), rgba(6, 182, 212, 0.02));
  border-radius: 32px;
  border: 2px solid rgba(52, 211, 153, 0.2);
  margin-bottom: 40px;
  position: relative;
  overflow: visible;
}

.modal-olive-mega-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.modal-olive-svg-mega {
  filter: drop-shadow(0 0 50px rgba(52, 211, 153, 0.6));
  animation: modalOliveFloat 5s ease-in-out infinite;
}

.olive-stats-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.modal-stat-bubble {
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  padding: 12px 20px;
  box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 100px;
  animation: modalStatFloat 4s ease-in-out infinite;
}

.modal-stat-0 {
  top: 10%;
  left: -30%;
  animation-delay: 0s;
}

.modal-stat-1 {
  top: 40%;
  right: -35%;
  animation-delay: 1.5s;
}

.modal-stat-2 {
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 3s;
}

.modal-stat-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.6));
}

.modal-stat-value {
  font-weight: 400;
  font-size: 1.1rem;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4);
}

.olive-reaction-text-revolutionary {
  text-align: center;
  max-width: 600px;
}

.reaction-mega {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.reaction-emoji {
  font-size: 3rem;
  filter: drop-shadow(0 0 30px rgba(52, 211, 153, 0.6));
  animation: emojiPulse 2s ease-in-out infinite;
}

.reaction-primary {
  font-size: 1.8rem;
  font-weight: 400;
  background: linear-gradient(135deg, #34d399, #06b6d4, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(52, 211, 153, 0.3);
  animation: textShimmer 3s ease-in-out infinite;
}

.reaction-secondary {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
  line-height: 1.4;
}

/* =============================================================================
   🎨 ANIMATIONS RÉVOLUTIONNAIRES
   ============================================================================= */

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg);
  }

  33% { transform: translateY(-8px) rotate(1deg);
  }

  66% { transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes statFloat {
  0%, 100% { transform: translateY(0px) scale(1);
  }

  50% { transform: translateY(-12px) scale(1.05);
  }
}

@keyframes modalOliveFloat {
  0%, 100% { transform: translateY(0px) scale(1) rotate(0deg);
  }

  25% { transform: translateY(-15px) scale(1.02) rotate(1deg);
  }

  75% { transform: translateY(-8px) scale(0.98) rotate(-1deg);
  }
}

@keyframes modalStatFloat {
  0%, 100% { transform: translateY(0px) scale(1);
  }

  50% { transform: translateY(-20px) scale(1.1);
  }
}

@keyframes emojiPulse {
  0%, 100% { transform: scale(1);
  }

  50% { transform: scale(1.1);
  }
}

@keyframes textShimmer {
  0%, 100% { filter: brightness(1);
  }

  50% { filter: brightness(1.2);
  }
}

/* =============================================================================
   🎭 NOUVELLES ANIMATIONS ÉMOTIONNELLES RÉVOLUTIONNAIRES
   ============================================================================= */

@keyframes sick-wobble {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  25% { transform: translate(-52%, -48%) rotate(-2deg) scale(0.95);
  }

  75% { transform: translate(-48%, -52%) rotate(2deg) scale(1.05);
  }
}

@keyframes party-bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  20% { transform: translate(-50%, -50%) scale(1.2) rotate(-10deg);
  }

  40% { transform: translate(-50%, -50%) scale(0.9) rotate(10deg);
  }

  60% { transform: translate(-50%, -50%) scale(1.1) rotate(-5deg);
  }

  80% { transform: translate(-50%, -50%) scale(1.05) rotate(5deg);
  }
}

@keyframes deep-think {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1;
  }

  25% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8;
  }

  50% { transform: translate(-50%, -50%) scale(0.95); opacity: 1;
  }

  75% { transform: translate(-50%, -50%) scale(1.02); opacity: 0.9;
  }
}

@keyframes dream-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px) scale(1);
  }

  33% { transform: translate(-50%, -50%) translateY(-8px) scale(1.02);
  }

  66% { transform: translate(-50%, -50%) translateY(-4px) scale(0.98);
  }
}

@keyframes laugh-bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
  }

  10% { transform: translate(-50%, -50%) scale(1.15);
  }

  20% { transform: translate(-50%, -50%) scale(0.9);
  }

  30% { transform: translate(-50%, -50%) scale(1.1);
  }

  40% { transform: translate(-50%, -50%) scale(1);
  }

  50% { transform: translate(-50%, -50%) scale(1.05);
  }

  60% { transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cool-lean {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) skewX(0deg);
  }

  50% { transform: translate(-50%, -50%) rotate(-3deg) skewX(-2deg);
  }
}

@keyframes work-focus {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
  }

  50% { transform: translate(-50%, -50%) scale(0.95);
  }
}

@keyframes magic-sparkle {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: brightness(1) hue-rotate(0deg);
  }

  25% {
    transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
    filter: brightness(1.3) hue-rotate(90deg);
  }

  50% {
    transform: translate(-50%, -50%) scale(0.9) rotate(180deg);
    filter: brightness(1.1) hue-rotate(180deg);
  }

  75% {
    transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
    filter: brightness(1.2) hue-rotate(270deg);
  }
}

@keyframes angry-shake {
  0%, 100% { transform: translate(-50%, -50%);
  }

  10% { transform: translate(-52%, -50%);
  }

  20% { transform: translate(-48%, -50%);
  }

  30% { transform: translate(-50%, -48%);
  }

  40% { transform: translate(-50%, -52%);
  }

  50% { transform: translate(-52%, -48%);
  }

  60% { transform: translate(-48%, -52%);
  }

  70% { transform: translate(-50%, -50%);
  }

  80% { transform: translate(-51%, -49%);
  }

  90% { transform: translate(-49%, -51%);
  }
}

@keyframes sad-droop {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
  }

  50% { transform: translate(-50%, -45%) scale(0.95);
  }
}

@keyframes surprise-jump {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0px);
  }

  20% { transform: translate(-50%, -50%) scale(1.3) translateY(-15px);
  }

  40% { transform: translate(-50%, -50%) scale(0.8) translateY(5px);
  }

  60% { transform: translate(-50%, -50%) scale(1.1) translateY(-5px);
  }

  80% { transform: translate(-50%, -50%) scale(1.05) translateY(0px);
  }
}

/* =============================================================================
   🚀 GRILLES MODALES RÉVOLUTIONNAIRES 98VW - OPTIMISATION TOTALE
   ============================================================================= */

/* Grilles alimentaires révolutionnaires */

.food-categories-revolutionary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding: 32px;
  max-width: none;
  width: 100%;
}

.food-categories-revolutionary .food-category {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(52, 211, 153, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-categories-revolutionary .food-category:hover {
  transform: translateY(-8px);
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(52, 211, 153, 0.3);
}

.food-categories-revolutionary .category-header {
  padding: 20px 24px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.food-categories-revolutionary .category-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

.food-categories-revolutionary .category-header h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
  margin: 0;
  text-align: center;
}

.food-categories-revolutionary .category-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  padding: 24px;
}

.food-categories-revolutionary .item-card {
  position: relative;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(6, 182, 212, 0.05));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 140px;
  overflow: hidden;
}

.food-categories-revolutionary .item-card:hover {
  transform: translateY(-5px) scale(1.03);
  border-color: rgba(52, 211, 153, 0.5);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(6, 182, 212, 0.1));
  box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(52, 211, 153, 0.4);
}

.food-categories-revolutionary .item-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 20px rgba(52, 211, 153, 0.5));
  animation: iconPulse 2s ease-in-out infinite;
}

.food-categories-revolutionary .item-name {
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  font-size: 0.9rem;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.3);
}

.food-categories-revolutionary .item-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.food-categories-revolutionary .effect {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.food-categories-revolutionary .item-rarity {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.6rem;
  text-transform: uppercase;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.8);
  color: #000000;
}

/* Boissons révolutionnaires */

.drink-selection-revolutionary {
  padding: 32px;
  max-width: none;
  width: 100%;
}

.category-items-mega.drinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: none;
}

.category-items-mega .item-card.large {
  min-height: 180px;
  padding: 28px 20px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(52, 211, 153, 0.08));
}

.category-items-mega .item-icon-large {
  font-size: 3.5rem;
  filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.6));
  animation: drinkFloat 3s ease-in-out infinite;
}

/* Jeux révolutionnaires */

.play-categories-revolutionary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  padding: 32px;
  max-width: none;
  width: 100%;
}

.play-categories-revolutionary .play-category {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.05));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 24px;
  border: 2px solid rgba(139, 92, 246, 0.2);
  overflow: hidden;
  box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(139, 92, 246, 0.2);
}

.play-categories-revolutionary .category-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 24px;
}

.play-categories-revolutionary .item-card.play-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.05));
  border: 2px solid rgba(139, 92, 246, 0.2);
  min-height: 160px;
}

.play-categories-revolutionary .item-card.play-card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(167, 139, 250, 0.1));
  box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(139, 92, 246, 0.4);
}

/* Animations pour items */

@keyframes iconPulse {
  0%, 100% { transform: scale(1);
  }

  50% { transform: scale(1.05);
  }
}

@keyframes drinkFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg);
  }

  33% { transform: translateY(-5px) rotate(2deg);
  }

  66% { transform: translateY(-2px) rotate(-2deg);
  }
}

@keyframes shimmer {
  0% { left: -100%;
  }

  100% { left: 100%;
  }
}

/* =============================================================================
   📱 RESPONSIVE - MOBILE PERFECT
   ============================================================================= */

@media (max-width: 768px) {
  .perfect-integration-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px;
  }

  .olive-display-with-stats {
    padding: 24px;
  }

  .stat-position-0,
    .stat-position-1,
    .stat-position-2 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 8px;
  }

  .stats-around-svg {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
  }

  .modal-olive-display-revolutionary {
    padding: 24px;
  }

  .modal-stat-0,
    .modal-stat-1,
    .modal-stat-2 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 8px;
  }

  .olive-stats-modal-overlay {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
  }
}

/* =============================================================================
   🔊 CONTRÔLES AUDIO IMMERSIFS
   ============================================================================= */

.audio-controls-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--audio-background);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 8px 15px;
  box-shadow: var(--shadow-floating);
  z-index: 9999;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  transform: var(--gpu-acceleration);
}

.audio-controls-panel:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: var(--supreme-primary);
  box-shadow: 
        var(--shadow-floating),
        0 0 20px rgba(0, 255, 136, 0.3);
  transform: translateY(-2px) var(--gpu-acceleration);
}

.audio-toggle-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
}

.audio-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1) var(--gpu-acceleration);
}

.audio-toggle-btn:active {
  transform: scale(0.95) var(--gpu-acceleration);
}

.volume-control {
  display: flex;
  align-items: center;
  position: relative;
}

.volume-slider {
  width: 80px;
  height: 4px;
  background: var(--volume-track);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--volume-thumb);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  -webkit-transition: all var(--supreme-duration-fast) var(--supreme-transition);
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--volume-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  -moz-transition: all var(--supreme-duration-fast) var(--supreme-transition);
  transition: all var(--supreme-duration-fast) var(--supreme-transition);
}

.volume-slider:hover {
  background: rgba(255, 255, 255, 0.3);
}

.volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
}

.volume-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
}

.volume-slider::-webkit-slider-track {
  background: var(--volume-track);
  border-radius: 2px;
}

.volume-slider::-moz-range-track {
  background: var(--volume-track);
  border-radius: 2px;
  border: none;
}

/* Mobile responsiveness pour les contrôles audio */

@media (max-width: 768px) {
  .audio-controls-panel {
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    gap: 8px;
  }

  .audio-toggle-btn {
    font-size: 1rem;
    min-width: 25px;
    min-height: 25px;
  }

  .volume-slider {
    width: 60px;
    height: 3px;
  }

  .volume-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
  }

  .volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
  }
}

/* Animation d'apparition */

@keyframes audioControlsAppear {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.audio-controls-panel {
  animation: audioControlsAppear var(--supreme-duration-normal) var(--supreme-transition);
}

/* Indicateur de niveau sonore (pour feedback visuel) */

.volume-indicator {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--audio-background);
  color: var(--supreme-primary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity var(--supreme-duration-fast);
  pointer-events: none;
  white-space: nowrap;
}

.volume-control:hover .volume-indicator {
  opacity: 1;
}

/* Préférences utilisateur - Accessibilité */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Performance Monitor Icône Discrète */

.performance-monitor-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1001;
}

.perf-icon-button {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0.3;
}

.perf-icon-button:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* Focus pour l'accessibilité */

.olive-supreme-container:focus-within {
  outline: 3px solid var(--supreme-primary);
  outline-offset: 3px;
}

.action-button:focus,
.action-btn:focus,
.tab:focus,
.settings-button:focus,
.close-button:focus,
.perf-icon-button:focus {
  outline: 2px solid var(--supreme-primary);
  outline-offset: 2px;
}

/* =============================================================================
   🎯 BOUTONS V2.0 RÉVOLUTIONNAIRES - NOUVELLE INTERFACE
   ============================================================================= */

.v2-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  background: linear-gradient(135deg, var(--glass-dark-medium), var(--glass-dark-light));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  position: relative;
  overflow: hidden;
}

.v2-button::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.6s ease;
}

.v2-button:hover::before {
  left: 100%;
}

.v2-button:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, var(--glass-dark-strong), var(--glass-dark-medium));
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.1);
}

.v2-button:active {
  transform: translateY(0) scale(0.95);
  transition-duration: 0.1s;
}

/* Styles spécifiques pour chaque bouton V2.0 */

.profile-creator-button:hover {
  box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(52, 211, 153, 0.4);
  border-color: rgba(52, 211, 153, 0.6);
}

.leaderboard-button:hover {
  box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.6);
}

.events-button:hover {
  box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(147, 51, 234, 0.4);
  border-color: rgba(147, 51, 234, 0.6);
}

/* Animation de pulse pour attirer l'attention */

@keyframes v2-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.v2-button.attention {
  animation: v2-pulse 2s infinite;
}

/* Effet de particules au clic */

.v2-button.clicked::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  animation: sparkle 0.6s ease-out;
  pointer-events: none;
}

/* Responsive pour mobile */

@media (max-width: 768px) {
  .v2-button {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* =============================================================================
   🎭 AFFICHAGE MOOD DANS HEADER - SOUS LE NIVEAU
   ============================================================================= */

.mood-display-header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  margin: 4px 0;
  text-align: center;
  animation: float 3s ease-in-out infinite;
}

.mood-display-header:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

/* =============================================================================
   🎮 BOUTONS TAMAGOTCHI EXPERTS - INTERACTIONS RÉVOLUTIONNAIRES
   ============================================================================= */

.expert-tamagotchi-actions {
  margin: 20px 0;
  padding: 15px;
  background: linear-gradient(135deg, var(--glass-dark-light), var(--glass-dark-medium));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.interaction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}

.special-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tamagotchi-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: all var(--supreme-duration-normal) var(--supreme-transition);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 0.8rem;
  font-weight: 300;
  min-height: 70px;
  position: relative;
  overflow: hidden;
}

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

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

.action-icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
  transform: scale(1);
  transition: transform 0.2s ease;
}

.action-label {
  font-size: 0.7rem;
  text-align: center;
  opacity: 0.9;
  font-weight: 200;
}

.tamagotchi-btn:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(255, 255, 255, 0.1);
}

.tamagotchi-btn:hover .action-icon {
  transform: scale(1.2);
}

.tamagotchi-btn:active {
  transform: translateY(-1px) scale(0.95);
  transition-duration: 0.1s;
}

/* Styles spécifiques par catégorie d'action */

.vital-action:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(34, 197, 94, 0.3);
}

.social-action:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(59, 130, 246, 0.3);
}

.emergency-action:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(239, 68, 68, 0.4);
  animation: emergency-pulse 1.5s infinite;
}

.discipline-action:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(245, 158, 11, 0.3);
}

.reward-action:hover {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(236, 72, 153, 0.3);
  animation: reward-sparkle 2s infinite;
}

/* Animations spéciales */

@keyframes emergency-pulse {
  0%, 100% {
    box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 25px rgba(239, 68, 68, 0.4);
  }

  50% {
    box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 35px rgba(239, 68, 68, 0.6);
  }
}

@keyframes reward-sparkle {
  0%, 100% {
    box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 25px rgba(236, 72, 153, 0.3);
  }

  25% {
    box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 35px rgba(236, 72, 153, 0.5);
  }

  50% {
    box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(255, 215, 0, 0.4);
  }

  75% {
    box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 35px rgba(236, 72, 153, 0.5);
  }
}

/* Effet de feedback au clic */

.tamagotchi-btn.clicked {
  animation: click-feedback 0.4s ease-out;
}

@keyframes click-feedback {
  0% { transform: scale(1);
  }

  50% {
    transform: scale(0.9);
    box-shadow: 
            0 5px 15px rgba(0, 0, 0, 0.4),
            inset 0 2px 10px rgba(255, 255, 255, 0.2);
  }

  100% { transform: scale(1);
  }
}

/* Responsive design */

@media (max-width: 768px) {
  .interaction-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tamagotchi-btn {
    padding: 10px 6px;
    min-height: 60px;
  }

  .action-icon {
    font-size: 1.5rem;
  }

  .action-label {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .expert-tamagotchi-actions {
    padding: 10px;
    margin: 15px 0;
  }

  .interaction-grid {
    gap: 6px;
  }

  .tamagotchi-btn {
    min-height: 55px;
    padding: 8px 4px;
  }

  .action-icon {
    font-size: 1.3rem;
  }

  .action-label {
    font-size: 0.6rem;
  }
}

/* =============================================================================
   🌟 MODALES RÉVOLUTIONNAIRES - EFFET WAHOU EXPERT
   ============================================================================= */

.expert-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expert-modal-overlay.closing {
  animation: modalFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expert-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.expert-modal-container {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85));
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(52, 211, 153, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
  width: 98vw !important;
  height: 95vh !important;
  max-width: none !important;
  max-height: none !important;
  position: fixed;
  top: 2.5vh;
  left: 1vw;
  overflow-y: auto;
  z-index: 9999;
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(0); /* GPU acceleration */
}

.expert-modal-container.opening {
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.expert-modal-container.closing {
  animation: modalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expert-modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(6, 182, 212, 0.05));
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.expert-modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

.modal-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-title-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 20px rgba(52, 211, 153, 0.6));
  animation: float 3s ease-in-out infinite;
}

.modal-title-text {
  font-size: 1.8rem;
  font-weight: 400;
  background: linear-gradient(135deg, #34d399, #06b6d4, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(52, 211, 153, 0.3);
}

.modal-title-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.modal-close-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  transform: scale(1.1);
}

.expert-modal-content {
  padding: 0;
  max-height: calc(95vh - 140px);
  min-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, 0.3) transparent;
}

.expert-modal-content::-webkit-scrollbar {
  width: 6px;
}

.expert-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.expert-modal-content::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.3);
  border-radius: 3px;
}

/* =============================================================================
   🍎 SYSTÈME DE NOURRITURE - DESIGN EXPERT
   ============================================================================= */

.food-categories, .play-categories {
  padding: 20px;
}

.food-category, .play-category {
  margin-bottom: 32px;
}

.category-header {
  padding: 16px 24px;
  border-radius: 16px 16px 0 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

.category-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 4s infinite;
  animation-delay: calc(var(--category-index, 0) * 0.5s);
}

.category-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.category-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  max-height: 50vh;
  overflow-y: auto;
}

.category-items.drinks {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.item-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 110px;
  max-height: 140px;
  word-wrap: break-word;
}

.item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.item-card:hover::before {
  left: 100%;
}

.item-card:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(52, 211, 153, 0.3);
}

.item-card:active {
  transform: translateY(-4px) scale(0.98);
  transition-duration: 0.1s;
}

.item-icon, .item-icon-large {
  font-size: 2rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.4));
  transition: transform 0.3s ease;
  line-height: 1;
}

.item-icon-large {
  font-size: 2.5rem;
}

.item-card:hover .item-icon,
.item-card:hover .item-icon-large {
  transform: scale(1.2);
}

.item-name {
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}

.effect {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: 200;
  white-space: nowrap;
}

.effect.happiness { background: rgba(236, 72, 153, 0.2); color: #ec4899;
}

.effect.health { background: rgba(239, 68, 68, 0.2); color: #ef4444;
}

.effect.health-neg { background: rgba(239, 68, 68, 0.3); color: #fca5a5;
}

.effect.energy { background: rgba(59, 130, 246, 0.2); color: #3b82f6;
}

.effect.energy-neg { background: rgba(59, 130, 246, 0.3); color: #93c5fd;
}

.effect.intelligence { background: rgba(147, 51, 234, 0.2); color: #9333ea;
}

.effect.creativity { background: rgba(236, 72, 153, 0.2); color: #ec4899;
}

.item-rarity {
  font-size: 0.65rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.item-card.common .item-rarity { color: #9ca3af;
}

.item-card.uncommon .item-rarity { color: #10b981;
}

.item-card.rare .item-rarity { color: #3b82f6;
}

.item-card.epic .item-rarity { color: #8b5cf6;
}

.item-card.legendary .item-rarity { color: #f59e0b;
}

.item-card.mythic .item-rarity { color: #ec4899;
}

.item-card.cosmic .item-rarity {
  color: #34d399;
  text-shadow: 0 0 10px #34d399;
  animation: cosmic-glow 2s infinite alternate;
}

.item-price {
  font-size: 0.7rem;
  color: #fbbf24;
  font-weight: 300;
}

.item-duration {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Compteurs sur les boutons d'action */

.action-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.6rem;
  font-weight: 400;
  padding: 2px 5px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  animation: pulse-count 2s infinite;
}

/* Animations */

@keyframes modalFadeIn {
  from { opacity: 0;
  }

  to { opacity: 1;
  }
}

@keyframes modalFadeOut {
  from { opacity: 1;
  }

  to { opacity: 0;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(50px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
}

@keyframes shimmer {
  0% { left: -100%;
  }

  50% { left: 100%;
  }

  100% { left: 100%;
  }
}

@keyframes cosmic-glow {
  0% { text-shadow: 0 0 10px #34d399;
  }

  100% { text-shadow: 0 0 20px #34d399, 0 0 30px #06b6d4;
  }
}

@keyframes pulse-count {
  0%, 100% { transform: scale(1);
  }

  50% { transform: scale(1.1);
  }
}

/* 🎭 ANIMATIONS ÉMOTIONNELLES PARFAITES */

/* Émotions de base */

@keyframes bounce-gentle {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
  }

  50% { transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes wiggle-fast {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg);
  }

  25% { transform: translate(-50%, -50%) rotate(-5deg);
  }

  75% { transform: translate(-50%, -50%) rotate(5deg);
  }
}

@keyframes munch-cycle {
  0%, 100% { transform: translate(-50%, -50%) scaleX(1);
  }

  50% { transform: translate(-50%, -50%) scaleX(0.9);
  }
}

@keyframes play-bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  25% { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg);
  }

  75% { transform: translate(-50%, -50%) scale(1.05) rotate(2deg);
  }
}

@keyframes sleep-drift {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px);
  }

  50% { transform: translate(-50%, -50%) translateY(-3px);
  }
}

@keyframes heart-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
  }

  50% { transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes think-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
  }

  25% { transform: translate(-50%, -50%) scale(1.05);
  }

  75% { transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes adventure-bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  33% { transform: translate(-50%, -50%) scale(1.08) rotate(3deg);
  }

  66% { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg);
  }
}

@keyframes subtle-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px);
  }

  50% { transform: translate(-50%, -50%) translateY(-1px);
  }
}

/* Nouvelles animations pour émotions bonus */

@keyframes angry-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg);
  }

  10% { transform: translate(-50%, -50%) rotate(-2deg);
  }

  20% { transform: translate(-50%, -50%) rotate(2deg);
  }

  30% { transform: translate(-50%, -50%) rotate(-2deg);
  }

  40% { transform: translate(-50%, -50%) rotate(2deg);
  }

  50% { transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes sad-droop {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px) scale(1);
  }

  50% { transform: translate(-50%, -50%) translateY(2px) scale(0.98);
  }
}

@keyframes surprise-jump {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0px);
  }

  30% { transform: translate(-50%, -50%) scale(1.15) translateY(-5px);
  }

  60% { transform: translate(-50%, -50%) scale(1.05) translateY(-2px);
  }
}

/* Particules flottantes */

@keyframes particle-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translate(-50%, -50%) translateY(-8px) scale(1.1);
    opacity: 1;
  }
}

/* Aura émotionnelle */

@keyframes aura-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}

/* Conteneur émotionnel */

.emotional-olive-container {
  transition: all 0.3s ease;
}

.emotional-olive-container:hover {
  transform: scale(1.02);
}

.emotion-overlay {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  text-shadow: 0 0 10px currentColor;
  transition: all 0.3s ease;
}

.particle {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.emotion-aura {
  pointer-events: none;
}

/* 🎭 STYLES MODALES ÉMOTIONNELLES */

.modal-olive-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.1) 0%, transparent 50%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.modal-olive-svg {
  margin-bottom: 16px;
  filter: drop-shadow(0 0 30px rgba(52, 211, 153, 0.5)) !important;
}

.olive-reaction-text {
  color: white;
  font-size: 1.1rem;
  font-weight: 300;
  text-align: center;
  background: linear-gradient(135deg, #34d399, #06b6d4, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
  animation: text-glow 3s ease-in-out infinite;
}

@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
  }

  50% {
    text-shadow: 0 0 30px rgba(52, 211, 153, 0.6);
  }
}

.game-olive-wrapper {
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-olive-wrapper:hover {
  transform: scale(1.05);
}

.game-olive-emotional {
  filter: drop-shadow(0 0 25px rgba(52, 211, 153, 0.6)) !important;
}

/* Styles pour les icônes Font Awesome discrètes */

.emotion-icon {
  transition: all 0.3s ease;
  opacity: 0.85 !important;
}

.emotion-overlay {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  padding: 4px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🚨 MODALES DANS CONTAINER OLIVE SUPREME - DEEP FIX */

.olive-supreme-container .expert-modal-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.85) !important;
  -webkit-backdrop-filter: blur(15px) !important;
          backdrop-filter: blur(15px) !important;
  z-index: 1000 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

.olive-supreme-container .expert-modal-container {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85)) !important;
  border: 2px solid rgba(52, 211, 153, 0.3) !important;
}

.olive-supreme-container .expert-modal-content {
  height: calc(100% - 80px) !important;
  max-height: none !important;
  min-height: none !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

.olive-supreme-container .expert-modal-header {
  height: 80px !important;
  min-height: 80px !important;
  padding: 20px 30px !important;
  border-bottom: 2px solid rgba(52, 211, 153, 0.2) !important;
}

.olive-supreme-container .modal-olive-display {
  padding: 20px !important;
  margin-bottom: 10px !important;
}

.olive-supreme-container .category-items {
  max-height: calc(100vh - 300px) !important;
  min-height: 400px !important;
  padding: 20px !important;
}

.olive-supreme-container .food-categories,
.olive-supreme-container .play-categories {
  padding: 15px !important;
  height: 100% !important;
}

/* Backdrop dans container */

.olive-supreme-container .expert-modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

/* 🌟 LOADING COMPONENT RÉVOLUTIONNAIRE - EFFET WAHOU */

.loading-wahou-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px 20px;
  background: radial-gradient(circle at center, rgba(52, 211, 153, 0.1) 0%, transparent 70%);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  zoom:0.7;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* Particules flottantes */

.particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.loading-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  animation: float-particle 4s ease-in-out infinite;
}

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

/* Icône principale */

.loading-icon-container {
  position: relative;
  z-index: 3;
  margin-bottom: 20px;
}

.loading-icon-glow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: icon-pulse 2s ease-in-out infinite;
}

.loading-icon {
  font-size: 2.5rem;
  animation: icon-rotate 3s linear infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

@keyframes icon-rotate {
  0% { transform: rotate(0deg);
  }

  100% { transform: rotate(360deg);
  }
}

/* Titre avec gradient */

.loading-title {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 8px;
  text-align: center;
  z-index: 3;
  position: relative;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  animation: title-glow 3s ease-in-out infinite alternate;
}

@keyframes title-glow {
  0% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }

  100% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    transform: scale(1.02);
  }
}

/* Sous-titre */

.loading-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  text-align: center;
  margin-bottom: 20px;
  z-index: 3;
  position: relative;
  font-style: italic;
}

/* Message contextuel */

.loading-message {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  z-index: 3;
  position: relative;
}

.loading-message-text {
  font-size: 0.95rem;
  font-weight: 300;
  text-align: center;
  animation: message-fade-in 0.8s ease-out;
}

@keyframes message-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Barre de progression */

.loading-progress-container {
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
  z-index: 3;
  position: relative;
}

.loading-progress-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.loading-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  position: relative;
}

.loading-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% { left: -100%;
  }

  100% { left: 100%;
  }
}

.loading-progress-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 400;
  position: absolute;
  top: -25px;
  right: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Points de chargement */

.loading-dots {
  display: flex;
  gap: 8px;
  z-index: 3;
  position: relative;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) { animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) { animation-delay: 0s;
}

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Styles pour les anciennes classes de loading */

.olive-supreme-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.1) 0%, transparent 50%);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.loading-animation {
  font-size: 3rem;
  animation: pulse-glow 2s ease-in-out infinite;
  margin-bottom: 20px;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(52, 211, 153, 0.6));
  }

  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 40px rgba(52, 211, 153, 0.9));
  }
}

.olive-supreme-loading p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0;
  animation: text-fade-in 2s ease-in-out infinite alternate;
}

@keyframes text-fade-in {
  0% { opacity: 0.7;
  }

  100% { opacity: 1;
  }
}

/* Mobile responsive - Modales Perfectionnées */

@media (max-width: 768px) {
  .expert-modal-container {
    width: 98vw !important;
    height: 95vh !important;
    max-height: none !important;
    border-radius: 16px;
    top: 2.5vh;
    left: 1vw;
  }

  /* Modales dans container mobile */

  .olive-supreme-container .expert-modal-container {
    border-radius: 20px !important;
  }

  .olive-supreme-container .expert-modal-header {
    height: 60px !important;
    padding: 15px 20px !important;
  }

  .olive-supreme-container .expert-modal-content {
    height: calc(100% - 60px) !important;
    padding: 15px !important;
  }

  .olive-supreme-container .modal-olive-display {
    padding: 15px !important;
  }

  /* Items de catégorie mobile-first */

  .category-items {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    padding: 15px !important;
    min-height: 300px !important;
    max-height: 60vh !important;
  }

  /* Cards d'items plus grandes sur mobile */

  .item-card {
    min-height: 120px !important;
    max-height: 160px !important;
    padding: 16px 12px !important;
    font-size: 0.9rem !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .item-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  /* Icônes d'émojis plus grandes */

  .item-card .item-emoji {
    font-size: 2.2rem !important;
    margin-bottom: 8px !important;
  }

  /* Texte des items mobile */

  .item-card .item-name {
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .item-card .item-description {
    font-size: 0.7rem !important;
    opacity: 0.8 !important;
    line-height: 1.2 !important;
  }

  /* Headers de catégories mobile */

  .category-header {
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
  }

  .category-header h3 {
    font-size: 1.1rem !important;
  }

  /* Modal SVG Olive mobile */

  .modal-olive-svg {
    width: 120px !important;
    height: 120px !important;
  }

  /* Texte de réaction mobile */

  .olive-reaction-text {
    font-size: 0.95rem !important;
    padding: 0 10px !important;
  }

  /* Scrollbars mobile */

  .expert-modal-content::-webkit-scrollbar {
    width: 8px !important;
  }

  .category-items::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  .category-items::-webkit-scrollbar-thumb {
    background: rgba(52, 211, 153, 0.5) !important;
    border-radius: 4px !important;
  }

  /* Espacement amélioré pour le tactile */

  .food-categories, .play-categories {
    padding: 15px !important;
  }

  .food-category, .play-category {
    margin-bottom: 20px !important;
  }

  /* Feedback tactile amélioré */

  .item-card:hover {
    transform: none !important;
  }

  .item-card:focus {
    outline: 2px solid var(--supreme-primary) !important;
    outline-offset: 2px !important;
  }

  /* Headers de modales mobile */

  .modal-title-text {
    font-size: 1.3rem !important;
  }

  .modal-title-subtitle {
    font-size: 0.8rem !important;
  }

  .modal-close-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.4rem !important;
  }

  /* Performance mobile */

  .expert-modal-container {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .item-card {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
}

/* Mobile Portrait - Optimisations supplémentaires */

@media (max-width: 480px) {
  .category-items {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .item-card {
    min-height: 100px !important;
    max-height: 140px !important;
    padding: 12px 8px !important;
  }

  .item-card .item-emoji {
    font-size: 2rem !important;
  }

  .item-card .item-name {
    font-size: 0.8rem !important;
  }

  .item-card .item-description {
    font-size: 0.65rem !important;
  }

  .expert-modal-content {
    padding: 10px !important;
  }

  .food-categories, .play-categories {
    padding: 10px !important;
  }

  .food-category, .play-category {
    margin-bottom: 15px !important;
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== SYSTÈME TOAST GLASSMORPHIQUE V2.0 ===== */

:root {
  /* Variables pour glassmorphisme toast */
  --toast-glass-bg-opacity: 0.15;
  --toast-glass-border-opacity: 0.25;
  --toast-glass-backdrop-blur: 16px;
  --toast-glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --toast-glass-glow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Base glassmorphique pour tous les toasts */

.toast-glassmorphic-base {
  backdrop-filter: blur(var(--toast-glass-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--toast-glass-backdrop-blur));
  box-shadow: var(--toast-glass-shadow), var(--toast-glass-glow);
  position: relative;
  overflow: hidden;
}

/* Gradient overlay pour effet glassmorphique */

.toast-glassmorphic-base::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent
    rgba(0,0,0,0.1) 0%, 
    rgba(0,0,0,0.05) 50%, 
    rgba(0,0,0,0.1) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Contenu du toast au-dessus du gradient */

.toast-glassmorphic-content {
  position: relative;
  z-index: 2;
}

/* Types de toasts glassmorphiques */

.toast-glass-info {
  background: transparent;
  border: 1px solid rgba(147, 197, 253, var(--toast-glass-border-opacity));
  color: rgba(147, 197, 253, 0.95);
}

.toast-glass-success {
  background: transparent;
  border: 1px solid rgba(134, 239, 172, var(--toast-glass-border-opacity));
  color: rgba(134, 239, 172, 0.95);
}

.toast-glass-warning {
  background: transparent;
  border: 1px solid rgba(253, 230, 138, var(--toast-glass-border-opacity));
  color: rgba(253, 230, 138, 0.95);
}

.toast-glass-error {
  background: transparent;
  border: 1px solid rgba(252, 165, 165, var(--toast-glass-border-opacity));
  color: rgba(252, 165, 165, 0.95);
}

.toast-glass-primary {
  background: transparent;
  border: 1px solid rgba(196, 181, 253, var(--toast-glass-border-opacity));
  color: rgba(196, 181, 253, 0.95);
}

/* Effets hover glassmorphiques */

.toast-glassmorphic-base:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    var(--toast-glass-shadow),
    var(--toast-glass-glow),
    0 0 30px rgba(0, 0, 0, 0.15);
}

/* Barre de progression glassmorphique */

.toast-progress-glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  border-radius: inherit;
  overflow: hidden;
}

.toast-progress-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: width 0.1s ease-linear;
}

/* Bouton d'action glassmorphique */

.toast-action-glass {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(0, 0, 0, 0.9);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 300;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.toast-action-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: transparent
    rgba(0, 0, 0, 0.1) 0%, 
    rgba(0, 0, 0, 0.05) 100%
  ); */
  border-radius: inherit;
  pointer-events: none;
}

.toast-action-glass:hover {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toast-action-glass:active {
  transform: scale(0.95);
}

/* Animations glassmorphiques */

.toast-glass-enter {
  animation: toast-glass-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-glass-exit {
  animation: toast-glass-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-glass-slide-in {
  0% {
    transform: translateX(100%) scale(0.8);
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }

  50% {
    transform: translateX(-5%) scale(1.05);
    opacity: 0.8;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
    -webkit-backdrop-filter: blur(var(--toast-glass-backdrop-blur));
            backdrop-filter: blur(var(--toast-glass-backdrop-blur));
  }
}

@keyframes toast-glass-slide-out {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
    -webkit-backdrop-filter: blur(var(--toast-glass-backdrop-blur));
            backdrop-filter: blur(var(--toast-glass-backdrop-blur));
  }

  100% {
    transform: translateX(100%) scale(0.8);
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }
}

/* Pile de toasts glassmorphiques */

.toast-stack-glass {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast-stack-glass > * {
  pointer-events: auto;
}

/* Responsive glassmorphisme */

@media (max-width: 768px) {
  :root {
    --toast-glass-backdrop-blur: 12px;
    --toast-glass-bg-opacity: 0.2;
    --toast-glass-border-opacity: 0.3;
  }

  .toast-stack-glass {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  .toast-glassmorphic-base {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .toast-stack-glass {
    top: 60px; /* Plus bas pour éviter la barre de statut mobile */
  }
}

/* Accessibilité - high contrast */

@media (prefers-contrast: high) {
  :root {
    --toast-glass-bg-opacity: 0.8;
    --toast-glass-border-opacity: 1;
    --toast-glass-backdrop-blur: 8px;
  }

  .toast-glass-info,
  .toast-glass-success,
  .toast-glass-warning,
  .toast-glass-error,
  .toast-glass-primary {
    color: rgba(0, 0, 0, 1);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .toast-glass-enter,
  .toast-glass-exit {
    animation: none;
    transition: opacity 0.2s ease;
  }

  .toast-glassmorphic-base:hover {
    transform: none;
  }

  .toast-action-glass:hover {
    transform: none;
  }
}

/* Mode sombre spécifique */

@media (prefers-color-scheme: dark) {
  :root {
    --toast-glass-bg-opacity: 0.2;
    --toast-glass-border-opacity: 0.3;
    --toast-glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --toast-glass-glow: 0 0 20px rgba(0, 0, 0, 0.05);
  }
}

/* Thème clair */

@media (prefers-color-scheme: light) {
  :root {
    --toast-glass-bg-opacity: 0.25;
    --toast-glass-border-opacity: 0.4;
    --toast-glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --toast-glass-glow: 0 0 20px rgba(0, 0, 0, 0.05);
  }
}

/* Effets spéciaux pour les toasts importants */

.toast-glass-important {
  animation: toast-glass-pulse 2s infinite;
}

@keyframes toast-glass-pulse {
  0%, 100% {
    box-shadow: 
      var(--toast-glass-shadow),
      var(--toast-glass-glow);
  }

  50% {
    box-shadow: 
      var(--toast-glass-shadow),
      var(--toast-glass-glow),
      0 0 30px rgba(0, 0, 0, 0.2);
  }
}

/* Icônes glassmorphiques */

.toast-icon-glass {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  opacity: 0.9;
  /* filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)); */
}

/* Bouton de fermeture glassmorphique */

.toast-close-glass {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.toast-close-glass:hover {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

.toast-close-glass::before,
.toast-close-glass::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 1px;
  background: transparent;
  border-radius: 1px;
}

.toast-close-glass::before {
  transform: rotate(45deg);
}

.toast-close-glass::after {
  transform: rotate(-45deg);
}

/* purgecss end ignore */
/* purgecss start ignore */

/* =============================================================================
   ULTIMATE TAMAGOTCHI STYLES - Design Glassmorphique Ultra-Moderne
   Fusion des meilleurs designs avec IA avancée
   ============================================================================= */

:root {
  /* Couleurs principales ultra-modernes */
  --glass-violet-deep: rgba(147, 51, 234, 0.95);
  --glass-violet-medium: rgba(126, 34, 206, 0.85);
  --glass-violet-light: rgba(168, 85, 247, 0.8);
  --glass-indigo-primary: rgba(99, 102, 241, 0.85);
  --glass-indigo-secondary: rgba(79, 70, 229, 0.8);
  --glass-indigo-dark: rgba(67, 56, 202, 0.9);
  /* Noir transparent pour les dégradés */
  --glass-black-transparent: rgba(0, 0, 0, 0.3);
  --glass-black-subtle: rgba(0, 0, 0, 0.15);
  --glass-black-light: rgba(0, 0, 0, 0.05);
  /* Reflets glassmorphiques */
  --glass-highlight: rgba(0, 0, 0, 0.25);
  --glass-highlight-subtle: rgba(0, 0, 0, 0.1);
  --glass-highlight-strong: rgba(0, 0, 0, 0.4);
  /* Couleurs d'accentuation */
  --accent-green: rgba(0, 255, 136, 0.8);
  --accent-blue: rgba(0, 200, 255, 0.8);
  --accent-pink: rgba(255, 20, 147, 0.8);
  --accent-gold: rgba(255, 215, 0, 0.8);
  /* Variables 3D pour le tracking */
  --mouse-x: 0;
  --mouse-y: 0;
  --rotation-x: 0deg;
  --rotation-y: 0deg;
  --tilt-intensity: 15deg;
}

/* =============================================================================
   CONTENEUR PRINCIPAL - GLASSMORPHIQUE ULTIME
   ============================================================================= */

.ultimate-tamagotchi-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  min-height: 600px;
  max-height: 90vh;
  background: transparent;
  border: 2px solid rgba(0, 255, 136, 0.6);
  border-radius: 25px;
  padding: 20px;
  box-shadow: 
        0 0 40px rgba(0, 255, 136, 0.4),
        inset 0 1px 0 rgba(0, 0, 0, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  z-index: 1000;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ultimate-tamagotchi-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: transparent
        var(--accent-green) 0%,
        var(--accent-blue) 25%,
        var(--glass-violet-deep) 50%,
        var(--glass-indigo-primary) 75%,
        var(--accent-green) 100%
    );
  border-radius: 27px;
  z-index: -1;
  opacity: 0.8;
  animation: borderGlow 4s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* =============================================================================
   HEADER - TITRE ET NIVEAU
   ============================================================================= */

.tamagotchi-header.ultimate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: transparent;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.tamagotchi-title {
  font-family: 'Chillax', monospace;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--accent-green);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  margin: 0;
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  }

  50% {
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.9);
  }
}

.level-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.level {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.experience-bar {
  width: 80px;
  height: 6px;
  background: transparent;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.experience-fill {
  height: 100%;
  background: transparent
        var(--accent-gold) 0%, 
        var(--accent-green) 100%
    );
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.exp-text {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.7);
}

.close-btn.ultimate {
  width: 35px;
  height: 35px;
  border: none;
  background: transparent;
  color: var(--accent-pink);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 20, 147, 0.3);
}

.close-btn.ultimate:hover {
  background: transparent;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 0 15px rgba(255, 20, 147, 0.6);
}

/* =============================================================================
   ÉCRAN PRINCIPAL - STATS ET AFFICHAGE
   ============================================================================= */

.tamagotchi-screen.ultimate {
  background: transparent;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
}

.tamagotchi-screen.ultimate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent
        radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 20, 147, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* =============================================================================
   STATS AVANCÉES - BARRES DE PROGRESSION ULTRA-MODERNES
   ============================================================================= */

.advanced-stats.ultimate {
  margin-bottom: 20px;
}

.primary-stats {
  display: grid;
  gap: 12px;
  margin-bottom: 15px;
}

.stat-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-group:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.stat-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: transparent
        transparent, 
        rgba(0, 0, 0, 0.4), 
        transparent
    );
  animation: shine 2s infinite;
}

@keyframes shine {
  0% { left: -100%;
  }

  100% { left: 100%;
  }
}

.stat-fill.happiness {
  background: transparent
        var(--accent-pink) 0%, 
        rgba(255, 105, 180, 0.8) 100%
    );
  box-shadow: 0 0 10px rgba(255, 20, 147, 0.4);
}

.stat-fill.energy {
  background: transparent
        var(--accent-blue) 0%, 
        rgba(0, 255, 255, 0.8) 100%
    );
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4);
}

.stat-fill.hunger {
  background: transparent
        var(--accent-green) 0%, 
        rgba(50, 255, 50, 0.8) 100%
    );
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.stat-value {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.9);
  min-width: 30px;
  text-align: right;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.secondary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mini-stat {
  padding: 6px 8px;
  background: transparent;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.mini-stat:hover {
  background: transparent;
  transform: scale(1.05);
}

/* =============================================================================
   AFFICHAGE D'OLIVE - AVATAR INTERACTIF
   ============================================================================= */

.olive-display.ultimate {
  text-align: center;
  margin: 25px 0;
  position: relative;
  padding: 20px;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.olive-display.ultimate::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: transparent
        transparent 0%,
        rgba(0, 255, 136, 0.2) 25%,
        transparent 50%,
        rgba(255, 20, 147, 0.2) 75%,
        transparent 100%
    );
  border-radius: 22px;
  z-index: -1;
  animation: avatarGlow 6s ease-in-out infinite;
}

@keyframes avatarGlow {
  0%, 100% { opacity: 0.5;
  }

  50% { opacity: 1;
  }
}

.interactive.ultimate {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.interactive.ultimate:hover {
  transform: scale(1.05) rotate(2deg);
  filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.8));
}

.mood-indicator.ultimate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 8px 15px;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.mood-emoji {
  font-size: 1.5rem;
  animation: moodPulse 2s ease-in-out infinite;
}

@keyframes moodPulse {
  0%, 100% { transform: scale(1);
  }

  50% { transform: scale(1.1);
  }
}

.mood-text {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.action-message.ultimate {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  color: var(--accent-green);
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 300;
  border: 1px solid rgba(0, 255, 136, 0.4);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: messageAppear 2s ease-out;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

@keyframes messageAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.8);
  }

  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.1);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* =============================================================================
   BOUTONS DE MENU - INTERFACES AVANCÉES
   ============================================================================= */

.menu-buttons.ultimate {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.menu-btn.ultimate {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.9);
  font-size: 0.8rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.menu-btn.ultimate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: transparent
        transparent, 
        rgba(0, 0, 0, 0.1), 
        transparent
    );
  transition: left 0.5s ease;
}

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

.menu-btn.ultimate:hover {
  background: transparent;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 20px rgba(0, 255, 136, 0.3);
  border-color: rgba(0, 255, 136, 0.4);
}

.menu-btn.ultimate span {
  background: transparent;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 400;
}

/* =============================================================================
   GRILLE D'ACTIONS - BOUTONS INTERACTIFS 3D
   ============================================================================= */

.actions-grid.ultimate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.action-btn.ultimate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 15px 8px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 15px;
  color: rgba(0, 0, 0, 0.9);
  font-size: 0.8rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.action-btn.ultimate::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: transparent
        var(--accent-green) 0%,
        var(--accent-blue) 25%,
        var(--glass-violet-deep) 50%,
        var(--accent-pink) 75%,
        var(--accent-green) 100%
    );
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.action-btn.ultimate:hover::before {
  opacity: 0.8;
}

.action-btn.ultimate:hover {
  transform: perspective(1000px) rotateX(-5deg) rotateY(5deg) translateY(-3px) scale(1.05);
  box-shadow: 
        0 10px 30px rgba(0, 255, 136, 0.3),
        inset 0 1px 0 rgba(0, 0, 0, 0.2);
  background: transparent;
}

.action-btn.ultimate:active {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(1px) scale(0.98);
}

.action-btn.ultimate.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.action-emoji {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.action-btn.ultimate:hover .action-emoji {
  filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.6));
  transform: scale(1.1);
}

.action-name {
  font-size: 0.75rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   SYSTÈME DE NOTIFICATIONS - ÉLÉGANT ET MODERNE
   ============================================================================= */

.notifications-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}

.notification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  color: rgba(0, 0, 0, 0.9);
  font-size: 0.85rem;
  font-weight: 200;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: notificationSlideIn 0.5s ease-out;
  position: relative;
  overflow: hidden;
}

.notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  animation: notificationProgress 5s linear;
}

.notification.olive_response::before { background: transparent;
}

.notification.scenario::before { background: transparent;
}

.notification.achievement::before { background: transparent;
}

.notification.level_up::before { background: transparent;
}

.notification.need::before { background: transparent;
}

@keyframes notificationSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes notificationProgress {
  0% { height: 100%;
  }

  100% { height: 0%;
  }
}

.notification-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}

.notification-text {
  flex: 1;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   INDICATEUR DE SAUVEGARDE - STATUS INTELLIGENT
   ============================================================================= */

.save-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 300;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.save-indicator.saving {
  background: transparent;
  color: rgba(255, 165, 0, 1);
  border-color: rgba(255, 165, 0, 0.4);
  animation: pulse 1s infinite;
}

.save-indicator.saved {
  background: transparent;
  color: rgba(0, 255, 0, 1);
  border-color: rgba(0, 255, 0, 0.4);
}

.save-indicator.synced {
  background: transparent;
  color: rgba(0, 200, 255, 1);
  border-color: rgba(0, 200, 255, 0.4);
}

.save-indicator.offline {
  background: transparent;
  color: rgba(255, 100, 100, 1);
  border-color: rgba(255, 100, 100, 0.4);
}

@keyframes pulse {
  0%, 100% { opacity: 1;
  }

  50% { opacity: 0.5;
  }
}

/* =============================================================================
   MODALES - SCÉNARIOS ET PANELS
   ============================================================================= */

.scenario-modal-overlay.ultimate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
  0% { opacity: 0;
  }

  100% { opacity: 1;
  }
}

.scenario-modal.ultimate {
  background: transparent;
  border: 2px solid rgba(0, 255, 136, 0.6);
  border-radius: 20px;
  padding: 25px;
  max-width: 450px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 
        0 0 40px rgba(0, 255, 136, 0.4),
        inset 0 1px 0 rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.scenario-header h3 {
  color: var(--accent-green);
  font-size: 1.3rem;
  font-weight: 300;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.scenario-rarity {
  padding: 4px 8px;
  background: transparent;
  color: var(--accent-gold);
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 300;
  border: 1px solid rgba(255, 215, 0, 0.3);
  text-transform: uppercase;
}

.scenario-description {
  color: rgba(0, 0, 0, 0.9);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 0.95rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.scenario-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-btn.ultimate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 15px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.choice-btn.ultimate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: transparent
        transparent, 
        rgba(0, 255, 136, 0.1), 
        transparent
    );
  transition: left 0.5s ease;
}

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

.choice-btn.ultimate:hover {
  background: transparent;
  border-color: rgba(0, 255, 136, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 255, 136, 0.2);
}

.choice-text {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.95);
}

.choice-effects {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  font-style: italic;
}

.close-modal-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--accent-pink);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 20, 147, 0.3);
}

.close-modal-btn:hover {
  background: transparent;
  transform: scale(1.1) rotate(90deg);
}

/* =============================================================================
   PANELS - INVENTAIRE, SUCCÈS, MÉMOIRES
   ============================================================================= */

.inventory-panel.ultimate,
.achievements-panel.ultimate,
.memories-panel.ultimate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-height: 400px;
  background: transparent;
  border: 2px solid rgba(99, 102, 241, 0.6);
  border-radius: 20px;
  padding: 20px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 
        0 0 40px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(0, 0, 0, 0.15);
  z-index: 2000;
  animation: panelSlideIn 0.4s ease-out;
  overflow: hidden;
}

@keyframes panelSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.panel-header h3 {
  color: var(--glass-indigo-primary);
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

.panel-header button {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--accent-pink);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-header button:hover {
  background: transparent;
  transform: scale(1.1);
}

.inventory-grid,
.achievements-list,
.memories-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 10px;
}

.inventory-grid::-webkit-scrollbar,
.achievements-list::-webkit-scrollbar,
.memories-list::-webkit-scrollbar {
  width: 6px;
}

.inventory-grid::-webkit-scrollbar-track,
.achievements-list::-webkit-scrollbar-track,
.memories-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.inventory-grid::-webkit-scrollbar-thumb,
.achievements-list::-webkit-scrollbar-thumb,
.memories-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

.inventory-item,
.achievement-item,
.memory-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: transparent;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.inventory-item:hover,
.achievement-item:hover,
.memory-item:hover {
  background: transparent;
  transform: translateX(5px);
}

.item-emoji,
.achievement-emoji {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}

.item-name,
.achievement-info h4 {
  flex: 1;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.9);
  margin: 0;
}

.item-quantity {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 200;
}

.achievement-info p {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.7);
  margin: 5px 0 0 0;
  line-height: 1.4;
}

.memory-item {
  flex-direction: column;
  align-items: flex-start;
}

.memory-time {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.6);
  align-self: flex-end;
}

.memory-content {
  width: 100%;
}

.memory-content strong {
  color: var(--accent-green);
  font-size: 0.9rem;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}

.memory-content p {
  margin: 5px 0 0 0;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.4;
}

.empty-message {
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  font-style: italic;
  padding: 40px 20px;
  background: transparent;
  border-radius: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   ANIMATIONS ET EFFETS SPÉCIAUX
   ============================================================================= */

@keyframes float {
  0%, 100% { transform: translateY(0px);
  }

  50% { transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
  }

  50% {
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.8);
  }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg);
  }

  50% { opacity: 1; transform: scale(1) rotate(180deg);
  }
}

/* =============================================================================
   RESPONSIVE - ADAPTATION MOBILE
   ============================================================================= */

@media (max-width: 480px) {
  .ultimate-tamagotchi-container {
    width: 95vw;
    height: 95vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
  }

  .actions-grid.ultimate {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .secondary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .tamagotchi-title {
    font-size: 1rem;
  }

  .scenario-modal.ultimate,
    .inventory-panel.ultimate,
    .achievements-panel.ultimate,
    .memories-panel.ultimate {
    width: 90vw;
    max-height: 70vh;
  }
}

/* =============================================================================
   ÉTATS SPÉCIAUX - INTERACTIONS AVANCÉES
   ============================================================================= */

.ultimate-tamagotchi-container.loading {
  opacity: 0.7;
  pointer-events: none;
}

.ultimate-tamagotchi-container.error {
  border-color: rgba(255, 100, 100, 0.6);
  box-shadow: 0 0 30px rgba(255, 100, 100, 0.4);
}

.ultimate-tamagotchi-container.success {
  border-color: transparent;
  box-shadow: none;
}

/* =============================================================================
   ACCESSIBILITÉ ET PRÉFÉRENCES UTILISATEUR
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.ultimate-tamagotchi-container:focus-within {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

.action-btn.ultimate:focus,
.choice-btn.ultimate:focus,
.menu-btn.ultimate:focus {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* purgecss end ignore */
/* purgecss start ignore */

/* ===== BORDER OVERRIDES ===== */

/* Ce fichier supprime toutes les bordures blanches et gris clair de l'application */

/* Réinitialisation complète des bordures pour tous les éléments */

* {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Désactivation des bordures blanches et gris clair */

.border,
.border-1,
.border-2,
.border-4,
.border-8,
.border-t,
.border-r,
.border-b,
.border-l,
.border-x,
.border-y,
.border-white,
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-gray-400,
.border-transparent,
.border-transparent\/20,
.border-transparent\/30,
.border-transparent\/40,
.border-transparent\/50,
[class*="border-"] {
  border-color: transparent !important;
  border-style: none !important;
}

/* Désactivation des bordures avec opacité */

.border-white\/10,
.border-white\/20,
.border-white\/30,
.border-white\/40,
.border-white\/50,
.border-gray-100\/10,
.border-gray-200\/10,
.border-gray-300\/10,
.border-gray-300\/20,
.border-gray-400\/10,
.border-gray-400\/20,
.border-gray-400\/30,
[class*="border-"][class*="\/"] {
  border-color: transparent !important;
  border-style: none !important;
}

/* Désactivation des bordures dans les composants spécifiques */

.related-post,
.article-header,
.olive-supreme-container,
.glassmorphism,
.glassmorphism-strong,
.glassmorphism-subtle,
.workflow-composer,
.intelligent-questionnaire,
.intelligent-workflow-launcher,
.intelligent-assistant-creator,
.card,
.panel,
.modal,
.dropdown,
.menu,
.nav,
.header,
.footer,
.section,
.container,
.wrapper,
.box,
[class*="card"],
[class*="panel"],
[class*="modal"],
[class*="dropdown"],
[class*="menu"] {
  border-color: transparent !important;
  border-style: none !important;
  box-shadow: none !important;
}

/* Désactivation des bordures de formulaire */

input,
textarea,
select,
button,
fieldset,
legend,
[type="text"],
[type="password"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="month"],
[type="week"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="search"],
[type="checkbox"],
[type="radio"],
select[multiple] {
}

/* Désactivation des bordures sur les états de survol et focus */

.hover\:border-white:hover,
.hover\:border-gray-100:hover,
.hover\:border-gray-200:hover,
.hover\:border-gray-300:hover,
.hover\:border-gray-400:hover,
.focus\:border-white:focus,
.focus\:border-gray-100:focus,
.focus\:border-gray-200:focus,
.focus\:border-gray-300:focus,
.focus\:border-gray-400:focus {
  border-color: transparent !important;
  border-style: none !important;
}

/* Désactivation des bordures dans le mode sombre */

.dark .dark\:border-gray-700,
.dark .dark\:border-gray-800,
.dark .dark\:border-gray-900 {
  border-color: transparent !important;
  border-style: none !important;
}

/* Désactivation des bordures de séparation */

.border-t,
.border-r,
.border-b,
.border-l,
.border-x,
.border-y {
  border-color: transparent !important;
  border-style: none !important;
}

/* Désactivation des bordures dans les composants complexes */

.tech-card,
.feature-card,
.pricing-card,
.testimonial-card,
.team-card {
  border: none !important;
}

/* Désactivation des bordures dans les éléments de navigation */

.nav-item,
.tab-item,
.menu-item {
  border: none !important;
}

/* Désactivation des bordures dans les modales et popovers */

.modal,
.popover,
.dropdown,
.tooltip {
  border: none !important;
}

/* Désactivation des bordures dans les tableaux */

table,
thead,
tbody,
tr,
th,
td {
  border-color: transparent !important;
}

/* Désactivation des bordures dans les éléments de formulaire personnalisés */

.custom-select,
.custom-checkbox,
.custom-radio,
.custom-switch {
  border: none !important;
}

/* Désactivation des bordures dans les éléments de chargement */

.loading-spinner,
.loading-dots,
.skeleton {
  border: none !important;
}

/* purgecss end ignore */

/*purgecss start ignore
 */

/**
 * 🔧 FIX CRITIQUE - Navigation Workflow Studio
 * Correction des problèmes de clics sur les boutons de navigation
 */

/* Force les interactions sur tous les éléments de navigation */

.workflow-studio-hub .mode-card {
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  position: relative !important;
  z-index: 10 !important;
}

.workflow-studio-hub .mode-card:hover {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Assurer que les enfants ne bloquent pas les clics */

.workflow-studio-hub .mode-card * {
  pointer-events: none !important;
}

/* Forcer l'état actif sur les boutons */

.workflow-studio-hub .mode-card:active {
  transform: scale(0.98) !important;
}

/* Container principal avec interactions forcées */

.workflow-studio-hub {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Grille de sélection avec interactions */

.workflow-studio-hub .mode-selection-grid {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Navigation des modes (header) */

.workflow-studio-hub .mode-navigation .mode-nav-item {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Écran de bienvenue */

.workflow-studio-hub .welcome-screen {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Éliminer toute interférence de l'arrière-plan */

.workflow-studio-hub .studio-background,
.workflow-studio-hub .studio-background * {
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Debug - Contour temporaire pour voir les zones cliquables */

.workflow-studio-hub .mode-card {
  outline: 1px solid rgba(79, 121, 66, 0.3);
  outline-offset: 2px;
}

/* Hover visible pour feedback utilisateur */

.workflow-studio-hub .mode-card:hover {
  background: rgba(79, 121, 66, 0.15) !important;
  border-color: var(--olive-primary) !important;
  transform: translateY(-5px) !important;
}

/* S'assurer que les animations Framer Motion n'interfèrent pas */

.workflow-studio-hub [data-framer-component-type] {
  pointer-events: auto !important;
}

/**
 * 🎨 STYLE NOIR GLASSMORPHIQUE TRANSPARENT
 * Design professionnel avec glassmorphisme et tons humbles
 */

/* Variables de couleurs noir glassmorphique */

:root {
  --glass-bg-primary: rgba(15, 15, 15, 0.85);
  --glass-bg-secondary: rgba(25, 25, 25, 0.75);
  --glass-bg-tertiary: rgba(35, 35, 35, 0.65);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-text-primary: rgba(255, 255, 255, 0.95);
  --glass-text-secondary: rgba(255, 255, 255, 0.75);
  --glass-text-muted: rgba(255, 255, 255, 0.55);
  --glass-accent: rgba(139, 188, 143, 0.8);
  --glass-hover: rgba(255, 255, 255, 0.05);
}

/* Fond principal workflow studio */

.workflow-studio-dark {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(15, 15, 15, 0.9) 25%,
    rgba(25, 25, 25, 0.85) 50%,
    rgba(15, 15, 15, 0.9) 75%,
    rgba(0, 0, 0, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--glass-text-primary);
}

/* Navigation unifiée style noir */

.workflow-nav-dark {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.workflow-nav-dark .nav-tab {
  background: transparent;
  color: var(--glass-text-secondary);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-nav-dark .nav-tab:hover {
  background: var(--glass-hover);
  color: var(--glass-text-primary);
  border-color: var(--glass-border);
  transform: translateY(-1px);
}

.workflow-nav-dark .nav-tab.active {
  background: var(--glass-bg-secondary);
  color: var(--glass-accent);
  border-color: var(--glass-accent);
  box-shadow:
    0 4px 16px rgba(139, 188, 143, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Workflow cards noir glassmorphique */

.workflow-card-dark {
  background: linear-gradient(
    135deg,
    var(--glass-bg-secondary) 0%,
    var(--glass-bg-tertiary) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: var(--glass-text-primary);
}

.workflow-card-dark:hover {
  background: var(--glass-bg-tertiary);
  border-color: var(--glass-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139, 188, 143, 0.2);
}

/* Mode expert canvas PARFAIT */

.expert-canvas-dark {
  background: radial-gradient(
    ellipse at center,
    rgba(15, 15, 15, 0.95) 0%,
    rgba(5, 5, 5, 0.98) 100%
  );
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 2px solid var(--glass-accent);
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 100px rgba(139, 188, 143, 0.1);
}

/* Intégrations footer noir */

.integrations-footer-dark {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

.integrations-footer-dark .integration-icon {
  background: var(--glass-bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.integrations-footer-dark .integration-icon:hover {
  background: var(--glass-hover);
  border-color: var(--glass-accent);
  transform: scale(1.05);
}

/* Tons humbles et discrets */

.humble-text {
  color: var(--glass-text-muted);
  font-weight: 400;
  opacity: 0.8;
}

.humble-accent {
  color: rgba(139, 188, 143, 0.7);
  text-shadow: none;
}

/* Animation glassmorphique fluide */

@keyframes glassMorphFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  }
}

.glass-fade-in {
  animation: glassMorphFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/*purgecss end ignore
 */
/* ===== TAILWIND CSS DIRECTIVES - MUST BE FIRST ===== */

/* ! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
  box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

html {
  -moz-tab-size: 4;
  tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
  font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * Inherit font-family and line-height from `html` so users can set them as
 * a class directly on the `html` element.
 */

body {
  font-family: inherit;
  line-height: inherit;
}

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

/*
 * Ensure horizontal rules are visible by default
 */

hr {
  border-top-width: 1px;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img {
  border-style: solid;
}

textarea {
  resize: vertical;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}

/**
 * Override legacy focus reset from Normalize with modern Firefox focus styles.
 *
 * This is actually an improvement over the new defaults in Firefox in our testing,
 * as it triggers the better focus styles even for links, which still use a dotted
 * outline in Firefox by default.
 */

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

pre,
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
 * 1. Make replaced elements `display: block` by default as that's
 *    the behavior you want almost all of the time. Inspired by
 *    CSS Remedy, with `svg` added as well.
 *
 *    https://github.com/mozdevs/cssremedy/issues/14
 * 
 * 2. Add `vertical-align: middle` to align replaced elements more
 *    sensibly by default when overriding `display` by adding a
 *    utility like `inline`.
 *
 *    This can trigger a poorly considered linting error in some
 *    tools but is included by design.
 * 
 *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/**
 * Constrain images and videos to the parent width and preserve
 * their intrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

/**
 * Ensure the default browser behavior of the `hidden` attribute.
 */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}

select {
  background-color: transparent !important;
  color: white !important;
}

select option {
  background-color: rgb(31, 41, 55) !important;
  color: white !important;
}

/* NUCLEAR FIX - Remove ALL underlines everywhere on the entire site */

* {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
}

a,
  a:link,
  a:visited,
  a:hover,
  a:active,
  a:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
}

/* Override Tailwind prose underlines specifically */

.prose a,
  .prose-invert a,
  .prose a:link,
  .prose a:visited,
  .prose a:hover,
  .prose-invert a:link,
  .prose-invert a:visited,
  .prose-invert a:hover {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 850px) {
  .container {
    max-width: 850px;
  }
}

@media (min-width: 1016px) {
  .container {
    max-width: 1016px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ===== UNIFIED BUTTON STYLES ===== */

@keyframes glow-sweep {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

/* Glass hover state */

/* Glass permanent state */

/* ===== GLASS GRADIENT TITLES ===== */

.gradient-title-1 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 90%, rgba(255, 255, 255, 0.8) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-2 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 88%, rgba(255, 255, 255, 0.9) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-3 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 92%, rgba(255, 255, 255, 0.7) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-4 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 88%, rgba(255, 255, 255, 0.85) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-5 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 90%, rgba(255, 255, 255, 0.75) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-6 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 85%, rgba(255, 255, 255, 0.8) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-7 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 87%, rgba(255, 255, 255, 0.9) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-8 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 89%, rgba(255, 255, 255, 0.75) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-9 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 91%, rgba(255, 255, 255, 0.65) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-10 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 93%, rgba(255, 255, 255, 0.6) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-11 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 85%, rgba(224, 231, 255, 0.3) 95%, rgba(49, 46, 129, 0.4) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-title-12 {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 85%, rgba(167, 139, 250, 0.3) 95%, rgba(76, 29, 149, 0.4) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.inset-4 {
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}

.-inset-2 {
  top: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.top-8 {
  top: 2rem;
}

.top-10 {
  top: 2.5rem;
}

.top-16 {
  top: 4rem;
}

.top-20 {
  top: 5rem;
}

.top-24 {
  top: 6rem;
}

.top-32 {
  top: 8rem;
}

.top-0\.5 {
  top: 0.125rem;
}

.-top-0 {
  top: 0px;
}

.-top-1 {
  top: -0.25rem;
}

.-top-2 {
  top: -0.5rem;
}

.-top-3 {
  top: -0.75rem;
}

.-top-4 {
  top: -1rem;
}

.-top-8 {
  top: -2rem;
}

.-top-10 {
  top: -2.5rem;
}

.-top-12 {
  top: -3rem;
}

.-top-16 {
  top: -4rem;
}

.-top-20 {
  top: -5rem;
}

.-top-32 {
  top: -8rem;
}

.-top-0\.5 {
  top: -0.125rem;
}

.top-1\/2 {
  top: 50%;
}

.top-1\/4 {
  top: 25%;
}

.top-full {
  top: 100%;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.right-6 {
  right: 1.5rem;
}

.right-8 {
  right: 2rem;
}

.right-10 {
  right: 2.5rem;
}

.right-12 {
  right: 3rem;
}

.right-24 {
  right: 6rem;
}

.-right-0 {
  right: 0px;
}

.-right-1 {
  right: -0.25rem;
}

.-right-2 {
  right: -0.5rem;
}

.-right-3 {
  right: -0.75rem;
}

.-right-6 {
  right: -1.5rem;
}

.-right-16 {
  right: -4rem;
}

.-right-20 {
  right: -5rem;
}

.-right-0\.5 {
  right: -0.125rem;
}

.right-1\/4 {
  right: 25%;
}

.right-full {
  right: 100%;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-5 {
  bottom: 1.25rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-8 {
  bottom: 2rem;
}

.bottom-12 {
  bottom: 3rem;
}

.bottom-20 {
  bottom: 5rem;
}

.bottom-24 {
  bottom: 6rem;
}

.-bottom-0 {
  bottom: 0px;
}

.-bottom-1 {
  bottom: -0.25rem;
}

.-bottom-2 {
  bottom: -0.5rem;
}

.-bottom-4 {
  bottom: -1rem;
}

.-bottom-6 {
  bottom: -1.5rem;
}

.-bottom-8 {
  bottom: -2rem;
}

.-bottom-0\.5 {
  bottom: -0.125rem;
}

.bottom-1\/4 {
  bottom: 25%;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1 {
  left: 0.25rem;
}

.left-2 {
  left: 0.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

.left-6 {
  left: 1.5rem;
}

.left-8 {
  left: 2rem;
}

.left-10 {
  left: 2.5rem;
}

.left-20 {
  left: 5rem;
}

.left-0\.5 {
  left: 0.125rem;
}

.-left-2 {
  left: -0.5rem;
}

.-left-3 {
  left: -0.75rem;
}

.-left-4 {
  left: -1rem;
}

.-left-16 {
  left: -4rem;
}

.left-1\/2 {
  left: 50%;
}

.left-1\/4 {
  left: 25%;
}

.left-full {
  left: 100%;
}

.isolate {
  isolation: isolate;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-4 {
  margin: 1rem;
}

.-m-4 {
  margin: -1rem;
}

.-m-6 {
  margin: -1.5rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-32 {
  margin-top: 8rem;
}

.mt-auto {
  margin-top: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.-mt-px {
  margin-top: -1px;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-px {
  margin-bottom: 1px;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.ml-14 {
  margin-left: 3.5rem;
}

.ml-16 {
  margin-left: 4rem;
}

.ml-auto {
  margin-left: auto;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

.h-1 {
  height: 0.25rem;
}

.h-2 {
  height: 0.5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-40 {
  height: 10rem;
}

.h-44 {
  height: 11rem;
}

.h-48 {
  height: 12rem;
}

.h-64 {
  height: 16rem;
}

.h-72 {
  height: 18rem;
}

.h-80 {
  height: 20rem;
}

.h-96 {
  height: 24rem;
}

.h-auto {
  height: auto;
}

.h-px {
  height: 1px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-1\/2 {
  height: 50%;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-16 {
  max-height: 4rem;
}

.max-h-24 {
  max-height: 6rem;
}

.max-h-32 {
  max-height: 8rem;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-full {
  max-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-1 {
  width: 0.25rem;
}

.w-2 {
  width: 0.5rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-56 {
  width: 14rem;
}

.w-64 {
  width: 16rem;
}

.w-72 {
  width: 18rem;
}

.w-80 {
  width: 20rem;
}

.w-96 {
  width: 24rem;
}

.w-auto {
  width: auto;
}

.w-px {
  width: 1px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-1\/4 {
  width: 25%;
}

.w-3\/4 {
  width: 75%;
}

.w-4\/5 {
  width: 80%;
}

.w-3\/6 {
  width: 50%;
}

.w-4\/6 {
  width: 66.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-full {
  min-width: 100%;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.max-w-none {
  max-width: none;
}

.max-w-xs {
  max-width: 20rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-screen-xl {
  max-width: 1280px;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-left {
  transform-origin: left;
}

.transform {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-gpu {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
}

.translate-x-1 {
  --tw-translate-x: 0.25rem;
}

.translate-x-5 {
  --tw-translate-x: 1.25rem;
}

.translate-x-6 {
  --tw-translate-x: 1.5rem;
}

.translate-x-7 {
  --tw-translate-x: 1.75rem;
}

.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
}

.-translate-x-1 {
  --tw-translate-x: -0.25rem;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
}

.-translate-x-full {
  --tw-translate-x: -100%;
}

.translate-y-0 {
  --tw-translate-y: 0px;
}

.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
}

.-translate-y-1 {
  --tw-translate-y: -0.25rem;
}

.translate-y-1\/2 {
  --tw-translate-y: 50%;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
}

.hover\:translate-x-1:hover {
  --tw-translate-x: 0.25rem;
}

.hover\:translate-x-2:hover {
  --tw-translate-x: 0.5rem;
}

.hover\:-translate-y-0:hover {
  --tw-translate-y: 0px;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
}

.rotate-45 {
  --tw-rotate: 45deg;
}

.rotate-180 {
  --tw-rotate: 180deg;
}

.-rotate-90 {
  --tw-rotate: -90deg;
}

.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

.scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
}

.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
}

.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
}

.scale-150 {
  --tw-scale-x: 1.5;
  --tw-scale-y: 1.5;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
}

.hover\:scale-125:hover {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
}

.-space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(55, 65, 81, var(--tw-divide-opacity));
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-all {
  word-break: break-all;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-8 {
  border-width: 8px;
}

.border {
  border-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-r-2 {
  border-right-width: 2px;
}

.border-r-4 {
  border-right-width: 4px;
}

.border-r {
  border-right-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-l {
  border-left-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-none {
  border-style: none;
}

.border-transparent {
  border-color: transparent;
}

.border-current {
  border-color: currentColor;
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgba(0, 0, 0, var(--tw-border-opacity));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, var(--tw-border-opacity));
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgba(31, 41, 55, var(--tw-border-opacity));
}

.border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgba(17, 24, 39, var(--tw-border-opacity));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgba(254, 202, 202, var(--tw-border-opacity));
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgba(252, 165, 165, var(--tw-border-opacity));
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgba(220, 38, 38, var(--tw-border-opacity));
}

.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgba(251, 191, 36, var(--tw-border-opacity));
}

.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgba(245, 158, 11, var(--tw-border-opacity));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgba(167, 243, 208, var(--tw-border-opacity));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgba(16, 185, 129, var(--tw-border-opacity));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgba(191, 219, 254, var(--tw-border-opacity));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgba(96, 165, 250, var(--tw-border-opacity));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgba(37, 99, 235, var(--tw-border-opacity));
}

.border-indigo-500 {
  --tw-border-opacity: 1;
  border-color: rgba(99, 102, 241, var(--tw-border-opacity));
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgba(221, 214, 254, var(--tw-border-opacity));
}

.border-purple-400 {
  --tw-border-opacity: 1;
  border-color: rgba(167, 139, 250, var(--tw-border-opacity));
}

.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgba(139, 92, 246, var(--tw-border-opacity));
}

.border-pink-400 {
  --tw-border-opacity: 1;
  border-color: rgba(244, 114, 182, var(--tw-border-opacity));
}

.group:hover .group-hover\:border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
}

.hover\:border-gray-500:hover {
  --tw-border-opacity: 1;
  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
}

.hover\:border-gray-600:hover {
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
}

.hover\:border-green-400:hover {
  --tw-border-opacity: 1;
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
}

.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgba(96, 165, 250, var(--tw-border-opacity));
}

.hover\:border-purple-500:hover {
  --tw-border-opacity: 1;
  border-color: rgba(139, 92, 246, var(--tw-border-opacity));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:border-red-400:focus {
  --tw-border-opacity: 1;
  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
}

.focus\:border-green-400:focus {
  --tw-border-opacity: 1;
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
}

.focus\:border-blue-400:focus {
  --tw-border-opacity: 1;
  border-color: rgba(96, 165, 250, var(--tw-border-opacity));
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

.focus\:border-purple-300:focus {
  --tw-border-opacity: 1;
  border-color: rgba(196, 181, 253, var(--tw-border-opacity));
}

.focus\:border-purple-400:focus {
  --tw-border-opacity: 1;
  border-color: rgba(167, 139, 250, var(--tw-border-opacity));
}

.focus\:border-purple-500:focus {
  --tw-border-opacity: 1;
  border-color: rgba(139, 92, 246, var(--tw-border-opacity));
}

.focus\:border-pink-400:focus {
  --tw-border-opacity: 1;
  border-color: rgba(244, 114, 182, var(--tw-border-opacity));
}

.dark .dark\:border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
}

.dark .dark\:border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, var(--tw-border-opacity));
}

.dark .dark\:border-red-800 {
  --tw-border-opacity: 1;
  border-color: rgba(153, 27, 27, var(--tw-border-opacity));
}

.dark .dark\:border-green-700 {
  --tw-border-opacity: 1;
  border-color: rgba(4, 120, 87, var(--tw-border-opacity));
}

.dark .dark\:border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgba(29, 78, 216, var(--tw-border-opacity));
}

.dark .dark\:border-purple-700 {
  --tw-border-opacity: 1;
  border-color: rgba(109, 40, 217, var(--tw-border-opacity));
}

.dark .dark\:hover\:border-blue-500:hover {
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

.border-opacity-20 {
  --tw-border-opacity: 0.2;
}

.hover\:border-opacity-30:hover {
  --tw-border-opacity: 0.3;
}

.bg-transparent {
  background-color: transparent;
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
}

.bg-red-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(127, 29, 29, var(--tw-bg-opacity));
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(251, 191, 36, var(--tw-bg-opacity));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
}

.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(217, 119, 6, var(--tw-bg-opacity));
}

.bg-yellow-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(120, 53, 15, var(--tw-bg-opacity));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
}

.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgba(110, 231, 183, var(--tw-bg-opacity));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
}

.bg-green-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(6, 78, 59, var(--tw-bg-opacity));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}

.bg-blue-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 58, 138, var(--tw-bg-opacity));
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(245, 243, 255, var(--tw-bg-opacity));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 233, 254, var(--tw-bg-opacity));
}

.bg-purple-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(167, 139, 250, var(--tw-bg-opacity));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(124, 58, 237, var(--tw-bg-opacity));
}

.bg-pink-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(244, 114, 182, var(--tw-bg-opacity));
}

.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
}

.group:hover .group-hover\:bg-yellow-300 {
  --tw-bg-opacity: 1;
  background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
}

.group:hover .group-hover\:bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}

.hover\:bg-gray-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
}

.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}

.hover\:bg-yellow-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
}

.hover\:bg-yellow-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(217, 119, 6, var(--tw-bg-opacity));
}

.hover\:bg-yellow-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(180, 83, 9, var(--tw-bg-opacity));
}

.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
}

.hover\:bg-green-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(4, 120, 87, var(--tw-bg-opacity));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
}

.hover\:bg-blue-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
}

.hover\:bg-blue-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
}

.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}

.hover\:bg-indigo-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
}

.hover\:bg-purple-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(167, 139, 250, var(--tw-bg-opacity));
}

.hover\:bg-purple-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(124, 58, 237, var(--tw-bg-opacity));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(109, 40, 217, var(--tw-bg-opacity));
}

.focus\:bg-gray-600:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
}

.dark .dark\:bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}

.dark .dark\:bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}

.bg-opacity-5 {
  --tw-bg-opacity: 0.05;
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}

.bg-opacity-30 {
  --tw-bg-opacity: 0.3;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

.bg-opacity-90 {
  --tw-bg-opacity: 0.9;
}

.bg-opacity-95 {
  --tw-bg-opacity: 0.95;
}

.hover\:bg-opacity-30:hover {
  --tw-bg-opacity: 0.3;
}

.hover\:bg-opacity-50:hover {
  --tw-bg-opacity: 0.5;
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-transparent {
  --tw-gradient-from: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.from-current {
  --tw-gradient-from: currentColor;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.from-black {
  --tw-gradient-from: #000;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.from-white {
  --tw-gradient-from: #fff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.from-gray-50 {
  --tw-gradient-from: #f9fafb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0));
}

.from-gray-400 {
  --tw-gradient-from: #9ca3af;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(156, 163, 175, 0));
}

.from-gray-500 {
  --tw-gradient-from: #6b7280;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(107, 114, 128, 0));
}

.from-gray-600 {
  --tw-gradient-from: #4b5563;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(75, 85, 99, 0));
}

.from-gray-700 {
  --tw-gradient-from: #374151;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55, 65, 81, 0));
}

.from-gray-800 {
  --tw-gradient-from: #1f2937;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 41, 55, 0));
}

.from-gray-900 {
  --tw-gradient-from: #111827;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 24, 39, 0));
}

.from-red-400 {
  --tw-gradient-from: #f87171;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 113, 113, 0));
}

.from-red-500 {
  --tw-gradient-from: #ef4444;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0));
}

.from-red-600 {
  --tw-gradient-from: #dc2626;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0));
}

.from-yellow-300 {
  --tw-gradient-from: #fcd34d;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 211, 77, 0));
}

.from-yellow-400 {
  --tw-gradient-from: #fbbf24;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0));
}

.from-yellow-500 {
  --tw-gradient-from: #f59e0b;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
}

.from-yellow-600 {
  --tw-gradient-from: #d97706;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
}

.from-yellow-900 {
  --tw-gradient-from: #78350f;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(120, 53, 15, 0));
}

.from-green-400 {
  --tw-gradient-from: #34d399;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0));
}

.from-green-500 {
  --tw-gradient-from: #10b981;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0));
}

.from-green-600 {
  --tw-gradient-from: #059669;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0));
}

.from-green-900 {
  --tw-gradient-from: #064e3b;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 78, 59, 0));
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0));
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.from-blue-600 {
  --tw-gradient-from: #2563eb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.from-blue-700 {
  --tw-gradient-from: #1d4ed8;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0));
}

.from-blue-900 {
  --tw-gradient-from: #1e3a8a;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 58, 138, 0));
}

.from-indigo-400 {
  --tw-gradient-from: #818cf8;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(129, 140, 248, 0));
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0));
}

.from-indigo-600 {
  --tw-gradient-from: #4f46e5;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79, 70, 229, 0));
}

.from-indigo-900 {
  --tw-gradient-from: #312e81;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(49, 46, 129, 0));
}

.from-purple-50 {
  --tw-gradient-from: #f5f3ff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 243, 255, 0));
}

.from-purple-400 {
  --tw-gradient-from: #a78bfa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(167, 139, 250, 0));
}

.from-purple-500 {
  --tw-gradient-from: #8b5cf6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
}

.from-purple-600 {
  --tw-gradient-from: #7c3aed;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(124, 58, 237, 0));
}

.from-purple-900 {
  --tw-gradient-from: #4c1d95;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(76, 29, 149, 0));
}

.from-pink-400 {
  --tw-gradient-from: #f472b6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 114, 182, 0));
}

.from-pink-500 {
  --tw-gradient-from: #ec4899;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 72, 153, 0));
}

.hover\:from-gray-600:hover {
  --tw-gradient-from: #4b5563;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(75, 85, 99, 0));
}

.hover\:from-red-400:hover {
  --tw-gradient-from: #f87171;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 113, 113, 0));
}

.hover\:from-red-600:hover {
  --tw-gradient-from: #dc2626;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0));
}

.hover\:from-yellow-400:hover {
  --tw-gradient-from: #fbbf24;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0));
}

.hover\:from-yellow-600:hover {
  --tw-gradient-from: #d97706;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
}

.hover\:from-green-400:hover {
  --tw-gradient-from: #34d399;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0));
}

.hover\:from-green-600:hover {
  --tw-gradient-from: #059669;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0));
}

.hover\:from-blue-400:hover {
  --tw-gradient-from: #60a5fa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0));
}

.hover\:from-blue-500:hover {
  --tw-gradient-from: #3b82f6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.hover\:from-blue-600:hover {
  --tw-gradient-from: #2563eb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.hover\:from-blue-700:hover {
  --tw-gradient-from: #1d4ed8;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0));
}

.hover\:from-purple-400:hover {
  --tw-gradient-from: #a78bfa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(167, 139, 250, 0));
}

.hover\:from-purple-600:hover {
  --tw-gradient-from: #7c3aed;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(124, 58, 237, 0));
}

.hover\:from-purple-700:hover {
  --tw-gradient-from: #6d28d9;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(109, 40, 217, 0));
}

.hover\:from-pink-600:hover {
  --tw-gradient-from: #db2777;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 39, 119, 0));
}

.via-transparent {
  --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.via-black {
  --tw-gradient-stops: var(--tw-gradient-from), #000, var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.via-white {
  --tw-gradient-stops: var(--tw-gradient-from), #fff, var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.via-gray-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937, var(--tw-gradient-to, rgba(31, 41, 55, 0));
}

.via-red-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #f87171, var(--tw-gradient-to, rgba(248, 113, 113, 0));
}

.via-green-200 {
  --tw-gradient-stops: var(--tw-gradient-from), #a7f3d0, var(--tw-gradient-to, rgba(167, 243, 208, 0));
}

.via-green-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #34d399, var(--tw-gradient-to, rgba(52, 211, 153, 0));
}

.via-green-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #10b981, var(--tw-gradient-to, rgba(16, 185, 129, 0));
}

.via-green-900 {
  --tw-gradient-stops: var(--tw-gradient-from), #064e3b, var(--tw-gradient-to, rgba(6, 78, 59, 0));
}

.via-blue-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #60a5fa, var(--tw-gradient-to, rgba(96, 165, 250, 0));
}

.via-blue-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6, var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.via-blue-900 {
  --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a, var(--tw-gradient-to, rgba(30, 58, 138, 0));
}

.via-indigo-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #818cf8, var(--tw-gradient-to, rgba(129, 140, 248, 0));
}

.via-purple-200 {
  --tw-gradient-stops: var(--tw-gradient-from), #ddd6fe, var(--tw-gradient-to, rgba(221, 214, 254, 0));
}

.via-purple-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #a78bfa, var(--tw-gradient-to, rgba(167, 139, 250, 0));
}

.via-purple-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6, var(--tw-gradient-to, rgba(139, 92, 246, 0));
}

.via-purple-900 {
  --tw-gradient-stops: var(--tw-gradient-from), #4c1d95, var(--tw-gradient-to, rgba(76, 29, 149, 0));
}

.via-pink-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #f472b6, var(--tw-gradient-to, rgba(244, 114, 182, 0));
}

.via-pink-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to, rgba(236, 72, 153, 0));
}

.via-pink-900 {
  --tw-gradient-stops: var(--tw-gradient-from), #831843, var(--tw-gradient-to, rgba(131, 24, 67, 0));
}

.to-transparent {
  --tw-gradient-to: transparent;
}

.to-black {
  --tw-gradient-to: #000;
}

.to-gray-500 {
  --tw-gradient-to: #6b7280;
}

.to-gray-600 {
  --tw-gradient-to: #4b5563;
}

.to-gray-700 {
  --tw-gradient-to: #374151;
}

.to-gray-800 {
  --tw-gradient-to: #1f2937;
}

.to-gray-900 {
  --tw-gradient-to: #111827;
}

.to-red-400 {
  --tw-gradient-to: #f87171;
}

.to-red-500 {
  --tw-gradient-to: #ef4444;
}

.to-red-600 {
  --tw-gradient-to: #dc2626;
}

.to-red-700 {
  --tw-gradient-to: #b91c1c;
}

.to-red-900 {
  --tw-gradient-to: #7f1d1d;
}

.to-yellow-50 {
  --tw-gradient-to: #fffbeb;
}

.to-yellow-400 {
  --tw-gradient-to: #fbbf24;
}

.to-yellow-500 {
  --tw-gradient-to: #f59e0b;
}

.to-green-300 {
  --tw-gradient-to: #6ee7b7;
}

.to-green-400 {
  --tw-gradient-to: #34d399;
}

.to-green-500 {
  --tw-gradient-to: #10b981;
}

.to-green-600 {
  --tw-gradient-to: #059669;
}

.to-green-900 {
  --tw-gradient-to: #064e3b;
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff;
}

.to-blue-300 {
  --tw-gradient-to: #93c5fd;
}

.to-blue-400 {
  --tw-gradient-to: #60a5fa;
}

.to-blue-500 {
  --tw-gradient-to: #3b82f6;
}

.to-blue-600 {
  --tw-gradient-to: #2563eb;
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8;
}

.to-blue-900 {
  --tw-gradient-to: #1e3a8a;
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff;
}

.to-indigo-400 {
  --tw-gradient-to: #818cf8;
}

.to-indigo-500 {
  --tw-gradient-to: #6366f1;
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5;
}

.to-indigo-700 {
  --tw-gradient-to: #4338ca;
}

.to-indigo-900 {
  --tw-gradient-to: #312e81;
}

.to-purple-200 {
  --tw-gradient-to: #ddd6fe;
}

.to-purple-300 {
  --tw-gradient-to: #c4b5fd;
}

.to-purple-400 {
  --tw-gradient-to: #a78bfa;
}

.to-purple-500 {
  --tw-gradient-to: #8b5cf6;
}

.to-purple-600 {
  --tw-gradient-to: #7c3aed;
}

.to-purple-700 {
  --tw-gradient-to: #6d28d9;
}

.to-purple-900 {
  --tw-gradient-to: #4c1d95;
}

.to-pink-50 {
  --tw-gradient-to: #fdf2f8;
}

.to-pink-300 {
  --tw-gradient-to: #f9a8d4;
}

.to-pink-400 {
  --tw-gradient-to: #f472b6;
}

.to-pink-500 {
  --tw-gradient-to: #ec4899;
}

.to-pink-600 {
  --tw-gradient-to: #db2777;
}

.to-pink-900 {
  --tw-gradient-to: #831843;
}

.hover\:to-gray-700:hover {
  --tw-gradient-to: #374151;
}

.hover\:to-red-400:hover {
  --tw-gradient-to: #f87171;
}

.hover\:to-red-700:hover {
  --tw-gradient-to: #b91c1c;
}

.hover\:to-green-400:hover {
  --tw-gradient-to: #34d399;
}

.hover\:to-green-600:hover {
  --tw-gradient-to: #059669;
}

.hover\:to-green-700:hover {
  --tw-gradient-to: #047857;
}

.hover\:to-blue-400:hover {
  --tw-gradient-to: #60a5fa;
}

.hover\:to-blue-500:hover {
  --tw-gradient-to: #3b82f6;
}

.hover\:to-blue-600:hover {
  --tw-gradient-to: #2563eb;
}

.hover\:to-blue-700:hover {
  --tw-gradient-to: #1d4ed8;
}

.hover\:to-indigo-400:hover {
  --tw-gradient-to: #818cf8;
}

.hover\:to-indigo-600:hover {
  --tw-gradient-to: #4f46e5;
}

.hover\:to-indigo-700:hover {
  --tw-gradient-to: #4338ca;
}

.hover\:to-purple-400:hover {
  --tw-gradient-to: #a78bfa;
}

.hover\:to-purple-600:hover {
  --tw-gradient-to: #7c3aed;
}

.hover\:to-purple-700:hover {
  --tw-gradient-to: #6d28d9;
}

.hover\:to-pink-400:hover {
  --tw-gradient-to: #f472b6;
}

.hover\:to-pink-600:hover {
  --tw-gradient-to: #db2777;
}

.hover\:to-pink-700:hover {
  --tw-gradient-to: #be185d;
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.fill-current {
  fill: currentColor;
}

.stroke-2 {
  stroke-width: 2;
}

.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-36 {
  padding-top: 9rem;
}

.pt-48 {
  padding-top: 12rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-14 {
  padding-left: 3.5rem;
}

.pl-3\.5 {
  padding-left: 0.875rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-black {
  font-weight: 900;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-transparent {
  color: transparent;
}

.text-black {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgba(243, 244, 246, var(--tw-text-opacity));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgba(229, 231, 235, var(--tw-text-opacity));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.text-red-100 {
  --tw-text-opacity: 1;
  color: rgba(254, 226, 226, var(--tw-text-opacity));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgba(254, 202, 202, var(--tw-text-opacity));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgba(252, 165, 165, var(--tw-text-opacity));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, var(--tw-text-opacity));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, var(--tw-text-opacity));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgba(185, 28, 28, var(--tw-text-opacity));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgba(153, 27, 27, var(--tw-text-opacity));
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgba(252, 211, 77, var(--tw-text-opacity));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgba(251, 191, 36, var(--tw-text-opacity));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgba(245, 158, 11, var(--tw-text-opacity));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgba(217, 119, 6, var(--tw-text-opacity));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgba(146, 64, 14, var(--tw-text-opacity));
}

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgba(209, 250, 229, var(--tw-text-opacity));
}

.text-green-200 {
  --tw-text-opacity: 1;
  color: rgba(167, 243, 208, var(--tw-text-opacity));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgba(110, 231, 183, var(--tw-text-opacity));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgba(52, 211, 153, var(--tw-text-opacity));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgba(16, 185, 129, var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgba(5, 150, 105, var(--tw-text-opacity));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgba(4, 120, 87, var(--tw-text-opacity));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgba(6, 95, 70, var(--tw-text-opacity));
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgba(219, 234, 254, var(--tw-text-opacity));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgba(191, 219, 254, var(--tw-text-opacity));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgba(147, 197, 253, var(--tw-text-opacity));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgba(96, 165, 250, var(--tw-text-opacity));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgba(30, 64, 175, var(--tw-text-opacity));
}

.text-indigo-200 {
  --tw-text-opacity: 1;
  color: rgba(199, 210, 254, var(--tw-text-opacity));
}

.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgba(165, 180, 252, var(--tw-text-opacity));
}

.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgba(129, 140, 248, var(--tw-text-opacity));
}

.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgba(237, 233, 254, var(--tw-text-opacity));
}

.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgba(221, 214, 254, var(--tw-text-opacity));
}

.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgba(196, 181, 253, var(--tw-text-opacity));
}

.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgba(167, 139, 250, var(--tw-text-opacity));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgba(124, 58, 237, var(--tw-text-opacity));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgba(109, 40, 217, var(--tw-text-opacity));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgba(91, 33, 182, var(--tw-text-opacity));
}

.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgba(249, 168, 212, var(--tw-text-opacity));
}

.text-pink-400 {
  --tw-text-opacity: 1;
  color: rgba(244, 114, 182, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgba(252, 211, 77, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-green-300 {
  --tw-text-opacity: 1;
  color: rgba(110, 231, 183, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-green-400 {
  --tw-text-opacity: 1;
  color: rgba(52, 211, 153, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-blue-300 {
  --tw-text-opacity: 1;
  color: rgba(147, 197, 253, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-blue-400 {
  --tw-text-opacity: 1;
  color: rgba(96, 165, 250, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-purple-300 {
  --tw-text-opacity: 1;
  color: rgba(196, 181, 253, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-purple-400 {
  --tw-text-opacity: 1;
  color: rgba(167, 139, 250, var(--tw-text-opacity));
}

.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgba(252, 165, 165, var(--tw-text-opacity));
}

.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, var(--tw-text-opacity));
}

.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgba(127, 29, 29, var(--tw-text-opacity));
}

.hover\:text-yellow-100:hover {
  --tw-text-opacity: 1;
  color: rgba(254, 243, 199, var(--tw-text-opacity));
}

.hover\:text-yellow-300:hover {
  --tw-text-opacity: 1;
  color: rgba(252, 211, 77, var(--tw-text-opacity));
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgba(110, 231, 183, var(--tw-text-opacity));
}

.hover\:text-green-400:hover {
  --tw-text-opacity: 1;
  color: rgba(52, 211, 153, var(--tw-text-opacity));
}

.hover\:text-green-900:hover {
  --tw-text-opacity: 1;
  color: rgba(6, 78, 59, var(--tw-text-opacity));
}

.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgba(147, 197, 253, var(--tw-text-opacity));
}

.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgba(96, 165, 250, var(--tw-text-opacity));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgba(30, 64, 175, var(--tw-text-opacity));
}

.hover\:text-blue-900:hover {
  --tw-text-opacity: 1;
  color: rgba(30, 58, 138, var(--tw-text-opacity));
}

.hover\:text-purple-200:hover {
  --tw-text-opacity: 1;
  color: rgba(221, 214, 254, var(--tw-text-opacity));
}

.hover\:text-purple-300:hover {
  --tw-text-opacity: 1;
  color: rgba(196, 181, 253, var(--tw-text-opacity));
}

.hover\:text-purple-400:hover {
  --tw-text-opacity: 1;
  color: rgba(167, 139, 250, var(--tw-text-opacity));
}

.hover\:text-purple-700:hover {
  --tw-text-opacity: 1;
  color: rgba(109, 40, 217, var(--tw-text-opacity));
}

.hover\:text-pink-300:hover {
  --tw-text-opacity: 1;
  color: rgba(249, 168, 212, var(--tw-text-opacity));
}

.dark .dark\:text-gray-200 {
  --tw-text-opacity: 1;
  color: rgba(229, 231, 235, var(--tw-text-opacity));
}

.dark .dark\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
}

.dark .dark\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgba(252, 165, 165, var(--tw-text-opacity));
}

.dark .dark\:text-red-400 {
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, var(--tw-text-opacity));
}

.dark .dark\:text-green-300 {
  --tw-text-opacity: 1;
  color: rgba(110, 231, 183, var(--tw-text-opacity));
}

.dark .dark\:text-green-400 {
  --tw-text-opacity: 1;
  color: rgba(52, 211, 153, var(--tw-text-opacity));
}

.dark .dark\:text-blue-200 {
  --tw-text-opacity: 1;
  color: rgba(191, 219, 254, var(--tw-text-opacity));
}

.dark .dark\:text-blue-300 {
  --tw-text-opacity: 1;
  color: rgba(147, 197, 253, var(--tw-text-opacity));
}

.dark .dark\:text-blue-400 {
  --tw-text-opacity: 1;
  color: rgba(96, 165, 250, var(--tw-text-opacity));
}

.dark .dark\:text-purple-300 {
  --tw-text-opacity: 1;
  color: rgba(196, 181, 253, var(--tw-text-opacity));
}

.dark .dark\:text-purple-400 {
  --tw-text-opacity: 1;
  color: rgba(167, 139, 250, var(--tw-text-opacity));
}

.dark .dark\:hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgba(96, 165, 250, var(--tw-text-opacity));
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
}

.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
}

.placeholder-gray-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}

.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}

.opacity-0 {
  opacity: 0;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-50 {
  opacity: 0.5;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

*, ::before, ::after {
  --tw-shadow: 0 0 #0000;
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

*, ::before, ::after {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
}

.ring-yellow-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(252, 211, 77, var(--tw-ring-opacity));
}

.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
}

.ring-purple-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(167, 139, 250, var(--tw-ring-opacity));
}

.ring-purple-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(139, 92, 246, var(--tw-ring-opacity));
}

.focus\:ring-gray-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(107, 114, 128, var(--tw-ring-opacity));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(239, 68, 68, var(--tw-ring-opacity));
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(16, 185, 129, var(--tw-ring-opacity));
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
}

.focus\:ring-purple-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(221, 214, 254, var(--tw-ring-opacity));
}

.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(139, 92, 246, var(--tw-ring-opacity));
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.ring-offset-black {
  --tw-ring-offset-color: #000;
}

.focus\:ring-offset-gray-800:focus {
  --tw-ring-offset-color: #1f2937;
}

.filter {
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-sm {
  --tw-blur: blur(4px);
}

.blur {
  --tw-blur: blur(8px);
}

.blur-lg {
  --tw-blur: blur(16px);
}

.blur-xl {
  --tw-blur: blur(24px);
}

.blur-2xl {
  --tw-blur: blur(40px);
}

.blur-3xl {
  --tw-blur: blur(64px);
}

.brightness-75 {
  --tw-brightness: brightness(.75);
}

.brightness-110 {
  --tw-brightness: brightness(1.1);
}

.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}

.grayscale {
  --tw-grayscale: grayscale(100%);
}

.backdrop-filter {
  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
}

.backdrop-blur-2xl {
  --tw-backdrop-blur: blur(40px);
}

.backdrop-blur-3xl {
  --tw-backdrop-blur: blur(64px);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.delay-75 {
  transition-delay: 75ms;
}

.delay-100 {
  transition-delay: 100ms;
}

.delay-150 {
  transition-delay: 150ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== CSS IMPORTS ===== */

/* Workflow Studio Ultimate Components - CSS file not found, import removed */

/* Navigation Unifiée Style TalentAI - CSS file not found, import removed */

/* ===== GLOBAL SELECT FIX - TRANSPARENT BACKGROUND ===== */

/* ===== LOADING SCREEN SMOOTH TRANSITIONS ===== */

body {
  background-color: #000 !important;
  transition: background-color 0.5s ease;
}

.app-container {
  width: 100vw !important;
  min-height: 100vh;
  transition: opacity 0.5s ease;
  position: relative;
  overflow-x: hidden;
}

/* ===== RESPONSIVE CLASSES FIX ===== */

/* ===== TAILWIND CUSTOM COMPONENTS ===== */

/* ===== CSS OLIVITCHY - VERSION SIMPLIFIÉE ===== */

/* ===== GOOGLE VERIFIED TESTIMONIALS STYLES ===== */

.google-verified-testimonials > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.google-business-header {
  margin-bottom: 2rem;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.business-info {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .business-info {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.business-branding {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.platform-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-container .platform-icon {
  /* Enhanced glassomorphism */
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.toast-container .platform-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toast-container .platform-icon {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
}

.platform-icon {
  position: relative;
}

.google-icon {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding: 0.5rem;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.verification-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}

.business-details h2 {
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.verification-status {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(5, 150, 105, var(--tw-text-opacity));
}

.business-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

@media (min-width: 640px) {
  .business-stats {
    flex-direction: row;
    align-items: center;
  }
}

.star-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.star.filled {
  --tw-text-opacity: 1;
  color: rgba(251, 191, 36, var(--tw-text-opacity));
}

.star.empty {
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
}

.rating-numeric {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.stat-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.google-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.google-maps-link:hover {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.google-maps-link {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
  padding-top: 1.5rem;
}

.summary-item {
  text-align: center;
}

.summary-number {
  display: block;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.summary-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.testimonials-grid > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.testimonial-card {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.testimonial-card:hover {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.testimonial-card {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
}

.testimonial-card.google-verified {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

.testimonial-header {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reviewer-avatar {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}

.reviewer-name {
  margin-bottom: 0.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.reviewer-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.review-date::after {
  content: "•";
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.verification-container {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(191, 219, 254, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
  padding: 0.75rem;
}

.google-verified-badge {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.verified-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.verification-details {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.view-original-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.view-original-link:hover {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.view-original-link {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.testimonial-content {
  margin-bottom: 1rem;
}

.testimonial-text {
  margin-bottom: 0.75rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}

.expand-toggle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.expand-toggle:hover {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.expand-toggle {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.project-details {
  margin-top: 1rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
  padding: 1rem;
}

.project-details h5 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.project-info > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.project-duration {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tech-tag {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.author-response {
  margin-top: 1rem;
  border-radius: 0.5rem;
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgba(16, 185, 129, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
  padding: 1rem;
}

.response-header {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.response-author {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(4, 120, 87, var(--tw-text-opacity));
}

.response-date {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(5, 150, 105, var(--tw-text-opacity));
}

.response-text {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}

.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
  padding-top: 1rem;
}

.helpful-count {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.verify-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, var(--tw-text-opacity));
}

.verify-link:hover {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.verify-link {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.show-more-section {
  margin-top: 2rem;
  text-align: center;
}

.show-more-button {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}

.show-more-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}

.show-more-button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.google-review-cta {
  margin-top: 3rem;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(191, 219, 254, var(--tw-border-opacity));
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #eff6ff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
  --tw-gradient-to: #eef2ff;
  padding: 2rem;
  text-align: center;
}

.cta-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.cta-content p {
  margin-bottom: 1.5rem;
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.leave-review-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}

.leave-review-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}

.leave-review-button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.cta-note {
  margin-top: 1rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
}

/* ===== ENHANCED TIMELINE STYLES ===== */

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
}

/* Timeline border animation */

.border-gradient-to-b {
  border-image: linear-gradient(to bottom, #60a5fa, #a855f7, #ec4899) 1;
}

/* Pulse animation for timeline dots */

@keyframes timeline-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.animate-pulse {
  animation: timeline-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Tech badge hover effects */

.tech-badge {
  position: relative;
  overflow: hidden;
}

.tech-badge::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;
}

.tech-badge:hover::before {
  left: 100%;
}

/* Achievement cards animation */

@keyframes achievement-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.2);
  }

  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  }
}

.achievement-card:hover {
  animation: achievement-glow 2s ease-in-out infinite;
}

/* Metrics cards */

.metric-card {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.metric-card:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: scale(1.05);
}

/* ===== MASONRY TIMELINE STYLES ===== */

/* Masonry container */

.masonry-container {
  position: relative;
  width: 100%;
  min-height: 200vh;
}

/* Card states and transitions */

.masonry-card {
  position: absolute;
  transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform, opacity;
}

.masonry-card.compact {
  width: 280px;
  z-index: 1;
}

.masonry-card.expanded {
  width: 400px;
  z-index: 10;
}

.masonry-card.modal-mode {
  z-index: 50;
}

/* Glassmorphism enhanced */

.experience-card {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.experience-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px 0 rgba(31, 38, 135, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.experience-card.expanded {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-12px);
  box-shadow: 
    0 25px 50px 0 rgba(31, 38, 135, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Tech badge shimmer effect */

.tech-badge {
  position: relative;
  overflow: hidden;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.tech-badge::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.6s ease;
}

.tech-badge:hover::before {
  left: 100%;
}

.tech-badge:hover {
  background: rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
}

/* Progress bars for tech levels */

.tech-progress {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
}

.tech-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tech-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% { transform: translateX(-100%);
  }

  100% { transform: translateX(100%);
  }
}

/* Achievement cards glow */

.achievement-card {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.achievement-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.achievement-card:hover::before {
  opacity: 1;
}

.achievement-card:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  transform: translateX(4px);
}

/* Modal backdrop */

.modal-backdrop {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

/* Modal content */

.modal-content {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 25px 50px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Card type indicators */

.type-formation { border-left: 4px solid #3b82f6;
}

.type-startup { border-left: 4px solid #a855f7;
}

.type-agence { border-left: 4px solid #10b981;
}

.type-cto { border-left: 4px solid #f59e0b;
}

.type-consulting { border-left: 4px solid #6366f1;
}

.type-innovation { border-left: 4px solid #eab308;
}

/* Responsive masonry */

@media (max-width: 768px) {
  .masonry-card.compact,
  .masonry-card.expanded {
    width: 100% !important;
    position: relative !important;
    margin-bottom: 1.5rem;
  }

  .masonry-container {
    min-height: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .masonry-card.compact {
    width: calc(50% - 1rem);
  }

  .masonry-card.expanded {
    width: calc(100% - 2rem);
  }
}

/* Scroll animations */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Stagger animation delays */

.stagger-1 { animation-delay: 0.1s;
}

.stagger-2 { animation-delay: 0.2s;
}

.stagger-3 { animation-delay: 0.3s;
}

.stagger-4 { animation-delay: 0.4s;
}

.stagger-5 { animation-delay: 0.5s;
}

.stagger-6 { animation-delay: 0.6s;
}

/* NOUVELLES ANIMATIONS POUR LA SECTION DEV-APPROACH */

@keyframes gradient-x {
  0%, 100% {
    background-size: 200% 200%;
    background-position: left center;
  }

  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.animate-gradient-x {
  animation: gradient-x 3s ease infinite;
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 6s ease-in-out infinite 2s;
}

.animate-bounce-slow {
  animation: bounce-slow 4s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

/* ===== STYLES DE BASE ===== */

.workflow-composer select,
.intelligent-questionnaire input,
.intelligent-questionnaire textarea,
.intelligent-questionnaire select,
.intelligent-workflow-launcher input,
.intelligent-workflow-launcher textarea,
.intelligent-workflow-launcher select,
.intelligent-assistant-creator input,
.intelligent-assistant-creator textarea,
.intelligent-assistant-creator select {
  color: #374151 !important;
  background: transparent;
  border: 1px solid transparent !important;
}

/* Fix spécifique pour l'assistant universel */

.universal-assistant-widget input,
.universal-assistant-widget textarea,
.universal-assistant-widget select {
  color: #374151 !important;
  background: transparent;
}

/* Fix pour les placeholders */

.workflow-composer input::-moz-placeholder, .intelligent-questionnaire input::-moz-placeholder, .intelligent-workflow-launcher input::-moz-placeholder, .intelligent-assistant-creator input::-moz-placeholder, .universal-assistant-widget input::-moz-placeholder {
  color: #9CA3AF !important;
}

.workflow-composer input::placeholder,
.intelligent-questionnaire input::placeholder,
.intelligent-workflow-launcher input::placeholder,
.intelligent-assistant-creator input::placeholder,
.universal-assistant-widget input::placeholder {
  color: #9CA3AF !important;
}

/* Fix pour les labels et textes dans les composants workflow */

.workflow-composer label,
.intelligent-questionnaire label,
.intelligent-workflow-launcher label,
.intelligent-assistant-creator label {
  color: #F9FAFB !important;
}

/* Fix pour les boutons dans les composants workflow */

.workflow-composer button,
.intelligent-questionnaire button,
.intelligent-workflow-launcher button,
.intelligent-assistant-creator button {
  color: white !important;
  background: transparent;
}

/* Fix pour les boutons secondaires */

.workflow-composer .btn-secondary,
.intelligent-questionnaire .btn-secondary,
.intelligent-workflow-launcher .btn-secondary,
.intelligent-assistant-creator .btn-secondary {
  color: #374151 !important;
  background: transparent;
  border: 1px solid transparent !important;
}

/* ===== GLASSOMORPHISM TOASTS ===== */

.toast-container {
  /* Support pour backdrop-blur */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* Support Safari */
  transform: translateZ(0);
}

.toast-container .relative {
  /* Enhanced glassomorphism */
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.toast-container .relative::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Fallback pour navigateurs sans support backdrop-blur */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toast-container .relative {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
}

/* ===== STYLES TECH ICONS ESSENTIELS ===== */

/* ===== BLOG STYLES ===== */

/* Glass Card Effects */

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.glass-card-strong {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Badge Styles */

.badge-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 200;
  font-size: 0.75rem;
  display: inline-block;
  margin: 0.125rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Prose Styles for Blog Content */

.prose {
  color: #e5e7eb;
  max-width: none;
}

.prose h1 {
  color: #f9fafb;
  font-size: 2.25rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.prose h2 {
  color: #f3f4f6;
  font-size: 1.875rem;
  font-weight: 300;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h3 {
  color: #f3f4f6;
  font-size: 1.5rem;
  font-weight: 300;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.prose a {
  color: #60a5fa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: #93c5fd;
}

.prose code {
  background: rgba(255, 255, 255, 0.1);
  color: #fbbf24;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.prose pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.prose blockquote {
  border-left: 4px solid #60a5fa;
  background: rgba(96, 165, 250, 0.1);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

.prose ul, .prose ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.prose li {
  margin: 0.5rem 0;
}

.prose img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
}

/* Blog List Specific Styles */

.blog-category-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.blog-category-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.blog-category-button.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Blog Article Content Styles */

.article-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #e5e7eb;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: #f9fafb;
  font-weight: 300;
  margin-top: 2rem;
  margin-bottom: 1rem;
  scroll-margin-top: 6rem;
}

.article-content h1 {
  font-size: 2.5rem;
  border-bottom: 2px solid #10b981;
  padding-bottom: 0.5rem;
}

.article-content h2 {
  font-size: 2rem;
  color: #10b981;
}

.article-content h3 {
  font-size: 1.5rem;
  color: #34d399;
}

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content a {
  color: #22d3ee;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-content a:hover {
  color: #67e8f9;
}

.article-content strong {
  color: #f3f4f6;
  font-weight: 300;
}

.article-content em {
  color: #d1d5db;
  font-style: italic;
}

.article-content code {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.9em;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.article-content pre {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
  position: relative;
}

.article-content pre code {
  background: transparent;
  color: #e5e7eb;
  padding: 0;
  border: none;
  font-size: 0.875rem;
}

.article-content blockquote {
  border-left: 4px solid #22d3ee;
  background: rgba(34, 211, 238, 0.1);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 0.75rem 0.75rem 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.article-content blockquote p {
  margin-bottom: 0.5rem;
  font-style: italic;
  color: #f3f4f6;
}

.article-content ul,
.article-content ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.article-content li {
  margin: 0.75rem 0;
  color: #d1d5db;
}

.article-content li::marker {
  color: #10b981;
}

.article-content img {
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  margin: 2rem auto;
  max-width: 100%;
  height: auto;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  overflow: hidden;
}

.article-content th,
.article-content td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.article-content th {
  background: rgba(16, 185, 129, 0.2);
  color: #f9fafb;
  font-weight: 300;
}

.article-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #10b981, transparent);
  margin: 3rem 0;
}

/* Reading Progress Animations */

@keyframes reading-pulse {
  0%, 100% { opacity: 0.8;
  }

  50% { opacity: 1;
  }
}

/* Smooth scroll behavior and prevent horizontal overflow */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Selection styling */

::-moz-selection {
  background: rgba(16, 185, 129, 0.3);
  color: #ffffff;
}

::selection {
  background: rgba(16, 185, 129, 0.3);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(16, 185, 129, 0.3);
  color: #ffffff;
}

/* ===== DARK MODE HEADINGS VISIBILITY FIX ===== */

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.12);
}

/* Force gradient titles to override other styles */

h1[class*="gradient-title-"],
h2[class*="gradient-title-"],
h3[class*="gradient-title-"],
h4[class*="gradient-title-"],
h5[class*="gradient-title-"],
h6[class*="gradient-title-"] {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

.tech-icon-container {
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out;
  transition: all 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, border-color 0.3s ease-in-out;
  transition: all 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out;
}

.tech-icon-container:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.2);
}

.tech-icon-item {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  padding: 0.25rem;
  transition: all 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out;
  transition: all 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  transition: all 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out;
}

.tech-icon-item:hover {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.tech-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

.tech-icon-item:hover .tech-icon-image {
  transform: scale(1.1);
}

.tech-level-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  color: white;
  font-weight: 200;
  display: inline-block;
  line-height: 1;
}

.tech-level-expert { background-color: #10B981;
}

.tech-level-avance { background-color: #3B82F6;
}

.tech-level-intermediaire { background-color: #F59E0B;
}

.tech-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== ANIMATIONS POUR LA GALERIE ===== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px);
  }

  to { opacity: 1; transform: none;
  }
}

@keyframes fadeInPulse {
  from { opacity: 0; transform: scale(0.92); filter: blur(2px);
  }

  to { opacity: 1; transform: none; filter: none;
  }
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  }

  to { box-shadow: 0 0 32px rgba(236, 72, 153, 0.53), 0 0 24px rgba(34, 211, 238, 0.53);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fadeInPulse {
  animation: fadeInPulse 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-pulseGlow {
  animation: pulseGlow 1.2s infinite alternate;
}

.animate-glowText {
  text-shadow: 0 0 8px #22d3ee, 0 0 16px #ec4899;
}

.shadow-neon {
  box-shadow: 0 0 16px 2px #22d3ee, 0 0 32px 8px rgba(236, 72, 153, 0.67);
}

/* Gallery Animations */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0;
  }

  to { opacity: 1;
  }
}

.gallery-preview {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-preview:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.lightbox-enter {
  opacity: 0;
  transform: scale(0.9);
}

.lightbox-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.lightbox-exit {
  opacity: 1;
  transform: scale(1);
}

.lightbox-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

/* ===== LOGO OLIVE GÉANT - Animations Avancées ===== */

/* Animation delays pour les particules */

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

/* Logo débordant - styles additionnels */

.logo-giant-overflow {
  overflow: visible !important;
  z-index: 999 !important;
}

/* Particules flottantes améliorées */

@keyframes ping-enhanced {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping-enhanced {
  animation: ping-enhanced 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Glow effect renforcé */

.olive-logo-glow {
  filter: drop-shadow(0 0 30px rgba(52, 211, 153, 0.8)) 
          drop-shadow(0 0 60px rgba(6, 182, 212, 0.4));
}

.olive-logo-glow:hover {
  filter: drop-shadow(0 0 40px rgba(52, 211, 153, 1)) 
          drop-shadow(0 0 80px rgba(6, 182, 212, 0.6))
          drop-shadow(0 0 120px rgba(52, 211, 153, 0.3));
}

/* ===== EMERGENCY NAVIGATION FIXES ===== */

/* Ensure navigation has proper height and spacing */

nav {
  height: 80px !important;
}

/* Ensure main content doesn't overlap navigation */

.pt-20 {
  padding-top: 5rem !important; /* 80px */
}

/* Emergency fix for any missing TailwindCSS classes */

.min-h-screen {
  min-height: 100vh;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.z-50 {
  z-index: 50;
}

.z-10 {
  z-index: 10;
}

/* Ensure proper background blur and transparency */

.bg-black\/60 {
  background-color: rgba(0, 0, 0, 0.6);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.border-b {
  border-bottom-width: 1px;
}

.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ===== STABILISATION ULTRA-SUBTILE - Solution Anti-Scintillement ===== */

/* 🎯 Performance & Anti-flicker optimizations */

* {
  will-change: auto;
}

.prevent-layout-shift {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* 🎨 Animations fluides et subtiles avec contrôle de performances */

@keyframes blob-stable {
  0%, 100% {
    transform: translate3d(0px, 0px, 0) scale(1) rotate(0deg);
    filter: blur(40px) opacity(0.8);
  }

  33% {
    transform: translate3d(15px, -25px, 0) scale(1.05) rotate(60deg);
    filter: blur(42px) opacity(0.9);
  }

  66% {
    transform: translate3d(-10px, 10px, 0) scale(0.95) rotate(120deg);
    filter: blur(38px) opacity(0.85);
  }
}

.animate-blob {
  animation: blob-stable 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 🌊 Transitions ultra-lisses */

@keyframes float-graceful {
  0%, 100% {
    transform: translateY(0px) translateZ(0);
  }

  50% {
    transform: translateY(-12px) translateZ(0);
  }
}

.animate-float {
  animation: float-graceful 6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@keyframes spin-elegant {
  from {
    transform: rotate(0deg) translateZ(0);
  }

  to {
    transform: rotate(360deg) translateZ(0);
  }
}

.animate-spin-slow {
  animation: spin-elegant 12s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* 💫 Stabilisation des intersections et scrolls */

.intersection-stable {
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px;
}

.intersection-stable.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  visibility: visible;
}

.intersection-stable.hidden {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  visibility: hidden;
  pointer-events: none;
}

/* 🎭 Réduction des repaints et reflows */

.optimize-paint {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
}

/* 🛡️ Anti-flicker pour les sections dynamiques */

.content-stabilizer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  contain: layout style paint;
}

.section-container {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: auto;
  contain: layout style;
}

.section-container.loading {
  opacity: 0.3;
  transform: translateY(10px);
}

/* 🎯 Optimisations spécifiques ML et scroll */

.ml-stable {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: auto;
}

.scroll-stable {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 🌟 Effets subtils sans scintillement */

@keyframes subtle-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.1);
    opacity: 0.8;
  }

  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    opacity: 1;
  }
}

.glow-subtle {
  animation: subtle-glow 4s ease-in-out infinite;
  will-change: box-shadow, opacity;
}

/* 🎨 Background fixes pour éviter les "jumps" */

.bg-fixed-stable {
  background-attachment: scroll; /* Plus stable que fixed */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  will-change: auto;
}

/* 🔧 Utility classes pour debug et stabilité */

.debug-paint {
  outline: 1px solid rgba(255, 0, 0, 0.1);
}

.no-transform {
  transform: none !important;
  will-change: auto !important;
}

@media (min-width: 640px) {
  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

  .sm\:mr-2 {
    margin-right: 0.5rem;
  }

  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-2 {
    height: 0.5rem;
  }

  .sm\:h-3 {
    height: 0.75rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-2\.5 {
    height: 0.625rem;
  }

  .sm\:h-3\.5 {
    height: 0.875rem;
  }

  .sm\:w-2 {
    width: 0.5rem;
  }

  .sm\:w-3 {
    width: 0.75rem;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-2\.5 {
    width: 0.625rem;
  }

  .sm\:w-3\.5 {
    width: 0.875rem;
  }

  .sm\:scale-150 {
    --tw-scale-x: 1.5;
    --tw-scale-y: 1.5;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.375rem * var(--tw-space-x-reverse));
    margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.625rem * var(--tw-space-x-reverse));
    margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .sm\:border-2 {
    border-width: 2px;
  }

  .sm\:p-2 {
    padding: 0.5rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-2\.5 {
    padding: 0.625rem;
  }

  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:pt-3 {
    padding-top: 0.75rem;
  }

  .sm\:pt-36 {
    padding-top: 9rem;
  }

  .sm\:pb-12 {
    padding-bottom: 3rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 768px) {
  .md\:sticky {
    position: sticky;
  }

  .md\:top-0 {
    top: 0px;
  }

  .md\:right-8 {
    right: 2rem;
  }

  .md\:bottom-8 {
    bottom: 2rem;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:mr-8 {
    margin-right: 2rem;
  }

  .md\:mb-24 {
    margin-bottom: 6rem;
  }

  .md\:ml-0 {
    margin-left: 0px;
  }

  .md\:ml-8 {
    margin-left: 2rem;
  }

  .md\:ml-auto {
    margin-left: auto;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-8 {
    height: 2rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-20 {
    height: 5rem;
  }

  .md\:h-24 {
    height: 6rem;
  }

  .md\:h-28 {
    height: 7rem;
  }

  .md\:h-36 {
    height: 9rem;
  }

  .md\:h-40 {
    height: 10rem;
  }

  .md\:h-44 {
    height: 11rem;
  }

  .md\:h-64 {
    height: 16rem;
  }

  .md\:h-screen {
    height: 100vh;
  }

  .md\:w-8 {
    width: 2rem;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:w-20 {
    width: 5rem;
  }

  .md\:w-24 {
    width: 6rem;
  }

  .md\:w-28 {
    width: 7rem;
  }

  .md\:w-36 {
    width: 9rem;
  }

  .md\:w-40 {
    width: 10rem;
  }

  .md\:w-44 {
    width: 11rem;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:translate-x-0 {
    --tw-translate-x: 0px;
  }

  .md\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .md\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .md\:rounded-2xl {
    border-radius: 1rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:pt-40 {
    padding-top: 10rem;
  }

  .md\:pb-16 {
    padding-bottom: 4rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:mr-3 {
    margin-right: 0.75rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:mb-8 {
    margin-bottom: 2rem;
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-4 {
    height: 1rem;
  }

  .lg\:h-56 {
    height: 14rem;
  }

  .lg\:w-4 {
    width: 1rem;
  }

  .lg\:w-56 {
    width: 14rem;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lg\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:gap-1 {
    gap: 0.25rem;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-1\.5 {
    gap: 0.375rem;
  }

  .lg\:rounded-2xl {
    border-radius: 1rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:pt-32 {
    padding-top: 8rem;
  }

  .lg\:pr-2 {
    padding-right: 0.5rem;
  }

  .lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .lg\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {
  .xl\:order-1 {
    order: 1;
  }

  .xl\:order-2 {
    order: 2;
  }

  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xl\:items-center {
    align-items: center;
  }

  .xl\:justify-start {
    justify-content: flex-start;
  }

  .xl\:justify-end {
    justify-content: flex-end;
  }

  .xl\:gap-12 {
    gap: 3rem;
  }

  .xl\:text-left {
    text-align: left;
  }

  .xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1536px) {
  .\32xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 850px) {
  .tablet-lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1016px) {
}
/* purgecss start ignore */

/* 🌙 GLOBAL DARK THEME - Inputs et Textarea */

/* Variables CSS pour cohérence */

:root {
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-tertiary: #334155;
  --dark-border: #475569;
  --dark-text: #f1f5f9;
  --dark-text-secondary: #cbd5e1;
  --dark-accent: #06b6d4;
  --dark-accent-hover: #0891b2;
}

/* 🎨 GLOBAL INPUT STYLING - Dark Theme */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea {
  /* Background sombre glassmorphique */
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(71, 85, 105, 0.3) !important;
  color: #f1f5f9 !important;
  /* Transitions fluides */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Bordure radius moderne */
  border-radius: 12px !important;
  /* Padding confortable */
  padding: 12px 16px !important;
  /* Typographie */
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  /* Backdrop blur pour effet verre */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 🌟 États Focus et Hover */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--dark-accent) !important;
  box-shadow: 
    0 0 0 3px rgba(6, 182, 212, 0.1),
    0 4px 12px rgba(6, 182, 212, 0.15) !important;
  background: rgba(15, 23, 42, 0.9) !important;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
textarea:hover {
  border-color: rgba(71, 85, 105, 0.5) !important;
  background: rgba(15, 23, 42, 0.85) !important;
}

/* 🎯 Placeholder Styling */

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}

/* 📝 Textarea Spécifique */

textarea {
  min-height: 120px !important;
  resize: vertical !important;
  font-family: inherit !important;
}

/* 🏷️ Labels Dark Theme */

label {
  color: var(--dark-text) !important;
  font-weight: 400 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* 🔲 Checkbox et Radio Buttons */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--dark-accent) !important;
  transform: scale(1.1) !important;
}

/* 🛡️ Disabled States - Inputs et Textarea seulement */

input:disabled,
textarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: rgba(15, 23, 42, 0.5) !important;
}

/* 📱 Mobile Optimizations */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  textarea {
    padding: 14px 16px !important;
    font-size: 16px !important; /* Évite le zoom iOS */
  }
}

/* 🎯 Validation States */

input.valid,
textarea.valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

input.invalid,
textarea.invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* 🔍 Search Inputs */

input[type="search"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23f1f5f9%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%278%27/%3E%3Cpath d=%27m21 21-4.35-4.35%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px !important;
  padding-right: 45px !important;
}

/* 🎨 Form Groups */

.form-group,
.input-group {
  margin-bottom: 20px !important;
}

.form-group label,
.input-group label {
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dark-text) !important;
}

/* 💫 Animation d'apparition - Inputs et Textarea seulement */

input,
textarea {
  animation: fadeInUp 0.3s ease-out !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* purgecss end ignore */
/*purgecss start ignore
 */

/**
 * 🌟 GLASSMORPHISM ANIMATIONS - Animations pour Navigation Premium
 * 
 * Animations CSS pour les effets de brillance et glassmorphisme
 * de la navigation UniversalMegaNavigation
 */

/* Animation de brillance pour les icônes */

@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-25deg);
  }

  100% {
    transform: translateX(200%) skewX(-25deg);
  }
}

/* Animation de glissement pour les CTAs */

@keyframes slide {
  0% {
    transform: translateX(-100%) skewX(-25deg);
  }

  100% {
    transform: translateX(200%) skewX(-25deg);
  }
}

/* Animation de pulsation pour les points indicateurs */

@keyframes pulse-indicator {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.6);
  }
}

/* Animation de flottement pour les particules */

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-10px) rotate(120deg);
  }

  66% {
    transform: translateY(5px) rotate(240deg);
  }
}

/* Animation d'apparition progressive pour le mega-menu */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animation de vague lumineuse */

@keyframes wave-light {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Styles pour les effets de glassmorphisme */

.glassmorphism-surface {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Effet de brillance au hover */

.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::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;
}

.shine-effect:hover::before {
  left: 100%;
}

/* Effet de glow adaptatif */

.adaptive-glow {
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0);
}

.adaptive-glow:hover {
  box-shadow: 
    0 0 30px rgba(59, 130, 246, 0.3),
    0 0 60px rgba(59, 130, 246, 0.1);
}

/* Animation de typing pour les textes */

@keyframes typing {
  from { width: 0;
  }

  to { width: 100%;
  }
}

/* Animation de clignotement pour le curseur */

@keyframes blink {
  0%, 50% { border-color: transparent;
  }

  51%, 100% { border-color: rgba(59, 130, 246, 0.8);
  }
}

/* Styles pour les transitions fluides */

.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-transition-slow {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de morphing pour les éléments */

.morph-effect {
  transition: 
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation de rotation infinie douce */

@keyframes rotate-gentle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rotate-gentle {
  animation: rotate-gentle 20s linear infinite;
}

/* Effet de parallax subtil */

.parallax-subtle {
  transform: translateZ(0);
  will-change: transform;
}

/* Classes utilitaires pour l'optimisation GPU */

.gpu-accelerated {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px;
}

/* Animation de respiration pour les éléments importants */

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.breathe {
  animation: breathe 3s ease-in-out infinite;
}

/* Effet de dispersion de particules */

@keyframes particle-disperse {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }

  100% {
    opacity: 0;
    transform: scale(1) translate(var(--x, 0), var(--y, 0));
  }
}

/* Style pour masquer le scrollbar sur les éléments avec overflow */

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Responsive breakpoints helpers */

@media (max-width: 768px) {
  .glassmorphism-surface {
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer,
  .slide,
  .pulse-indicator,
  .float,
  .breathe,
  .rotate-gentle {
    animation: none;
  }

  .smooth-transition,
  .smooth-transition-slow,
  .morph-effect {
    transition: none;
  }
}

/*purgecss end ignore
 */
/* purgecss start ignore */

/* 🎨 ANIMATIONS AVANCÉES POUR LES ICÔNES TECHNOLOGIQUES */

/* Animation de pulse subtile pour les icônes prioritaires */

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Animation de flottement magnétique */

@keyframes magnetic-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-2px) rotate(0.5deg);
  }

  75% {
    transform: translateY(2px) rotate(-0.5deg);
  }
}

.tech-magnetic-float {
  animation: magnetic-float 4s ease-in-out infinite;
}

/* Animation de brillance technologique */

@keyframes tech-shine {
  0% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.3);
  }

  100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
}

.tech-shine {
  animation: tech-shine 2s ease-in-out infinite alternate;
}

/* Animation de rotation douce pour les icônes */

@keyframes gentle-rotate {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(2deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.tech-gentle-rotate {
  animation: gentle-rotate 6s ease-in-out infinite;
}

/* Animation d'apparition décalée pour le hero */

@keyframes tech-hero-appear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }

  60% {
    opacity: 0.7;
    transform: translateY(-5px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tech-hero-appear {
  animation: tech-hero-appear 0.8s ease-out forwards;
  opacity: 0; /* État initial */
}

/* Animation de hover sophistiquée */

.techicon-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.techicon-hover:hover {
  transform: translateY(-3px) scale(1.15);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  z-index: 10;
}

/* Animation de pulsation pour les icônes prioritaires */

.priority-high {
  animation: tech-shine 3s ease-in-out infinite alternate;
}

.priority-high:hover {
  animation: none;
  transform: translateY(-4px) scale(1.2);
  filter: drop-shadow(0 15px 25px rgba(59, 130, 246, 0.4));
}

/* Animation de groupe - wave effect */

@keyframes wave-effect {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-3px);
  }
}

.tech-wave-1 { animation: wave-effect 2s ease-in-out infinite; animation-delay: 0.1s;
}

.tech-wave-2 { animation: wave-effect 2s ease-in-out infinite; animation-delay: 0.2s;
}

.tech-wave-3 { animation: wave-effect 2s ease-in-out infinite; animation-delay: 0.3s;
}

.tech-wave-4 { animation: wave-effect 2s ease-in-out infinite; animation-delay: 0.4s;
}

.tech-wave-5 { animation: wave-effect 2s ease-in-out infinite; animation-delay: 0.5s;
}

/* Animation de rotation pour les icônes spécifiques */

.tech-react { animation: gentle-rotate 8s linear infinite;
}

.tech-vue { animation: tech-shine 2.5s ease-in-out infinite alternate;
}

.tech-angular { animation: magnetic-float 5s ease-in-out infinite;
}

/* Effets de survol par technologie */

.tech-icon-container:hover .tech-react {
  animation: gentle-rotate 1s linear infinite;
}

.tech-icon-container:hover .tech-vue {
  filter: hue-rotate(90deg);
}

.tech-icon-container:hover .tech-angular {
  transform: scale(1.1) rotate(360deg);
  transition: transform 0.5s ease-in-out;
}

/* Animation d'entrée progressive */

.tech-entrance-delay-1 { animation-delay: 0.1s;
}

.tech-entrance-delay-2 { animation-delay: 0.2s;
}

.tech-entrance-delay-3 { animation-delay: 0.3s;
}

.tech-entrance-delay-4 { animation-delay: 0.4s;
}

.tech-entrance-delay-5 { animation-delay: 0.5s;
}

.tech-entrance-delay-6 { animation-delay: 0.6s;
}

.tech-entrance-delay-7 { animation-delay: 0.7s;
}

.tech-entrance-delay-8 { animation-delay: 0.8s;
}

/* Animation globale du container */

.techhero {
  animation: tech-container-appear 1.2s ease-out forwards;
}

@keyframes tech-container-appear {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Effet de parallaxe subtil */

.tech-parallax {
  transition: transform 0.1s ease-out;
}

/* Responsive: réduire les animations sur mobile */

@media (max-width: 640px) {
  .techicon-hover:hover {
    transform: scale(1.05);
  }

  .tech-shine,
  .magnetic-float,
  .gentle-rotate {
    animation-duration: 4s;
  }
}

/* Mode réduit pour les utilisateurs préférant moins d'animations */

@media (prefers-reduced-motion: reduce) {
  .tech-shine,
  .magnetic-float,
  .gentle-rotate,
  .animate-pulse-subtle,
  .wave-effect {
    animation: none;
  }

  .techicon-hover:hover {
    transform: scale(1.05);
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* GRADIENT TITLES - Styles modernes pour les titres h1, h2, h3 */

/* === GRADIENTS PRINCIPAUX === */

/* Gradient principal cyan-purple */

.gradient-title-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 25%, #8b5cf6 50%, #d946ef 75%, #ec4899 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 8s ease-in-out infinite;
}

/* Gradient neon électrique */

.gradient-title-neon {
  background: linear-gradient(45deg, #00ffff 0%, #ff00ff 25%, #ffff00 50%, #00ff00 75%, #ff0080 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 300%;
  animation: neon-pulse 6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));
}

/* Gradient sunset moderne */

.gradient-title-sunset {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 25%, #ec4899 50%, #8b5cf6 75%, #06b6d4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 250% 250%;
  animation: sunset-flow 10s ease-in-out infinite;
}

/* Gradient aurora boréale */

.gradient-title-aurora {
  background: linear-gradient(45deg, #10b981 0%, #06b6d4 20%, #3b82f6 40%, #8b5cf6 60%, #ec4899 80%, #f59e0b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400% 400%;
  animation: aurora-dance 12s ease-in-out infinite;
}

/* Gradient océan profond */

.gradient-title-ocean {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 25%, #2563eb 50%, #06b6d4 75%, #0891b2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: ocean-wave 8s ease-in-out infinite;
}

/* Gradient feu digital */

.gradient-title-fire {
  background: linear-gradient(45deg, #fbbf24 0%, #f59e0b 25%, #f97316 50%, #ef4444 75%, #dc2626 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 250% 250%;
  animation: fire-flicker 4s ease-in-out infinite;
}

/* === GRADIENTS SUBTILS POUR H2/H3 === */

/* Gradient doux purple-cyan */

.gradient-title-soft {
  background: linear-gradient(90deg, #a855f7 0%, #3b82f6 50%, #06b6d4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 150% 150%;
  animation: soft-glow 6s ease-in-out infinite;
}

/* Gradient élégant silver-gold */

.gradient-title-elegant {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 25%, #fbbf24 50%, #f59e0b 75%, #d97706 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: elegant-shine 8s ease-in-out infinite;
}

/* Gradient minimaliste */

.gradient-title-minimal {
  background: linear-gradient(90deg, #6b7280 0%, #374151 50%, #1f2937 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 150% 150%;
  animation: minimal-shift 10s ease-in-out infinite;
}

/* === ANIMATIONS === */

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 0%;
  }

  25% { background-position: 100% 0%;
  }

  50% { background-position: 100% 100%;
  }

  75% { background-position: 0% 100%;
  }
}

@keyframes neon-pulse {
  0%, 100% {
    background-position: 0% 0%;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));
  }

  25% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.4));
  }

  50% {
    background-position: 50% 100%;
    filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.35));
  }

  75% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 35px rgba(0, 255, 0, 0.4));
  }
}

@keyframes sunset-flow {
  0%, 100% { background-position: 0% 50%;
  }

  50% { background-position: 100% 50%;
  }
}

@keyframes aurora-dance {
  0%, 100% { background-position: 0% 0%;
  }

  20% { background-position: 25% 25%;
  }

  40% { background-position: 75% 75%;
  }

  60% { background-position: 100% 50%;
  }

  80% { background-position: 50% 100%;
  }
}

@keyframes ocean-wave {
  0%, 100% { background-position: 0% 50%;
  }

  25% { background-position: 50% 0%;
  }

  50% { background-position: 100% 50%;
  }

  75% { background-position: 50% 100%;
  }
}

@keyframes fire-flicker {
  0%, 100% {
    background-position: 0% 50%;
    transform: scale(1);
  }

  25% {
    background-position: 25% 25%;
    transform: scale(1.02);
  }

  50% {
    background-position: 75% 75%;
    transform: scale(0.98);
  }

  75% {
    background-position: 100% 50%;
    transform: scale(1.01);
  }
}

@keyframes soft-glow {
  0%, 100% { background-position: 0% 50%;
  }

  50% { background-position: 100% 50%;
  }
}

@keyframes elegant-shine {
  0%, 100% { background-position: 0% 0%;
  }

  50% { background-position: 100% 100%;
  }
}

@keyframes minimal-shift {
  0%, 100% { background-position: 0% 50%;
  }

  50% { background-position: 100% 50%;
  }
}

/* === VARIANTS RESPONSIVE === */

/* Mobile : gradients plus subtils */

@media (max-width: 768px) {
  .gradient-title-primary,
  .gradient-title-neon,
  .gradient-title-sunset,
  .gradient-title-aurora,
  .gradient-title-ocean,
  .gradient-title-fire {
    animation-duration: 12s; /* Plus lent sur mobile */
  }

  .gradient-title-neon {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.2)); /* Moins intense */
  }
}

/* === EFFETS HOVER === */

.gradient-title-hover:hover {
  animation-duration: 2s !important;
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* === ACCESSIBILITÉ === */

/* Mode sombre forcé pour certains gradients */

@media (prefers-color-scheme: dark) {
  .gradient-title-minimal {
    background: linear-gradient(90deg, #d1d5db 0%, #9ca3af 50%, #6b7280 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Réduction de mouvement pour les utilisateurs sensibles */

@media (prefers-reduced-motion: reduce) {
  .gradient-title-primary,
  .gradient-title-neon,
  .gradient-title-sunset,
  .gradient-title-aurora,
  .gradient-title-ocean,
  .gradient-title-fire,
  .gradient-title-soft,
  .gradient-title-elegant,
  .gradient-title-minimal {
    animation: none;
    background-position: 50% 50%;
  }
}

/* purgecss end ignore */
/*purgecss start ignore
 */

/**
 * BLOG CLEAN CSS - Styles simples et fonctionnels pour les pages blog
 */

/* ========================================
   RESET ET BASE
   ======================================== */

.blog-container {
  min-height: 100vh;
  background: #000;
  color: #e2e8f0;
  padding-top: 150px; /* Espace pour PerfectDarkNavigation (130px height + 20px margin) */
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */

.blog-loading,
.blog-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  color: #e2e8f0;
  gap: 1rem;
}

.blog-loading .spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(16, 185, 129, 0.2);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg);
  }
}

.blog-error a {
  color: #10b981;
  text-decoration: none !important;
  padding: 0.5rem 1rem;
  border: 1px solid #10b981;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.blog-error a:hover {
  background: rgba(16, 185, 129, 0.1);
}

/* ========================================
   ARTICLE CONTAINER
   ======================================== */

.blog-article {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* ========================================
   ARTICLE HEADER
   ======================================== */

.blog-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

.blog-breadcrumb a {
  color: #10b981;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.blog-breadcrumb a:hover {
  color: #34d399;
}

.blog-breadcrumb span {
  color: #6b7280;
}

.blog-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.5rem;
  background: linear-gradient(135deg, #10b981, #14b8a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

.blog-meta span {
  display: flex;
  align-items: center;
}

.blog-meta span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #10b981;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-tag {
  padding: 0.25rem 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 1rem;
  font-size: 0.875rem;
  color: #10b981;
}

/* ========================================
   ARTICLE CONTENT
   ======================================== */

.blog-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #d1d5db;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  margin: 2rem 0 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.blog-content h1 { font-size: 2rem;
}

.blog-content h2 {
  font-size: 1.75rem;
  padding-left: 1rem;
  border-left: 4px solid #10b981;
}

.blog-content h3 {
  font-size: 1.5rem;
  color: #10b981;
}

.blog-content h4 { font-size: 1.25rem;
}

.blog-content h5 { font-size: 1.125rem;
}

.blog-content h6 { font-size: 1rem;
}

.blog-content p {
  margin: 0 0 1.5rem;
}

/* Styles UNIQUEMENT pour les liens dans le contenu de l'article - PAS la navigation */

.blog-article a,
.blog-content a,
.blog-container .blog-article a,
.blog-container .blog-content a {
  color: #10b981;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.blog-article a:hover,
.blog-content a:hover,
.blog-container .blog-article a:hover,
.blog-container .blog-content a:hover {
  color: #34d399;
}

/* Exclure EXPLICITEMENT tous les éléments de navigation des styles de blog */

.blog-article header a,
.blog-article nav a,
.blog-article .navigation-wrapper a,
.blog-article .unified-page-navigation a,
.blog-content header a,
.blog-content nav a,
.blog-content .navigation-wrapper a,
.blog-content .unified-page-navigation a,
.blog-container header a,
.blog-container nav a,
.blog-container .navigation-wrapper a,
.blog-container .unified-page-navigation a {
  color: #e2e8f0 !important;
  text-decoration: none !important;
  background: none !important;
}

.blog-article header a:hover,
.blog-article nav a:hover,
.blog-container header a:hover,
.blog-container nav a:hover {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

.blog-content ul,
.blog-content ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.blog-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.blog-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid #10b981;
  background: rgba(16, 185, 129, 0.05);
  font-style: italic;
  color: #e2e8f0;
}

.blog-content pre {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.5rem;
  overflow-x: auto;
}

.blog-content code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.9em;
}

.blog-content :not(pre) > code {
  padding: 0.2rem 0.4rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 0.25rem;
  color: #10b981;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  display: block;
  border-radius: 0.5rem;
}

.blog-content table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}

.blog-content th,
.blog-content td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.blog-content th {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  font-weight: 600;
}

.blog-content tr:hover {
  background: rgba(16, 185, 129, 0.05);
}

.blog-content hr {
  margin: 3rem 0;
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.blog-content strong {
  font-weight: 600;
  color: #fff;
}

.blog-content em {
  font-style: italic;
}

/* ========================================
   ARTICLE FOOTER
   ======================================== */

.blog-article-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  text-align: center;
}

.blog-back-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 0.5rem;
  color: #10b981;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.blog-back-link:hover {
  background: rgba(16, 185, 129, 0.2);
  transform: translateY(-2px);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .blog-container {
    padding-top: 150px; /* Même padding pour mobile */
  }

  .blog-article {
    padding: 1rem;
  }

  .blog-title {
    font-size: 2rem;
  }

  .blog-meta {
    font-size: 0.8rem;
    gap: 1rem;
  }

  .blog-content {
    font-size: 1rem;
  }

  .blog-content h1 { font-size: 1.75rem;
  }

  .blog-content h2 { font-size: 1.5rem;
  }

  .blog-content h3 { font-size: 1.25rem;
  }

  .blog-content pre {
    padding: 1rem;
    font-size: 0.8rem;
  }
}

/* ========================================
   FIX POUR LA NAVIGATION ET LE FOOTER
   ======================================== */

/* S'assurer que la navigation UnifiedPageNavigation reste visible et stylée comme sur /contact */

.navigation-wrapper,
.unified-page-navigation,
nav[data-navigation="unified"],
.navigation-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.9) !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* NUCLEAR FIX pour les liens de navigation - Priorité maximale */

header a,
header a:link,
header a:visited,
header a:hover,
header a:active,
nav a,
nav a:link, 
nav a:visited,
nav a:hover,
nav a:active,
.navigation-wrapper a,
.navigation-wrapper a:link,
.navigation-wrapper a:visited,
.navigation-wrapper a:hover,
.navigation-wrapper a:active,
.unified-page-navigation a,
.unified-page-navigation a:link,
.unified-page-navigation a:visited,
.unified-page-navigation a:hover,
.unified-page-navigation a:active {
  color: #e2e8f0 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  text-underline-offset: initial !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: none !important;
  text-decoration-thickness: 0 !important;
}

/* Hover spécifique pour navigation */

header a:hover,
nav a:hover,
.navigation-wrapper a:hover,
.unified-page-navigation a:hover {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  text-decoration: none !important;
}

/* Container de navigation */

.unified-page-navigation .navigation-content,
.navigation-wrapper > div,
.navigation-header > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0.75rem 1rem !important;
}

/* Logo dans la navigation */

.unified-page-navigation .logo,
.navigation-wrapper .logo,
.navigation-header .logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Liens de navigation - Override complet pour éviter conflicts */

.unified-page-navigation a,
.navigation-wrapper a,
.navigation-header a,
nav[data-navigation="unified"] a,
.nav-link,
a[data-navigation] {
  color: #e2e8f0 !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.3s ease !important;
  font-weight: 400 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}

.unified-page-navigation a:hover,
.navigation-wrapper a:hover,
.navigation-header a:hover,
nav[data-navigation="unified"] a:hover,
.nav-link:hover,
a[data-navigation]:hover {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10b981 !important;
  text-decoration: none !important;
}

/* Menu items */

.unified-page-navigation .nav-links,
.navigation-wrapper .nav-links,
.navigation-header .nav-links {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

/* Language selector et autres boutons */

.unified-page-navigation .language-selector,
.navigation-wrapper .language-selector,
.navigation-header .language-selector {
  display: flex !important;
  gap: 0.5rem !important;
  margin-left: 1rem !important;
}

/* S'assurer que le contenu blog ne masque pas la navigation */

body:has(.blog-container) .unified-page-navigation,
body:has(.blog-container) .navigation-wrapper,
body:has(.blog-container) .navigation-header {
  display: flex !important;
  position: fixed !important;
  z-index: 9999 !important;
}

/* Empêcher les styles de blog d'affecter la navigation */

.unified-page-navigation *,
.navigation-wrapper *,
.navigation-header *,
nav[data-navigation="unified"] * {
  text-decoration: none !important;
}

.unified-page-navigation a,
.navigation-wrapper a,
.navigation-header a {
  color: #e2e8f0 !important;
}

.unified-page-navigation a:hover,
.navigation-wrapper a:hover,  
.navigation-header a:hover {
  color: #10b981 !important;
  text-decoration: none !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

/* S'assurer que le footer est visible */

.blog-container > footer,
.blog-container + footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin-top: 4rem !important;
}

/*purgecss end ignore
 */
/*purgecss start ignore
 */

/**
 * 🎨 UNIVERSAL ARTICLE PARSER STYLES
 *
 * Styles pour le nouveau système de parsing universel des articles
 * - Version simplifiée compatible TailwindCSS 2.2.19
 * - Design glassmorphique
 * - Responsive et accessible
 */

/* Container principal */

.universal-parsed-content {
  max-width: none;
}

.universal-parsed-article {
  margin-bottom: 2rem;
}

.universal-parsed-article > * + * {
  margin-top: 2rem;
}

/* Sections d'article */

.article-section {
  position: relative;
  margin-bottom: 2rem;
}

.article-section.hero-section {
  margin-bottom: 3rem;
}

.article-section.main-section {
  padding: 1.5rem 0;
  border-left: 4px solid rgba(59, 130, 246, 0.2);
  padding-left: 1.5rem;
}

/* Titres améliorés */

.article-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 768px) {
  .article-title {
    font-size: 3rem;
  }
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 1rem;
  position: relative;
  scroll-margin-top: 6rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 1.875rem;
  }
}

.section-title::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0;
  bottom: 0;
  width: 0.25rem;
  background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
  border-radius: 9999px;
}

.subsection-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 0.75rem;
  scroll-margin-top: 5rem;
}

@media (min-width: 768px) {
  .subsection-title {
    font-size: 1.5rem;
  }
}

/* Paragraphes */

.article-paragraph {
  color: #d1d5db;
  line-height: 1.75;
  margin-bottom: 1rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .article-paragraph {
    font-size: 1.125rem;
  }
}

/* Listes améliorées */

.article-list,
.article-ordered-list {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.article-list > li,
.article-ordered-list > li {
  color: #d1d5db;
  line-height: 1.75;
  position: relative;
  margin-bottom: 0.5rem;
}

.article-list > li::before {
  content: '▸';
  position: absolute;
  left: -1rem;
  color: #60a5fa;
  font-weight: bold;
}

.article-ordered-list > li::before {
  content: none;
}

/* Code inline et blocs */

.inline-code {
  padding: 0.25rem 0.5rem;
  background-color: rgba(31, 41, 55, 0.7);
  border: 1px solid rgba(75, 85, 99, 0.5);
  color: #93c5fd;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.code-block-wrapper {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.article-code-block {
  margin: 0;
  background: transparent;
}

.article-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.75;
}

/* Éléments de mise en forme */

.article-strong {
  font-weight: 600;
  color: white;
}

.article-emphasis {
  font-style: italic;
  color: #93c5fd;
}

/* Liens */

.article-link {
  color: #60a5fa;
  transition-property: color;
  transition-duration: 200ms;
  text-decoration: none;
}

.article-link:hover {
  color: #93c5fd;
}

/* Ancres de titres */

.header-anchor {
  text-decoration: none;
  color: inherit;
  position: relative;
  transition-property: color;
  transition-duration: 200ms;
}

.header-anchor:hover {
  color: #60a5fa;
}

.header-anchor::before {
  content: '#';
  position: absolute;
  left: -1.5rem;
  color: rgba(96, 165, 250, 0.5);
  opacity: 0;
  transition-property: color, opacity;
  transition-duration: 200ms;
}

.header-anchor:hover::before {
  opacity: 1;
  color: #60a5fa;
}

/* Images et figures */

.article-figure {
  margin: 2rem 0;
  text-align: center;
}

.article-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Citations */

.article-blockquote {
  border-left: 4px solid rgba(59, 130, 246, 0.5);
  padding-left: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 1.5rem 0;
  background-color: rgba(59, 130, 246, 0.05);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.article-blockquote p {
  color: #d1d5db;
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: 0;
}

/* Subsections */

.subsection {
  margin-left: 1rem;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(168, 85, 247, 0.3);
}

/* États d'amélioration */

.universal-enhanced {
  position: relative;
}

.universal-enhanced::before {
  content: '✨ Article optimisé';
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-left: 1px solid rgba(34, 197, 94, 0.3);
  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.legacy-formatted {
  position: relative;
}

.legacy-formatted::before {
  content: '📝 Format standard';
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-left: 1px solid rgba(107, 114, 128, 0.3);
  border-bottom: 1px solid rgba(107, 114, 128, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Animation d'entrée */

.universal-parsed-content {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Amélioration de la sélection de texte */

.universal-parsed-content::-moz-selection {
  background: rgba(96, 165, 250, 0.3);
  color: white;
}

.universal-parsed-content::selection {
  background: rgba(96, 165, 250, 0.3);
  color: white;
}

/* Responsive design */

@media (max-width: 768px) {
  .article-title {
    font-size: 1.875rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .subsection-title {
    font-size: 1.125rem;
  }

  .article-paragraph {
    font-size: 1rem;
  }

  .section-title::before {
    left: -1rem;
  }

  .article-section.main-section {
    padding-left: 1rem;
  }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
  .universal-parsed-content {
    animation: none;
  }

  .article-link,
  .header-anchor {
    transition: none;
  }
}

/*purgecss end ignore
 */
/* purgecss start ignore */

/* ===== UNIFIED MOUSE 3D BUTTONS SYSTEM ===== */

/* Style transparent unifié avec border et perspective 3D */

.unified-mouse3d-container {
  display: inline-block;
  perspective: 1200px;
  perspective-origin: center center;
  transform-style: preserve-3d;
  position: relative;
}

.unified-mouse3d-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 300;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: none;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* EFFET 3D TRACKING SOURIS */
  transform: perspective(var(--perspective-intensity)) 
             rotateX(var(--rotation-x)) 
             rotateY(var(--rotation-y)) 
             translateZ(0px);
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Variables CSS pour effets dynamiques */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --proximity: 0;
  --energy-level: 0;
  --velocity: 0;
  /* Variables pour tracking style ancien Mouse3DButton */
  --rotation-x: 0deg;
  --rotation-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  --tilt-intensity: 5deg;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --perspective-intensity: 1000px;
  --transform-origin: center center;
  /* Base colors */
  --btn-bg: rgba(59, 130, 246, 0.9);
  --btn-border: rgba(59, 130, 246, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(59, 130, 246, 0.4);
  --btn-glow: rgba(59, 130, 246, 0.6);
}

/* ===== BACKGROUND LAYER ===== */

.unified-mouse3d-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--btn-bg);
  border-radius: inherit;
  z-index: 1;
  transition: all 0.3s ease;
}

/* Force violet-glow background sur l'élément background */

.violet-glow-button .unified-mouse3d-background,
.unified-mouse3d-btn.violet-glow-button .unified-mouse3d-background {
  background: radial-gradient(ellipse at center, 
    rgba(30, 41, 59, 0.8) 0%,
    rgba(20, 25, 35, 0.9) 40%,
    rgba(10, 15, 25, 0.95) 70%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
}

.violet-glow-button:hover .unified-mouse3d-background,
.unified-mouse3d-btn.violet-glow-button:hover .unified-mouse3d-background {
  background: radial-gradient(ellipse at center, 
    rgba(40, 51, 69, 0.9) 0%,
    rgba(30, 35, 45, 0.95) 35%,
    rgba(15, 20, 30, 0.98) 65%,
    rgba(5, 5, 15, 0.95) 100%
  ) !important;
}

/* ===== CONTENT LAYER ===== */

.unified-mouse3d-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--btn-text);
  font-size: inherit;
  font-weight: inherit;
}

.unified-mouse3d-text {
  white-space: nowrap;
}

.unified-mouse3d-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}

/* ===== SHINE EFFECT ===== */

.unified-mouse3d-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, calc(0.1 + var(--proximity) * 0.2)) 0%,
    transparent 50%
  );
  border-radius: inherit;
  z-index: 2;
  opacity: calc(0.5 + var(--proximity) * 0.5);
  transition: opacity 0.3s ease;
}

/* ===== ENERGY BORDER ===== */

.unified-mouse3d-energy-border {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    calc(45deg + var(--velocity) * 180deg),
    var(--btn-border),
    var(--btn-glow),
    var(--btn-border)
  );
  border-radius: 13px;
  z-index: 0;
  opacity: calc(0.3 + var(--energy-level) * 0.7);
  animation: energy-pulse 2s ease-in-out infinite;
}

/* ===== LOADING STATE ===== */

.unified-mouse3d-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.unified-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ===== VARIANTS ===== */

/* Primary */

.unified-mouse3d-btn--primary {
  --btn-bg: rgba(59, 130, 246, 0.9);
  --btn-border: rgba(59, 130, 246, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(59, 130, 246, 0.4);
  --btn-glow: rgba(59, 130, 246, 0.6);
}

/* Success (WhatsApp) */

.unified-mouse3d-btn--success {
  --btn-bg: rgba(34, 197, 94, 0.9);
  --btn-border: rgba(34, 197, 94, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(34, 197, 94, 0.4);
  --btn-glow: rgba(34, 197, 94, 0.6);
}

/* Professional (LinkedIn) */

.unified-mouse3d-btn--professional {
  --btn-bg: rgba(10, 102, 194, 0.9);
  --btn-border: rgba(10, 102, 194, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(10, 102, 194, 0.4);
  --btn-glow: rgba(10, 102, 194, 0.6);
}

/* Dark (GitHub) */

.unified-mouse3d-btn--dark {
  --btn-bg: rgba(30, 41, 59, 0.9);
  --btn-border: rgba(100, 116, 139, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(30, 41, 59, 0.4);
  --btn-glow: rgba(100, 116, 139, 0.6);
}

/* Accent (Phone) */

.unified-mouse3d-btn--accent {
  --btn-bg: rgba(168, 85, 247, 0.9);
  --btn-border: rgba(168, 85, 247, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(168, 85, 247, 0.4);
  --btn-glow: rgba(168, 85, 247, 0.6);
}

/* ===== VIOLET GLOW VARIANT - RADIAL BLEU NUIT VERS NOIR DESIGN ===== */

.unified-mouse3d-btn.unified-mouse3d-btn--violet-glow {
  /* Variables CSS personnalisées - bleu nuit design */
  --btn-bg: rgba(30, 41, 59, 0.7) !important;
  --btn-border: rgba(59, 70, 100, 0.6) !important;
  --btn-text: rgba(255, 255, 255, 0.95) !important;
  --btn-shadow: rgba(30, 41, 59, 0.8) !important;
  --btn-glow: rgba(59, 70, 100, 0.5) !important;
  /* Background radial bleu nuit vers noir très design */
  background: radial-gradient(ellipse at center, 
    rgba(30, 41, 59, 0.8) 0%,
    rgba(20, 25, 35, 0.9) 40%,
    rgba(10, 15, 25, 0.95) 70%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  /* Bordure bleu nuit élégante */
  border: 1px solid rgba(59, 70, 100, 0.6) !important;
  /* Backdrop filter pour effet verre premium */
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  /* Couleur du texte claire et contrastée */
  color: rgba(255, 255, 255, 0.95) !important;
  /* Glow effect bleu nuit sophistiqué */
  box-shadow: 0px 0px 30px 0px rgba(59, 70, 100, 0.4) !important;
}

/* Effet hover pour violet-glow - intensification du radial design */

.unified-mouse3d-btn.unified-mouse3d-btn--violet-glow:hover {
  /* Background radial intensifié au hover */
  background: radial-gradient(ellipse at center, 
    rgba(40, 51, 69, 0.9) 0%,
    rgba(30, 35, 45, 0.95) 35%,
    rgba(15, 20, 30, 0.98) 65%,
    rgba(5, 5, 15, 0.95) 100%
  ) !important;
  /* Bordure plus brillante au hover */
  border: 1px solid rgba(69, 80, 110, 0.8) !important;
  /* Glow intensifié avec effet radial */
  box-shadow: 0px 0px 40px 0px rgba(59, 70, 100, 0.6) !important;
  /* Transform 3D avec tracking */
  transform: perspective(var(--perspective-intensity)) 
             rotateX(var(--rotation-x)) 
             rotateY(var(--rotation-y)) 
             translateZ(8px) 
             scale(1.02) !important;
}

/* Secondary */

.unified-mouse3d-btn--secondary {
  --btn-bg: rgba(107, 114, 128, 0.9);
  --btn-border: rgba(107, 114, 128, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(107, 114, 128, 0.4);
  --btn-glow: rgba(107, 114, 128, 0.6);
}

.unified-mouse3d-btn--secondary:hover {
  background-color: #5a6268;
  transform: translateY(-2px);
}

/* Danger */

.unified-mouse3d-btn--danger {
  --btn-bg: rgba(239, 68, 68, 0.9);
  --btn-border: rgba(239, 68, 68, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(239, 68, 68, 0.4);
  --btn-glow: rgba(239, 68, 68, 0.6);
}

/* Neon */

.unified-mouse3d-btn--neon {
  --btn-bg: rgba(0, 255, 255, 0.15);
  --btn-border: rgba(0, 255, 255, 0.6);
  --btn-text: #00ffff;
  --btn-shadow: rgba(0, 255, 255, 0.5);
  --btn-glow: rgba(0, 255, 255, 0.8);
  border: 2px solid var(--btn-border);
  background: linear-gradient(45deg, 
    rgba(0, 255, 255, 0.1), 
    rgba(0, 255, 255, 0.05),
    rgba(255, 0, 255, 0.1)
  );
}

/* Glass */

.unified-mouse3d-btn--glass {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-border: rgba(255, 255, 255, 0.2);
  --btn-text: rgba(255, 255, 255, 0.9);
  --btn-shadow: rgba(0, 0, 0, 0.2);
  --btn-glow: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Holographic */

.unified-mouse3d-btn--holographic {
  --btn-bg: transparent;
  --btn-border: rgba(255, 255, 255, 0.3);
  --btn-text: white;
  --btn-shadow: rgba(147, 51, 234, 0.4);
  --btn-glow: rgba(147, 51, 234, 0.6);
  background: linear-gradient(45deg, 
    rgba(255, 0, 150, 0.3),
    rgba(0, 255, 255, 0.3),
    rgba(255, 255, 0, 0.3),
    rgba(147, 51, 234, 0.3)
  );
  background-size: 300% 300%;
  animation: holographic-shift 3s ease-in-out infinite;
}

/* Cyber */

.unified-mouse3d-btn--cyber {
  --btn-bg: rgba(0, 0, 0, 0.8);
  --btn-border: rgba(0, 255, 0, 0.6);
  --btn-text: #00ff00;
  --btn-shadow: rgba(0, 255, 0, 0.4);
  --btn-glow: rgba(0, 255, 0, 0.8);
  font-family: 'Courier New', monospace;
  border: 1px solid var(--btn-border);
  position: relative;
}

.unified-mouse3d-btn--cyber::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    transparent, 
    rgba(0, 255, 0, 0.3), 
    transparent
  );
  z-index: -1;
  animation: cyber-scan 2s linear infinite;
}

/* Quantum */

.unified-mouse3d-btn--quantum {
  --btn-bg: rgba(75, 0, 130, 0.7);
  --btn-border: rgba(138, 43, 226, 0.5);
  --btn-text: #e6e6fa;
  --btn-shadow: rgba(138, 43, 226, 0.6);
  --btn-glow: rgba(138, 43, 226, 0.9);
  background: radial-gradient(circle at center,
    rgba(75, 0, 130, 0.9),
    rgba(138, 43, 226, 0.6),
    rgba(147, 0, 211, 0.8)
  );
  animation: quantum-flux 1.5s ease-in-out infinite alternate;
}

/* Black 3D Semi-Transparent */

.unified-mouse3d-btn--black-3d {
  --btn-bg: rgba(0, 0, 0, 0.7);
  --btn-border: rgba(80, 80, 80, 0.5);
  --btn-text: rgba(255, 255, 255, 0.95);
  --btn-shadow: rgba(0, 0, 0, 0.6);
  --btn-glow: rgba(80, 80, 80, 0.5);
  background: linear-gradient(135deg, 
    rgba(40, 40, 40, 0.8) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(20, 20, 20, 0.75) 100%
  );
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(80, 80, 80, 0.3);
  position: relative;
  overflow: visible;
}

.unified-mouse3d-btn--black-3d::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg,
    rgba(120, 120, 120, 0.2) 0%,
    rgba(60, 60, 60, 0.3) 25%,
    rgba(30, 30, 30, 0.4) 50%,
    rgba(60, 60, 60, 0.3) 75%,
    rgba(120, 120, 120, 0.2) 100%
  );
  border-radius: inherit;
  z-index: -1;
  animation: black-3d-border 3s ease-in-out infinite;
}

.unified-mouse3d-btn--black-3d::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 15%,
    transparent 85%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* ===== SIZES ===== */

.unified-mouse3d-btn--small {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

.unified-mouse3d-btn--medium {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 12px;
}

.unified-mouse3d-btn--large {
  padding: 16px 32px;
  font-size: 1.125rem;
  border-radius: 16px;
}

.unified-mouse3d-btn--xl {
  padding: 20px 40px;
  font-size: 1.25rem;
  border-radius: 20px;
}

/* ===== EFFECTS ===== */

/* Standard */

.unified-mouse3d-btn--standard {
  box-shadow: 
    0 4px 6px -1px var(--btn-shadow),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Glow */

.unified-mouse3d-btn--glow {
  box-shadow: 
    0 4px 6px -1px var(--btn-shadow),
    0 0 20px var(--btn-glow);
}

/* Neon Effect */

.unified-mouse3d-btn--neon {
  box-shadow: 
    0 0 5px var(--btn-glow),
    0 0 10px var(--btn-glow),
    0 0 20px var(--btn-glow),
    0 0 40px var(--btn-glow);
  text-shadow: 0 0 10px currentColor;
}

/* Glass Effect */

.unified-mouse3d-btn--glass {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* Holographic Effect */

.unified-mouse3d-btn--holographic {
  box-shadow: 
    0 8px 32px rgba(147, 51, 234, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Cyber Effect */

.unified-mouse3d-btn--cyber {
  box-shadow: 
    0 0 10px var(--btn-glow),
    0 0 20px var(--btn-glow),
    inset 0 1px 0 rgba(0, 255, 0, 0.2);
  text-shadow: 0 0 5px currentColor;
}

/* Quantum Effect */

.unified-mouse3d-btn--quantum {
  box-shadow: 
    0 8px 25px rgba(138, 43, 226, 0.5),
    0 0 30px var(--btn-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Black 3D Semi-Transparent Effect */

.unified-mouse3d-btn--black-3d {
  box-shadow: 
    0 12px 25px rgba(0, 0, 0, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ===== STYLES ADDITIONNELS POUR VIOLET GLOW ===== */

/* Classes spécifiques pour forcer l'application du radial design */

.violet-glow-button,
.unified-mouse3d-btn.violet-glow-button,
button.violet-glow-button,
a.violet-glow-button {
  background: radial-gradient(ellipse at center, 
    rgba(30, 41, 59, 0.8) 0%,
    rgba(20, 25, 35, 0.9) 40%,
    rgba(10, 15, 25, 0.95) 70%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  border: 1px solid rgba(59, 70, 100, 0.6) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  /* Glow externe très visible */
  box-shadow: 
    0px 0px 20px 5px rgba(59, 70, 100, 0.6),
    0px 0px 40px 10px rgba(59, 70, 100, 0.4),
    0px 0px 60px 15px rgba(59, 70, 100, 0.2) !important;
}

.violet-glow-button:hover,
.unified-mouse3d-btn.violet-glow-button:hover,
button.violet-glow-button:hover,
a.violet-glow-button:hover {
  background: radial-gradient(ellipse at center, 
    rgba(40, 51, 69, 0.9) 0%,
    rgba(30, 35, 45, 0.95) 35%,
    rgba(15, 20, 30, 0.98) 65%,
    rgba(5, 5, 15, 0.95) 100%
  ) !important;
  border: 1px solid rgba(69, 80, 110, 0.8) !important;
  /* Glow intensifié au hover */
  box-shadow: 
    0px 0px 30px 8px rgba(69, 80, 110, 0.8),
    0px 0px 50px 15px rgba(69, 80, 110, 0.6),
    0px 0px 80px 20px rgba(69, 80, 110, 0.3) !important;
  transform: perspective(var(--perspective-intensity)) 
             rotateX(var(--rotation-x)) 
             rotateY(var(--rotation-y)) 
             translateZ(8px) 
             scale(1.02) !important;
}

/* Premium */

.unified-mouse3d-btn--premium {
  box-shadow: 
    0 8px 25px -5px var(--btn-shadow),
    0 0 30px var(--btn-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Code */

.unified-mouse3d-btn--code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  box-shadow: 
    0 4px 6px -1px var(--btn-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Pulse */

.unified-mouse3d-btn--pulse {
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

/* ===== INTENSITY LEVELS ===== */

.unified-mouse3d-btn--low {
  transform: translateZ(0);
}

.unified-mouse3d-btn--medium {
  transform: translateZ(0);
}

.unified-mouse3d-btn--high {
  transform: translateZ(0);
}

.unified-mouse3d-btn--ultra {
  transform: translateZ(0);
}

.unified-mouse3d-btn--extreme {
  transform: translateZ(0);
}

/* ===== STATES ===== */

/* Hovered - avec tracking 3D */

.unified-mouse3d-btn--hovered {
  transform: perspective(var(--perspective-intensity)) 
             rotateX(var(--rotation-x)) 
             rotateY(var(--rotation-y)) 
             translateZ(8px) 
             scale(1.02);
}

/* Tracking actif */

.unified-mouse3d-btn.tracking-active {
  transform: perspective(var(--perspective-intensity)) 
             rotateX(var(--rotation-x)) 
             rotateY(var(--rotation-y)) 
             translateZ(3px) 
             scale(1.008);
}

.unified-mouse3d-btn--hovered .unified-mouse3d-background {
  filter: brightness(1.1);
}

.unified-mouse3d-btn--hovered .unified-mouse3d-energy-border {
  opacity: 1;
  animation-duration: 1s;
}

/* Pressed */

.unified-mouse3d-btn--pressed {
  transform: translateZ(2px) scale(0.98);
}

.unified-mouse3d-btn--pressed .unified-mouse3d-background {
  filter: brightness(0.9);
}

/* Disabled */

.unified-mouse3d-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.unified-mouse3d-btn--disabled * {
  pointer-events: none;
}

/* Loading */

.unified-mouse3d-btn--loading {
  opacity: 0.8;
  cursor: wait;
}

/* ===== CONTACT TYPE SPECIFIC STYLES ===== */

/* WhatsApp specific */

.unified-mouse3d-btn--whatsapp:hover {
  --btn-glow: rgba(37, 211, 102, 0.8);
}

/* LinkedIn specific */

.unified-mouse3d-btn--linkedin:hover {
  --btn-glow: rgba(10, 102, 194, 0.8);
}

/* GitHub specific */

.unified-mouse3d-btn--github:hover {
  --btn-glow: rgba(100, 116, 139, 0.8);
}

/* Email specific */

.unified-mouse3d-btn--email:hover {
  --btn-glow: rgba(59, 130, 246, 0.8);
}

/* Phone specific */

.unified-mouse3d-btn--phone:hover {
  --btn-glow: rgba(168, 85, 247, 0.8);
}

/* ===== ANIMATIONS ===== */

@keyframes energy-pulse {
  0%, 100% {
    opacity: calc(0.3 + var(--energy-level) * 0.5);
    transform: scale(1);
  }

  50% {
    opacity: calc(0.5 + var(--energy-level) * 0.7);
    transform: scale(1.01);
  }
}

@keyframes pulse-glow {
  from {
    box-shadow: 
      0 4px 6px -1px var(--btn-shadow),
      0 0 10px var(--btn-glow);
  }

  to {
    box-shadow: 
      0 4px 6px -1px var(--btn-shadow),
      0 0 25px var(--btn-glow);
  }
}

@keyframes spin {
  from { transform: rotate(0deg);
  }

  to { transform: rotate(360deg);
  }
}

@keyframes holographic-shift {
  0%, 100% { background-position: 0% 50%;
  }

  50% { background-position: 100% 50%;
  }
}

@keyframes cyber-scan {
  0% { transform: translateX(-100%);
  }

  100% { transform: translateX(100%);
  }
}

@keyframes quantum-flux {
  0% {
    filter: hue-rotate(0deg) brightness(1);
    transform: scale(1);
  }

  100% {
    filter: hue-rotate(60deg) brightness(1.2);
    transform: scale(1.02);
  }
}

@keyframes black-3d-border {
  0%, 100% {
    background: linear-gradient(45deg,
      rgba(128, 128, 128, 0.2) 0%,
      rgba(64, 64, 64, 0.4) 25%,
      rgba(32, 32, 32, 0.6) 50%,
      rgba(64, 64, 64, 0.4) 75%,
      rgba(128, 128, 128, 0.2) 100%
    );
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    background: linear-gradient(45deg,
      rgba(160, 160, 160, 0.4) 0%,
      rgba(96, 96, 96, 0.6) 25%,
      rgba(48, 48, 48, 0.8) 50%,
      rgba(96, 96, 96, 0.6) 75%,
      rgba(160, 160, 160, 0.4) 100%
    );
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .unified-mouse3d-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .unified-mouse3d-btn--small {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .unified-mouse3d-btn--large {
    padding: 14px 28px;
    font-size: 1rem;
  }

  .unified-mouse3d-btn--xl {
    padding: 16px 32px;
    font-size: 1.1rem;
  }
}

/* ===== ACCESSIBILITY ===== */

.unified-mouse3d-btn:focus-visible {
  outline: 2px solid var(--btn-glow);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .unified-mouse3d-btn,
  .unified-mouse3d-background,
  .unified-mouse3d-shine,
  .unified-mouse3d-energy-border {
    transition: none;
    animation: none;
  }
}

/* ===== HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
  .unified-mouse3d-btn {
    border: 2px solid currentColor;
  }

  .unified-mouse3d-shine {
    display: none;
  }
}

/* ===== STYLE UNIFIÉ TRANSPARENT - OVERRIDE GLOBAL ===== */

/* Applique un style transparent avec border à TOUS les boutons par défaut */

/* Les styles inline du composant React prennent le dessus */

.unified-mouse3d-btn:not(.violet-glow-button):not(.unified-mouse3d-btn--neon):not(.unified-mouse3d-btn--cyber) {
  /* Force le background transparent pour tous les boutons sauf violet-glow, neon et cyber */
  background: transparent !important;
}

.unified-mouse3d-btn:not(.violet-glow-button):not(.unified-mouse3d-btn--neon):not(.unified-mouse3d-btn--cyber):hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Background layer transparent également */

.unified-mouse3d-btn:not(.violet-glow-button):not(.unified-mouse3d-btn--neon):not(.unified-mouse3d-btn--cyber) .unified-mouse3d-background {
  background: transparent !important;
}

.unified-mouse3d-btn:not(.violet-glow-button):not(.unified-mouse3d-btn--neon):not(.unified-mouse3d-btn--cyber):hover .unified-mouse3d-background {
  background: transparent !important;
}

/* Border subtil et élégant */

.unified-mouse3d-btn:not(.violet-glow-button) {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.unified-mouse3d-btn:not(.violet-glow-button):hover {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Glassmorphisme très léger */

.unified-mouse3d-btn {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.unified-mouse3d-btn:hover {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Energy border plus subtil */

.unified-mouse3d-energy-border {
  opacity: 0 !important;
}

.unified-mouse3d-btn:hover .unified-mouse3d-energy-border {
  opacity: 0.15 !important;
}

/* Shine plus discret */

.unified-mouse3d-shine {
  opacity: 0.2 !important;
}

.unified-mouse3d-btn:hover .unified-mouse3d-shine {
  opacity: 0.4 !important;
}

/* purgecss end ignore */

/* purgecss start ignore */

/* ===== STYLE PREMIUM GLOBAL POUR TOUS LES BOUTONS ===== */

/* STYLE UNIQUE - AUCUNE VARIANTE AUTORISÉE */

/* Priorité maximale - chargé après les autres CSS */

/* Application FORCÉE du style premium sur TOUS les boutons du site */

.unified-mouse3d-btn,
button.unified-mouse3d-btn,
a.unified-mouse3d-btn,
.unified-mouse3d-btn--primary,
.unified-mouse3d-btn--secondary,
.unified-mouse3d-btn--success,
.unified-mouse3d-btn--danger,
.unified-mouse3d-btn--warning,
.unified-mouse3d-btn--info,
.unified-mouse3d-btn--dark,
.unified-mouse3d-btn--professional,
.unified-mouse3d-btn--accent,
.unified-mouse3d-btn--violet-glow,
.unified-mouse3d-btn--neon,
.unified-mouse3d-btn--glass,
.unified-mouse3d-btn--holographic,
.unified-mouse3d-btn--cyber,
.unified-mouse3d-btn--quantum,
.unified-mouse3d-btn--black-3d {
  /* TAILLE STANDARDISÉE POUR TOUS LES BOUTONS */
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 400;
  /* Background glassmorphique subtil */
  background: rgba(255, 255, 255, 0.08) !important;
  /* Bordure subtile et élégante */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* Glow glassmorphique subtil */
  box-shadow: 
    0px 0px 15px 1px rgba(0, 0, 0, 0.1), 
    0px 0px 30px 4px rgba(0, 0, 0, 0.05), 
    inset 0px 1px 0px rgba(255, 255, 255, 0.08) !important;
  /* Backdrop filter premium */
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  /* Couleur de texte premium */
  color: rgba(255, 255, 255, 0.92) !important;
  /* Border radius moderne */
  border-radius: 14px !important;
  /* Transition fluide */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Position relative pour les effets */
  position: relative !important;
  overflow: hidden !important;
  /* Flexbox pour l'alignement des icônes */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Effet hover premium global - TOUTES VARIANTES FORCÉES */

.unified-mouse3d-btn:hover,
button.unified-mouse3d-btn:hover,
a.unified-mouse3d-btn:hover,
.unified-mouse3d-btn--primary:hover,
.unified-mouse3d-btn--secondary:hover,
.unified-mouse3d-btn--success:hover,
.unified-mouse3d-btn--danger:hover,
.unified-mouse3d-btn--warning:hover,
.unified-mouse3d-btn--info:hover,
.unified-mouse3d-btn--dark:hover,
.unified-mouse3d-btn--professional:hover,
.unified-mouse3d-btn--accent:hover,
.unified-mouse3d-btn--violet-glow:hover,
.unified-mouse3d-btn--neon:hover,
.unified-mouse3d-btn--glass:hover,
.unified-mouse3d-btn--holographic:hover,
.unified-mouse3d-btn--cyber:hover,
.unified-mouse3d-btn--quantum:hover,
.unified-mouse3d-btn--black-3d:hover {
  /* Background glassmorphique hover */
  background: rgba(255, 255, 255, 0.12) !important;
  /* Bordure plus visible au hover */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  /* GLOW BLEU NUIT AU HOVER */
  box-shadow: 
    0px 0px 25px 3px rgba(30, 41, 59, 0.4), 
    0px 0px 40px 8px rgba(30, 41, 59, 0.3), 
    0px 0px 60px 12px rgba(30, 41, 59, 0.2),
    inset 0px 1px 0px rgba(255, 255, 255, 0.1) !important;
  /* Transform subtil au hover */
  transform: scale(1.02) translateY(-1px) !important;
}

/* Application sur l'élément background */

.unified-mouse3d-btn .unified-mouse3d-background {
  background: radial-gradient(ellipse at center, 
    rgba(20, 30, 50, 0.3) 0%, 
    rgba(10, 20, 35, 0.5) 40%, 
    rgba(5, 10, 25, 0.6) 80%, 
    rgba(0, 0, 0, 0.4) 100%
  ) !important;
}

.unified-mouse3d-btn:hover .unified-mouse3d-background {
  background: radial-gradient(ellipse at center, 
    rgba(25, 35, 55, 0.4) 0%, 
    rgba(15, 25, 40, 0.6) 40%, 
    rgba(5, 10, 20, 0.7) 80%, 
    rgba(0, 0, 0, 0.5) 100%
  ) !important;
}

/* Force application sur tous les contenus avec espacement des icônes */

.unified-mouse3d-btn .unified-mouse3d-content {
  color: rgba(255, 255, 255, 0.92) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Espacement spécifique pour les icônes */

.unified-mouse3d-btn .unified-mouse3d-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.unified-mouse3d-btn .unified-mouse3d-text {
  white-space: nowrap !important;
}

/* Force la taille sur tous les types de boutons */

.unified-mouse3d-btn--small,
.unified-mouse3d-btn--medium,
.unified-mouse3d-btn--large,
.unified-mouse3d-btn--xl {
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 400;
}

/* Classe pour désactiver le style premium si nécessaire */

.unified-mouse3d-btn.no-premium-style {
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;
  backdrop-filter: unset !important;
  -webkit-backdrop-filter: unset !important;
}

.unified-mouse3d-btn.no-premium-style .unified-mouse3d-background {
  background: unset !important;
}

/* Style premium pour les boutons désactivés */

.unified-mouse3d-btn:disabled,
.unified-mouse3d-btn--disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Style premium pour les boutons en loading */

.unified-mouse3d-btn--loading {
  opacity: 0.8 !important;
  cursor: wait !important;
}

/* purgecss end ignore */
/* purgecss start ignore */

/* =====================================================
   ICON COLOR POLICY - Seules les technologies colorées
   ===================================================== */

/* Règle générale : toutes les icônes sont monochromes par défaut */

.icon, 
.hero-icon,
.nav-icon,
.button-icon,
.modal-icon,
.notification-icon {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.3s ease;
}

.icon:hover,
.hero-icon:hover,
.nav-icon:hover,
.button-icon:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* =====================================================
   EXCEPTIONS : TECHNOLOGIES UNIQUEMENT
   ===================================================== */

/* Icônes de technologies - gardent leurs couleurs */

.tech-icon,
.tech-stack-icon,
.technology-icon,
.universal-tech-icon,
.unified-sprite-icon,
.unified-sprite-techIcons,
.tech-icon-sprite,
[class*="tech-icon-"] {
  /* Les couleurs sont définies dans TechIcon.jsx et UniversalTechIcon.jsx */
  filter: none !important;
  -webkit-filter: none !important;
}

/* Technologies spécifiques avec couleurs autorisées */

.tech-react { color: #61DAFB !important;
}

.tech-vue { color: #4FC08D !important;
}

.tech-angular { color: #DD0031 !important;
}

.tech-javascript { color: #F7DF1E !important;
}

.tech-typescript { color: #3178C6 !important;
}

.tech-php { color: #777BB4 !important;
}

.tech-python { color: #3776AB !important;
}

.tech-node { color: #339933 !important;
}

.tech-docker { color: #2496ED !important;
}

.tech-aws { color: #FF9900 !important;
}

.tech-mysql { color: #4479A1 !important;
}

.tech-mongodb { color: #47A248 !important;
}

.tech-redis { color: #DC382D !important;
}

.tech-git { color: #F05032 !important;
}

.tech-github { color: #181717 !important;
}

.tech-gitlab { color: #FCA326 !important;
}

/* =====================================================
   SUPPRESSION DE COULEURS NON-TECHNIQUES
   ===================================================== */

/* Reset couleurs pour les icônes non-techniques */

.fa-heart,
.fa-star,
.fa-fire,
.fa-rocket,
.fa-lightbulb,
.fa-trophy,
.fa-crown,
.fa-gem,
.fa-magic,
.fa-sparkles,
.fa-zap,
.fa-bolt,
.fa-flash {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Emojis remplacés par des icônes glassmorphiques */

.emoji-replacement {
  display: none !important;
}

/* =====================================================
   GLASSMORPHIC ICONS STYLING
   ===================================================== */

.glassmorphic-icon {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glassmorphic-icon svg {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.glassmorphic-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

.glassmorphic-icon:hover svg {
  color: rgba(255, 255, 255, 0.85);
}

/* =====================================================
   MEDIA QUERIES
   ===================================================== */

/* Hide all FontAwesome icons on mobile devices */

@media (max-width: 768px) {
  .fa,
  .fas,
  .far,
  .fab,
  .fal,
  .fad,
  [class*="fa-"],
  .fontawesome-i2svg-active [class*="fa-"] {
    display: none !important;
  }
}

@media (prefers-color-scheme: light) {
  .glassmorphic-icon {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
  }

  .glassmorphic-icon svg {
    color: rgba(0, 0, 0, 0.7);
  }

  .glassmorphic-icon:hover {
    background: rgba(0, 0, 0, 0.08);
  }

  .glassmorphic-icon:hover svg {
    color: rgba(0, 0, 0, 0.85);
  }
}

/* purgecss end ignore */
/* purgecss start ignore */

/* 🎨 ICÔNES NOIR ET BLANC - Style Global */

/* Force toutes les icônes FontAwesome en noir et blanc */

.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class*="fa-"],
.fontawesome-i2svg-active [class*="fa-"] {
  color: #ffffff !important;
  filter: none !important;
  transition: all 0.3s ease !important;
}

/* Icônes noir et blanc avec états hover */

.icon-black-white,
.fa.icon-black-white,
.fas.icon-black-white,
.far.icon-black-white,
.fab.icon-black-white {
  color: #ffffff !important;
  filter: grayscale(100%) brightness(1.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.icon-black-white:hover,
.fa.icon-black-white:hover,
.fas.icon-black-white:hover,
.far.icon-black-white:hover,
.fab.icon-black-white:hover {
  color: #06b6d4 !important;
  filter: grayscale(0%) brightness(1.1) !important;
  transform: scale(1.1) !important;
}

/* Boutons avec icônes noir et blanc */

.btn-icon-bw,
button.icon-black-white {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  min-width: 48px !important;
  min-height: 48px !important;
}

.btn-icon-bw:hover,
button.icon-black-white:hover {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.15) !important;
}

/* Contact icons spécifiques */

.contact-icon {
  color: #ffffff !important;
  font-size: 20px !important;
  padding: 12px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.contact-icon:hover {
  color: #ffffff !important;
  background: rgba(6, 182, 212, 0.2) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.2) !important;
}

/* Icônes spécifiques par plateforme */

.contact-icon.github:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.contact-icon.linkedin:hover {
  background: rgba(10, 102, 194, 0.2) !important;
  border-color: rgba(10, 102, 194, 0.4) !important;
}

.contact-icon.email:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.contact-icon.phone:hover {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

/* Layout des icônes de contact */

.contact-icons-container {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 24px 0 !important;
}

/* Mobile responsive */

@media (max-width: 768px) {
  /* Hide all FontAwesome icons on mobile */

  .fa,
  .fas,
  .far,
  .fab,
  .fal,
  .fad,
  [class*="fa-"],
  .fontawesome-i2svg-active [class*="fa-"] {
    display: none !important;
  }

  .contact-icons-container {
    gap: 12px !important;
    margin: 20px 0 !important;
  }

  .contact-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    padding: 10px !important;
  }
}

/* Animations spéciales */

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.contact-icon.pulse {
  animation: iconPulse 2s infinite !important;
}

/* Force black and white pour tous les SVGs - SAUF ICÔNES DE TECHNOLOGIES */

.icon-bw svg:not(.tech-icon):not(.tech-icon-sprite):not([class*="tech-icon-"]),
.icon-black-white svg:not(.tech-icon):not(.tech-icon-sprite):not([class*="tech-icon-"]) {
  filter: grayscale(100%) brightness(1.2) !important;
  transition: filter 0.3s ease !important;
}

.icon-bw:hover svg:not(.tech-icon):not(.tech-icon-sprite):not([class*="tech-icon-"]),
.icon-black-white:hover svg:not(.tech-icon):not(.tech-icon-sprite):not([class*="tech-icon-"]) {
  filter: grayscale(0%) brightness(1.1) !important;
}

/* EXCEPTIONS: Icônes de technologies gardent leurs couleurs */

.tech-icon,
.tech-icon-sprite,
[class*="tech-icon-"] {
  filter: none !important;
}

/* UnifiedMouse3DButton avec icônes noir et blanc */

.unified-mouse3d-button .fa,
.unified-mouse3d-button .fas,
.unified-mouse3d-button .far,
.unified-mouse3d-button .fab {
  color: #ffffff !important;
  filter: none !important;
}

/* État actif pour les icônes */

.contact-icon:active {
  transform: translateY(0) scale(0.98) !important;
  transition: all 0.1s ease !important;
}

/* purgecss end ignore */
/*purgecss start ignore
 */

/**
 * 🚀 UNIVERSAL NAVIGATION - Styles globaux
 *
 * Styles pour la navigation universelle qui doit être visible
 * par-dessus tous les éléments, y compris le PlaneCanvas
 */

/* Hide navigation on workflow studio page */

body[data-route="/workflow-studio"] .universal-nav,
body[data-route="/workflow-studio"] nav,
body[data-route="/workflow-studio"] header {
  display: none !important;
}

/* Navigation universelle - Z-index maximum */

.universal-nav {
  z-index: 999999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* S'assurer que tous les éléments de navigation ont le bon z-index */

.universal-nav * {
  position: relative;
  z-index: 1;
}

/* Mega-menus avec z-index élevé */

.universal-nav .mega-menu {
  z-index: 999998 !important;
}

/* Menu mobile avec z-index élevé */

.universal-nav .mobile-menu {
  z-index: 999997 !important;
}

/* Background de navigation avec transparence optimisée */

.universal-nav .nav-background {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Effets de survol améliorés */

.universal-nav .nav-item:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Animation de l'Universe Switcher */

.universal-nav .universe-switcher {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.universal-nav .universe-switcher:hover {
  transform: scale(1.05);
}

/* Olive logo avec interactions améliorées */

.universal-nav .olive-logo {
  transition: all 0.3s ease;
}

.universal-nav .olive-logo:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
}

/* Responsive pour très petits écrans */

@media (max-width: 480px) {
  .universal-nav {
    font-size: 0.9rem;
  }

  .universal-nav .nav-padding {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Animation d'apparition de la navigation */

.universal-nav {
  animation: slideInFromTop 0.5s ease-out;
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Indicateurs visuels pour la page active */

.universal-nav .nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #00D4FF, #FF6B9D);
  border-radius: 1px;
}

/* Effets de particules pour l'Universe Switcher */

.universe-particles {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.universe-particles .particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: linear-gradient(45deg, #00D4FF, #FF6B9D);
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-20px) scale(1.5);
    opacity: 1;
  }
}

/* Amélioration de la lisibilité sur fond sombre */

.universal-nav .text-shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Séparateurs visuels pour les mega-menus */

.universal-nav .mega-menu-separator {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
  margin: 0 2rem;
}

/* Améliorations des mega-menus */

.universal-nav .mega-menu-item {
  position: relative;
  overflow: hidden;
}

.universal-nav .mega-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.universal-nav .mega-menu-item:hover::before {
  left: 100%;
}

/* Animation des icônes dans les mega-menus */

.universal-nav .mega-menu-icon {
  transition: all 0.3s ease;
}

.universal-nav .mega-menu-item:hover .mega-menu-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Pulsation subtile pour les points indicateurs */

@keyframes pulse-dot {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.universal-nav .indicator-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Effets de glow pour les CTAs */

.universal-nav .cta-button {
  position: relative;
}

.universal-nav .cta-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.universal-nav .cta-button:hover::after {
  opacity: 0.4;
}

/*purgecss end ignore
 */
/*purgecss start ignore
 */

/**
 * 🌟 PERFECT NAVIGATION IA - Styles Premium
 * 
 * Styles CSS pour la navigation parfaite inspirée de la page /ia
 * Design glassmorphisme de niveau enterprise
 */

/* Navigation principal */

.perfect-nav {
  /* Variables CSS pour cohérence */
  --nav-glass-bg: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(15, 23, 42, 0.92) 30%, 
    rgba(30, 41, 59, 0.95) 70%, 
    rgba(0, 0, 0, 0.95) 100%
  );
  --nav-blur: blur(40px) saturate(180%);
  --nav-border: 1px solid rgba(255, 255, 255, 0.15);
  --nav-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dropdown premium styles */

.premium-dropdown {
  /* Variables pour dropdowns */
  --dropdown-bg: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(15, 23, 42, 0.92) 40%, 
    rgba(30, 41, 59, 0.95) 100%
  );
  --dropdown-blur: blur(40px) saturate(180%);
  --dropdown-border: 1px solid rgba(255, 255, 255, 0.15);
  --dropdown-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 100px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Animation d'apparition fluide */

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animation de brillance pour les éléments interactifs */

@keyframes shine-sweep {
  0% {
    transform: translateX(-100%) skewX(-25deg);
  }

  100% {
    transform: translateX(200%) skewX(-25deg);
  }
}

/* Effet de brillance sur les items */

.nav-item-shine {
  position: relative;
  overflow: hidden;
}

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

.nav-item-shine:hover::before {
  left: 100%;
}

/* Glassmorphisme premium pour les cartes */

.glass-premium {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Effet de hover premium */

.glass-premium-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-premium-hover:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Animation de pulsation pour les badges */

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.8;
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.3);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 25px rgba(147, 51, 234, 0.5);
  }
}

.badge-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Gradient de texte premium */

.text-gradient-premium {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(59, 130, 246, 0.8) 50%,
    rgba(147, 51, 234, 0.9) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Effet de particules flottantes */

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 1;
  }
}

.floating-particle {
  animation: float-particle 3s ease-in-out infinite;
}

/* Transitions ultra-fluides */

.ultra-smooth {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Effet de morphing sur les boutons */

.morph-button {
  transition: 
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.morph-button:hover {
  transform: scale(1.05);
  border-radius: 16px;
}

/* Séparateurs lumineux */

.luminous-separator {
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(59, 130, 246, 0.3) 20%, 
    rgba(147, 51, 234, 0.5) 50%, 
    rgba(59, 130, 246, 0.3) 80%, 
    transparent 100%
  );
  height: 1px;
  opacity: 0.6;
}

/* Effet de glow adaptatif selon le thème */

.adaptive-glow-cyan {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0);
  transition: box-shadow 0.3s ease;
}

.adaptive-glow-cyan:hover {
  box-shadow: 
    0 0 30px rgba(59, 130, 246, 0.4),
    0 0 60px rgba(59, 130, 246, 0.2);
}

.adaptive-glow-purple {
  box-shadow: 0 0 20px rgba(147, 51, 234, 0);
  transition: box-shadow 0.3s ease;
}

.adaptive-glow-purple:hover {
  box-shadow: 
    0 0 30px rgba(147, 51, 234, 0.4),
    0 0 60px rgba(147, 51, 234, 0.2);
}

/* Animation de rotation douce pour les icônes */

@keyframes rotate-smooth {
  from { transform: rotate(0deg);
  }

  to { transform: rotate(360deg);
  }
}

.rotate-on-hover {
  transition: transform 0.3s ease;
}

.rotate-on-hover:hover {
  transform: rotate(180deg);
}

/* Effet de dispersion pour les micro-interactions */

@keyframes disperse {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }

  100% {
    transform: scale(0) translate(var(--random-x), var(--random-y));
    opacity: 0;
  }
}

/* Responsive - Optimisations mobile */

@media (max-width: 1024px) {
  .perfect-nav {
    --nav-blur: blur(25px) saturate(150%);
  }

  .premium-dropdown {
    --dropdown-blur: blur(25px) saturate(150%);
  }
}

/* Optimisations pour les animations sur dispositifs lents */

@media (prefers-reduced-motion: reduce) {
  .fadeInScale,
  .shine-sweep,
  .pulse-glow,
  .float-particle,
  .disperse {
    animation: none;
  }

  .ultra-smooth,
  .morph-button,
  .glass-premium-hover {
    transition: none;
  }
}

/* Support pour les écrans haute densité */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .perfect-nav {
    --nav-blur: blur(30px) saturate(160%);
  }

  .glass-premium {
    backdrop-filter: blur(25px) saturate(160%);
    -webkit-backdrop-filter: blur(25px) saturate(160%);
  }
}

/* Variables de couleurs pour cohérence */

:root {
  --nav-text-primary: rgba(255, 255, 255, 0.9);
  --nav-text-secondary: rgba(255, 255, 255, 0.7);
  --nav-text-muted: rgba(255, 255, 255, 0.5);
  --nav-accent-cyan: #3b82f6;
  --nav-accent-purple: #9333ea;
  --nav-accent-pink: #ec4899;
  --nav-glass-light: rgba(255, 255, 255, 0.1);
  --nav-glass-medium: rgba(255, 255, 255, 0.15);
  --nav-glass-strong: rgba(255, 255, 255, 0.2);
}

/*purgecss end ignore
 */
/*purgecss start ignore
 */

/**
 * 🤖 OLIVE LOGO FF STYLES
 * Clean PNG logo styling without animations
 */

.olive-logo-ff {
  /* Clean image rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Remove any transforms and animations */
  transform: none !important;
  transition: none !important;
  animation: none !important;
  /* Ensure proper display */
  display: block !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  /* Prevent dragging */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  /* Force visibility */
  opacity: 1 !important;
  visibility: visible !important;
}

/* High DPI displays */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .olive-logo-ff {
    image-rendering: pixelated;
  }
}

/* Ensure no interference with other elements */

.olive-logo-ff {
  z-index: auto;
  position: relative;
  pointer-events: auto;
}

/* Clean container for minimized state */

.olive-assistant-minimized {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.olive-assistant-minimized * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ensure logo container in minimized state is clean */

.olive-assistant-minimized .olive-logo-ff {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Clean round logo without borders */

.olive-logo-ff {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  border-radius: 50% !important;
}

/* Make sure the container doesn't interfere */

.olive-master-assistant-revolutionary {
  pointer-events: auto !important;
}

.olive-master-assistant-revolutionary .olive-logo-ff {
  pointer-events: auto !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: none !important;
}

/*purgecss end ignore
 */
/*purgecss start ignore
 */

/**
 * Styles pour le composant GoogleReviewsQRCode
 * Designs intelligents pour maximiser les conversions
 */

/* Container de base */

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.qr-code-wrapper {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.qr-code-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(6, 182, 212, 0.3);
  border-color: #06b6d4;
}

/* Instructions */

.qr-instructions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.instruction-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
}

.instruction-icon {
  color: #06b6d4;
  font-size: 1.1rem;
}

/* Popup Modal */

.qr-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.qr-popup-modal {
  background: linear-gradient(135deg, #1e293b, #334155);
  border-radius: 24px;
  padding: 40px;
  max-width: 500px;
  width: 100%;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.popup-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
  cursor: pointer;
}

.popup-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}

.popup-header {
  text-align: center;
  margin-bottom: 30px;
}

.popup-icon {
  font-size: 3rem;
  color: #fbbf24;
  margin-bottom: 15px;
}

.popup-title {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.popup-subtitle {
  color: #94a3b8;
  line-height: 1.5;
}

.popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-size: 0.9rem;
}

.action-btn.primary {
  background: linear-gradient(135deg, #4285f4, #34a853);
  color: white;
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(66, 133, 244, 0.4);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #06b6d4;
}

.popup-footer {
  text-align: center;
  margin-top: 20px;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* Floating Widget */

.qr-floating-widget {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 9999;
}

.floating-trigger {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(251, 191, 36, 0.4);
  transition: all 0.3s ease;
}

.floating-trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(251, 191, 36, 0.6);
}

.floating-trigger:active {
  transform: translateY(-1px);
}

/* CTA Section */

.qr-cta-section {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.cta-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.cta-title {
  color: white;
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.cta-subtitle {
  color: #94a3b8;
  font-size: 1.1rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.cta-benefits {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #06b6d4;
  font-size: 0.9rem;
  font-weight: 400;
}

.cta-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta-actions {
  width: 100%;
}

.cta-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: linear-gradient(135deg, #4285f4, #34a853);
  color: white;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
}

.cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(66, 133, 244, 0.4);
}

/* Inline Display */

.qr-inline-display {
  text-align: center;
  padding: 20px;
}

/* Responsive Design */

@media (max-width: 768px) {
  .qr-popup-modal {
    padding: 30px 20px;
    margin: 20px;
  }

  .popup-title {
    font-size: 1.25rem;
  }

  .action-btn {
    font-size: 0.85rem;
    padding: 10px 16px;
  }

  .cta-content {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .cta-title {
    font-size: 1.5rem;
  }

  .cta-benefits {
    justify-content: center;
  }

  .floating-trigger {
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .qr-floating-widget {
    right: 15px;
    bottom: 80px;
  }
}

@media (max-width: 480px) {
  .popup-actions {
    flex-direction: column;
  }

  .action-btn {
    width: 100%;
  }

  .qr-code-wrapper {
    padding: 15px;
  }

  .instruction-step {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
}

/* Animations */

@keyframes qr-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

.qr-code-wrapper.pulse {
  animation: qr-pulse 2s infinite;
}

@keyframes qr-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

.floating-trigger.bounce {
  animation: qr-bounce 2s infinite;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .qr-code-wrapper {
    border-color: #000;
    background: #fff;
  }

  .instruction-step {
    background: rgba(0, 0, 0, 0.8);
    color: white;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .qr-code-wrapper {
    transition: none;
  }

  .qr-code-wrapper:hover {
    transform: none;
  }

  .action-btn:hover {
    transform: none;
  }

  .floating-trigger:hover {
    transform: none;
  }
}

/*purgecss end ignore
 */
/*purgecss start ignore
 */

/**
 * Styles pour le système FAQ
 * Design glassmorphique avec animations élégantes
 */

.faq-system {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Header */

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.service-icon {
  font-size: 3rem;
  color: #06b6d4;
}

.faq-title {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  margin-bottom: 8px;
}

.faq-description {
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1.5;
}

.faq-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #06b6d4;
  margin-bottom: 4px;
}

.stat-label {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* Controls */

.faq-controls {
  margin-bottom: 40px;
}

.search-section {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.search-bar {
  flex: 1;
  position: relative;
  min-width: 300px;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1rem;
}

.search-input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input::-moz-placeholder {
  color: #94a3b8;
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.control-buttons {
  display: flex;
  gap: 10px;
}

.control-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  color: #06b6d4;
}

/* Categories */

.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-category {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-icon {
  font-size: 1.5rem;
  color: #8b5cf6;
}

.category-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: white;
  flex: 1;
}

.category-count {
  padding: 4px 12px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  color: #8b5cf6;
  font-size: 0.85rem;
  font-weight: 400;
}

/* Questions */

.category-questions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: #06b6d4;
  background: rgba(255, 255, 255, 0.08);
}

.faq-question {
  width: 100%;
  padding: 20px;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: rgba(6, 182, 212, 0.05);
}

.question-text {
  flex: 1;
  color: white;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding-right: 20px;
}

.toggle-icon {
  color: #06b6d4;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.faq-answer {
  overflow: hidden;
}

.answer-content {
  padding: 0 20px 20px 20px;
  color: #cbd5e1;
  line-height: 1.7;
  font-size: 0.95rem;
}

.answer-content p {
  margin: 0;
}

.answer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.tag {
  padding: 4px 10px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: #06b6d4;
  font-size: 0.8rem;
  font-weight: 400;
}

/* Highlight de recherche */

.highlight {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.3));
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
}

/* No results */

.no-results {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-results-icon {
  font-size: 3rem;
  color: #94a3b8;
  margin-bottom: 20px;
  opacity: 0.5;
}

.no-results h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.no-results p {
  color: #94a3b8;
  margin-bottom: 20px;
}

.clear-search-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.3);
}

/* CTA */

.faq-cta {
  margin-top: 60px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.faq-cta h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.faq-cta p {
  color: #94a3b8;
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
  border-radius: 12px;
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(6, 182, 212, 0.4);
}

/* Responsive */

@media (max-width: 768px) {
  .faq-header {
    flex-direction: column;
    gap: 20px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .service-icon {
    font-size: 2rem;
  }

  .faq-title {
    font-size: 1.5rem;
  }

  .faq-stats {
    width: 100%;
    justify-content: space-around;
  }

  .search-section {
    flex-direction: column;
    gap: 15px;
  }

  .search-bar {
    min-width: 100%;
  }

  .control-buttons {
    width: 100%;
    justify-content: stretch;
  }

  .control-btn {
    flex: 1;
  }

  .faq-category {
    padding: 20px;
  }

  .question-text {
    font-size: 0.95rem;
  }

  .answer-content {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .faq-system {
    padding: 20px 10px;
  }

  .faq-header {
    padding: 20px;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .faq-item {
    border-radius: 8px;
  }

  .faq-question {
    padding: 15px;
  }

  .answer-content {
    padding: 0 15px 15px 15px;
  }

  .faq-cta {
    padding: 30px 20px;
  }
}

/* Animations */

@keyframes faq-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item {
  animation: faq-fade-in 0.4s ease-out;
}

/* Accessibilité */

.faq-question:focus {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
}

/* Mode impression */

@media print {
  .faq-system {
    background: white;
    color: black;
  }

  .faq-controls,
  .faq-cta {
    display: none;
  }

  .faq-item {
    page-break-inside: avoid;
  }

  .faq-answer {
    height: auto !important;
    opacity: 1 !important;
  }
}

/*purgecss end ignore
 */
/* purgecss start ignore */

/* Olive Portfolio - Consolidated CSS Entry Point */

/* Generated: 2025-10-10 - Build Optimization Week 1 */

/* CRITICAL PATH CSS - Loaded immediately */

/* NON-CRITICAL CSS - Deferred loading */

/* purgecss end ignore */

/* purgecss start ignore */

/* =============================================================================
   PERFECT DARK NAVIGATION - Styles pour le menu unifié révolutionnaire
   ============================================================================= */

/**
 * Navigation principale - Suprématie absolue avec glassmorphism
 */

.perfect-dark-navigation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* États de scroll */

.perfect-dark-navigation.scrolled {
  background: rgba(0, 0, 0, 0.6) !important;
}

.perfect-dark-navigation:not(.scrolled) {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Container principal - Full width like UnifiedPageNavigation */

.perfect-dark-navigation .nav-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  min-height: 130px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 640px) {
  .perfect-dark-navigation .nav-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .perfect-dark-navigation .nav-container {
    padding: 0 2rem;
  }
}

@media (min-width: 1536px) {
  .perfect-dark-navigation .nav-container {
    padding: 0 4rem;
  }
}

/* Logo et stats Tamagotchi */

.perfect-dark-navigation .logo-section {
  display: none;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

@media (min-width: 1250px) {
  .perfect-dark-navigation .logo-section {
    display: flex;
  }
}

.perfect-dark-navigation .logo-section-compact {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Hide mobile logo on desktop */

@media (min-width: 851px) {
  .perfect-dark-navigation .logo-section {
    display: none !important;
  }
}

/* Hide desktop logo on mobile/tablet */

@media (max-width: 850px) {
  .perfect-dark-navigation .logo-section-compact {
    display: none !important;
  }
}

.perfect-dark-navigation .olive-logo {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.perfect-dark-navigation .olive-logo:hover {
  transform: scale(1.05);
}

/* Navigation centrale avec dropdowns - Conteneurisée et CENTRÉE */

.perfect-dark-navigation .nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.perfect-dark-navigation .nav-container-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: auto;
  max-width: 1280px;
  min-width: 60%;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0.5rem 2rem;
  margin: 0 auto;
}

/* Dropdowns */

.perfect-dark-navigation .dropdown {
  position: relative;
}

.perfect-dark-navigation .dropdown-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.perfect-dark-navigation .dropdown-button:hover {
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

.perfect-dark-navigation .dropdown-button.active {
  color: white;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Indicateur actif */

.perfect-dark-navigation .dropdown-button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  border-radius: 1px;
  transition: width 0.3s ease;
}

.perfect-dark-navigation .dropdown-button.active::after,
.perfect-dark-navigation .dropdown-button:hover::after {
  width: 80%;
}

.perfect-dark-navigation .dropdown-button:not(.active):not(:hover)::after {
  width: 0%;
}

/* Dropdown IA */

.perfect-dark-navigation .dropdown-ia .dropdown-button::after {
  background: linear-gradient(to right, #ec4899, #06b6d4);
}

/* Dropdown Code */

.perfect-dark-navigation .dropdown-code .dropdown-button::after {
  background: linear-gradient(to right, #06b6d4, #8b5cf6);
}

/* Dropdown Workflows */

.perfect-dark-navigation .dropdown-workflows .dropdown-button::after {
  background: linear-gradient(to right, #fbbf24, #f97316);
}

/* Menu dropdown - Compact */

.perfect-dark-navigation .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  width: 280px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  overflow: hidden;
  z-index: 50;
}

/* Header du dropdown - Compact */

.perfect-dark-navigation .dropdown-header {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.perfect-dark-navigation .dropdown-header h3 {
  font-weight: 600;
  font-size: 0.875rem;
  color: white;
  margin: 0;
}

/* Items du dropdown - Compact */

.perfect-dark-navigation .dropdown-items {
  padding: 0.375rem 0;
}

.perfect-dark-navigation .dropdown-item {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  will-change: transform;
}

.perfect-dark-navigation .dropdown-item:hover {
  background: transparent;
  color: rgba(6, 182, 212, 1);
  transform: translateX(5px);
}

.perfect-dark-navigation .dropdown-item-title {
  font-weight: 400;
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}

.perfect-dark-navigation .dropdown-item-description {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.125rem;
}

.perfect-dark-navigation .dropdown-item:hover .dropdown-item-description {
  color: rgba(255, 255, 255, 0.75);
}

.perfect-dark-navigation .dropdown-item-content {
  flex: 1;
}

/* Footer du dropdown */

.perfect-dark-navigation .dropdown-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
}

.perfect-dark-navigation .dropdown-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  background: linear-gradient(to right, #06b6d4, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.perfect-dark-navigation .dropdown-footer a:hover {
  opacity: 0.8;
}

/* Section droite - drapeaux et mobile */

.perfect-dark-navigation .nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Hide contact button in mobile top bar (only in hamburger menu) */

.perfect-dark-navigation .contact-mobile {
  display: none !important;
}

/* Bouton hamburger mobile */

.perfect-dark-navigation .mobile-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.perfect-dark-navigation .mobile-toggle:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.15);
}

/* Menu mobile */

.perfect-dark-navigation .mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9998;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Indicateur de swipe mobile */

.perfect-dark-navigation .mobile-menu::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 0.5rem auto 0;
}

.perfect-dark-navigation .mobile-menu-content {
  padding: 1rem 1rem 1.5rem;
}

.perfect-dark-navigation .mobile-section {
  margin-bottom: 1.5rem;
}

.perfect-dark-navigation .mobile-section:last-child {
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.perfect-dark-navigation .mobile-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}

.perfect-dark-navigation .mobile-section-title.ia {
  color: #ec4899;
}

.perfect-dark-navigation .mobile-section-title.code {
  color: #06b6d4;
}

.perfect-dark-navigation .mobile-section-title.workflows {
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.perfect-dark-navigation .mobile-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 0.25rem;
}

.perfect-dark-navigation .mobile-item:hover {
  background: transparent;
  color: white;
  transform: translateX(5px);
}

.perfect-dark-navigation .mobile-contact {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 400;
  color: white;
  background: linear-gradient(to right, rgba(236, 72, 153, 0.2), rgba(251, 113, 133, 0.2));
  border: 1px solid rgba(236, 72, 153, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.perfect-dark-navigation .mobile-contact:hover {
  background: linear-gradient(to right, rgba(236, 72, 153, 0.3), rgba(251, 113, 133, 0.3));
  transform: scale(1.02);
}

/* Mobile section wrapper - Enhanced grid layout */

.perfect-dark-navigation .mobile-section-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 0;
}

/* Very small screens: Logo + Hamburger only */

@media (max-width: 640px) {
  .perfect-dark-navigation .mobile-section-wrapper {
    grid-template-columns: 1fr auto;
  }
}

/* Medium screens: Logo + Language + Hamburger */

@media (min-width: 641px) and (max-width: 1024px) {
  .perfect-dark-navigation .mobile-section-wrapper {
    grid-template-columns: 1fr auto auto;
  }
}

/* Desktop: Hide mobile layout */

@media (min-width: 1250px) {
  .perfect-dark-navigation .mobile-section-wrapper {
    display: none;
  }
}

/* Logo section - Mobile (left) */

.perfect-dark-navigation .logo-section-mobile {
  display: flex;
  align-items: center;
  justify-self: start;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.perfect-dark-navigation .logo-section-mobile:hover {
  transform: scale(0.95);
}

/* Language selector - Mobile Center (hidden on very small screens) */

.perfect-dark-navigation .language-selector-mobile-center {
  display: flex;
  align-items: center;
  justify-self: center;
}

@media (max-width: 640px) {
  .perfect-dark-navigation .language-selector-mobile-center {
    display: none;
  }
}

/* Nav right mobile - Hamburger + Admin indicator */

.perfect-dark-navigation .nav-right-mobile {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.75rem;
}

/* Hamburger icon animation */

.perfect-dark-navigation .hamburger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.perfect-dark-navigation .hamburger-icon.open {
  transform: rotate(90deg);
}

/* Mobile menu header - Logo + Language */

.perfect-dark-navigation .mobile-menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
}

.perfect-dark-navigation .mobile-menu-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.1);
}

.perfect-dark-navigation .mobile-menu-language {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive - Desktop nav visible at 1250px+ */

@media (max-width: 1249px) {
  .perfect-dark-navigation .nav-center {
    display: none;
  }

  .perfect-dark-navigation .mobile-toggle {
    display: flex;
  }
}

@media (min-width: 1250px) {
  .perfect-dark-navigation .nav-center {
    display: flex;
  }
}

/* Language selector visibility rules */

.perfect-dark-navigation .language-selector-compact {
  display: flex;
}

.perfect-dark-navigation .language-selector-mobile {
  display: none;
}

@media (max-width: 850px) {
  .perfect-dark-navigation .language-selector-compact {
    display: none;
  }

  .perfect-dark-navigation .language-selector-mobile {
    display: flex;
  }
}

@media (max-width: 768px) {
  .perfect-dark-navigation .nav-container {
    padding: 0 1rem;
  }

  .perfect-dark-navigation .language-selector-desktop {
    display: none;
  }
}

/* Animations d'entrée pour les dropdowns - DÉSACTIVÉES pour éviter le clignotement */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animation désactivée - gérée par Framer Motion
.perfect-dark-navigation .dropdown-menu {
  animation: fadeInUp 0.2s ease-out;
}
*/

/* Animations pour les items du dropdown - DÉSACTIVÉES */

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animations désactivées pour éviter le clignotement - gérées par Framer Motion
.perfect-dark-navigation .dropdown-item {
  animation: slideInLeft 0.2s ease-out;
}

.perfect-dark-navigation .dropdown-item:nth-child(1) { animation-delay: 0.05s; }
.perfect-dark-navigation .dropdown-item:nth-child(2) { animation-delay: 0.1s; }
.perfect-dark-navigation .dropdown-item:nth-child(3) { animation-delay: 0.15s; }
.perfect-dark-navigation .dropdown-item:nth-child(4) { animation-delay: 0.2s; }
.perfect-dark-navigation .dropdown-item:nth-child(5) { animation-delay: 0.25s; }
.perfect-dark-navigation .dropdown-item:nth-child(6) { animation-delay: 0.3s; }
*/

/* ==========================================
   SIMPLE NAV ITEMS
   ========================================== */

.perfect-dark-navigation .nav-item-simple {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.perfect-dark-navigation .nav-item-simple:hover {
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.perfect-dark-navigation .nav-item-simple.active {
  color: white;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

.perfect-dark-navigation .nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.perfect-dark-navigation .nav-item-label {
  font-size: 0.875rem;
}

/* Mobile link */

.perfect-dark-navigation .mobile-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
}

/* Fix pour éviter les conflits avec d'autres éléments */

.perfect-dark-navigation * {
  box-sizing: border-box;
}

/* Assurer que la navigation reste au-dessus de tout */

.perfect-dark-navigation {
  z-index: 2147483647 !important;
}

.perfect-dark-navigation .dropdown-menu {
  z-index: 2147483646 !important;
}

.perfect-dark-navigation .mobile-menu {
  z-index: 2147483645 !important;
}

/* purgecss end ignore */