:root {


    /* Valeurs par défaut à 0 pour désactiver le mode sombre initialement */

    --invert-amount: 0;
    --sepia-amount: 0;
    --hue-rotate-angle: 0deg;
    --contrast-amount: 1;
    --brightness-amount: 1;
    --grayscale-amount: 0;


    /* Thèmes sombres existants */

    --preset-dark-default-invert: 0.95;
    --preset-dark-default-sepia: 0.1;
    --preset-dark-default-hue: 164deg;
    --preset-dark-default-contrast: 0.95;

    --preset-night-invert: 0.9;
    --preset-night-sepia: 0;
    --preset-night-hue: 220deg;
    --preset-night-contrast: 1.1;
    --preset-night-brightness: 0.9;


    /* Thèmes clairs */

    --preset-lightblue-hue: 210deg;
    --preset-lightblue-brightness: 1.05;

    --preset-lightgreen-sepia: 0.1;
    --preset-lightgreen-hue: 100deg;

    --preset-lightwarm-sepia: 0.2;
    --preset-lightwarm-hue: 30deg;

    --preset-lightpastel-sepia: 0.15;
    --preset-lightpastel-hue: 325deg;
    --preset-lightpastel-contrast: 0.9;

    --preset-lightcrystal-hue: 190deg;
    --preset-lightcrystal-contrast: 1.1;
    --preset-lightcrystal-brightness: 1.15;


    /* Thèmes doux (intermédiaires) - Ajustés pour être plus lisibles */

    --preset-softdusk-invert: 0.1;
    --preset-softdusk-sepia: 0.05;
    --preset-softdusk-hue: 275deg;
    --preset-softdusk-contrast: 0.9;
    --preset-softdusk-brightness: 1;

    --preset-softneutral-invert: 0.1;
    --preset-softneutral-sepia: 0.25;
    --preset-softneutral-hue: 30deg;
    --preset-softneutral-contrast: 0.9;
    --preset-softneutral-brightness: 1.05;

    --preset-softdawn-invert: 0.10;
    --preset-softdawn-sepia: 0.15;
    --preset-softdawn-hue: 10deg;
    --preset-softdawn-contrast: 0.95;
    --preset-softdawn-brightness: 1.1;


    /* Thèmes sombres */

    --preset-darkblue-invert: 0.9;
    --preset-darkblue-hue: 230deg;

    --preset-darkgreen-invert: 0.9;
    --preset-darkgreen-sepia: 0.15;
    --preset-darkgreen-hue: 120deg;

    --preset-darkred-invert: 0.85;
    --preset-darkred-sepia: 0.2;
    --preset-darkred-hue: 340deg;

    --preset-darkpurple-invert: 0.92;
    --preset-darkpurple-sepia: 0.15;
    --preset-darkpurple-hue: 280deg;
    --preset-darkpurple-contrast: 0.9;
    --preset-darkpurple-brightness: 0.85;

    --preset-darkmidnight-invert: 0.98;
    --preset-darkmidnight-sepia: 0.05;
    --preset-darkmidnight-hue: 240deg;
    --preset-darkmidnight-contrast: 1.2;
    --preset-darkmidnight-brightness: 0.75;
}

/* Appliquer le filtre à une couche superposée */

body::before {
    backdrop-filter: invert(var(--invert-amount)) sepia(var(--sepia-amount)) grayscale(var(--grayscale-amount)) contrast(var(--contrast-amount)) brightness(var(--brightness-amount)) hue-rotate(var(--hue-rotate-angle));
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
}

/* Exclusions - éléments qui ne doivent pas être affectés */

.no-filter {
    isolation: isolate;
    position: relative;
    z-index: 1000000;
}

img, video, picture {
    isolation: isolate;
    position: relative;
    z-index: 1000000;
}

.infobulle {
    z-index: 1000001;
}

/* Style pour le menu des presets */

.theme-selector {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: none;
    font-size: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    position: absolute;
    width: 200px;
    z-index: 1000001;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.theme-selector {
    animation: fadeIn 0.2s ease-in-out;
}

.theme-preset {
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    margin: 2px 0;
    padding: 6px 10px;
    transition: background-color 0.2s ease;
}

.theme-preset:hover {
    background-color: #f5f5f5;
}

.theme-preset-icon {
    color: #555;
    margin-right: 10px;
    text-align: center;
    width: 15px;
}

/* En-têtes de catégorie */

.theme-category-header {
    border-top: 1px solid #eee;
    color: #666;
    font-size: 11px;
    font-weight: bold;
    margin: 8px 0 5px;
    padding-top: 5px;
    text-align: center;
}

.theme-category-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Styles pour les icônes des thèmes clairs */

.theme-preset-light .theme-preset-icon {
    color: #f39c12;
}

.theme-preset-lightBlue .theme-preset-icon {
    color: #3498db;
}

.theme-preset-lightGreen .theme-preset-icon {
    color: #2ecc71;
}

.theme-preset-lightWarm .theme-preset-icon {
    color: #e67e22;
}

.theme-preset-lightPastel .theme-preset-icon {
    color: #e84393;
}

.theme-preset-lightCrystal .theme-preset-icon {
    color: #00cec9;
}

/* Styles pour les icônes des thèmes intermédiaires */

.theme-preset-softDusk .theme-preset-icon {
    color: #9b59b6;
}

.theme-preset-softNeutral .theme-preset-icon {
    color: #95a5a6;
}

.theme-preset-softDawn .theme-preset-icon {
    color: #fab1a0;
}

/* Styles pour les icônes des thèmes sombres */

.theme-preset-dark .theme-preset-icon {
    color: #34495e;
}

.theme-preset-darkBlue .theme-preset-icon {
    color: #2980b9;
}

.theme-preset-darkGreen .theme-preset-icon {
    color: #27ae60;
}

.theme-preset-darkRed .theme-preset-icon {
    color: #c0392b;
}

.theme-preset-darkPurple .theme-preset-icon {
    color: #8e44ad;
}

.theme-preset-darkMidnight .theme-preset-icon {
    color: #1e272e;
}

.theme-preset-nightCity .theme-preset-icon {
    color: #0097e6;
}