/* ============================================================
   HEX UI — Design System
   Chargé APRÈS style.css → source de vérité pour tous les
   styles interactifs. Annule les définitions dupliquées.
   ============================================================ */

/* ============================================================
   TOKENS — transitions & états interactifs
   ============================================================ */
:root {
    /* Durées */
    --t-fast   : 130ms ease;
    --t-base   : 210ms ease;
    --t-slow   : 360ms ease;
    --t-spring : 240ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Boutons */
    --btn-primary-from     : #5865F2;
    --btn-primary-to       : #a855f7;
    --btn-primary-glow     : 0 0 22px rgba(88, 101, 242, .58), 0 0 48px rgba(168, 85, 247, .26), 0 2px 8px rgba(0,0,0,.28);
    --btn-primary-glow-h   : 0 0 32px rgba(88, 101, 242, .80), 0 0 68px rgba(168, 85, 247, .42), 0 4px 16px rgba(0,0,0,.36);
    --btn-lift             : translateY(-2px);
    --btn-lift-sm          : translateY(-1px);

    /* Cartes */
    --card-border-h : rgba(99, 102, 241, .35);
    --card-shadow-h : 0 28px 56px rgba(0, 0, 0, .45), 0 0 0 1px rgba(88, 101, 242, .08) inset;
    --card-lift     : translateY(-5px);

    /* Texte */
    --link-color   : #a5b4fc;
    --link-hover   : #c4b5fd;
}

/* ============================================================
   BOUTONS — définition unique et autoritative
   ============================================================ */
.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 10px 22px;
    border-radius   : var(--radius-md);
    font-size       : .9375rem;
    font-weight     : 600;
    font-family     : var(--font);
    line-height     : 1;
    white-space     : nowrap;
    border          : 1px solid transparent;
    cursor          : pointer;
    text-decoration : none;
    position        : relative;
    overflow        : hidden;
    -webkit-user-select: none;
    user-select     : none;
    transition      :
        background    var(--t-base),
        color         var(--t-base),
        border-color  var(--t-base),
        box-shadow    var(--t-base),
        transform     var(--t-base),
        opacity       var(--t-base);
}

.btn:focus-visible {
    outline        : 2px solid rgba(88, 101, 242, .8);
    outline-offset : 3px;
}
.btn:active {
    transform : scale(.97) !important;
    transition-duration : 60ms !important;
}
.btn:disabled,
.btn[disabled] {
    opacity        : .42;
    cursor         : not-allowed;
    pointer-events : none;
}

