/**
 * Styles pour le widget Dark Mode Toggle - Version optimisée pour les dimensions et responsive
 * 
 * @package Metal_Rouge_SAMR_Extension
 * @since 1.0.30
 */

/* Variables CSS pour le mode sombre avec conversion intelligente */
:root {
    --metal-rouge-bg-light: #ffffff;
    --metal-rouge-bg-dark: #0f0f0f;
    --metal-rouge-text-light: #333333;
    --metal-rouge-text-dark: #f5f5f5;
    --metal-rouge-border-light: #e5e7eb;
    --metal-rouge-border-dark: #374151;
    --metal-rouge-red-primary: #dc2626;
    --metal-rouge-red-secondary: #991b1b;
    --metal-rouge-accent: #f59e0b;
    --image-overlay-opacity: 30%;
    --conversion-intensity: 85%;
    --shadow-light-opacity: 0.2;
    
    /* Variables pour les tailles du widget */
    --widget-base-width: 140px;
    --widget-base-height: 48px;
    --widget-border-radius: 24px;
    --thumb-size: 36px;
    --thumb-padding: 6px;
    --text-size: 9px;
    --icon-size: 16px;
}

/* Transitions globales fluides pour tous les éléments */
* {
    transition-property: background-color, color, border-color, box-shadow, opacity, transform, filter !important;
    transition-duration: 0.6s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Styles pour le mode sombre appliqués au body */
body.dark-mode {
    background-color: var(--metal-rouge-bg-dark);
    color: var(--metal-rouge-text-dark);
}

/* ===== CONVERSION INTELLIGENTE DES COULEURS ===== */

/* Arrière-plans clairs convertis en sombres */
body.dark-mode .elementor-section,
body.dark-mode .elementor-column,
body.dark-mode .elementor-container,
body.dark-mode .elementor-row {
    background-color: var(--metal-rouge-bg-dark) !important;
}

/* Sections avec background overlay */
body.dark-mode .elementor-section.elementor-section-boxed > .elementor-container,
body.dark-mode .elementor-section.elementor-section-full_width > .elementor-container,
body.dark-mode .elementor-section > .elementor-container {
    background-color: transparent;
}

/* Conversion des backgrounds Elementor */
body.dark-mode .elementor-section[style*="background-color: #fff"],
body.dark-mode .elementor-section[style*="background-color: #ffffff"],
body.dark-mode .elementor-section[style*="background-color: white"],
body.dark-mode .elementor-section[style*="background-color: rgb(255, 255, 255)"],
body.dark-mode .elementor-column[style*="background-color: #fff"],
body.dark-mode .elementor-column[style*="background-color: #ffffff"],
body.dark-mode .elementor-column[style*="background-color: white"],
body.dark-mode .elementor-widget[style*="background-color: #fff"],
body.dark-mode .elementor-widget[style*="background-color: #ffffff"],
body.dark-mode .elementor-widget[style*="background-color: white"] {
    background-color: var(--metal-rouge-bg-dark) !important;
}

/* Conversion des backgrounds gris clairs */
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background-color: #f5f5f5"],
body.dark-mode [style*="background-color: #eeeeee"],
body.dark-mode [style*="background-color: #e9ecef"],
body.dark-mode [style*="background-color: #dee2e6"],
body.dark-mode [style*="background-color: #ced4da"],
body.dark-mode [style*="background-color: #adb5bd"] {
    background-color: #1a1a1a !important;
}

/* Préservation des couleurs rouge de la marque */
body.dark-mode [style*="background-color: #dc2626"],
body.dark-mode [style*="background-color: #ef4444"],
body.dark-mode [style*="background-color: #f87171"],
body.dark-mode [style*="background-color: #991b1b"],
body.dark-mode [style*="background-color: #7f1d1d"],
body.dark-mode .elementor-section[style*="background-color: red"],
body.dark-mode .elementor-section[style*="background-color: crimson"] {
    background-color: var(--metal-rouge-red-primary) !important;
}

/* Conversion des textes */
body.dark-mode .elementor-widget-container,
body.dark-mode .elementor-heading-title,
body.dark-mode .elementor-text-editor,
body.dark-mode p,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode span, body.dark-mode div, body.dark-mode li,
body.dark-mode a:not(.elementor-button) {
    color: var(--metal-rouge-text-dark) !important;
}

/* Textes spéciaux en gris */
body.dark-mode .elementor-widget-text-editor .elementor-text-editor p,
body.dark-mode .elementor-text-editor small,
body.dark-mode .meta-info, 
body.dark-mode .secondary-text {
    color: #b3b3b3 !important;
}

/* Boutons et éléments interactifs */
body.dark-mode .elementor-button {
    background-color: var(--metal-rouge-red-primary) !important;
    color: #ffffff !important;
    border-color: var(--metal-rouge-red-primary) !important;
}

body.dark-mode .elementor-button:hover {
    background-color: var(--metal-rouge-red-secondary) !important;
    color: #ffffff !important;
}

/* Boutons secondaires */
body.dark-mode .elementor-button.elementor-button-secondary,
body.dark-mode .elementor-button[style*="background-color: #6c757d"],
body.dark-mode .elementor-button[style*="background-color: gray"] {
    background-color: #374151 !important;
    color: #f5f5f5 !important;
    border-color: #4b5563 !important;
}

/* Cartes et contenus en boîte */
body.dark-mode .elementor-widget-wrap,
body.dark-mode .elementor-element.elementor-element-populated,
body.dark-mode .card, body.dark-mode .box, 
body.dark-mode .content-box {
    background-color: #1a1a1a !important;
    border-color: #374151 !important;
}

/* ===== CONVERSION INTELLIGENTE DES OMBRES ===== */

/* Conversion des ombres sombres courantes en ombres claires */
body.dark-mode [style*="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: 0 1px 3px rgba(0,0,0,0.1)"] {
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: 0 4px 6px rgba(0,0,0,0.1)"] {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: 0 2px 4px rgba(0,0,0,0.1)"] {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)"],
body.dark-mode [style*="box-shadow: 0 1px 2px rgba(0,0,0,0.05)"] {
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode [style*="box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: 0 10px 15px rgba(0,0,0,0.1)"] {
    box-shadow: 0 10px 15px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: 0 4px 14px rgba(0,0,0,0.1)"] {
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: 0 8px 25px rgba(0,0,0,0.1)"] {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1) !important;
}

/* Ombres avec opacité plus élevée */
body.dark-mode [style*="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)"],
body.dark-mode [style*="box-shadow: 0 1px 3px rgba(0,0,0,0.15)"] {
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode [style*="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)"],
body.dark-mode [style*="box-shadow: 0 4px 6px rgba(0,0,0,0.2)"] {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode [style*="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)"],
body.dark-mode [style*="box-shadow: 0 2px 8px rgba(0,0,0,0.15)"] {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode [style*="box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15)"],
body.dark-mode [style*="box-shadow: 0 6px 20px rgba(0,0,0,0.15)"] {
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15) !important;
}

/* Ombres avec variations d'écriture */
body.dark-mode [style*="box-shadow:0 1px 3px rgba(0,0,0,.1)"],
body.dark-mode [style*="box-shadow:0 1px 3px rgba(0, 0, 0, .1)"] {
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow:0 4px 6px rgba(0,0,0,.1)"],
body.dark-mode [style*="box-shadow:0 4px 6px rgba(0, 0, 0, .1)"] {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1) !important;
}

/* Ombres noires sans transparence */
body.dark-mode [style*="box-shadow: 0 1px 3px black"],
body.dark-mode [style*="box-shadow: 0 4px 6px black"],
body.dark-mode [style*="box-shadow: 0 2px 4px black"] {
    box-shadow: 0 2px 8px rgba(255, 255, 255, var(--shadow-light-opacity)) !important;
}

body.dark-mode [style*="box-shadow: 0 1px 3px #000"],
body.dark-mode [style*="box-shadow: 0 4px 6px #000"],
body.dark-mode [style*="box-shadow: 0 2px 4px #000"],
body.dark-mode [style*="box-shadow: 0 1px 3px #000000"],
body.dark-mode [style*="box-shadow: 0 4px 6px #000000"],
body.dark-mode [style*="box-shadow: 0 2px 4px #000000"] {
    box-shadow: 0 2px 8px rgba(255, 255, 255, var(--shadow-light-opacity)) !important;
}

/* Ombres RGB noires */
body.dark-mode [style*="box-shadow: 0 1px 3px rgb(0, 0, 0)"],
body.dark-mode [style*="box-shadow: 0 4px 6px rgb(0, 0, 0)"],
body.dark-mode [style*="box-shadow: 0 2px 4px rgb(0, 0, 0)"],
body.dark-mode [style*="box-shadow: 0 1px 3px rgb(0,0,0)"],
body.dark-mode [style*="box-shadow: 0 4px 6px rgb(0,0,0)"],
body.dark-mode [style*="box-shadow: 0 2px 4px rgb(0,0,0)"] {
    box-shadow: 0 2px 8px rgba(255, 255, 255, var(--shadow-light-opacity)) !important;
}

/* Ombres internes (inset) */
body.dark-mode [style*="box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: inset 0 1px 3px rgba(0,0,0,0.1)"] {
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode [style*="box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1)"],
body.dark-mode [style*="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)"] {
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

/* Ombres multiples */
body.dark-mode [style*="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)"] {
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode [style*="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)"] {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(255, 255, 255, 0.06) !important;
}

/* Ombres par défaut pour les éléments Elementor */
body.dark-mode .elementor-widget-wrap,
body.dark-mode .elementor-element.elementor-element-populated {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .elementor-button {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .elementor-button:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.15) !important;
}

/* Cartes avec ombres légères */
body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .content-box {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08) !important;
}

/* ===== CONTINUATION DES STYLES EXISTANTS ===== */

/* Images avec overlay sombre */
body.dark-mode img:not(.no-dark-overlay) {
    filter: brightness(calc(100% - var(--image-overlay-opacity))) !important;
}

body.dark-mode .elementor-widget-image img,
body.dark-mode .elementor-image img {
    filter: brightness(70%) contrast(1.1) !important;
}

/* Images de background avec overlay */
body.dark-mode .elementor-section[style*="background-image"],
body.dark-mode .elementor-column[style*="background-image"],
body.dark-mode .elementor-widget[style*="background-image"] {
    position: relative;
}

body.dark-mode .elementor-section[style*="background-image"]::before,
body.dark-mode .elementor-column[style*="background-image"]::before,
body.dark-mode .elementor-widget[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, calc(var(--image-overlay-opacity) / 100));
    pointer-events: none;
    z-index: 1;
}

body.dark-mode .elementor-section .elementor-container,
body.dark-mode .elementor-column .elementor-widget-wrap,
body.dark-mode .elementor-widget .elementor-widget-container {
    position: relative;
    z-index: 2;
}

/* Formulaires en mode sombre */
body.dark-mode input:not([type="submit"]):not([type="button"]),
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2d2d2d !important;
    color: var(--metal-rouge-text-dark) !important;
    border-color: #4b5563 !important;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #9ca3af !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--metal-rouge-red-primary) !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2), 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

/* Bordures et séparateurs */
body.dark-mode hr,
body.dark-mode .separator,
body.dark-mode .divider,
body.dark-mode .elementor-divider-separator {
    border-color: #374151 !important;
    background-color: #374151 !important;
    box-shadow: none !important;
}

/* Navigation et menus */
body.dark-mode .elementor-nav-menu,
body.dark-mode .elementor-nav-menu .elementor-nav-menu--main,
body.dark-mode .menu {
    background-color: var(--metal-rouge-bg-dark) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .elementor-nav-menu a,
body.dark-mode .menu-item a {
    color: var(--metal-rouge-text-dark) !important;
}

body.dark-mode .elementor-nav-menu a:hover,
body.dark-mode .menu-item a:hover {
    color: var(--metal-rouge-red-primary) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* Icônes et SVG */
body.dark-mode .elementor-icon,
body.dark-mode .elementor-social-icon,
body.dark-mode svg:not(.preserve-color) {
    fill: var(--metal-rouge-text-dark) !important;
    color: var(--metal-rouge-text-dark) !important;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.05)) !important;
}

/* Widgets spéciaux */
body.dark-mode .elementor-widget-toggle .elementor-toggle-item,
body.dark-mode .elementor-widget-accordion .elementor-accordion-item {
    background-color: #1a1a1a !important;
    border-color: #374151 !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .elementor-tab-title,
body.dark-mode .elementor-toggle-title {
    color: var(--metal-rouge-text-dark) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* Prix et éléments de valeur */
body.dark-mode .price,
body.dark-mode .cost,
body.dark-mode .value,
body.dark-mode .elementor-price-list .elementor-price-list-price {
    color: var(--metal-rouge-accent) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* ===== STYLES DU WIDGET TOGGLE OPTIMISÉS ===== */

/* Conteneur principal du widget - Centrage et responsiveness */
.metal-rouge-dark-mode-toggle {
    display: inline-block;
    user-select: none;
    transform-origin: center center;
    max-width: 100%;
}

/* ===== TAILLES PRÉDÉFINIES ===== */

/* Taille compacte */
.metal-rouge-dark-mode-toggle.size-compact {
    --widget-base-width: 100px;
    --widget-base-height: 36px;
    --widget-border-radius: 18px;
    --thumb-size: 28px;
    --thumb-padding: 4px;
    --text-size: 7px;
    --icon-size: 12px;
}

/* Taille petite */
.metal-rouge-dark-mode-toggle.size-small {
    --widget-base-width: 120px;
    --widget-base-height: 40px;
    --widget-border-radius: 20px;
    --thumb-size: 32px;
    --thumb-padding: 4px;
    --text-size: 8px;
    --icon-size: 14px;
}

/* Taille moyenne (par défaut) */
.metal-rouge-dark-mode-toggle.size-medium {
    --widget-base-width: 140px;
    --widget-base-height: 48px;
    --widget-border-radius: 24px;
    --thumb-size: 36px;
    --thumb-padding: 6px;
    --text-size: 9px;
    --icon-size: 16px;
}

/* Taille grande */
.metal-rouge-dark-mode-toggle.size-large {
    --widget-base-width: 160px;
    --widget-base-height: 56px;
    --widget-border-radius: 28px;
    --thumb-size: 44px;
    --thumb-padding: 6px;
    --text-size: 10px;
    --icon-size: 18px;
}

/* Taille extra-large */
.metal-rouge-dark-mode-toggle.size-xlarge {
    --widget-base-width: 180px;
    --widget-base-height: 64px;
    --widget-border-radius: 32px;
    --thumb-size: 52px;
    --thumb-padding: 6px;
    --text-size: 11px;
    --icon-size: 20px;
}

/* Bouton switch optimisé avec dimensions variables */
.dark-mode-switch {
    position: relative;
    width: var(--widget-base-width);
    height: var(--widget-base-height);
    background: var(--light-mode-bg, #e5e7eb);
    border-radius: var(--widget-border-radius);
    cursor: pointer;
    outline: none;
    transition: all var(--transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    
    --light-mode-bg: #e5e7eb;
    --dark-mode-bg: #374151;
    --light-mode-text: #6b7280;
    --dark-mode-text: #9ca3af;
    --slider-bg: #ffffff;
    --icon-color: #6b7280;
    --transition-duration: 600ms;
    
    transform-origin: center center;
    max-width: 100%;
    box-sizing: border-box;
}

/* Effets de hover optimisés */
.dark-mode-switch:hover {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.dark-mode-switch:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.dark-mode-switch:active {
    transform: translateY(0);
}

/* État actif (mode sombre) avec ombre claire */
.dark-mode-switch.active {
    background: var(--dark-mode-bg, #374151);
    box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.08);
}

.dark-mode-switch.active:hover {
    box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.12);
}

/* Conteneur pour les textes avec masquage intelligent */
.mode-text-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--thumb-size) * 0.4);
    box-sizing: border-box;
}

/* Textes des modes avec positionnement adaptatif */
.mode-text {
    position: absolute;
    font-size: var(--text-size);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all var(--transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}

.light-text {
    right: calc(var(--thumb-size) * 0.35);
    color: var(--light-mode-text, #6b7280);
    opacity: 1;
    transform: translateX(0) scale(1);
}

.dark-text {
    left: calc(var(--thumb-size) * 0.35);
    color: var(--dark-mode-text, #9ca3af);
    opacity: 0;
    transform: translateX(-10px) scale(0.9);
}

/* États actifs des textes avec animations fluides */
.dark-mode-switch.active .light-text {
    opacity: 0;
    transform: translateX(10px) scale(0.9);
}

.dark-mode-switch.active .dark-text {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Slider/Thumb avec dimensions proportionnelles parfaites */
.switch-thumb {
    position: absolute;
    top: var(--thumb-padding);
    left: var(--thumb-padding);
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: var(--slider-bg, #ffffff);
    border-radius: 50%;
    transition: all var(--transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 
                0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.dark-mode-switch:hover .switch-thumb {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 
                0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Ombre claire pour le thumb en mode sombre */
body.dark-mode .dark-mode-switch .switch-thumb {
    box-shadow: 0 1px 4px rgba(255, 255, 255, 0.12), 
                0 2px 8px rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .dark-mode-switch:hover .switch-thumb {
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.15), 
                0 4px 12px rgba(255, 255, 255, 0.1) !important;
}

/* Position du slider en mode sombre - calcul dynamique */
.dark-mode-switch.active .switch-thumb {
    transform: translateX(calc(var(--widget-base-width) - var(--thumb-size) - (var(--thumb-padding) * 2)));
}

/* Icônes dans le slider avec animations améliorées */
.thumb-icon {
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--icon-color, #6b7280);
}

.thumb-icon svg {
    width: 100%;
    height: 100%;
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0.7);
}

/* États actifs des icônes avec rotations fluides */
.dark-mode-switch.active .sun-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0.7);
}

.dark-mode-switch.active .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Animations supplémentaires pour les icônes */
.sun-icon svg {
    transition: transform var(--transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode-switch:hover .sun-icon svg {
    transform: rotate(45deg);
}

.dark-mode-switch:hover .moon-icon svg {
    transform: rotate(15deg);
}

/* Animation de pulsation subtile */
@keyframes subtlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.dark-mode-switch:hover {
    animation: subtlePulse 2s ease-in-out infinite;
}

/* Effet de lueur pour le mode sombre */
.dark-mode-switch.active {
    box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.08),
                0 0 12px rgba(255, 255, 255, 0.03);
}

.dark-mode-switch.active:hover {
    box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.12),
                0 0 20px rgba(255, 255, 255, 0.05);
}

/* ===== RESPONSIVE DESIGN OPTIMISÉ ===== */

/* Mobile First - Ajustements automatiques pour très petits écrans */
@media (max-width: 320px) {
    .metal-rouge-dark-mode-toggle:not(.size-compact) {
        --widget-base-width: 100px;
        --widget-base-height: 36px;
        --widget-border-radius: 18px;
        --thumb-size: 28px;
        --thumb-padding: 4px;
        --text-size: 7px;
        --icon-size: 12px;
    }
}

@media (max-width: 480px) {
    .mode-text {
        letter-spacing: 0.2px;
    }
    
    .metal-rouge-dark-mode-toggle {
        max-width: 100%;
        display: block;
    }
    
    /* Éviter que le widget soit trop grand sur mobile */
    .metal-rouge-dark-mode-toggle.size-large,
    .metal-rouge-dark-mode-toggle.size-xlarge {
        --widget-base-width: 140px;
        --widget-base-height: 48px;
        --widget-border-radius: 24px;
        --thumb-size: 36px;
        --thumb-padding: 6px;
        --text-size: 9px;
        --icon-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablette - tailles légèrement réduites */
    .metal-rouge-dark-mode-toggle.size-xlarge {
        --widget-base-width: 160px;
        --widget-base-height: 56px;
        --widget-border-radius: 28px;
        --thumb-size: 44px;
        --thumb-padding: 6px;
        --text-size: 10px;
        --icon-size: 18px;
    }
}

@media (min-width: 1200px) {
    /* Desktop - tailles complètes autorisées */
    .mode-text {
        letter-spacing: 0.4px;
    }
}

/* ===== GESTION DES DÉBORDEMENTS ===== */

.elementor-widget-metal-rouge-dark-mode-toggle {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementor-widget-metal-rouge-dark-mode-toggle .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ===== ACCESSIBILITÉ AMÉLIORÉE ===== */

.dark-mode-switch:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Réduction des mouvements pour les utilisateurs préférant moins d'animations */
@media (prefers-reduced-motion: reduce) {
    .dark-mode-switch,
    .switch-thumb,
    .thumb-icon,
    .mode-text,
    * {
        transition-duration: 0.1s !important;
        animation: none !important;
    }
}

/* ===== ANIMATION D'ENTRÉE AMÉLIORÉE ===== */

@keyframes switchAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.metal-rouge-dark-mode-toggle {
    animation: switchAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== EFFETS DE HOVER AVANCÉS ===== */

.dark-mode-switch.hover-active {
    transform: translateY(-2px) scale(1.02);
}

.dark-mode-switch.hover-active .switch-thumb {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

body.dark-mode .dark-mode-switch.hover-active .switch-thumb {
    box-shadow: 0 4px 12px rgba(255,255,255,0.2) !important;
}

.mode-changing {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

body.dark-mode .mode-changing {
    box-shadow: 0 6px 20px rgba(255,255,255,0.15) !important;
}

/* ===== ANIMATION DE PARTICULES SUBTILE ===== */

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

.dark-mode-switch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s ease;
    pointer-events: none;
}

.dark-mode-switch:hover::before {
    animation: sparkle 1.5s ease-in-out infinite;
}

body.dark-mode .dark-mode-switch::before {
    background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, transparent 70%);
}

/* ===== SUPPORT RTL ===== */

[dir="rtl"] .light-text {
    right: auto;
    left: calc(var(--thumb-size) * 0.35);
}

[dir="rtl"] .dark-text {
    left: auto;
    right: calc(var(--thumb-size) * 0.35);
}

[dir="rtl"] .dark-mode-switch.active .switch-thumb {
    transform: translateX(calc(-1 * (var(--widget-base-width) - var(--thumb-size) - (var(--thumb-padding) * 2))));
}

/* ===== PRINT STYLES ===== */

@media print {
    .metal-rouge-dark-mode-toggle {
        display: none;
    }
}

/* ===== OPTIMISATIONS POUR TAILLES EXTRÊMES ===== */

/* Éviter les widgets trop petits */
.dark-mode-switch {
    min-width: 80px;
    min-height: 30px;
}

/* Éviter les widgets trop grands sur mobile */
@media (max-width: 768px) {
    .dark-mode-switch {
        max-width: min(var(--widget-base-width), 85vw);
    }
}

/* Assurer que le texte reste lisible */
.mode-text {
    min-font-size: 6px;
    max-font-size: 12px;
}

/* Assurer que les icônes restent visibles */
.thumb-icon {
    min-width: 10px;
    min-height: 10px;
    max-width: 24px;
    max-height: 24px;
}

/* ===== STYLES POUR L'INTÉGRATION AVEC LES THÈMES ===== */

/* Éviter les conflits avec les thèmes WordPress */
.metal-rouge-dark-mode-toggle * {
    box-sizing: border-box;
}

.metal-rouge-dark-mode-toggle .dark-mode-switch {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Assurer la visibilité dans tous les contextes */
.metal-rouge-dark-mode-toggle {
    position: relative;
    z-index: 1;
}

/* ===== OMBRES SPÉCIALES POUR LE WIDGET TOGGLE ===== */

/* Ombre spéciale pour le widget en mode sombre */
body.dark-mode .metal-rouge-dark-mode-toggle {
    filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.08));
}

/* Amélioration des ombres pour les transitions */
.dark-mode-switch.mode-transitioning {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 15px rgba(59, 130, 246, 0.2) !important;
}

body.dark-mode .dark-mode-switch.mode-transitioning {
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15), 0 0 15px rgba(220, 38, 38, 0.2) !important;
}

/* ===== STYLES POUR LA PERFORMANCE ===== */

/* Optimiser les repaints */
.dark-mode-switch,
.switch-thumb,
.thumb-icon {
    will-change: transform, opacity;
}

/* Optimiser les transitions */
.dark-mode-switch.active .switch-thumb {
    will-change: auto;
}

/* ===== CONVERSION AVANCÉE DES COULEURS SPÉCIFIQUES ===== */

/* WordPress Admin Bar */
body.dark-mode #wpadminbar {
    background-color: #0a0a0a !important;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

/* Header et Footer */
body.dark-mode header,
body.dark-mode footer,
body.dark-mode .site-header,
body.dark-mode .site-footer {
    background-color: var(--metal-rouge-bg-dark) !important;
    color: var(--metal-rouge-text-dark) !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05) !important;
}

/* Widgets spéciaux Elementor */
body.dark-mode .elementor-widget-testimonial,
body.dark-mode .elementor-widget-reviews,
body.dark-mode .elementor-widget-counter,
body.dark-mode .elementor-widget-progress {
    background-color: #1a1a1a !important;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08) !important;
}

/* Sliders et carrousels */
body.dark-mode .swiper-slide,
body.dark-mode .elementor-widget-image-carousel .swiper-slide {
    background-color: #1a1a1a !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05) !important;
}

/* Modals et popups */
body.dark-mode .modal,
body.dark-mode .popup,
body.dark-mode .elementor-popup-modal {
    background-color: var(--metal-rouge-bg-dark) !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15) !important;
}

/* Tables */
body.dark-mode table,
body.dark-mode .elementor-widget-table table {
    background-color: #1a1a1a !important;
    color: var(--metal-rouge-text-dark) !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode table th,
body.dark-mode table td {
    border-color: #374151 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode table th {
    background-color: #2d2d2d !important;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* Code blocks */
body.dark-mode pre,
body.dark-mode code {
    background-color: #2d2d2d !important;
    color: #f8f8f2 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* Animations d'apparition pour les éléments convertis */
@keyframes colorFadeIn {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

body.dark-mode [style*="background-color"],
body.dark-mode [style*="box-shadow"],
body.dark-mode .elementor-section,
body.dark-mode .elementor-column,
body.dark-mode .elementor-widget {
    animation: colorFadeIn 0.6s ease-out;
}