/* =========================================================================
   DARA AFFILIATION — FINITION "ULTIMATE PREMIUM" (v-final)
   -------------------------------------------------------------------------
   Couche 100% additive, chargee en TOUT DERNIER (apres dara-white-blue-
   theme.css). N'introduit ni ne supprime aucune classe HTML/PHP : elle
   affine uniquement l'existant (boutons, cartes, formulaires, tableaux,
   sidebar, topbar) pour un rendu Web3 / FinTech haut de gamme, et corrige
   les derniers details responsive (paysage mobile/tablette, notch iPhone,
   debordements horizontaux). Rien n'est supprime, tout est superpose.
   ========================================================================= */

:root{
    --up-blue:      #0d6efd;
    --up-blue-2:    #2e8bff;
    --up-cyan:      #17c3ff;
    --up-deep:      #0b3fa8;
    --up-glow-a:    rgba(13,110,253,.35);
    --up-glow-b:    rgba(23,195,255,.28);
    --up-line:      rgba(13,110,253,.16);
    --up-radius:    18px;
    --up-ease:      cubic-bezier(.2,.8,.2,1);
}

/* =========================================================================
   0. FONDATIONS — pas de debordement horizontal, rendu plus net
   ========================================================================= */
html{ overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
*{ -webkit-tap-highlight-color:transparent; }
img, video, canvas, svg{ max-width:100%; }
.container{ max-width:min(1200px, 100%); }

@supports (padding: max(0px)){
    body{
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

::selection{ background:rgba(13,110,253,.25); }

/* Focus clavier toujours visible mais elegant (accessibilite) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
    outline: 2px solid var(--up-blue-2);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Typo fluide (evite les titres qui debordent sur petits ecrans) */
h1{ font-size: clamp(1.7rem, 1.15rem + 2.2vw, 3rem); }
h2{ font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.35rem); }

/* =========================================================================
   1. AURA DE FOND — mesh subtil supplementaire (pages publiques)
   ========================================================================= */
body:not(.dashboard-body):not(.auth-body)::after{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(1100px 620px at 8% -10%, rgba(13,110,253,.09), transparent 55%),
        radial-gradient(900px 560px at 108% 12%, rgba(23,195,255,.10), transparent 55%);
    opacity:.9;
}

/* Curseur lumineux ambiant (injecte par JS en desktop uniquement) —
   le site etant a dominante sombre, on utilise "screen" partout pour
   que le halo bleu s'ajoute a la lumiere plutot que de l'assombrir. */
.up-cursor-glow{
    position:fixed; top:0; left:0; width:460px; height:460px;
    border-radius:50%; pointer-events:none; z-index:1;
    background:radial-gradient(circle, rgba(23,195,255,.20), rgba(13,110,253,.09) 45%, transparent 72%);
    transform:translate3d(-50%,-50%,0);
    mix-blend-mode:screen;
    opacity:.6;
    will-change:transform;
}
@media (hover:none), (pointer:coarse){ .up-cursor-glow{ display:none; } }

/* =========================================================================
   2. BOUTONS — profondeur, halo, relief premium
   ========================================================================= */
.btn, .btn-outline, .btn-opportunity, .btn-contact, .auth-submit,
.btn-nav, .dg-gold-btn, .dg-live-btn, .dg-cta, .dash-cta{
    position:relative;
    isolation:isolate;
    transition: transform .35s var(--up-ease), box-shadow .35s var(--up-ease), filter .35s ease;
}
.btn::after, .btn-opportunity::after, .auth-submit::after,
.dg-gold-btn::after, .dash-cta::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -12px 20px rgba(0,0,0,.08);
    opacity:.7; pointer-events:none;
}
.btn:hover, .btn-opportunity:hover, .auth-submit:hover,
.dg-gold-btn:hover, .dash-cta:hover, .dg-live-btn:hover{
    filter:saturate(1.08) brightness(1.03);
    box-shadow: 0 20px 40px var(--up-glow-a), 0 4px 14px rgba(13,60,140,.18);
}
.btn:active, .btn-opportunity:active, .auth-submit:active,
.dg-gold-btn:active, .dash-cta:active{
    transform: translateY(1px) scale(.985) !important;
}

/* Feedback tactile (mobile) sur les elements sans hover */
@media (hover:none), (pointer:coarse){
    .btn:active, .btn-outline:active, .btn-opportunity:active, .auth-submit:active,
    .dg-gold-btn:active, .dg-live-btn:active, .dash-cta:active,
    .dg-stat-card:active, .dg-panel:active, .op-card:active, .why-item:active,
    .feature:active, .gallery-item:active, .faq-item:active, .auth-card:active{
        transform: scale(.975);
        transition: transform .12s ease;
    }
}

/* =========================================================================
   3. CARTES — verre premium, bordure lumineuse au survol, relief 3D
   ========================================================================= */
.dg-stat-card, .dg-panel, .op-card, .opportunity-card, .why-item, .feature,
.gallery-item, .faq-item, .auth-card, .dash-stat-card, .dash-panel{
    position:relative;
    transition: transform .4s var(--up-ease), box-shadow .4s var(--up-ease), border-color .4s ease;
}
.dg-stat-card::after, .dg-panel::after, .op-card::after, .opportunity-card::after,
.why-item::after, .feature::after, .auth-card::after{
    content:"";
    position:absolute; inset:-1px; border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, var(--up-glow-a), transparent 30%, transparent 70%, var(--up-glow-b));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:1;
}
.dg-stat-card:hover::after, .dg-panel:hover::after, .op-card:hover::after,
.opportunity-card:hover::after, .why-item:hover::after, .feature:hover::after,
.auth-card:hover::after{ opacity:1; }

