/*========================================================*/
/* STYLE POUR UN SÉPARATEUR AVEC POINTES VERS LE HAUT     */
/*========================================================*/

/*
 * Le style de base est identique au séparateur-haut :
 * une simple barre horizontale qui sert de référence.
 */
.separateur-bas {
    position: relative;
    width: 90%;
    height: 1px; /* Épaisseur de la barre horizontale */
    background-color: rgba(255, 215, 0, 0.5); /* Estompé */
    margin: 3.5rem auto;
    border: none;
    
    box-shadow:
            0 0 6px rgba(255, 215, 0, 0.4),
            0 0 12px rgba(255, 165, 0, 0.2);
    opacity: 0.9; /* On estompe légèrement l'ensemble */
    
}

/*
 * Les pseudo-éléments créent les deux "bras" qui pointent vers le haut.
 */
.separateur-bas::before,
.separateur-bas::after {
    content: '';
    position: absolute;
    /* On attache les bras au BAS de la barre pour qu'ils montent */
    bottom: 0;
    width: 1px;   /* Épaisseur des bras */
    height: 1rem; /* Longueur des bras */
    
    /* 1. LA FORME : Un bâtonnet solide avec un bout arrondi */
    background-color: rgba(255, 215, 0, 0.5); /* Estompé */
    border-radius: 1px; /* Crée l'effet gélule */
    
    /*
     * 2. LA TRANSPARENCE : On masque le HAUT du bras pour l'affiner.
     * Le dégradé du masque va du solide (en bas) au transparent (en haut).
     */
    -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
    mask-image: linear-gradient(to top, black 50%, transparent 100%);
}

/* On positionne le bras gauche au début de la barre */
.separateur-bas::before {
    left: 0;
    /*!* Effet Glitch (compatible Firefox avec 'filter') *!*/
    /*filter: drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.8)) drop-shadow(2px 0 0 rgba(0, 255, 255, 0.8));*/
}

/* On positionne le bras droit à la fin de la barre */
.separateur-bas::after {
    right: 0;
    /*!* Effet Glitch (compatible Firefox avec 'filter') *!*/
    /*filter: drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.8)) drop-shadow(2px 0 0 rgba(0, 255, 255, 0.8));*/
}

@media (max-width: 460px) {
    .separateur-bas {
        margin: 2rem auto;
        width: 100%;
    }
    
}