/* Explain: App-specific component classes with glassmorphism effects. */
/* ============================================================
   Liquid Glass — composants avancés
   ============================================================ */

/* Barres flottantes (en-tête, menu) */
.glass-nav {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Grandes surfaces en verre */
.glass-panel {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Lien de navigation en pastille */
.nav-link {
    position: relative;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.nav-link:hover {
    background: rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
}

/* Pastille de catégorie */
.cat-pill {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, background 0.3s ease;
}
.cat-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 122, 255, 0.15);
}

/* Reflet lumineux qui balaye la surface au survol */
.glass-sheen {
    position: relative;
    overflow: hidden;
}
.glass-sheen::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s ease;
    pointer-events: none;
}
.glass-sheen:hover::after {
    left: 120%;
}