:root {
    /* Palette de couleurs principales - Thème DolceVita DARK MODE */
    
    /* 💠 ORANGE - ACCENT PRINCIPAL */
    --color-primary: #E8650A;
    --color-primary-dark: #BA5108;
    --color-primary-light: #FF8E40;
    --color-primary-lighter: #FFF4EB;

    /* 🌌 NOIR ANTHRACITE - FOND PRINCIPAL */
    --color-screen-bg: #111111;
    --color-secondary: #1A1F35;
    --color-secondary-dark: #0A0A0A;
    --color-secondary-light: #2A3150;
    
    /* ⚪️ COULEURS NEUTRES & CONSTRASTE */
    --color-accent: #FFFFFF;
    --color-accent-dark: #F0EEE9; /* Gris beige très clair */
    
    /* 📱 COULEURS STRUCTURELLES */
    --color-iphone-border: #D1CEC7; 
    --color-notch: #1a1a1a;
    
    /* Couleurs de fond - THÈME CLAIR DOUX */
    --bg-gradient-start: #FAF9F6;
    --bg-gradient-end: #F0EEE9;
    --bg-card: #FFFFFF; /* Cartes blanches */
    --bg-card-transparent: rgba(255, 255, 255, 0.95);
    --bg-nav: rgba(255, 255, 255, 0.98);
    --bg-icon: var(--color-primary);
    --bg-widget: #FFFFFF;
    
    /* Couleurs de texte - THÈME CLAIR DOUX */
    --text-light: #FFFFFF; /* Texte blanc (sur boutons colorés) */
    --text-dark: #2D2A26; /* Texte sombre (Anthracite doux) */
    --text-medium: #5C5852; /* Texte gris chaud */
    --text-muted: #8C8881; /* Texte atténué */
    --text-action: var(--color-primary); /* Texte pour actions/prix */
    
    /* Couleurs de bordures */
    --border-light: rgba(0, 0, 0, 0.05);
    --border-medium: #E8E5DF;
    --border-dark: rgba(0, 0, 0, 0.1);
    --border-iphone: #222222;
    --border-notification: var(--color-secondary); /* Vert pour une notification moins urgente que le rouge */
    
    /* Couleurs d'ombres et effets - DARK MODE */
    --shadow-color: rgba(0, 0, 0, 0.4); /* Ombres standard sombres */
    --shadow-color-light: rgba(0, 0, 0, 0.3);
    --shadow-color-dark: rgba(0, 0, 0, 0.5);
    --shadow-color-medium: rgba(0, 0, 0, 0.4);
    --shadow-color-red: rgba(255, 143, 0, 0.2); /* Ombres Orange (Primary) */
    --shadow-color-green: rgba(56, 118, 29, 0.2); /* Ombres Vertes (Secondary) */
    --shadow-iphone: 0px 20px 15px rgba(0, 0, 0, 0.4);
    
    /* Transparences - DARK MODE */
    --overlay-dark: rgba(0, 0, 0, 0.3); 
    --overlay-light: rgba(30, 30, 30, 0.9);
    --overlay-medium: rgba(60, 60, 60, 0.8);
    --overlay-primary: rgba(255, 143, 0, 0.08); /* Overlay orange (Primary) */
    --overlay-secondary: rgba(56, 118, 29, 0.08); /* Overlay vert (Secondary) */
    
    /* Dégradés prédéfinis - Style DolceVita DARK MODE */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    --gradient-button: var(--gradient-primary);
    --gradient-button-hover: linear-gradient(145deg, var(--color-primary-dark), var(--color-primary-light));
    --gradient-bg: linear-gradient(135deg, #FAF9F6 0%, #F0EEE9 100%);
    --gradient-screen: linear-gradient(135deg, #FAF9F6 0%, #FFFFFF 100%);
    --gradient-accent: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    
    /* ... (Autres variables de glassmorphism, tailles, espacements inchangées) ... */
    
    /* Tailles et espacements */
    --border-radius-sm: 15px;
    --border-radius-md: 20px;
    --border-radius-lg: 25px;
    --border-radius-circle: 50%;
    --border-radius-iphone: 40px;
    --border-radius-widget: 20px;
    --border-radius-icon: 15px;
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --iphone-width: 320px;
    --iphone-height: 700px;
    --iphone-border: 10px;
    --notch-width: 200px;
    --notch-height: 30px;
    --icon-size: 50px;
    --widget-height: 120px;
    --transition-fast: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-normal: 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-ios: 400ms ease-in-out;
    --opacity-low: 0.4;
    --opacity-medium: 0.6;
    --opacity-high: 0.8;
    --z-notch: 50;
    --z-screen: 10;
    --z-icon: 100;
    --z-widget: 100;
    --z-nav: 200;
    --z-notification: 300;
}

/* ============================================
   MODE SOMBRE - Mobile / Tablette (prefers-color-scheme: dark)
   Textes lisibles sur fond sombre
   ============================================ */
/* FORCER LE MODE SOMBRE POUR INDEX.HTML */
:root {
    --shadow-color-dark: rgba(0, 0, 0, 0.5);
    --shadow-color-medium: rgba(0, 0, 0, 0.4);
    --overlay-light: rgba(30, 30, 30, 0.9);
    --overlay-medium: rgba(60, 60, 60, 0.8);
    --gradient-accent: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    
    /* Fonds noirs et bleus nuit */
    --color-screen-bg: #111111;
    --bg-gradient-start: #111111;
    --bg-gradient-end: #0A0A0A;
    --bg-card: #1A1F35;
    --bg-card-transparent: rgba(26, 31, 53, 0.95);
    --bg-nav: rgba(10, 10, 10, 0.98);
    --bg-widget: rgba(26, 31, 53, 0.95);
    --color-accent-dark: var(--color-primary-dark);
    
    /* Textes lisibles (clairs sur fond sombre) */
    --text-dark: #e8e8e8;
    --text-medium: #b8b8b8;
    --text-muted: #909090;
    --text-light: #ffffff;
    
    /* Bordures visibles */
    --border-medium: #4a4a4a;
    --border-dark: rgba(255, 255, 255, 0.15);
    --border-light: rgba(255, 255, 255, 0.2);
    
    /* Ombres adaptées */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-color-light: rgba(0, 0, 0, 0.3);
    --overlay-dark: rgba(0, 0, 0, 0.3);
    
    /* Dégradés sombres */
    --gradient-bg: linear-gradient(135deg, #111111 0%, #111111 100%);
    --gradient-screen: linear-gradient(135deg, #111111 0%, #111111 100%);
}

/* Mode sombre pour les autres pages (si nécessaire) */
@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color-dark: rgba(0, 0, 0, 0.5);
        --shadow-color-medium: rgba(0, 0, 0, 0.4);
        --overlay-light: rgba(30, 30, 30, 0.9);
        --overlay-medium: rgba(60, 60, 60, 0.8);
        --gradient-accent: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-dark) 100%);
        /* Fonds sombres */
        --color-screen-bg: #111111;
        --bg-gradient-start: #111111;
        --bg-gradient-end: #0A0A0A;
        --bg-card: #1A1F35;
        --bg-card-transparent: rgba(26, 31, 53, 0.95);
        --bg-nav: rgba(10, 10, 10, 0.98);
        --bg-widget: rgba(26, 31, 53, 0.95);
        --color-accent-dark: var(--color-primary-dark);
        
        /* Textes lisibles (clairs sur fond sombre) */
        --text-dark: #e8e8e8;
        --text-medium: #b8b8b8;
        --text-muted: #909090;
        --text-light: #ffffff;
        
        /* Bordures visibles */
        --border-medium: #4a4a4a;
        --border-dark: rgba(255, 255, 255, 0.15);
        --border-light: rgba(255, 255, 255, 0.2);
        
        /* Ombres adaptées */
        --shadow-color: rgba(0, 0, 0, 0.4);
        --shadow-color-light: rgba(0, 0, 0, 0.3);
        --overlay-dark: rgba(0, 0, 0, 0.3);
        
        /* Dégradés sombres */
        --gradient-bg: linear-gradient(135deg, #111111 0%, #111111 100%);
        --gradient-screen: linear-gradient(135deg, #111111 0%, #111111 100%);
    }
}

/* ============================================
   FORMULAIRES - Lisibilité globale tous modes
   ============================================ */
input,
textarea,
select,
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #E8E5DF !important;
    -webkit-text-fill-color: #E8E5DF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 16px;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #999999 !important;
    -webkit-text-fill-color: #999999 !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 143, 0, 0.08) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: #E8650A !important;
    box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.15) !important;
    outline: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #2D2A26 inset !important;
    -webkit-text-fill-color: #E8E5DF !important;
    background-color: #2D2A26 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Classes utilitaires spécifiques à DolceVita */
.dolcevita-primary {
    color: var(--color-primary); /* Rouge */
}

.dolcevita-bg-primary {
    background-color: var(--color-primary); /* Rouge */
}

.dolcevita-secondary {
    color: var(--color-secondary); /* Vert */
}

.dolcevita-bg-secondary {
    background-color: var(--color-secondary); /* Vert */
}

.dolcevita-text-dark {
    color: var(--text-dark);
}

/* Effets hover spécifiques */
.hover-primary:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

.hover-secondary:hover {
    background-color: var(--color-secondary-dark);
    color: white;
}