/*======================================
    DARA AFFILIATION — AUTH (INSCRIPTION / CONNEXION)
======================================*/

.auth-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:150px 6% 80px;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 20%,rgba(0,140,255,.20),transparent 32%),
        radial-gradient(circle at 85% 80%,rgba(0,198,255,.15),transparent 32%),
        var(--dark,#050914);
}

.auth-bg-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.5;
    z-index:0;
    pointer-events:none;
}

.auth-bg-shape.shape1{
    width:520px;height:520px;
    top:-140px;left:-140px;
    background:radial-gradient(circle,#0066ff,transparent 70%);
    animation:authFloat 9s ease-in-out infinite;
    opacity:.75;
}

.auth-bg-shape.shape2{
    width:460px;height:460px;
    bottom:-160px;right:-120px;
    background:radial-gradient(circle,#00c6ff,transparent 70%);
    animation:authFloat 11s ease-in-out infinite reverse;
    opacity:.7;
}

@keyframes authFloat{
    0%,100%{ transform:translateY(0) translateX(0); }
    50%{ transform:translateY(-30px) translateX(20px); }
}

/* ---------- EXTRA AMBIANCE : mesh + grille animee + halo supplementaire ---------- */
.auth-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%,rgba(0,0,0,.9),transparent 72%);
    mask-image:radial-gradient(circle at 50% 40%,rgba(0,0,0,.9),transparent 72%);
    animation:authGridDrift 22s linear infinite;
    z-index:0;
    pointer-events:none;
}

@keyframes authGridDrift{
    0%{ background-position:0 0,0 0; }
    100%{ background-position:92px 46px,46px 92px; }
}

.auth-bg-shape.shape3{
    width:260px;height:260px;
    top:45%;left:48%;
    background:radial-gradient(circle,#7f4bff,transparent 70%);
    opacity:.35;
    animation:authFloat 13s ease-in-out infinite;
    animation-delay:-4s;
}

.auth-wrapper{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1000px;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    overflow:hidden;
    backdrop-filter:blur(20px);
    box-shadow:0 30px 90px rgba(0,0,0,.45);
    animation:authGlowPulse 6s ease-in-out infinite;
    transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}

.auth-wrapper:hover{
    transform:translateY(-6px);
}

@keyframes authGlowPulse{
    0%,100%{ box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 0 1px rgba(0,198,255,.06); }
    50%{ box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 55px rgba(0,150,255,.16),0 0 0 1px rgba(0,198,255,.16); }
}

/* ---------- VISUAL SIDE ---------- */
.auth-visual{
    position:relative;
    padding:55px 45px;
    background:
        linear-gradient(160deg,rgba(0,102,255,.35),rgba(0,198,255,.12)),
        var(--dark2,#0c1427);
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.08);
}

.auth-logo{
    width:110px;
    margin-bottom:26px;
    filter:drop-shadow(0 0 20px rgba(0,198,255,.4));
    animation:authLogoFloat 4s ease-in-out infinite;
}

@keyframes authLogoFloat{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-8px) rotate(-2deg); }
}

.auth-visual h2{
    font-size:2rem;
    color:#fff;
    line-height:1.3;
    margin-bottom:16px;
}