/* Primary */
.btn--primary {
    background      : linear-gradient(135deg, var(--btn-primary-from) 0%, var(--btn-primary-to) 100%);
    color           : #fff;
    border-color    : transparent;
    box-shadow      : var(--btn-primary-glow);
    background-size : 200% 100%;
    position        : relative;
    overflow        : hidden;
}
.btn--primary::before {
    content         : '';
    position        : absolute;
    inset           : 0;
    background      : linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
    background-size : 200% 100%;
    background-position: -100% 0;
    transition      : background-position .5s ease;
}
.btn--primary:hover::before { background-position: 200% 0; }
.btn--primary:hover {
    background  : linear-gradient(135deg, #818cf8 0%, #b975f9 100%);
    box-shadow  : var(--btn-primary-glow-h);
    transform   : var(--btn-lift);
    color       : #fff;
}

/* Ghost */
.btn--ghost {
    background   : rgba(88, 101, 242, .09);
    color        : var(--text-0);
    border-color : rgba(99, 102, 241, .42);
}
.btn--ghost:hover {
    background   : rgba(88, 101, 242, .18);
    border-color : rgba(99, 102, 241, .85);
    color        : #c4b5fd;
    transform    : var(--btn-lift);
    box-shadow   : 0 0 20px rgba(88, 101, 242, .32), 0 0 40px rgba(168,85,247,.12), inset 0 0 14px rgba(88, 101, 242, .06);
}

/* Outline */
.btn--outline {
    background   : transparent;
    color        : var(--text-1);
    border-color : rgba(88, 101, 242, .35);
}
.btn--outline:hover {
    background   : rgba(88, 101, 242, .08);
    border-color : rgba(88, 101, 242, .70);
    color        : #a5b4fc;
    transform    : var(--btn-lift);
    box-shadow   : 0 0 12px rgba(88, 101, 242, .22);
}

/* Danger */
.btn--danger {
    background   : rgba(239, 68, 68, .12);
    color        : #f87171;
    border-color : rgba(239, 68, 68, .30);
}
.btn--danger:hover {
    background   : rgba(239, 68, 68, .20);
    border-color : rgba(239, 68, 68, .60);
    color        : #fca5a5;
    transform    : var(--btn-lift);
    box-shadow   : 0 0 14px rgba(239, 68, 68, .30);
}

/* Success */
.btn--success {
    background   : rgba(34, 197, 94, .12);
    color        : #4ade80;
    border-color : rgba(34, 197, 94, .30);
}
.btn--success:hover {
    background   : rgba(34, 197, 94, .20);
    border-color : rgba(34, 197, 94, .60);
    color        : #86efac;
    transform    : var(--btn-lift);
    box-shadow   : 0 0 14px rgba(34, 197, 94, .30);
}

/* Error alias */
.btn--error {
    background   : rgba(239, 68, 68, .12);
    color        : #f87171;
    border-color : rgba(239, 68, 68, .30);
}
.btn--error:hover {
    background   : rgba(239, 68, 68, .22);
    border-color : rgba(239, 68, 68, .60);
    color        : #fca5a5;
    transform    : var(--btn-lift-sm);
}

/* Green (active state) */
.btn--green {
    background   : rgba(34, 197, 94, .12);
    color        : #4ade80;
    border-color : rgba(34, 197, 94, .30);
}
.btn--green:hover {
    background   : rgba(34, 197, 94, .20);
    border-color : rgba(34, 197, 94, .55);
    color        : #86efac;
    transform    : var(--btn-lift-sm);
    box-shadow   : 0 0 12px rgba(34, 197, 94, .25);
}

/* Tailles */
.btn--xs   { padding: 4px 10px;   font-size: .76rem; border-radius: var(--radius-sm); }
.btn--sm   { padding: 7px 16px;   font-size: .875rem; border-radius: 8px; }
.btn--lg   { padding: 13px 28px;  font-size: 1rem;    border-radius: 12px; }
.btn--full { width: 100%; }
.btn--icon { padding: 9px; gap: 0; }

/* Ripple — injecté par ui.js */
.btn__ripple {
    position      : absolute;
    border-radius : 50%;
    background    : rgba(255, 255, 255, .18);
    transform     : scale(0);
    animation     : ui-ripple .55s ease-out forwards;
    pointer-events: none;
}
@keyframes ui-ripple {
    to { transform: scale(1); opacity: 0; }
}

/* ============================================================
   LIENS NAV — underline animé
   ============================================================ */
.nav-link {
    position    : relative;
    transition  : color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.nav-link::after {
    content      : '';
    position     : absolute;
    bottom       : -2px;
    left         : 50%;
    right        : 50%;
    height       : 2px;
    background   : var(--accent);
    border-radius: 2px;
    box-shadow   : 0 0 8px rgba(88, 101, 242, .7);
    transition   : left var(--t-base), right var(--t-base), opacity var(--t-base);
    opacity      : 0;
    pointer-events: none;
}
.nav-link:hover::after,
.nav-link--active::after {
    left    : 10%;
    right   : 10%;
    opacity : 1;
}

/* ============================================================
   CARTES — hover lift & glow cohérents
   ============================================================ */
.feature-card,
.store-card,
.pricing-card,
.instance-card,
.shop-card,
.account-section-card:not(.account-security-card),
.dash-stat,
.bot-trust-item,
.stat-card {
    transition :
        border-color var(--t-base),
        box-shadow   var(--t-base),
        transform    var(--t-base),
        background   var(--t-base);
}

.feature-card:hover,
.store-card:hover,
.pricing-card:hover,
.instance-card:hover,
.shop-card:hover {
    border-color : var(--card-border-h);
    box-shadow   : var(--card-shadow-h);
    transform    : var(--card-lift);
}

/* Cursor-glow card (classe à ajouter via EJS ou JS) */
.glow-card {
    position : relative;
    overflow : hidden;
}
.glow-card::before {
    content       : '';
    position      : absolute;
    width         : 260px;
    height        : 260px;
    border-radius : 50%;
    background    : radial-gradient(circle, rgba(88, 101, 242, .14) 0%, transparent 70%);
    transform     : translate(-50%, -50%);
    left          : var(--glow-x, -300px);
    top           : var(--glow-y, -300px);
    pointer-events: none;
    z-index       : 0;
    opacity       : 0;
    transition    : opacity var(--t-base);
}
.glow-card:hover::before { opacity: 1; }

/* ============================================================
   FORMULAIRES — focus ring cohérent
   ============================================================ */
.form-input,
.form-select,
.form-textarea {
    background      : linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    border          : 1px solid rgba(255,255,255,.12);
    border-radius   : 18px;
    box-shadow      : inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.18);
    transition :
        border-color var(--t-base),
        transform    var(--t-base),
        box-shadow   var(--t-base),
        background   var(--t-base);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline      : none;
    border-color : rgba(88, 101, 242, .70);
    background   : linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    box-shadow   : 0 0 0 4px rgba(88, 101, 242, .14), 0 18px 36px rgba(0,0,0,.24);
    transform    : translateY(-1px);
}
.form-input:hover:not(:focus),
.form-select:hover:not(:focus),
.form-textarea:hover:not(:focus) {
    border-color : rgba(88, 101, 242, .42);
    background   : linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(241, 241, 246, .34);
}

.form-select {
    padding-right    : 46px;
    background-image : linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4d2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, calc(100% - 16px) 50%;
    background-size  : auto, 18px 18px;
}

.form-select option {
    background: #171828;
    color: #f1f1f6;
}

/* ============================================================
   TEXTE — utilitaires cohérents
   ============================================================ */
.text-accent {
    background              : linear-gradient(120deg, #ff73c7, #c084fc 30%, #818cf8 58%, #38bdf8 80%, #34d399);
    -webkit-background-clip : text;
    background-clip         : text;
    color                   : transparent;
    background-size         : 200% auto;
    animation               : ui-gradient-shift 6s linear infinite;
}
.text-gradient {
    background              : linear-gradient(115deg, #818cf8, #c084fc 52%, #22d3ee);
    -webkit-background-clip : text;
    background-clip         : text;
    color                   : transparent;
}
.text-muted  { color: var(--text-2); }
.text-soft   { color: var(--text-1); }
.text-strong { color: var(--text-0); font-weight: 600; }
.text-accent-solid { color: var(--accent); }

@keyframes ui-gradient-shift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ============================================================
   LIENS (hors nav, hors bouton)
   ============================================================ */
.footer__list a,
.footer__social-link {
    transition : color var(--t-base), opacity var(--t-base);
}
.footer__list a:hover    { color: var(--text-0); }
.footer__social-link:hover { opacity: .8; }

/* ============================================================
   BADGES — système unifié
   ============================================================ */
.badge {
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    padding         : 3px 10px;
    border-radius   : 20px;
    font-size       : .75rem;
    font-weight     : 600;
    letter-spacing  : .02em;
    transition      : background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.badge--accent  { background: rgba(88, 101, 242, .14); color: #818cf8; border: 1px solid rgba(88, 101, 242, .30); }
.badge--success { background: rgba(34, 197, 94, .12);  color: #4ade80; border: 1px solid rgba(34, 197, 94, .30); }
.badge--danger  { background: rgba(239, 68, 68, .12);  color: #f87171; border: 1px solid rgba(239, 68, 68, .30); }
.badge--warning { background: rgba(234, 179, 8, .12);  color: #fbbf24; border: 1px solid rgba(234, 179, 8, .30); }
.badge--muted   { background: rgba(255, 255, 255, .06); color: var(--text-2); border: 1px solid var(--border); }

/* ============================================================
   SCROLL ANIMATIONS — .fade-up
   ============================================================ */
.fade-up {
    opacity    : 0;
    transform  : translateY(20px);
    transition : opacity .50s ease, transform .50s ease;
}
.fade-up.visible {
    opacity   : 1;
    transform : translateY(0);
}

/* ============================================================
   SÉLECTION
   ============================================================ */
::selection {
    background : rgba(88, 101, 242, .30);
    color      : #fff;
}