:root {
    /* ═══════════════════════════════════════════════════════
       Hôtel Chemoa — Charte : bleu logo, noir, fond clair
       ═══════════════════════════════════════════════════════ */

    --color-primary: #5BA3E0;
    --color-primary-dark: #3D82C4;
    --color-primary-light: #8BC4EB;
    --color-primary-lighter: #E8F4FC;

    --color-secondary: #FFFFFF;
    --color-secondary-dark: #E8E8E8;
    --color-secondary-light: #F5F7FA;

    --color-screen-bg: #F0F4FA;

    --color-accent: #0D0D0D;
    --color-accent-dark: #E8EEF5;

    --color-iphone-border: #E2E8F0;
    --color-notch: #E2E8F0;

    --bg-gradient-start: #F8FAFC;
    --bg-gradient-end: #EFF4FB;
    --bg-card: #FFFFFF;
    --bg-card-transparent: rgba(255, 255, 255, 0.96);
    --bg-nav: rgba(255, 255, 255, 0.97);
    --bg-icon: #5BA3E0;
    --bg-widget: rgba(255, 255, 255, 0.95);

    --text-light: #FFFFFF;
    --text-dark: #0D0D0D;
    --text-medium: #5A6570;
    --text-muted: #64748B;
    --text-action: #3D82C4;

    --border-light: rgba(91, 163, 224, 0.28);
    --border-medium: #E2E8F0;
    --border-dark: rgba(13, 13, 13, 0.08);
    --border-iphone: #E2E8F0;
    --border-notification: #5BA3E0;

    --shadow-color: rgba(13, 13, 13, 0.08);
    --shadow-color-light: rgba(13, 13, 13, 0.06);
    --shadow-color-dark: rgba(13, 13, 13, 0.12);
    --shadow-color-medium: rgba(13, 13, 13, 0.1);
    --shadow-color-primary: rgba(91, 163, 224, 0.35);
    --shadow-color-red: rgba(91, 163, 224, 0.15);
    --shadow-color-green: rgba(91, 163, 224, 0.12);
    --shadow-iphone: 0px 12px 24px rgba(13, 13, 13, 0.08);

    --overlay-dark: rgba(13, 13, 13, 0.45);
    --overlay-light: rgba(255, 255, 255, 0.92);
    --overlay-medium: rgba(248, 250, 252, 0.9);
    --overlay-primary: rgba(91, 163, 224, 0.1);
    --overlay-secondary: rgba(91, 163, 224, 0.06);

    --gradient-primary: linear-gradient(135deg, #6BB8E8 0%, #4A90C8 55%, #3D7AB8 100%);
    --gradient-secondary: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    --gradient-button: linear-gradient(135deg, #6BB8E8 0%, #4A90C8 55%, #3D7AB8 100%);
    --gradient-button-hover: linear-gradient(145deg, #8BC4EB, #5BA3E0);
    --gradient-bg: linear-gradient(135deg, #F8FAFC 0%, #EFF4FB 100%);
    --gradient-screen: linear-gradient(135deg, #F0F4FA 0%, #E8F0FA 100%);
    --gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);

    --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;
}

/* Harmonisation (évite les anciennes surcharges or / noir profond) */
:root {
    --shadow-color-dark: rgba(13, 13, 13, 0.12);
    --shadow-color-medium: rgba(13, 13, 13, 0.1);
    --overlay-light: rgba(255, 255, 255, 0.95);
    --overlay-medium: rgba(248, 250, 252, 0.92);
    --gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    --color-screen-bg: #F0F4FA;
    --bg-gradient-start: #F8FAFC;
    --bg-gradient-end: #EFF4FB;
    --bg-card: #FFFFFF;
    --bg-card-transparent: rgba(255, 255, 255, 0.96);
    --bg-nav: rgba(255, 255, 255, 0.97);
    --bg-widget: rgba(255, 255, 255, 0.95);
    --color-accent-dark: #E8EEF5;
    --text-dark: #0D0D0D;
    --text-medium: #5A6570;
    --text-muted: #64748B;
    --text-light: #ffffff;
    --border-medium: #E2E8F0;
    --border-dark: rgba(91, 163, 224, 0.12);
    --border-light: rgba(91, 163, 224, 0.28);
    --shadow-color: rgba(13, 13, 13, 0.08);
    --shadow-color-light: rgba(13, 13, 13, 0.06);
    --overlay-dark: rgba(13, 13, 13, 0.35);
    --gradient-bg: linear-gradient(135deg, #F8FAFC 0%, #EFF4FB 100%);
    --gradient-screen: linear-gradient(135deg, #F0F4FA 0%, #E8F0FA 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color-dark: rgba(13, 13, 13, 0.12);
        --shadow-color-medium: rgba(13, 13, 13, 0.1);
        --overlay-light: rgba(255, 255, 255, 0.95);
        --overlay-medium: rgba(248, 250, 252, 0.92);
        --gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
        --color-screen-bg: #F0F4FA;
        --bg-gradient-start: #F8FAFC;
        --bg-gradient-end: #EFF4FB;
        --bg-card: #FFFFFF;
        --bg-card-transparent: rgba(255, 255, 255, 0.96);
        --bg-nav: rgba(255, 255, 255, 0.97);
        --bg-widget: rgba(255, 255, 255, 0.95);
        --color-accent-dark: #E8EEF5;
        --text-dark: #0D0D0D;
        --text-medium: #5A6570;
        --text-muted: #64748B;
        --text-light: #ffffff;
        --border-medium: #E2E8F0;
        --border-dark: rgba(91, 163, 224, 0.12);
        --border-light: rgba(91, 163, 224, 0.28);
        --shadow-color: rgba(13, 13, 13, 0.08);
        --shadow-color-light: rgba(13, 13, 13, 0.06);
        --overlay-dark: rgba(13, 13, 13, 0.35);
        --gradient-bg: linear-gradient(135deg, #F8FAFC 0%, #EFF4FB 100%);
        --gradient-screen: linear-gradient(135deg, #F0F4FA 0%, #E8F0FA 100%);
    }
}

/* Formulaires — fond clair */
input,
textarea,
select,
.form-control,
.form-select {
    background-color: #FFFFFF !important;
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    border: 1.5px solid #DDE5ED !important;
    font-size: 16px !important;
    opacity: 1;
}

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

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF !important;
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    border-color: #5BA3E0 !important;
    box-shadow: 0 0 0 3px rgba(91, 163, 224, 0.22) !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 #FFFFFF inset !important;
    -webkit-text-fill-color: #0D0D0D !important;
    background-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s;
}

.chemoa-primary { color: var(--color-primary); }
.chemoa-bg-primary { background-color: var(--color-primary); }
.chemoa-secondary { color: var(--color-secondary); }
.chemoa-bg-secondary { background-color: var(--color-secondary); }
.chemoa-text-dark { color: var(--text-dark); }

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

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