/* importation du css de la modal d'inscription */
@import url("/cdn/Site/Front/CSS/index_inscription/inscription.css");

/* Configuration site */
body {
    background-color: #1d1b28;
    font-family: "Ubuntu Condensed", "Ubuntu", -apple-system, sans-serif;
    animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Configuration placement du main par rapport au input */
#mainconf {
    margin-top: -2.5rem;
}

/* Configuration placement de l'index par la nav*/
.confsite_nav {
    margin-top: 2.5rem;
}

/* logo de l'index */
#logoindex {
    background-image: url(/cdn/Site/Medias/general/logo.webp);
    position: absolute;
    height: 500px;
    width: 500px;
    top: -6.4rem;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    zoom: 0.5;
}

/* section container input nav */
#login {
    position: relative;
    width: 47rem;
    height: 9rem;
    left: 25rem;
}

/* input pseudo placement */
#pseudoinp {
    position: absolute;
    top: 4.9rem;
}

/* input mdp placement */
#mdpinp {
    position: absolute;
    top: 4.9rem;
    right: 9rem;
}

/* Section container input */
.container_input {
    position: relative;
    width: 320px;
}

/* Configuration champ input */
.inputconf {
    width: 16rem;
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    border: 4px solid #695cae;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 5px 5px 0 #2a2540, 10px 10px 0 #695cae;
}

/* Animation de l'input */
@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

.inputconf:focus {
    animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite,
        glitch 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.inputconf:focus::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: white;
    z-index: -1;
}

.inputconf:focus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: -2;
    clip-path: inset(0 100% 0 0);
    animation: glitch-slice 4s steps(2, end) infinite;
}

@keyframes glitch-slice {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    10% {
        clip-path: inset(0 5% 0 0);
    }

    20% {
        clip-path: inset(0 80% 0 0);
    }

    30% {
        clip-path: inset(0 10% 0 0);
    }

    40% {
        clip-path: inset(0 50% 0 0);
    }

    50% {
        clip-path: inset(0 30% 0 0);
    }

    60% {
        clip-path: inset(0 70% 0 0);
    }

    70% {
        clip-path: inset(0 15% 0 0);
    }

    80% {
        clip-path: inset(0 90% 0 0);
    }

    90% {
        clip-path: inset(0 5% 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

/* Configuration du label input */
.inputlabel {
    position: absolute;
    left: -3px;
    top: -35px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to bottom, rgba(138, 97, 248, 0.9), rgba(106, 57, 208, 0.9), rgba(127, 90, 240, 0.9));
    padding: 5px 10px;
    transform: rotate(-1deg);
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 8px;
}

.inputconf:focus + .inputlabel {
    transform: rotate(0deg) scale(1.05);
    background: #6f6f6f5c !important;
}

/* Configuration intérieur input */
.smooth-type {
    position: relative;
    overflow: hidden;
}

.smooth-type::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.smooth-type:focus::before {
    opacity: 1;
    animation: type-gradient 2s linear infinite;
}

/* Animation input */
@keyframes type-gradient {
    0% {
        background-position: 300px 0;
    }

    100% {
        background-position: 0 0;
    }
}

.inputconf::placeholder {
    color: #888;
    transition: color 0.3s ease;
}

.inputconf:focus::placeholder {
    color: transparent;
}

.inputconf:focus {
    animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
    border-color: #1d1b285e !important;
    box-shadow: 0 0 0 .25rem #6f6f6f5c !important;
}

/* Animation input */
@keyframes focus-pulse {

    0%,
    100% {
        border-color: #000;
    }

    50% {
        border-color: #695cae;
    }
}

/* Configuration voir password oeuil */
.passfind {
    position: absolute;
    right: 5rem;
    top: 0.68rem;
    font-size: 1.8rem;
    cursor: pointer;
    color: #1d1b28;
}

.passfind:hover {
    color: #695cae;
    transform: scale(1.15);
    transition: transform 0.4s;
}

/* bouton connexion*/
.bouton_co {
    display: inline-block;
    padding: 0.45rem 0.5rem;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #2a2540;
    border: 2px solid #695cae;
    border-radius: 10px;
    box-shadow: 5px 5px 0px #2a2540d1;
    transition: all 0.3s ease;
    cursor: pointer;
    position: absolute;
    top: 5.6rem;
    right: 4rem;
}

.bouton_co:hover {
    opacity: 0.7;
    margin-top: 0.3rem;
    transform: scale(0.95);
    transition: .2s;
}

.bouton_co:active {
    opacity: 0.7;
    color: #fff;
    box-shadow: none;
    transform: translateY(4px);
}

/* info réseaux sociaux et footer cgu */
/* Section info configuration #Discord */
#info {
    position: relative;
    width: 2.5rem;
    left: 71.5rem;
    top: -3rem;
}

/* Section info configuration #CGU */
#info_cgu {
    position: relative;
    width: 2.2rem;
    left: 75rem;
    top: -5.3rem;
}

