:root {
    /* ═══════════════════════════════════════════════════════
       NIMBA ATLANTIQUE — Thème "Royal Gold & Elegant Black"
       ═══════════════════════════════════════════════════════ */

    /* 🥇 OR / GOLD — Accent principal */
    --color-primary: #C8A951;
    --color-primary-dark: #A07B2B;
    --color-primary-light: #E8D080;
    --color-primary-lighter: #FDF6DC;

    /* ⚪️ BLANC — Couleur secondaire */
    --color-secondary: #FFFFFF;
    --color-secondary-dark: #E8E8E8;
    --color-secondary-light: #F5F5F5;

    /* 🖤 FOND PRINCIPAL — Noir profond */
    --color-screen-bg: #0A0A0A;

    /* ⚪️ NEUTRES & CONTRASTE */
    --color-accent: #FFFFFF;
    --color-accent-dark: #1E1E1E;

    /* 📱 BORDURES STRUCTURELLES */
    --color-iphone-border: #111111;
    --color-notch: #111111;

    /* FONDS — Noir élégant */
    --bg-gradient-start: #0F0F0F;
    --bg-gradient-end: #161616;
    --bg-card: #181818;
    --bg-card-transparent: rgba(18, 18, 18, 0.95);
    --bg-nav: rgba(10, 10, 10, 0.98);
    --bg-icon: #C8A951;
    --bg-widget: rgba(20, 20, 20, 0.95);

    /* TEXTES */
    --text-light: #FFFFFF;
    --text-dark: #F0EDE6;
    --text-medium: #C8B89A;
    --text-muted: #8A7D6A;
    --text-action: #C8A951;

    /* BORDURES */
    --border-light: rgba(200, 169, 81, 0.25);
    --border-medium: #2A2A2A;
    --border-dark: rgba(200, 169, 81, 0.15);
    --border-iphone: #111111;
    --border-notification: #C8A951;

    /* OMBRES */
    --shadow-color: rgba(0, 0, 0, 0.6);
    --shadow-color-light: rgba(0, 0, 0, 0.4);
    --shadow-color-dark: rgba(0, 0, 0, 0.7);
    --shadow-color-medium: rgba(0, 0, 0, 0.5);
    --shadow-color-red: rgba(200, 169, 81, 0.2);
    --shadow-color-green: rgba(200, 169, 81, 0.15);
    --shadow-iphone: 0px 20px 15px rgba(0, 0, 0, 0.6);

    /* TRANSPARENCES */
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(15, 15, 15, 0.92);
    --overlay-medium: rgba(25, 25, 25, 0.85);
    --overlay-primary: rgba(200, 169, 81, 0.08);
    --overlay-secondary: rgba(200, 169, 81, 0.05);

    /* DÉGRADÉS */
    --gradient-primary: linear-gradient(135deg, #C8A951 0%, #A07B2B 100%);
    --gradient-secondary: linear-gradient(135deg, #FFFFFF 0%, #E8E8E8 100%);
    --gradient-button: linear-gradient(135deg, #C8A951 0%, #A07B2B 100%);
    --gradient-button-hover: linear-gradient(145deg, #E8D080, #C8A951);
    --gradient-bg: linear-gradient(135deg, #0F0F0F 0%, #161616 100%);
    --gradient-screen: linear-gradient(135deg, #0A0A0A 0%, #161616 100%);
    --gradient-accent: linear-gradient(135deg, #1E1E1E 0%, #181818 100%);

    /* TAILLES & 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 GLOBAL — Gold & Black
   ══════════════════════════════════════════════════════════ */
:root {
    --shadow-color-dark: rgba(0, 0, 0, 0.7);
    --shadow-color-medium: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(15, 15, 15, 0.92);
    --overlay-medium: rgba(25, 25, 25, 0.85);
    --gradient-accent: linear-gradient(135deg, #1E1E1E 0%, #181818 100%);
    --color-screen-bg: #0A0A0A;
    --bg-gradient-start: #0F0F0F;
    --bg-gradient-end: #161616;
    --bg-card: #181818;
    --bg-card-transparent: rgba(18, 18, 18, 0.95);
    --bg-nav: rgba(10, 10, 10, 0.98);
    --bg-widget: rgba(20, 20, 20, 0.95);
    --color-accent-dark: #1E1E1E;
    --text-dark: #F0EDE6;
    --text-medium: #C8B89A;
    --text-muted: #8A7D6A;
    --text-light: #ffffff;
    --border-medium: #2A2A2A;
    --border-dark: rgba(200, 169, 81, 0.15);
    --border-light: rgba(200, 169, 81, 0.25);
    --shadow-color: rgba(0, 0, 0, 0.6);
    --shadow-color-light: rgba(0, 0, 0, 0.4);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --gradient-bg: linear-gradient(135deg, #0F0F0F 0%, #161616 100%);
    --gradient-screen: linear-gradient(135deg, #0A0A0A 0%, #161616 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color-dark: rgba(0, 0, 0, 0.7);
        --shadow-color-medium: rgba(0, 0, 0, 0.5);
        --overlay-light: rgba(15, 15, 15, 0.92);
        --overlay-medium: rgba(25, 25, 25, 0.85);
        --gradient-accent: linear-gradient(135deg, #1E1E1E 0%, #181818 100%);
        --color-screen-bg: #0A0A0A;
        --bg-gradient-start: #0F0F0F;
        --bg-gradient-end: #161616;
        --bg-card: #181818;
        --bg-card-transparent: rgba(18, 18, 18, 0.95);
        --bg-nav: rgba(10, 10, 10, 0.98);
        --bg-widget: rgba(20, 20, 20, 0.95);
        --color-accent-dark: #1E1E1E;
        --text-dark: #F0EDE6;
        --text-medium: #C8B89A;
        --text-muted: #8A7D6A;
        --text-light: #ffffff;
        --border-medium: #2A2A2A;
        --border-dark: rgba(200, 169, 81, 0.15);
        --border-light: rgba(200, 169, 81, 0.25);
        --shadow-color: rgba(0, 0, 0, 0.6);
        --shadow-color-light: rgba(0, 0, 0, 0.4);
        --overlay-dark: rgba(0, 0, 0, 0.5);
        --gradient-bg: linear-gradient(135deg, #0F0F0F 0%, #161616 100%);
        --gradient-screen: linear-gradient(135deg, #0A0A0A 0%, #161616 100%);
    }
}

/* ══════════════════════════════════════════════════════════
   FORMULAIRES — Lisibilité garantie
   ══════════════════════════════════════════════════════════ */
input,
textarea,
select,
.form-control,
.form-select {
    background-color: #1A1A1A !important;
    color: #F0EDE6 !important;
    -webkit-text-fill-color: #F0EDE6 !important;
    border: 1.5px solid #2A2A2A !important;
    font-size: 16px !important;
    opacity: 1;
}

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

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: #1A1A1A !important;
    color: #F0EDE6 !important;
    -webkit-text-fill-color: #F0EDE6 !important;
    border-color: #C8A951 !important;
    box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.2) !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 #1A1A1A inset !important;
    -webkit-text-fill-color: #F0EDE6 !important;
    background-color: #1A1A1A !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ══════════════════════════════════════════════════════════
   CLASSES UTILITAIRES NIMBA ATLANTIQUE
   ══════════════════════════════════════════════════════════ */
.nimba-primary { color: var(--color-primary); }
.nimba-bg-primary { background-color: var(--color-primary); }
.nimba-secondary { color: var(--color-secondary); }
.nimba-bg-secondary { background-color: var(--color-secondary); }
.nimba-text-dark { color: var(--text-dark); }

.hover-primary:hover {
    background-color: var(--color-primary-dark);
    color: #0A0A0A;
}

.hover-secondary:hover {
    background-color: var(--color-secondary-dark);
    color: #0A0A0A;
}