*{margin:0;padding:0;text-decoration: none;list-style: none;box-sizing: border-box;}
body {font-family:arial,san-serif;font-size:13px;color:#fff;background:#070707;}
.hero{text-align:center;padding:100px}
.hero h1{color:#0ff;font-size:60px;animation:glitch 1.5s infinite}
.block-generale{text-align:center;margin-top:25px;padding-bottom:10px;background:#111;padding:30px;width:80%;margin:40px auto;border-radius:15px;animation:glow 3s infinite}
.block-generale-galerie {background:#111111;text-align:center;padding-bottom:10px;padding:20px 7px 7px 7px;max-width:1024px;width:93%;margin:80px auto;border-radius:15px;box-shadow: 0 0 20px #0ff;}

.avatar{width:120px;height:120px;border-radius:50%;box-shadow:0 0 30px #0ff}

.btn-neon {
    display: inline-block;
    padding: 15px 30px;
    margin: 10px;
    color: #0ff;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #0ff;
    border-radius: 10px;
    box-shadow: 0 0 10px #0ff;
    transition: 0.3s;
}

.btn-neon:hover {
    box-shadow: 0 0 40px #0ff;
    transform: scale(1.05);
}

.avatar-form {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: #111;
    border: 2px solid #0ff;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 20px #0ff;
}

.avatar-form h2,
.avatar-form p {
    color: #0ff;
    text-shadow: 0 0 5px #0ff;
}

/* Avatar */
.avatar-form .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #0ff;
    margin-bottom: 15px;
    box-shadow: 0 0 10px #0ff;
}

/* Input file */
.avatar-form .avatar-input {
    width: 100%;
    padding: 8px;
    margin: 15px 0;
    background: #111;
    border: 2px solid #0ff;
    border-radius: 10px;
    color: #0ff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0,255,255,0.2);
    transition: 0.3s;
}

.avatar-form .avatar-input:hover {
    box-shadow: 0 0 15px #0ff inset;
}

/* Button */
.avatar-form .avatar-btn {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    color: #0ff;
    background: transparent;
    border: 2px solid #0ff;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px #0ff;
    transition: 0.3s;
}

.avatar-btn2 {
    width: fit-content;
    padding: 10px;
    font-weight: bold;
    color: #0ff;
    background: transparent;
    border: 2px solid #0ff;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px #0ff;
    transition: 0.3s;
	margin-bottom: 20px;
}

.avatar-form .avatar-btn:hover {
    box-shadow: 0 0 30px #0ff, 0 0 50px #0ff inset;
    transform: scale(1.05);
}

.avatar-btn2:hover {
    box-shadow: 0 0 30px #0ff, 0 0 50px #0ff inset;
    transform: scale(1.05);
}

.sexe-wrapper {
    margin-top: 20px;
    text-align: center;
}

.sexe-wrapper p {
    color: #0ff;
    margin-bottom: 10px;
}

.sexe-form .avatar-input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    background: #111;
    border: 2px solid #0ff;
    border-radius: 10px;
    color: #0ff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0,255,255,0.2);
    transition: 0.3s;
}

.sexe-form .avatar-btn {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    color: #0ff;
    background: transparent;
    border: 2px solid #0ff;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px #0ff;
    transition: 0.3s;
}

.sexe-form .avatar-btn:hover {
    box-shadow: 0 0 30px #0ff, 0 0 50px #0ff inset;
    transform: scale(1.05);
}

.bouton-action {
	margin: 10px 0 10px 0;
}

.formulaire-input-cat-roulette {
    display: inline-flex;
    position: relative;
    width: fit-content;
    vertical-align: middle;
    margin: 5px 0;
}

.formulaire-input-cat-roulette span {
    margin: 5px 0  0 8px;
}

.formulaire-input-cat-roulette label {
    font-size: 1rem;
    font-weight: bold;
    color: rgb(169, 169, 173);
    margin: 8px;
    background: none;
    vertical-align: middle;
}

.form-input-form-mbr-cat-roulette {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 10px 10px 10px 10px;
    width: fit-content;
    outline: none;
    background: #1a1a1a;
    border-radius: 8px;
    display: inline-block;
    vertical-align: middle;
}

.titre-style {
    margin-top: -15px;
    margin-bottom: 20px;
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    font-weight: bold;

    /* glow animé */
    text-shadow: 
        0 0 1px #0ff,
        0 0 2px #0ff,
        0 0 4px #0ff;

    animation: neonPulse 1.5s infinite alternate;
}

@keyframes neonPulse {
    0% {
        text-shadow: 
            0 0 1px #0ff,
            0 0 2px #0ff,
            0 0 4px #0ff;
    }
    50% {
        text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 15px #0ff;
    }
    100% {
        text-shadow: 
            0 0 1px #0ff,
            0 0 2px #0ff,
            0 0 4px #0ff;
    }
}



@keyframes glow{0%{box-shadow:0 0 5px #0ff}50%{box-shadow:0 0 40px #0ff}100%{box-shadow:0 0 5px #0ff}}
@keyframes glitch{0%{text-shadow:2px 2px #f0f,-2px -2px #0ff}50%{text-shadow:-2px 0 #f0f,2px 2px #0ff}100%{text-shadow:2px -2px #f0f,-2px 2px #0ff}}