/**
 * Glass Effect - Effet glassmorphism avec distorsion SVG
 * Basé sur https://codepen.io/DenDionigi/pen/JodwNzX
 * Méthode utilisant des pseudo-éléments pour créer des couches distinctes
 */

/* Variables CSS pour l'effet glassmorphism */
:root {
    /* Couleurs de base pour les reflets */
    --glass-color: #bbbbbc;
    --glass-light: var(--color-white);
    --glass-dark: var(--color-black);

    /* Intensité des reflets (ajustable selon le thème) */
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;

    /* Saturation de l'effet */
    --glass-saturation: 150%;
}

/**
 * GLASS EFFECT - CodePen Method
 * Basé sur: https://codepen.io/DenDionigi/pen/JodwNzX
 *
 * Structure HTML requise (4 éléments):
 * <div class="glass-container">
 *   <div class="glass-filter"></div>     <!-- Distorsion SVG -->
 *   <div class="glass-overlay"></div>    <!-- Couleur de fond -->
 *   <div class="glass-specular"></div>   <!-- Reflets -->
 *   <div class="glass-content">...</div> <!-- Contenu -->
 * </div>
 */

/* Container principal */
.glass-container {
    position: relative;
    display: flex;
    background: transparent;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Couche 1: Distorsion SVG uniquement */
.glass-filter {
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(10px);
}

/* Couche 2: Couleur de fond semi-transparente */
.glass-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 30px;
    border: 0.524px solid rgba(0, 0, 0, 0.26);
    background: linear-gradient(149deg, rgba(52, 52, 52, 0.20) 6.47%, rgba(177, 177, 177, 0.20) 98.59%);
    box-shadow: 0 4.196px 25.173px -1.049px rgba(0, 0, 0, 0.20);
    backdrop-filter: none;
}

/* Couche 3: Reflets et highlights */
.glass-specular {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    overflow: hidden;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75),
                inset 0 0 5px rgba(255, 255, 255, 0.75);
}

/* Couche 4: Contenu avec backdrop-filter */
.glass-content {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 1rem 1.5rem 0.9rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 0.524px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0 4.196px 25.173px -1.049px rgba(0, 0, 0, 0.20),
                inset 1px 1px 0 rgba(255, 255, 255, 0.75),
                inset 0 0 5px rgba(255, 255, 255, 0.75);
}

/* Variantes de couleur */
.glass-layered--light {
    background-color: color-mix(in srgb, var(--glass-color) 8%, transparent);
}

.glass-layered--strong {
    background-color: color-mix(in srgb, var(--glass-color) 20%, transparent);
}

.glass-layered--strong::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Variante avec bordure visible */
.glass-layered--border::after {
    border: 0.5px solid rgba(0, 0, 0, 0.26);
}

/**
 * ANCIENNE MÉTHODE (conservée pour compatibilité)
 * Utilise backdrop-filter directement sur l'élément
 */

/* Classe principale pour l'effet glassmorphism avec distorsion */
.glass-blur {
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: color-mix(in srgb, var(--glass-color) 12%, transparent);

    /* Ombres complexes pour créer l'effet de reflet de verre */
    box-shadow:
        /* Bordure subtile */
        inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 10%), transparent),
        /* Reflets lumineux supérieurs */
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 60%), transparent),
        /* Ombres pour la profondeur */
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        /* Ombres externes */
        0px 1px 5px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
                box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

/* Classe simple pour appliquer uniquement l'effet de displacement sur fond blur */
.blur-displacement {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Variante légère (plus transparente) */
.glass-blur--light {
    background-color: color-mix(in srgb, var(--glass-color) 8%, transparent);
}

/* Variante forte (plus opaque) */
.glass-blur--strong {
    background-color: color-mix(in srgb, var(--glass-color) 20%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Support pour les thèmes sombres */
@media (prefers-color-scheme: dark) {
    :root {
        --glass-reflex-dark: 2;
        --glass-reflex-light: 0.3;
    }
}

/* Fallback pour les navigateurs qui ne supportent pas backdrop-filter */
@supports not (backdrop-filter: blur(8px)) {
    .glass-blur,
    .glass-layered::before {
        background-color: color-mix(in srgb, var(--glass-color) 30%, transparent);
    }
}