:root {
    --bg: #040711;
    --panel: rgba(10, 15, 30, .82);
    --panel2: rgba(16, 23, 43, .88);
    --border: rgba(111, 150, 255, .25);
    --text: #f5f7ff;
    --muted: #96a2c4;

    --blue: #55c7ff;
    --purple: #8668ff;
    --cyan: #36f2d0;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: #03050c;
}

/* =========================================================
   FOND ANIMÉ
   ========================================================= */

#arkania-space {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background:
        radial-gradient(circle at 50% 130%, #101b3a 0, transparent 48%),
        linear-gradient(180deg, #02040a, #050816 55%, #070b18);
}

#arkania-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .22;
    will-change: transform;
}

.nebula-one {
    width: 650px;
    height: 650px;
    left: -180px;
    top: -160px;
    background: #304dff;
    animation: nebulaOne 19s ease-in-out infinite alternate;
}

.nebula-two {
    width: 720px;
    height: 720px;
    right: -250px;
    top: 8%;
    background: #772cff;
    animation: nebulaTwo 24s ease-in-out infinite alternate;
}

.nebula-three {
    width: 620px;
    height: 620px;
    left: 30%;
    bottom: -300px;
    background: #00b8cf;
    opacity: .12;
    animation: nebulaThree 28s ease-in-out infinite alternate;
}

@keyframes nebulaOne {
    to {
        transform: translate(130px, 90px) scale(1.16);
    }
}

@keyframes nebulaTwo {
    to {
        transform: translate(-140px, 100px) scale(.92);
    }
}

@keyframes nebulaThree {
    to {
        transform: translate(70px, -100px) scale(1.18);
    }
}

/* grille holographique très subtile */

.space-grid {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -60%;
    height: 90%;
    opacity: .07;

    background-image:
        linear-gradient(rgba(100,180,255,.8) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,180,255,.8) 1px, transparent 1px);

    background-size: 65px 65px;

    transform:
        perspective(600px)
        rotateX(67deg);

    animation: gridMove 14s linear infinite;
}

@keyframes gridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 130px;
    }
}


/* =========================================================
   PAGE
   ========================================================= */

.wrapper,
#content {
    min-height: 100vh;
}

#content {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 45px 18px 40px;
}

.container-fluid {
    width: 100%;
    max-width: 790px;
    padding: 0 !important;
    position: relative;
}

.container-fluid > p,
.container-fluid > br {
    display: none !important;
}


/* =========================================================
   RETOUR SITE
   ========================================================= */

.arkania-top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 18px;
}

.arkania-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 15px;

    border: 1px solid rgba(133,169,255,.20);
    border-radius: 11px;

    color: #dce8ff;
    background: rgba(6,11,23,.58);

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;

    backdrop-filter: blur(10px);

    transition:
        border-color .2s,
        background .2s,
        transform .2s,
        box-shadow .2s;
}

.arkania-back:hover {
    color: white;
    transform: translateX(-3px);

    border-color: rgba(98,198,255,.6);
    background: rgba(12,21,40,.78);

    box-shadow: 0 0 24px rgba(73,153,255,.16);
}


/* =========================================================
   TITRE
   ========================================================= */

.arkania-brand {
    text-align: center;
    margin: 8px 0 30px;
}

.arkania-brand h1 {
    position: relative;

    margin: 0;

    font-size: clamp(40px, 7vw, 60px);
    line-height: 1;

    font-weight: 900;
    letter-spacing: .055em;

    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #84e6ff 36%,
            #9b87ff 70%,
            #ffffff 100%
        );

    background-size: 220% auto;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: titleGlow 6s linear infinite;

    filter: drop-shadow(0 0 17px rgba(91,174,255,.28));
}

@keyframes titleGlow {
    to {
        background-position: 220% center;
    }
}

.arkania-brand h1::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -13px;

    width: 210px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--purple),
            transparent
        );

    box-shadow: 0 0 15px rgba(86,184,255,.75);
}

.arkania-brand .subtitle {
    margin-top: 30px;

    color: #c9d6f5;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;

    text-transform: uppercase;
}

