/* ==========================================================
   COMPONENT: EFFET "VERRE DÉPOLI" (GLASSMORPHISM)
   ========================================================== */

.glass-effect {
    /* On ajoute "position: relative" pour pouvoir positionner les rayures par-dessus */
    position: relative;
    background-color: rgba(15, 0, 0, 0.40);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    
    box-shadow:
        inset 0.075rem 0.075rem 3px 1px rgba(255, 240, 240, 0.10),
        0 10px 30px rgba(0, 0, 0, 0.80),
        0 0 80px rgba(0, 0, 0, 0.2);

    /* On s'assure que les rayures ne dépassent pas des bords arrondis */
    overflow: hidden;
}

/* On utilise un pseudo-élément pour dessiner les rayures de vétusté via un SVG */
.glass-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 
     *  Version améliorée du SVG. Chaque rayure est maintenant composée de 2 tracés :
     *  1. Une "ombre" (stroke sombre et transparent).
     *  2. Un "reflet" (stroke clair et transparent) légèrement décalé.
     *  Cela crée une illusion de relief où la lumière accroche la rayure.
    */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3e%3c!-- Rayure verticale (ombre + reflet) --%3e%3cpath d='M 160.5 40 L 165.5 90' stroke='rgba(0,0,0,0.05)' stroke-width='0.4' fill='none' /%3e%3cpath d='M 160 40 L 165 90' stroke='rgba(255,255,255,0.04)' stroke-width='0.4' fill='none' /%3e%3c!-- Rayure courbe (ombre + reflet) --%3e%3cpath d='M 30.5 100 Q 50.5 105, 70.5 98' stroke='rgba(0,0,0,0.04)' stroke-width='0.3' fill='none' /%3e%3cpath d='M 30 100 Q 50 105, 70 98' stroke='rgba(255,255,255,0.03)' stroke-width='0.3' fill='none' /%3e%3c!-- Petite estafilade (ombre + reflet) --%3e%3cpath d='M 25.5 30 L 45.5 25' stroke='rgba(0,0,0,0.05)' stroke-width='0.3' fill='none' /%3e%3cpath d='M 25 30 L 45 25' stroke='rgba(255,255,255,0.04)' stroke-width='0.3' fill='none' /%3e%3c/svg%3e");
    
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Permet aux clics de passer "à travers" la texture */
    pointer-events: none;
    
    /* Les rayures suivent les bords arrondis du parent */
    border-radius: inherit;
}

/* ==========================================================
   NOUVEAU : EFFET DE REFLET SUR LE VERRE (RÉALISTE)
   ========================================================== */
.glass-effect::before {
    content: '';
    position: absolute;
    top: -50%;      /* On le fait déborder en haut */
    left: -20%;     /* et à gauche */
    width: 150%;    /* pour qu'il soit très grand */
    height: 150%;
    
    /* 
     * Le reflet est une très grande ellipse (radial-gradient)
     * positionnée dans le coin supérieur gauche de ce pseudo-élément.
     * Le dégradé va d'un blanc très transparent à totalement transparent.
    */
    background: radial-gradient(
        ellipse at top left, 
        rgba(255, 255, 255, 0.2) 0%, /* Point le plus lumineux */
        rgba(255, 255, 255, 0) 40%   /* Devient transparent rapidement */
    );

    /* On le fait pivoter pour aligner le reflet avec la diagonale */
    transform: rotate(15deg);

    /* On adoucit les bords pour un effet plus diffus */
    filter: blur(2px);

    /* S'assure qu'il n'interfère pas avec les clics */
    pointer-events: none;
    
    /* Le reflet doit aussi suivre les bords arrondis */
    border-radius: inherit;
}