/*----------------*/
/*   Technios.eu  */
/* css login part */
/*----------------*/

.text-gradient {
    background: linear-gradient(155deg, #00c6ff, #00ff94);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.lh-sm {
    line-height: 1.1;
}
.ai-wrapper {
    position: relative;
    display: inline-block;
}

/* L’icône */
.ai-icon {
    height: 58px;
    width: auto;
    position: relative;
    z-index: 2;
    animation: floatAI 4s ease-in-out infinite;
}

/* Particules */
.ai-wrapper::before,
.ai-wrapper::after {
    content: "";
    position: absolute;
    inset: -13px;
    background: radial-gradient(circle at 20% 30%, rgba(0,255,255,0.8) 2px, transparent 3px),
                radial-gradient(circle at 70% 20%, rgba(0,200,255,0.7) 2px, transparent 3px),
                radial-gradient(circle at 40% 80%, rgba(0,255,255,0.6) 2px, transparent 3px),
                radial-gradient(circle at 85% 70%, rgba(0,255,255,0.9) 2px, transparent 3px);
    animation: particlesMove 6s linear infinite;
    z-index: 1;
    pointer-events: none;
    left: -7px;
    top:-29px;
}


/* Deuxième couche pour plus de profondeur */
.ai-wrapper::after {
    animation-duration: 10s;
    opacity: 0.6;
}

/* Animation mouvement */
@keyframes particlesMove {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.login-left {
    position: relative;
    overflow: hidden;
    min-height:100vh;
    background:linear-gradient(160deg,#081a3d 0%,#10244e 60%,#0d2245 100%);
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:70px 60px;
}

/* petits points */

.bg-grid{
    position:absolute;
    left:0;
    top:0;
    width:250px;
    height:250px;
    opacity:.15;
    background-image:
        radial-gradient(#52dfff 1.5px, transparent 1.5px);
    background-size:20px 20px;
}


/* halo */

.bg-glow{
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:#18f2d020;
    filter:blur(120px);
    top:-150px;
    right:-150px;
}

.subtiltle{
    color: #17d9c3;
}


.logo-technios{
    width:330px;
    margin-bottom:80px;
    z-index:2;
}


.login-left h1{
    font-size:70px;
    font-weight:800;
    line-height:1.05;
    text-align:center;
    z-index:2;
}


.login-left h1 span{
    display:block;
    margin-top:12px;
    background:linear-gradient(90deg,#2fe4ff,#00f3b0);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.separator{
    position:relative;
    width:260px;
    height:24px;
    margin:23px auto 38px;
}

.separator::before,
.separator::after{
    content:"";
    position:absolute;
    top:50%;
    width:130px;
    height:2px;
    background:linear-gradient(to right,
        transparent,
        rgba(46,228,255,.8));
}

.separator::before{
    left:0;
}

.separator::after{
    right:0;
    transform:scaleX(-1);
}


.separator span{
    position:absolute;
    left:50%;
    top:52%;
    width:8px;
    height:8px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#39f6ff;
}

.separator span::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:35px;
    height:35px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(57,246,255,.25);
    filter:blur(8px);
}

.features{
    display:flex;
    justify-content:center;
    gap:0px;
}

.feature{
    position:relative;
    width:180px;
    text-align:center;
}

/* Tous sauf le dernier */
.feature:not(:last-child)::after
{
    content: "";
    position: absolute;
    right: 0px;
    top: 25px;
    width: 2px;
    height: 110px;
    background: linear-gradient(180deg, transparent, #2ae5ff70, transparent);
}


.icon{
    width:80px;
    height:80px;
    border-radius:50%;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
    margin-bottom:18px;
}


.feature h3{
    font-size:25px;
    font-weight:600;
    line-height:1.3;
}


.description {
    margin-top: 32px;
    max-width: 700px;
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
    color: #bbbbbd;
    z-index: 2;
    margin-bottom: 91px;
}


.description strong{
    color:#19ffd4;
    font-weight:700;
}

/* Terre */

.earth {
    position: absolute;
    left: 0%;
    bottom: -20px;
    width: 100%;
    height: 260px;
    background: url(/assets/images/login/earth.png) no-repeat center bottom;
    background-size: contain;
    /* pointer-events: none; */
    z-index: revert-layer;
}