.dg-stat-card:hover, .dg-panel:hover, .dash-panel:hover, .dash-stat-card:hover{
    box-shadow: 0 30px 60px rgba(6,20,50,.35), 0 0 0 1px var(--up-line), 0 0 40px rgba(23,195,255,.12);
}

/* Cartes sur pages publiques (fond sombre) : halo bleu au survol */
body:not(.dashboard-body) .op-card:hover,
body:not(.dashboard-body) .opportunity-card:hover,
body:not(.dashboard-body) .why-item:hover,
body:not(.dashboard-body) .feature:hover,
body:not(.dashboard-body) .gallery-item:hover,
body:not(.dashboard-body) .faq-item:hover{
    box-shadow: 0 26px 54px rgba(0,0,0,.4), 0 0 40px rgba(13,110,253,.18), 0 0 0 1px var(--up-line);
    transform: translateY(-6px);
}

/* =========================================================================
   4. FORMULAIRES — focus premium, champs plus confortables
   ========================================================================= */
.auth-input{
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.auth-input:focus-within{
    box-shadow: 0 0 0 4px rgba(13,110,253,.16), 0 14px 30px rgba(13,110,253,.14);
    border-color: var(--up-blue-2) !important;
    transform: translateY(-1px);
}
.auth-input input{ font-size:16px; } /* evite le zoom auto iOS */
.auth-field label{ letter-spacing:.02em; }

.auth-submit{
    background: linear-gradient(135deg, var(--up-blue) 0%, var(--up-blue-2) 55%, var(--up-cyan) 100%) !important;
    background-size: 180% 180%;
    animation: upGradientShift 6s ease infinite;
}
@keyframes upGradientShift{
    0%,100%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
}

/* =========================================================================
   5. TABLEAUX — lignes plus lisibles, survol premium
   ========================================================================= */
.dg-table{ border-radius:14px; overflow:hidden; }
.dg-table tbody tr{ transition: background .25s ease; }
.dg-table tbody tr:hover{ background: rgba(13,110,253,.06); }
.theme-light .dg-table tbody tr:hover{ background: rgba(13,110,253,.05); }

/* =========================================================================
   6. SIDEBAR / TOPBAR — profondeur, ligne active plus vivante
   ========================================================================= */
.dash-sidebar{ backdrop-filter: blur(18px) saturate(1.2); }
.dash-nav a{ position:relative; transition: background .3s ease, color .3s ease, transform .25s ease; }
.dash-nav a.active{
    box-shadow: inset 0 0 0 1px rgba(23,195,255,.22), 0 8px 22px rgba(13,110,253,.18);
}
.dash-nav a:hover{ transform: translateX(3px); }

.dg-user-avatar, .dg-member-avatar, .dash-avatar{
    box-shadow: 0 6px 16px rgba(13,110,253,.35);
}

/* =========================================================================
   7. ANIMATIONS D'ENTREE — reveal generique complementaire
   ========================================================================= */
.up-reveal{
    opacity:0;
    transform: translateY(24px) scale(.98);
    transition: opacity .7s var(--up-ease), transform .7s var(--up-ease);
}
.up-reveal.up-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
    .up-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count:1 !important; }
}

/* =========================================================================
   8. RESPONSIVE — finitions paysage / tablette / notch
   ========================================================================= */

/* Telephone en mode paysage (hauteur reduite) */
@media (max-height: 480px) and (orientation: landscape){
    .auth-section{ padding: 90px 5% 40px; min-height:auto; }
    .dash-sidebar{ padding-top:14px; }
    .dg-topbar{ margin-bottom:16px; }
    section{ padding-top: 40px; padding-bottom: 40px; }
}

/* Tablette (portrait et paysage) */
@media (min-width: 768px) and (max-width: 1024px){
    .dg-stats{ grid-template-columns: repeat(2, 1fr); }
    .dg-grid-2{ grid-template-columns: 1fr; }
    .auth-wrapper{ max-width: 92vw; }
}

/* Petits telephones : garantir qu'aucune carte ne deborde */
@media (max-width: 420px){
    .container{ padding-left:16px; padding-right:16px; }
    .dg-stat-card, .dg-panel, .auth-card{ padding: 16px; }
    h1{ word-break: break-word; }
}

/* Empeche tout element positionne en absolu/fixe de forcer un scroll horizontal */
.dw-orb-field, .dara-3d-bg, .dash-bg-orb{ max-width:100vw; }