/* Configuration de l'image discord */
.rsconf {
    border: 3px solid white;
    border-radius: 12px;
    background-color: #5d6fc6;
}

.rsconf:hover {
    border: 3px solid #695cae;
    border-radius: 12px;
    transform: scale(1.2);
    transition: 0.2s;
}

/* Configuration image aide CGU */
.cguconf {
    border: 3px solid white;
    border-radius: 12px;
    background-color: #178fe9;
    cursor: pointer;
}

.cguconf:hover {
    border: 3px solid #695cae;
    border-radius: 12px;
    transform: scale(1.2);
    transition: 0.2s;
}

/* Largeur alert erreur */
.width_indexerreur {
    width: 46%;
}

/* Bouton fermeture alert erreur */
.Btn_closeeerrorindex {
    top: -0.5rem !important;
}

/* box avec img milieu */
#boxmilieu {
    position: relative;
    height: 34rem;
    background-image: url(/cdn/Site/Medias/index/image_milieu.webp);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    image-rendering: pixelated;
    background-position-y: -11rem;
    border: 3px solid black;
}

/* section btn inscription */
#btn_inscrip {
    position: absolute;
    top: 3rem;
    height: 10rem;
    width: 18rem;
    background-color: #000000bd;
    border-radius: 14px;
    left: 2rem;
}

/* bouton inscription*/
.bouton_ins {
    display: inline-block;
    height: 8rem;
    width: 15rem;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(-180deg, #2ecc71 50%, #27ae60 50%);
    border: 3px solid #000;
    border-radius: 14px;
    box-shadow: 5px 5px 0px #000;
    transition: all 0.3s ease;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    text-transform: uppercase;
}

.bouton_ins:hover {
    opacity: 0.7;
    margin-top: 8px;
    transform: scale(0.95);
    transition: .2s;
}

.bouton_ins:active {
    opacity: 0.7;
    color: #fff;
    box-shadow: none;
    transform: translateY(4px);
}

/* Partie modal footer copiryght */
/* Configuration des liens */
.linkall {
    color: #fff;
}

.linkall:hover {
    opacity: 0.7;
}

/* Configuration de la modal */
.parammodal_index {
    background-color: #1d1b28 !important;
    border-radius: 30px !important;
    backdrop-filter: blur(10px);
    border: 2px solid #7F5AF094;
}

/* Suppression de bordure en dessous titre */
.parammodaltitre_index {
    border-bottom: 0 !important;
}

/* Suppression de la marge entre paragraphe */
.reinitiamb {
    margin-bottom: inherit;
}

/* Configuration visuelle du body background modal */
.bgmodal_index {
    background-color: #7C51E829 !important;
    backdrop-filter: blur(15px);
}

/* Configuration de la section du bouton close modal */
#closemodal_footer_conf {
    position: relative;
    margin-top: 1.2rem;
}

/* Plcement du btn close modal et config */
#close_footer_modal {
    position: absolute;
    right: 2rem;
    cursor: pointer;
}

#close_footer_modal:hover {
    opacity: 0.7;
    margin-top: 8px;
    transform: scale(0.95);
    transition: .2s;
}

/* ❝ RoroCMS Par Romaric Discord: lar4forme ❞ */