/* =========================================================
   DARA AFFILIATION — 3D EXPERIENCE LAYER
   Couche additive et non-destructive : arriere-plan animé
   (particules / spheres / connexions), entrees en cascade
   des cartes, glow du logo. Ne redefinit aucune mise en page
   existante, vient uniquement en complement de auth.css,
   dashboard.css, dashboard-premium.css, dashboard-gold.css
   et dashboard-3d-premium.css.
   ========================================================= */

/* ---------- CANVAS PARTICULES / SPHERES / CONNEXIONS ---------- */
.dara-3d-bg{
    position:absolute;
    top:0; left:0;
    width:100%;
    display:block;
    pointer-events:none;
    z-index:0;
    opacity:1;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62%, transparent 97%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62%, transparent 97%);
}

.auth-section .dara-3d-bg{
    height:100%;
    -webkit-mask-image:none;
    mask-image:none;
}

/* Le contenu doit toujours rester au-dessus du canvas */
.dash-sidebar{ position:relative; z-index:5; }
.dash-main{ position:relative; z-index:2; }
.auth-wrapper{ position:relative; z-index:2; }

@media (prefers-reduced-motion: reduce){
    .dara-3d-bg{ opacity:.55; }
}

/* ---------- CARTE AUTH : VERSION BLANC + BLEU PREMIUM ---------- */
.auth-card{
    position:relative;
    z-index:2;
    background:linear-gradient(180deg,#ffffff,#f5f9ff);
    border-radius:0 26px 26px 0;
    box-shadow:inset 1px 0 0 rgba(10,40,90,.05);
}

.auth-card h1{ color:#0a1f3d; }
.auth-card .auth-subtitle{ color:#5b6c85; }

.auth-card .auth-field label{ color:#1c3355; }
.auth-card .auth-field .optional{ color:#8b98ab; }

.auth-card .auth-input{
    background:#f3f7fd;
    border:1px solid rgba(10,60,140,.12);
}
.auth-card .auth-input:focus-within{
    border-color:var(--primary,#008cff);
    box-shadow:0 0 0 3px rgba(0,140,255,.14);
    background:#fff;
}
.auth-card .auth-input i:first-child{ color:#8496b3; }
.auth-card .auth-input:focus-within i:first-child{ color:var(--primary,#008cff); }
.auth-card .auth-input input{ color:#0a1f3d; }
.auth-card .auth-input input::placeholder{ color:#a3aec2; }

.auth-card .toggle-password{ color:#8496b3; }
.auth-card .toggle-password:hover{ color:var(--primary,#008cff); }

.auth-card .auth-checkbox{ color:#4c5c74; }
.auth-card .auth-checkbox a{ color:var(--primary,#008cff); }

.auth-card .auth-forgot-link{ color:var(--primary,#008cff); }

.auth-card .auth-switch{ color:#5b6c85; }
.auth-card .auth-switch a{ color:var(--primary,#008cff); }

.auth-card .auth-alert-error{
    background:rgba(255,70,70,.07);
    border-color:rgba(255,70,70,.25);
    color:#c23b3b;
}
.auth-card .auth-alert-error i{ color:#e14b4b; }

.auth-card .auth-alert-success{
    background:rgba(0,140,255,.07);
    border-color:rgba(0,140,255,.25);
    color:#0a4d8c;
}
.auth-card .auth-alert-success i{ color:var(--primary,#008cff); }

/* Bouton premium : legerement plus profond sur fond blanc */
.auth-card .auth-submit{
    box-shadow:0 16px 34px rgba(0,110,255,.28);
}

/* Indicateur "champ valide" (ajoute via JS, ne modifie aucune logique PHP) */
.auth-input.field-valid{
    border-color:rgba(35,190,120,.55) !important;
}
.auth-input.field-valid::after{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:#20c07a;
    font-size:.75rem;
    margin-left:8px;
}

@media(max-width:860px){
    .auth-card{ border-radius:0 0 26px 26px; }
}

/* ---------- LOGO : APPARITION + GLOW DOUX ---------- */
.auth-logo{
    animation:authLogoFloat 4s ease-in-out infinite, dara3dFadeIn .7s ease both;
}

.dash-brand img{
    animation:dashLogoGlow 5s ease-in-out infinite, dara3dFadeIn .6s ease both;
}
@keyframes dashLogoGlow{
    0%,100%{ filter:drop-shadow(0 10px 22px rgba(0,143,255,.35)); transform:translateY(0); }
    50%{ filter:drop-shadow(0 14px 38px rgba(0,190,255,.65)); transform:translateY(-5px); }
}

@keyframes dara3dFadeIn{
    from{ opacity:0; transform:translateY(-8px) scale(.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------- ENTREE EN CASCADE DES CARTES (fade + translate + scale) ----------
   Note : .dg-stat-card / .dg-panel (theme "gold/blanc") possedent deja leur
   propre animation d'entree (dgFadeUp) dans dashboard-gold.css : on ne la
   duplique pas ici pour eviter tout conflit. On complete uniquement les
   variantes qui n'en ont pas encore. */
.dash-stat-card, .dash-panel, .profile-hero, .dash-hero{
    opacity:0;
    transform:translateY(34px) scale(.94);
    animation:dara3dCardIn .75s cubic-bezier(.16,.9,.24,1.06) forwards;
}

/* ---------- GLOW RENFORCE AU SURVOL (toutes les cartes du compte) ---------- */
.dash-stat-card:hover, .dg-stat-card:hover,
.dash-panel:hover, .dg-panel:hover{
    box-shadow:0 30px 65px rgba(0,0,0,.4), 0 0 46px rgba(0,170,255,.22), 0 0 0 1px rgba(0,198,255,.16) !important;
}

.theme-light .dash-stat-card:hover, .theme-light .dg-stat-card:hover,
.theme-light .dash-panel:hover, .theme-light .dg-panel:hover{
    box-shadow:0 26px 55px rgba(20,60,120,.16), 0 0 34px rgba(0,140,255,.18) !important;
}

.dash-hero, .profile-hero{ animation-delay:.05s; }

.dash-stats > *:nth-child(1){ animation-delay:.12s; }
.dash-stats > *:nth-child(2){ animation-delay:.20s; }
.dash-stats > *:nth-child(3){ animation-delay:.28s; }
.dash-stats > *:nth-child(4){ animation-delay:.36s; }
.dash-stats > *:nth-child(5){ animation-delay:.44s; }
.dash-stats > *:nth-child(6){ animation-delay:.52s; }

.dash-grid-2 .dash-panel:nth-child(1){ animation-delay:.26s; }
.dash-grid-2 .dash-panel:nth-child(2){ animation-delay:.34s; }

@keyframes dara3dCardIn{
    to{ opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
    .dash-stat-card, .dg-stat-card, .dash-panel, .dg-panel,
    .profile-hero, .dash-hero, .auth-logo, .dash-brand img{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}

/* Sur mobile : cascade plus courte pour rester rapide */
@media(max-width:640px){
    .dash-stat-card, .dash-panel{
        animation-duration:.45s;
    }
}