/**
 * Glass UI — Systeme modulaire glassmorphism
 *
 * 3 classes composables :
 *   .glass          → fond flou
 *   .shimmer-border → bordure animee rotative
 *   .tilt           → effet 3D + glow souris au hover
 *
 * !important requis pour surcharger les styles Divi.
 */

/* ══════════════════════════════════════════
   Variables — surchargeables inline ou via
   une classe parente
   ══════════════════════════════════════════ */

:root {
    /* .glass */
    --glass-bg: rgba(255, 255, 255, 0.35);  /* couleur de fond */
    --glass-blur: 15px;                     /* intensite du flou */
    --glass-radius: 16px;                   /* arrondi des coins */

    /* .shimmer-border */
    --shimmer-width: 2px;                   /* epaisseur de la bordure */
    --shimmer-speed: 12s;                   /* duree d'un tour complet */
    --shimmer-color-bright: 255,255,255;    /* couleur des flashs (RGB) */
    --shimmer-bright: 1;                  /* opacite des flashs */
    --shimmer-color-dim: 133, 183, 214;     /* couleur du reste de la bordure (RGB) */
    --shimmer-dim: 0.35;                     /* opacite du reste de la bordure */

    /* .tilt */
    --tilt-max: 12;                         /* angle max de rotation en degres */
    --tilt-speed: 0.15s;                    /* vitesse de retour au repos */
    --glow-size: 180px;                     /* rayon du halo souris */
    --glow-opacity: 0.12;                   /* opacite du halo souris */
}

/* ══════════════════════════════════════════
   @property (necessaire pour animer l'angle)
   ══════════════════════════════════════════ */

@property --shimmer-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ══════════════════════════════════════════
   .glass — fond flou glassmorphism
   ══════════════════════════════════════════ */

.glass {
    background: var(--glass-bg) !important;
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border-radius: var(--glass-radius);
    overflow: hidden !important;
}

/* Modificateur pill — bords totalement arrondis */
.glass-pill {
    --glass-radius: 999px;
}

/* Modificateurs vitesse shimmer */
.shimmer-slow   { --shimmer-speed: 16s; }  /* grandes sections */
.shimmer-fast   { --shimmer-speed: 6s; }   /* elements moyens */
.shimmer-faster { --shimmer-speed: 3s; }   /* petits elements, boutons */

/* ══════════════════════════════════════════
   .shimmer-border — bordure animee rotative
   ══════════════════════════════════════════ */

.shimmer-border {
    position: relative !important;
    border: none !important;
}

.shimmer-border.shimmer-border::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    border-radius: inherit !important;
    padding: var(--shimmer-width) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: conic-gradient(
        from var(--shimmer-angle),
        rgba(var(--shimmer-color-dim), var(--shimmer-dim)) 0%,
        rgba(var(--shimmer-color-bright), var(--shimmer-bright)) 8%,
        rgba(var(--shimmer-color-dim), var(--shimmer-dim)) 16%,
        rgba(var(--shimmer-color-dim), var(--shimmer-dim)) 42%,
        rgba(var(--shimmer-color-bright), var(--shimmer-bright)) 50%,
        rgba(var(--shimmer-color-dim), var(--shimmer-dim)) 58%,
        rgba(var(--shimmer-color-dim), var(--shimmer-dim)) 100%
    ) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    animation: shimmer-rotate var(--shimmer-speed) linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Override Divi button ::before (body #page-container ... !important) */
body #page-container .et_pb_section .shimmer-border.shimmer-border::before {
    display: block !important;
    opacity: 1 !important;
    content: '' !important;
    transform: none !important;
    transition: none !important;
}

/* Boutons Divi : bordure à l'extérieur + overflow visible */
.et_pb_button.shimmer-border {
    overflow: visible !important;
}

.et_pb_button.shimmer-border.shimmer-border::before {
    inset: calc(-1 * var(--shimmer-width)) !important;
    padding: var(--shimmer-width) !important;
}

@keyframes shimmer-rotate {
    to { --shimmer-angle: 360deg; }
}

/* ══════════════════════════════════════════
   .tilt — effet 3D + glow souris au hover
   ══════════════════════════════════════════ */

.tilt {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative !important;
    transform: perspective(800px) rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) !important;
    transition: transform var(--tilt-speed) ease-out !important;
}

.tilt::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: var(--glass-radius) !important;
    background: radial-gradient(
        circle var(--glow-size) at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, var(--glow-opacity)) 0%,
        transparent 100%
    ) !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.tilt:hover::after {
    opacity: 1 !important;
}