/* =========================================================================
   DARA AFFILIATION — COUCHE ADDITIVE "BLEU + NOIR PREMIUM" (v4)
   -------------------------------------------------------------------------
   IMPORTANT : le design d'origine du site (style.css, auth.css, why.css,
   about.css, oppotunity.css, footer.css, navbar.css...) est DEJA noir/bleu
   premium avec un glassmorphism sombre (fond #050914, cartes en verre
   blanc translucide a faible opacite, accents bleus #0d6efd/#00c6ff).
   Une precedente version de ce fichier forcait un theme BLANC par-dessus
   avec des regles !important, ce qui a) allait a l'encontre de l'identite
   voulue (bleu + noir dominants) et b) empechait le bouton "mode clair/
   sombre" du tableau de bord de fonctionner (il forcait le clair partout,
   quoi que l'utilisateur clique).
   Cette version ne fait plus QUE des ajouts neutres (formes 3D flottantes,
   reveal au scroll, tilt/magnetique/ripple, corrections responsive) qui
   fonctionnent sur n'importe quel fond. Elle ne force plus aucune couleur
   de fond/texte : le noir + bleu d'origine reste visible partout, et le
   tableau de bord garde son vrai bouton clair/sombre (gere separement par
   dashboard-3d.js + dashboard-3d-premium.css, qui fonctionnent tres bien
   une fois qu'on ne les court-circuite plus ici).
   ========================================================================= */

:root{
    --dw-blue:      #0d6efd;
    --dw-blue-2:    #2e8bff;
    --dw-cyan:      #17c3ff;
    --dw-blue-deep: #0b3fa8;
    --dw-grad-brand:   linear-gradient(135deg,#0d6efd 0%,#2e8bff 48%,#17c3ff 100%);
    --dw-grad-brand-h: linear-gradient(135deg,#2e8bff 0%,#17c3ff 55%,#7fd8ff 100%);
}

/* Empeche tout flash blanc au chargement avant que le CSS de page n'arrive */
html{ background:#050914; }

/* Scrollbar premium (fonctionne sur fond sombre) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#050914; }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--dw-blue),var(--dw-cyan));
    border-radius:10px; border:2px solid #050914;
}
.dashboard-body::-webkit-scrollbar-track{ background:#0b1424; }
::selection{ background:rgba(13,110,253,.35); color:#fff; }

/* =========================================================================
   1. FORMES FLOTTANTES 3D DECORATIVES (auto-injectees en JS: .dw-orb)
   ========================================================================= */

.dw-orb-field{
    position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.dw-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.45;
    will-change:transform;
    background:radial-gradient(circle at 30% 30%, rgba(13,110,253,.65), rgba(23,195,255,.06) 70%);
    animation:dwFloat 14s ease-in-out infinite;
}
.dashboard-body .dw-orb{ opacity:.3; }
@keyframes dwFloat{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(18px,-26px,0) scale(1.06); }
}
@keyframes dwSpin{
    from{ transform:rotate(0deg); } to{ transform:rotate(360deg); }
}

/* Petit cube/losange 3D CSS pur, reutilisable */
.dw-cube{
    position:absolute; width:46px; height:46px;
    border:1px solid rgba(23,195,255,.35);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(13,110,253,.16),rgba(23,195,255,.05));
    box-shadow:0 20px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(3px);
    animation:dwSpin 18s linear infinite, dwFloat 9s ease-in-out infinite;
    opacity:.5;
}

/* =========================================================================
   2. REVEAL AU SCROLL (fallback IntersectionObserver, classe ajoutee en JS)
   ========================================================================= */
.dw-reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.dw-reveal.dw-in{
    opacity:1;
    transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
    .dw-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================================
   3. RIPPLE TACTILE (classe ajoutee en JS au clic sur les boutons)
   ========================================================================= */
.dw-ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    background:rgba(255,255,255,.45);
    transform:scale(0); animation:dwRipple .6s ease-out forwards; z-index:2;
}
@keyframes dwRipple{ to{ transform:scale(3); opacity:0; } }

/* =========================================================================
   4. TILT 3D generique pour toute carte marquee .dw-tilt (ajoute en JS)
   ========================================================================= */
.dw-tilt{
    --dwTiltX:0deg; --dwTiltY:0deg;
    transform:perspective(1000px) rotateX(var(--dwTiltX)) rotateY(var(--dwTiltY));
    transition:transform .12s ease-out;
    will-change:transform;
}

/* Boutons "magnetiques" (leger deplacement vers le curseur, via JS) */
.dw-magnetic{ transition:transform .18s ease-out; }

/* =========================================================================
   5. CORRECTIONS DE STRUCTURE (mise en page, pas de couleur)
   ========================================================================= */

/* Corrige un debordement CSS Grid pre-existant : sur mobile, la colonne du
   formulaire ne devait pas retrecir sous son contenu (texte tronque). */
.auth-wrapper{ min-width:0; }
.auth-card, .auth-visual{ min-width:0; }
.auth-row{ min-width:0; }
.auth-row .auth-field{ min-width:0; }
@media (max-width: 860px){
    .auth-wrapper{ grid-template-columns:minmax(0,1fr) !important; }
    .auth-row{ grid-template-columns:minmax(0,1fr) !important; }
    .auth-card{ width:100% !important; }
}

/* =========================================================================
   6. RESPONSIVE — corrections fines multi-appareils (sans forcer de couleur)
   ========================================================================= */

/* Tablette portrait */
@media (max-width: 1024px){
    .auth-card{ border-radius:24px !important; }
    .op-card, .opportunity-card{ border-radius:16px !important; }
}

/* Mobile large / tablette petite */
@media (max-width: 768px){
    .dw-orb{ filter:blur(40px); }
    .auth-visual{ display:none; }
    .hero-content h1, .hero-content .title{ font-size:clamp(1.8rem,7vw,2.6rem) !important; }
    .footer-container{ text-align:center; }
    .dashboard-body .dg-stats{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
}

/* Mobile standard */
@media (max-width: 480px){
    .auth-card{ margin:0 4px; border-radius:16px !important; }
    .btn, .btn-outline, .auth-submit{ width:100%; justify-content:center; }
    .dashboard-body .dg-stats{ grid-template-columns:1fr !important; }
    .dw-orb-field{ display:none; } /* économie de perf sur tres petits écrans */
    .op-card, .opportunity-card, .feature, .why-item, .faq-item{ border-radius:14px !important; }

    /* La bulle du chatbot ne doit jamais chevaucher le formulaire */
    #dara-chatbot{ right:14px !important; bottom:14px !important; }
    #dara-chat-toggle{ width:52px !important; height:52px !important; font-size:20px !important; }
    .auth-card{ padding-bottom:74px !important; }
}

/* Tres petits écrans */
@media (max-width: 360px){
    .contact-wrapper, .contact-form, .auth-card{ padding-left:14px !important; padding-right:14px !important; }
}

/* Paysage telephone (hauteur reduite) */
@media (max-height: 480px) and (orientation: landscape){
    .auth-section{ padding-top:110px !important; padding-bottom:40px !important; }
    .dw-orb-field{ display:none; }
    .hero{ min-height:auto !important; }
}

/* Paysage tablette */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape){
    .dashboard-body .dg-stats{ grid-template-columns:repeat(2,1fr) !important; }
}

/* Ecrans larges : renforcer la profondeur */
@media (min-width: 1400px){
    .dw-orb{ filter:blur(80px); }
}

/* Empeche tout debordement horizontal residuel */
html, body{ max-width:100%; overflow-x:hidden; }
.container{ max-width:1240px; }

/* Respect des utilisateurs sensibles au mouvement */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}