.auth-visual h2 span{
    background:linear-gradient(90deg,var(--primary,#008cff),var(--secondary,#00c6ff),var(--primary,#008cff));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:authTextShine 4s linear infinite;
}

@keyframes authTextShine{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
}

.auth-visual p{
    color:var(--text,#b8c5d8);
    line-height:1.7;
    margin-bottom:26px;
}

.auth-perks{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.auth-perks li{
    display:flex;
    align-items:center;
    gap:10px;
    color:#e6edf6;
    font-size:.95rem;
    opacity:0;
    transform:translateX(-16px);
    animation:authPerkIn .6s ease forwards;
    transition:transform .25s ease;
}

.auth-perks li:hover{
    transform:translateX(4px);
}

.auth-perks li:nth-child(1){ animation-delay:.15s; }
.auth-perks li:nth-child(2){ animation-delay:.35s; }
.auth-perks li:nth-child(3){ animation-delay:.55s; }
.auth-perks li:nth-child(4){ animation-delay:.75s; }

@keyframes authPerkIn{
    to{ opacity:1; transform:translateX(0); }
}

.auth-perks i{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary,#008cff),var(--secondary,#00c6ff));
    color:#fff;
    font-size:.75rem;
    flex-shrink:0;
    box-shadow:0 0 0 rgba(0,198,255,.35);
    animation:authPerkPulse 2.6s ease-in-out infinite;
}

.auth-perks li:nth-child(2) i{ animation-delay:.4s; }
.auth-perks li:nth-child(3) i{ animation-delay:.8s; }

@keyframes authPerkPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(0,198,255,.35); }
    50%{ box-shadow:0 0 0 6px rgba(0,198,255,.12); }
}

/* ---------- CARD SIDE ---------- */
.auth-card{
    padding:55px 50px;
}

.auth-card h1{
    color:#fff;
    font-size:1.9rem;
    margin-bottom:6px;
}

.auth-subtitle{
    color:var(--text,#b8c5d8);
    margin-bottom:26px;
    font-size:.95rem;
}

.auth-alert{
    display:flex;
    gap:12px;
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:22px;
    font-size:.88rem;
    line-height:1.5;
}

.auth-alert-error{
    background:rgba(255,70,70,.12);
    border:1px solid rgba(255,70,70,.35);
    color:#ffb3b3;
}

.auth-alert-error i{
    margin-top:2px;
    color:#ff5f5f;
}

.auth-alert ul{
    margin:0;
    padding-left:18px;
}

.auth-alert-success{
    background:rgba(0,198,255,.10);
    border:1px solid rgba(0,198,255,.35);
    color:#bfeaff;
}

.auth-alert-success i{
    margin-top:2px;
    color:var(--secondary,#00c6ff);
}

.auth-alert-success ul{
    margin:0;
    padding-left:0;
    list-style:none;
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.auth-forgot-link{
    display:inline-block;
    margin-top:8px;
    font-size:.85rem;
    color:var(--secondary,#00c6ff);
    text-decoration:none;
}

.auth-forgot-link:hover{
    text-decoration:underline;
}

.auth-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.auth-field label{
    display:block;
    color:#e6edf6;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:8px;
}

.auth-field .optional{
    color:#7c8aa3;
    font-weight:400;
}

.auth-input{
    position:relative;
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:0 16px;
    transition:.3s ease;
}

.auth-input:focus-within{
    border-color:var(--secondary,#00c6ff);
    box-shadow:0 0 0 3px rgba(0,198,255,.15);
    transform:translateY(-2px);
}

.auth-input:focus-within i:first-child{
    color:var(--secondary,#00c6ff);
    transform:scale(1.1);
}

.auth-input i:first-child{
    color:#7c8aa3;
    font-size:.9rem;
    margin-right:12px;
    transition:.25s ease;
}

.auth-input input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    padding:14px 0;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:.95rem;
}

.auth-input input::placeholder{
    color:#5f6c82;
}

.toggle-password{
    cursor:pointer;
    color:#7c8aa3;
    transition:.2s;
    display:inline-flex;
}

.toggle-password:hover{
    color:var(--secondary,#00c6ff);
    transform:scale(1.15);
}

.toggle-password:active{
    transform:scale(.9);
}

.auth-checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#b8c5d8;
    font-size:.85rem;
    line-height:1.5;
    cursor:pointer;
}

.auth-checkbox input{
    margin-top:3px;
    accent-color:var(--secondary,#00c6ff);
}

.auth-checkbox a{
    color:var(--secondary,#00c6ff);
    text-decoration:none;
}

.auth-submit{
    position:relative;
    width:100%;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:none;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-size:1rem;
    margin-top:6px;
    overflow:hidden;
    isolation:isolate;
}

.auth-submit::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .7s ease;
    z-index:1;
    pointer-events:none;
}

.auth-submit:hover::before{
    transform:translateX(120%);
}

.auth-submit i{
    transition:transform .3s ease;
}

.auth-submit:hover i{
    transform:translateX(4px);
}

.auth-submit.is-loading{
    pointer-events:none;
    opacity:.85;
}

.auth-submit.is-loading .auth-submit-label{
    visibility:hidden;
}

.auth-submit-spinner{
    display:none;
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    animation:authSpin .7s linear infinite;
}

.auth-submit.is-loading .auth-submit-spinner{
    display:inline-block;
}

@keyframes authSpin{
    to{ transform:rotate(360deg); }
}

.auth-switch{
    margin-top:24px;
    text-align:center;
    color:var(--text,#b8c5d8);
    font-size:.9rem;
}

.auth-switch a{
    position:relative;
    color:var(--secondary,#00c6ff);
    font-weight:600;
    text-decoration:none;
}

.auth-switch a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:0;
    height:2px;
    background:var(--secondary,#00c6ff);
    transition:width .3s ease;
}

.auth-switch a:hover::after{
    width:100%;
}

@media(max-width:860px){
    .auth-wrapper{
        grid-template-columns:1fr;
    }
    .auth-visual{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
        padding:40px 30px;
    }
    .auth-card{
        padding:40px 30px;
    }
    .auth-row{
        grid-template-columns:1fr;
    }
}