.arkania-brand .description {
    margin: 11px auto 0;

    max-width: 570px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   ONGLET
   ========================================================= */

.account-tabs {
    display: flex;
    gap: 7px;

    padding: 6px;
    margin-bottom: 16px;

    border: 1px solid rgba(117,148,220,.17);
    border-radius: 15px;

    background: rgba(7,11,23,.64);
    backdrop-filter: blur(15px);

    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.account-tab {
    flex: 1;

    min-height: 45px;

    border: 0;
    border-radius: 10px;

    color: #8491b2;
    background: transparent;

    cursor: pointer;

    font-size: 13px;
    font-weight: 700;

    transition:
        color .2s,
        background .2s,
        box-shadow .2s;
}

.account-tab:hover {
    color: white;
    background: rgba(255,255,255,.035);
}

.account-tab.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(70,141,255,.38),
            rgba(126,73,255,.34)
        );

    box-shadow:
        inset 0 0 0 1px rgba(128,188,255,.16),
        0 0 25px rgba(70,120,255,.14);
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.container-fluid > form {
    position: relative;

    display: none;

    width: 100%;

    padding: 32px;

    border: 1px solid rgba(112,151,240,.20);
    border-radius: 20px;

    background:
        linear-gradient(
            160deg,
            rgba(17,24,47,.88),
            rgba(7,11,23,.91)
        );

    backdrop-filter: blur(22px);

    box-shadow:
        0 30px 90px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.035);

    overflow: hidden;
}

/* halo animé */

.container-fluid > form::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -170px;
    top: -170px;

    border-radius: 50%;

    background: rgba(74,145,255,.17);

    filter: blur(70px);

    animation: formAura 9s ease-in-out infinite alternate;

    pointer-events: none;
}

@keyframes formAura {
    to {
        transform: translate(650px, 180px);
        background: rgba(137,76,255,.17);
    }
}

/* barre de scan */

.container-fluid > form::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(95,221,255,.65),
            transparent
        );

    opacity: .35;

    animation: scanForm 7s linear infinite;

    pointer-events: none;
}

@keyframes scanForm {
    from {
        top: -5%;
    }

    to {
        top: 105%;
    }
}

.container-fluid > form.arkania-visible {
    display: block;

    animation: formAppear .35s ease;
}

@keyframes formAppear {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.form-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 26px;
}

.form-heading h2 {
    margin: 0 0 7px;

    font-size: 24px;
    font-weight: 800;
}

.form-heading p {
    margin: 0 !important;

    color: var(--muted) !important;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   CHAMPS
   ========================================================= */

.arkania-field {
    position: relative;
    z-index: 2;

    margin-bottom: 17px;
}

.arkania-field label {
    display: block;

    margin-bottom: 8px;

    color: #cbd6ef;

    font-size: 12px;
    font-weight: 700;
}

.container-fluid input[type="text"],
.container-fluid input[type="password"] {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    border: 1px solid rgba(126,155,220,.22);
    border-radius: 11px;

    outline: none;

    color: white;
    background: rgba(2,6,15,.68);

    font-size: 15px;

    transition:
        border .2s,
        box-shadow .2s,
        background .2s;
}

.container-fluid input::placeholder {
    color: #596581;
}

.container-fluid input[type="text"]:focus,
.container-fluid input[type="password"]:focus {
    border-color: rgba(77,196,255,.74);

    background: rgba(3,8,19,.88);

    box-shadow:
        0 0 0 3px rgba(59,157,255,.09),
        0 0 21px rgba(59,157,255,.10);
}


/* =========================================================
   BOUTON
   ========================================================= */

.container-fluid form > button {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 51px;

    margin-top: 8px;

    overflow: hidden;

    border: 1px solid rgba(123,207,255,.32);
    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            120deg,
            #327dec,
            #7659f6
        );

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 34px rgba(63,105,255,.22);

    transition:
        transform .18s,
        box-shadow .18s;
}

.container-fluid form > button::after {
    content: "";

    position: absolute;

    top: -70%;
    left: -40%;

    width: 24%;
    height: 240%;

    transform: rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.42),
            transparent
        );

    animation: buttonSweep 4.5s ease-in-out infinite;
}

@keyframes buttonSweep {
    0%, 55% {
        left: -40%;
    }

    75%, 100% {
        left: 135%;
    }
}

.container-fluid form > button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 17px 40px rgba(68,111,255,.34),
        0 0 22px rgba(79,174,255,.15);
}


/* =========================================================
   FOOTER
   ========================================================= */

.arkania-footer {
    margin-top: 19px;

    text-align: center;

    color: #56627d;

    font-size: 11px;
    letter-spacing: .12em;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    #content {
        padding: 20px 12px;
    }

    .arkania-brand h1 {
        font-size: 38px;
    }

    .account-tabs {
        flex-direction: column;
    }

    .container-fluid > form {
        padding: 23px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}