/**
 * Thème inspiré de stepn.com
 * Design moderne, épuré, fond noir
 * Fonts et couleurs exactes de stepn.com
 * NOTE: Le ConfiguratorPanel est exclu de ce thème - voir section en bas
 */

/* Charger toutes les fonts STEPN - Version locale pour éviter les problèmes CORS */
@font-face {
  font-family: 'PP Neue Machina Inktrap Ultrabold Italic';
  src: url('/fonts/pp-neue-machina-ultrabold-italic.woff2') format('woff2'),
       url('https://framerusercontent.com/assets/rw4IIdWh7wU2XeBwjX6LUdVUJs.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'PP Neue Machina Inktrap Regular Italic';
  src: url('/fonts/pp-neue-machina-regular-italic.woff2') format('woff2'),
       url('https://framerusercontent.com/assets/fIeNE54FZibE88XZiMM5dx9x20.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'PP Neue Machina Inktrap Light Italic';
  src: url('/fonts/pp-neue-machina-light-italic.woff2') format('woff2'),
       url('https://framerusercontent.com/assets/QK6K1hfczdtpj0XfotVM82IA.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: block;
}

/* Charger Inter localement */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* Couleurs principales STEPN */
  --stepn-bg: #000000;
  --stepn-bg-secondary: #0a0a0a;
  --stepn-text: #ffffff;
  --stepn-text-secondary: #a0a0a0;
  --stepn-primary: #ffffff;
  --stepn-accent: #8eff36; /* Vert lime STEPN (rgb(142, 255, 54)) */
  
  /* Couleurs pour les inputs */
  --stepn-input-bg: #1a1a1a;
  --stepn-input-border: #333333;
  --stepn-input-border-focus: #ffffff;
  
  /* Couleurs pour les boutons */
  --stepn-button-bg: #ffffff;
  --stepn-button-text: #000000;
  --stepn-button-hover: #f0f0f0;
  --stepn-button-disabled: #333333;
  
  /* Espacements */
  --stepn-spacing-xs: 8px;
  --stepn-spacing-sm: 16px;
  --stepn-spacing-md: 24px;
  --stepn-spacing-lg: 40px;
  --stepn-spacing-xl: 64px;
  
  /* Typographie STEPN */
  /* Pour coller au site stepn.com sur les modals, on utilise la light italic comme body */
  --stepn-font-body: 'PP Neue Machina Inktrap Light Italic', 'PP Neue Machina Inktrap Light Italic Placeholder', sans-serif;
  --stepn-font-heading-ultrabold: 'PP Neue Machina Inktrap Ultrabold Italic', 'PP Neue Machina Inktrap Ultrabold Italic Placeholder', sans-serif;
  --stepn-font-heading-regular: 'PP Neue Machina Inktrap Regular Italic', 'PP Neue Machina Inktrap Regular Italic Placeholder', sans-serif;
  --stepn-font-heading-light: 'PP Neue Machina Inktrap Light Italic', 'PP Neue Machina Inktrap Light Italic Placeholder', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  /* EXCLURE .configurator-panel : ne pas appliquer le fond noir si on est dans le configurateur */
  background-color: var(--stepn-bg);
  color: var(--stepn-text);
  font-family: var(--stepn-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Surcharge : Si un .configurator-panel existe, le body ne doit pas avoir de fond noir derrière */
body:has(.configurator-panel) {
  background-color: #ffffff !important;
}

/* Typographie STEPN - EXCLURE .configurator-panel */
h1:not(.configurator-panel h1):not(.configurator-panel *) h1,
h2:not(.configurator-panel h2):not(.configurator-panel *) h2,
:not(.configurator-panel):not(.configurator-panel *) > h1,
:not(.configurator-panel):not(.configurator-panel *) > h2 {
  font-family: var(--stepn-font-heading-ultrabold) !important;
  font-weight: 400 !important;
  letter-spacing: -2.32px !important;
  margin: 0;
  color: var(--stepn-accent) !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Fallback plus simple - s'applique à tous les h1/h2 sauf ceux dans configurator-panel */
body > h1:not(.configurator-panel-modal h1):not(.configurator-panel-modal *),
body > h2:not(.configurator-panel-modal h2):not(.configurator-panel-modal *),
html > body > h1:not(.configurator-panel-modal h1):not(.configurator-panel-modal *),
html > body > h2:not(.configurator-panel-modal h2):not(.configurator-panel-modal *) {
  font-family: var(--stepn-font-heading-ultrabold) !important;
  font-weight: 400 !important;
  letter-spacing: -2.32px !important;
  margin: 0;
  color: var(--stepn-accent) !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h3:not(.configurator-panel h3):not(.configurator-panel-modal h3):not(.configurator-panel-modal *),
h4:not(.configurator-panel h4):not(.configurator-panel-modal h4):not(.configurator-panel-modal *),
body > h3:not(.configurator-panel-modal h3):not(.configurator-panel-modal *),
body > h4:not(.configurator-panel-modal h4):not(.configurator-panel-modal *) {
  font-family: var(--stepn-font-heading-regular);
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0;
  color: var(--stepn-text);
}

h5:not(.configurator-panel h5):not(.configurator-panel-modal h5):not(.configurator-panel-modal *),
h6:not(.configurator-panel h6):not(.configurator-panel-modal h6):not(.configurator-panel-modal *),
body > h5:not(.configurator-panel-modal h5):not(.configurator-panel-modal *),
body > h6:not(.configurator-panel-modal h6):not(.configurator-panel-modal *) {
  font-family: var(--stepn-font-heading-light);
  font-weight: 300;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--stepn-text);
}

/* Sélecteurs généraux - EXCLURE .configurator-panel et ses descendants */
:not(.configurator-panel):not(.configurator-panel *) p,
:not(.configurator-panel):not(.configurator-panel *) span,
:not(.configurator-panel):not(.configurator-panel *) label,
:not(.configurator-panel):not(.configurator-panel *) a {
  font-family: var(--stepn-font-body) !important;
  color: var(--stepn-text) !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Alternative pour les inputs/textareas/selects - exclure configurator-panel */
input:not(.configurator-panel input):not(.configurator-panel *) input,
textarea:not(.configurator-panel textarea):not(.configurator-panel *) textarea,
select:not(.configurator-panel select):not(.configurator-panel *) select {
  font-family: var(--stepn-font-body) !important;
  color: var(--stepn-text) !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Inputs - EXCLURE .configurator-panel */
input[type="text"]:not(.configurator-panel input),
input[type="email"]:not(.configurator-panel input),
input[type="password"]:not(.configurator-panel input),
body > input[type="text"],
body > input[type="email"],
body > input[type="password"] {
  background-color: var(--stepn-input-bg) !important;
  border: 1px solid var(--stepn-input-border);
  color: var(--stepn-text) !important;
  font-family: var(--stepn-font-body);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  transition: border-color 0.2s;
  -webkit-text-fill-color: var(--stepn-text) !important;
  -webkit-opacity: 1 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--stepn-input-border-focus);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: var(--stepn-text-secondary);
  opacity: 1;
}

input[type="text"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="password"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--stepn-input-bg) inset !important;
  -webkit-text-fill-color: var(--stepn-text) !important;
  color: var(--stepn-text) !important;
}

/* Boutons - EXCLURE .configurator-panel */
button:not(.configurator-panel button),
body > button {
  background-color: var(--stepn-button-bg);
  color: var(--stepn-button-text);
  border: none;
  font-family: var(--stepn-font-body) !important;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

button:hover:not(:disabled) {
  background-color: var(--stepn-button-hover);
}

button:disabled {
  background-color: var(--stepn-button-disabled);
  color: var(--stepn-text-secondary);
  cursor: not-allowed;
}

/* Liens - EXCLURE .configurator-panel */
a:not(.configurator-panel a),
body > a {
  color: var(--stepn-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.8;
}

/* Cards */
.stepn-card {
  background-color: var(--stepn-bg-secondary);
  border: 1px solid var(--stepn-input-border);
  border-radius: 8px;
  padding: var(--stepn-spacing-lg);
}

/* Classes utilitaires STEPN */
.stepn-title-ultrabold {
  font-family: var(--stepn-font-heading-ultrabold) !important;
  font-weight: 400 !important;
  letter-spacing: -2.32px !important;
  text-transform: uppercase !important;
  color: var(--stepn-accent) !important;
  font-style: italic !important;
}

.stepn-title-regular {
  font-family: var(--stepn-font-heading-regular);
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--stepn-text);
}

.stepn-title-light {
  font-family: var(--stepn-font-heading-light);
  font-weight: 300;
  letter-spacing: -0.5px;
  color: var(--stepn-text);
}

/* Override pour les spans dans les boutons verts - force la couleur noire */
button[style*="backgroundColor: #8eff36"] > span:not(.configurator-panel span),
button[style*="background-color: #8eff36"] > span:not(.configurator-panel span),
button[style*="#8eff36"] > span:not(.configurator-panel span) {
  color: #000000 !important;
}

/* Classe utilitaire pour forcer la couleur noire sur les spans */
.green-button-icon:not(.configurator-panel .green-button-icon) {
  color: #000000 !important;
}

/* ============================================
   EXCLUSION COMPLÈTE DU CONFIGURATOR PANEL
   Cette section DOIT être à la TRÈS FIN du fichier pour surcharger TOUT
   Utilise all: unset pour réinitialiser COMPLÈTEMENT, puis réapplique les valeurs de base
   ============================================ */

/* IMPORTANT: Cette section est à la FIN du fichier pour surcharger TOUS les sélecteurs généraux stepn
   Utilise all: unset pour réinitialiser COMPLÈTEMENT tous les styles, puis réapplique les valeurs essentielles */

/* NE PAS utiliser all: initial ou revert sur les enfants - ça casse complètement le layout React */
/* On surcharge seulement la typographie problématique de stepn-theme */
.configurator-panel * {
  /* Typographie seulement - NE PAS toucher au layout */
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
}

/* Container lui-même - NE PAS toucher au layout (display, flex, position, etc.) pour ne pas casser les styles inline React */
/* On surcharge seulement la typographie et les couleurs */
.configurator-panel {
  /* NE PAS forcer display: flex - laisser les styles inline React gérer le layout */
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #111827 !important;
  /* NE PAS forcer background-color - laisser les styles inline React gérer */
}

/* Titres avec spécificité plus élevée */
.configurator-panel h1,
.configurator-panel h2,
.configurator-panel h3,
.configurator-panel h4,
.configurator-panel h5,
.configurator-panel h6 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #111827 !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  margin: 0 !important;
}

/* Textes avec spécificité plus élevée que les sélecteurs généraux stepn */
.configurator-panel p,
.configurator-panel span,
.configurator-panel label,
.configurator-panel a,
.configurator-panel div,
.configurator-panel li,
.configurator-panel ul,
.configurator-panel ol {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #111827 !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Inputs avec spécificité plus élevée */
.configurator-panel input,
.configurator-panel input[type="text"],
.configurator-panel input[type="email"],
.configurator-panel input[type="password"],
.configurator-panel input[type="number"],
.configurator-panel input[type="search"],
.configurator-panel textarea,
.configurator-panel select {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  -webkit-text-fill-color: #111827 !important;
  -webkit-opacity: 1 !important;
  -webkit-box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.configurator-panel input::placeholder,
.configurator-panel textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

.configurator-panel input:-webkit-autofill,
.configurator-panel textarea:-webkit-autofill,
.configurator-panel select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  color: #111827 !important;
  background-color: #ffffff !important;
}

/* Boutons avec spécificité plus élevée */
.configurator-panel button {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: transparent !important;
  color: #111827 !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.configurator-panel button:hover {
  background-color: transparent !important;
  opacity: 1 !important;
}

.configurator-panel button:disabled {
  background-color: transparent !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* Liens avec spécificité plus élevée */
.configurator-panel a {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #111827 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.configurator-panel a:hover {
  opacity: 1 !important;
  color: #1f2937 !important;
}

/* ============================================
   THÈME CONFIGURATOR PANEL COMPLET
   Contenu complet de configurator-panel-theme.css intégré ici
   pour s'assurer qu'il est bundlé par Next.js
   ============================================ */

/* Variables CSS - Configuration du thème */
.configurator-panel {
  /* Couleurs principales */
  --config-panel-bg: #ffffff;
  --config-panel-sidebar-bg: #ffffff;
  --config-panel-sidebar-border: #e5e7eb;
  --config-panel-viewer-bg: #f9fafb;
  --config-panel-text-primary: #111827;
  --config-panel-text-secondary: #6b7280;
  --config-panel-accent: #000000;
  --config-panel-accent-hover: #1f2937;
  --config-panel-border: #e5e7eb;
  
  /* Inputs */
  --config-panel-input-bg: #ffffff;
  --config-panel-input-border: #d1d5db;
  --config-panel-input-border-focus: #000000;
  
  /* Boutons */
  --config-panel-button-primary-bg: #000000;
  --config-panel-button-primary-text: #ffffff;
  --config-panel-button-primary-hover: #1f2937;
  --config-panel-button-secondary-bg: #ffffff;
  --config-panel-button-secondary-text: #111827;
  --config-panel-button-secondary-border: #d1d5db;
  --config-panel-button-secondary-hover: #f9fafb;
  
  /* Typographie */
  --config-panel-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --config-panel-font-size-base: 14px;
  --config-panel-font-size-sm: 12px;
  --config-panel-font-size-lg: 16px;
  --config-panel-font-size-xl: 18px;
  --config-panel-font-size-2xl: 20px;
  
  /* Espacements */
  --config-panel-spacing-xs: 4px;
  --config-panel-spacing-sm: 8px;
  --config-panel-spacing-md: 16px;
  --config-panel-spacing-lg: 24px;
  --config-panel-spacing-xl: 32px;
  
  /* Ombres */
  --config-panel-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --config-panel-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --config-panel-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Border radius */
  --config-panel-radius-sm: 4px;
  --config-panel-radius-md: 8px;
  --config-panel-radius-lg: 12px;
  
  /* Transitions */
  --config-panel-transition: all 0.2s ease-in-out;
  
  /* Styles de base */
  background-color: var(--config-panel-bg) !important;
  color: var(--config-panel-text-primary) !important;
}

/* Titres - Surcharge stepn-theme.css */
.configurator-panel h1,
.configurator-panel h2 {
  font-family: var(--config-panel-font-family) !important;
  color: var(--config-panel-text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  margin: 0 !important;
}

.configurator-panel h3,
.configurator-panel h4,
.configurator-panel h5,
.configurator-panel h6 {
  font-family: var(--config-panel-font-family) !important;
  color: var(--config-panel-text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  margin: 0 !important;
}

/* Textes - Surcharge stepn-theme.css */
.configurator-panel p,
.configurator-panel span,
.configurator-panel label,
.configurator-panel div,
.configurator-panel li,
.configurator-panel ul,
.configurator-panel ol {
  font-family: var(--config-panel-font-family) !important;
  color: var(--config-panel-text-primary) !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
}

/* Textes secondaires */
.configurator-panel .text-secondary,
.configurator-panel .text-gray-500,
.configurator-panel .text-gray-600,
.configurator-panel [class*="text-gray"] {
  color: var(--config-panel-text-secondary) !important;
}

/* Inputs - Surcharge stepn-theme.css */
.configurator-panel input,
.configurator-panel input[type="text"],
.configurator-panel input[type="email"],
.configurator-panel input[type="password"],
.configurator-panel input[type="number"],
.configurator-panel input[type="search"],
.configurator-panel textarea,
.configurator-panel select {
  font-family: var(--config-panel-font-family) !important;
  background-color: var(--config-panel-input-bg) !important;
  border: 1px solid var(--config-panel-input-border) !important;
  color: var(--config-panel-text-primary) !important;
  font-size: var(--config-panel-font-size-base) !important;
  padding: var(--config-panel-spacing-sm) var(--config-panel-spacing-md) !important;
  border-radius: var(--config-panel-radius-md) !important;
  transition: var(--config-panel-transition) !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
  -webkit-opacity: 1 !important;
  -webkit-box-shadow: none !important;
}

.configurator-panel input:focus,
.configurator-panel input:active,
.configurator-panel textarea:focus,
.configurator-panel textarea:active,
.configurator-panel select:focus,
.configurator-panel select:active {
  outline: none !important;
  border-color: var(--config-panel-input-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--config-panel-input-bg) !important;
  color: var(--config-panel-text-primary) !important;
}

.configurator-panel input::placeholder,
.configurator-panel textarea::placeholder {
  color: var(--config-panel-text-secondary) !important;
  opacity: 1 !important;
}.configurator-panel input:-webkit-autofill,
.configurator-panel textarea:-webkit-autofill,
.configurator-panel select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--config-panel-input-bg) inset !important;
  -webkit-text-fill-color: var(--config-panel-text-primary) !important;
  color: var(--config-panel-text-primary) !important;
  background-color: var(--config-panel-input-bg) !important;
}

/* Boutons spécifiques - Surcharge stepn-theme.css */
.configurator-panel button.bg-black,
.configurator-panel .btn-primary,
.configurator-panel button[class*="bg-black"] {
  background-color: var(--config-panel-button-primary-bg) !important;
  color: var(--config-panel-button-primary-text) !important;
  padding: var(--config-panel-spacing-sm) var(--config-panel-spacing-md) !important;
  border-radius: var(--config-panel-radius-md) !important;
}

.configurator-panel button.bg-black:hover {
  background-color: var(--config-panel-button-primary-hover) !important;
}

.configurator-panel button.bg-white,
.configurator-panel .btn-secondary,
.configurator-panel button[class*="bg-white"] {
  background-color: var(--config-panel-button-secondary-bg) !important;
  color: var(--config-panel-button-secondary-text) !important;
  border: 1px solid var(--config-panel-button-secondary-border) !important;
  padding: var(--config-panel-spacing-sm) var(--config-panel-spacing-md) !important;
  border-radius: var(--config-panel-radius-md) !important;
}

.configurator-panel button.bg-white:hover {
  background-color: var(--config-panel-button-secondary-hover) !important;
}

/* Composants spécifiques */
.configurator-panel .sidebar-white {
  background-color: var(--config-panel-sidebar-bg) !important;
  border-right: 1px solid var(--config-panel-sidebar-border) !important;
  color: var(--config-panel-text-primary) !important;
}

.configurator-panel .viewer-3d {
  background-color: var(--config-panel-viewer-bg) !important;
  background: linear-gradient(to bottom, #f8fafc, #e2e8f0) !important;
}

.configurator-panel .card,
.configurator-panel .bg-white,
.configurator-panel [class*="bg-white"] {
  background-color: var(--config-panel-sidebar-bg) !important;
}

.configurator-panel .card {
  border: 1px solid var(--config-panel-border) !important;
  border-radius: var(--config-panel-radius-lg) !important;
  box-shadow: var(--config-panel-shadow-sm) !important;
}

/* Onglets/Tabs */
.configurator-panel .tab,
.configurator-panel [class*="tab"] {
  color: var(--config-panel-text-secondary) !important;
  transition: var(--config-panel-transition) !important;
  font-family: var(--config-panel-font-family) !important;
}

.configurator-panel .tab:hover,
.configurator-panel [class*="tab"]:hover {
  color: var(--config-panel-text-primary) !important;
}

.configurator-panel .tab-active,
.configurator-panel [class*="tab-active"] {
  color: var(--config-panel-text-primary) !important;
  font-weight: 600 !important;
}

/* Bordures */
.configurator-panel .border-gray-200,
.configurator-panel .border-gray-300,
.configurator-panel [class*="border-gray"] {
  border-color: var(--config-panel-border) !important;
}

/* Scrollbar personnalisée */
.configurator-panel ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.configurator-panel ::-webkit-scrollbar-track {
  background: var(--config-panel-viewer-bg) !important;
}

.configurator-panel ::-webkit-scrollbar-thumb {
  background: var(--config-panel-text-secondary) !important;
  border-radius: 4px !important;
}

.configurator-panel ::-webkit-scrollbar-thumb:hover {
  background: var(--config-panel-text-primary) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .configurator-panel {
    --config-panel-font-size-base: 14px;
    --config-panel-spacing-md: 12px;
    --config-panel-spacing-lg: 20px;
  }
}