/* ============================================================================
   QUEST RP — DESIGN SYSTEM  ·  "Île / Signal"
   Direction artistique cinématique inspirée de l'ambiance mystère/survie.
   Source unique de vérité : couleurs, typographie, composants.
   Toutes les classes sont préfixées « qr- » pour cohabiter sans conflit
   avec les styles inline des pages non encore migrées.
   ============================================================================ */

/* ─────────────────────────  TOKENS  ───────────────────────── */
:root {
    /* Marque — violet signal (plus froid/profond que l'ancien) */
    --violet-300: #A78BFA;
    --violet-400: #8B5CF6;
    --violet-500: #7C3AED;
    --violet-600: #6D28D9;
    --violet-700: #5B21B6;

    /* Secondaire (nature / tech) & accent (tension / signal) */
    --teal-400:  #2DD4BF;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;

    /* Sémantique */
    --success: #22C55E;
    --error:   #EF4444;
    --warning: #F59E0B;
    --info:    #3B82F6;
    --discord: #5865F2;

    /* Fonds (quasi-noirs à sous-teinte froide, pas violette) */
    --bg-900: #08080D;
    --bg-850: #0B0B12;
    --bg-800: #0E0E16;
    --surface:        #14141F;
    --surface-2:      #171722;
    --surface-hover:  #1B1B29;

    /* Contours & texte */
    --border:       rgba(124, 58, 237, 0.16);
    --border-soft:  rgba(255, 255, 255, 0.07);
    --border-strong:rgba(124, 58, 237, 0.40);
    --text:        #F5F5FA;
    --text-muted:  #A1A1B5;
    --text-faint:  #6C6C7E;

    /* Halo lumineux */
    --glow: rgba(124, 58, 237, 0.35);

    /* Typographie */
    --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

    /* Rayons */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Ombres / profondeur */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 12px 40px rgba(124, 58, 237, 0.28);

    /* Transitions */
    --t-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --t-med:  0.32s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container: 1200px;
    --header-h: 76px;
}

/* ─────────────────────────  RESET  ───────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg-900); }

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg-900);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Ambiance cinématique : dégradé profond + halo signal + grain + vignette */
body.qr-body {
    position: relative;
    background:
        radial-gradient(1100px 620px at 50% -8%, rgba(124, 58, 237, 0.14), transparent 60%),
        radial-gradient(900px 520px at 88% 12%, rgba(45, 212, 191, 0.05), transparent 55%),
        linear-gradient(180deg, var(--bg-850) 0%, var(--bg-900) 40%, #060609 100%);
    background-attachment: fixed;
}
/* Grain de film + vignette (n'interceptent pas les clics) */
body.qr-body::before,
body.qr-body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* z-index négatif : au-dessus du fond, mais derrière le contenu en flux
       — sans forcer une position sur les enfants (qui casserait le header fixe). */
    z-index: -1;
}
body.qr-body::before { /* vignette */
    background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
body.qr-body::after {  /* grain */
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
::selection { background: rgba(124, 58, 237, 0.35); color: #fff; }

/* ─────────────────────────  TYPO  ───────────────────────── */
.qr-h1, .qr-h2, .qr-h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.qr-h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.qr-h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.qr-h3 { font-size: 1.25rem; }
.qr-eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--violet-300);
}
.qr-lead { color: var(--text-muted); font-size: 1.1rem; line-height: 1.7; }
.qr-container { max-width: var(--container); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Titre à léger dégradé (usage parcimonieux) */
.qr-gradient-text {
    background: linear-gradient(120deg, #fff 15%, var(--violet-300) 60%, var(--violet-500) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ─────────────────────────  HEADER / NAV  ───────────────────────── */
.qr-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--header-h);
    display: flex; align-items: center;
    background: rgba(8, 8, 13, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border-soft);
    transition: border-color var(--t-med), background var(--t-med);
}
.qr-header.qr-scrolled { background: rgba(8, 8, 13, 0.9); border-bottom-color: var(--border); }
.qr-header-inner {
    width: 100%; max-width: 1500px; margin: 0 auto;
    padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between; position: relative;
}
.qr-logo { display: inline-flex; align-items: center; z-index: 2; }
.qr-logo img { height: 44px; width: auto; display: block; }

.qr-nav { display: flex; gap: 0.35rem; position: absolute; left: 50%; transform: translateX(-50%); }
.qr-nav a {
    position: relative; white-space: nowrap;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.92rem; font-weight: 500;
    padding: 0.5rem 0.85rem; border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.qr-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.qr-nav a.qr-active { color: var(--violet-300); }
.qr-nav a.qr-active::after {
    content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--violet-500), var(--teal-400));
}
.qr-header-right { display: flex; align-items: center; gap: 0.75rem; z-index: 2; }

.qr-user { display: flex; align-items: center; gap: 0.65rem; }
.qr-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--violet-500); object-fit: cover; }
.qr-username { font-weight: 500; font-size: 0.9rem; }

/* ─────────────────────────  BOUTONS  ───────────────────────── */
.qr-btn {
    --_bg: var(--violet-500);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
    padding: 0.72rem 1.4rem; border-radius: var(--r-pill);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    color: #fff; background: var(--_bg);
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.qr-btn svg { width: 18px; height: 18px; }
.qr-btn-primary { background: linear-gradient(135deg, var(--violet-500), var(--violet-600)); }
.qr-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.qr-btn-ghost {
    background: rgba(255, 255, 255, 0.04); color: var(--text);
    border-color: var(--border-strong); backdrop-filter: blur(8px);
}
.qr-btn-ghost:hover { background: rgba(124, 58, 237, 0.14); border-color: var(--violet-500); transform: translateY(-2px); }
.qr-btn-discord { background: linear-gradient(135deg, #5865F2, #4752C4); }
.qr-btn-discord:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(88, 101, 242, 0.4); }
.qr-btn-danger {
    background: rgba(239, 68, 68, 0.14); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35);
}
.qr-btn-danger:hover { background: rgba(239, 68, 68, 0.24); }
.qr-btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.qr-btn:disabled, .qr-btn.qr-disabled { opacity: 0.65; cursor: default; transform: none !important; box-shadow: none !important; }
.qr-btn.qr-accepted { background: linear-gradient(135deg, var(--success), #16a34a); }
.qr-btn.qr-pending  { background: linear-gradient(135deg, var(--amber-500), #d97706); }
.qr-btn.qr-rejected { background: linear-gradient(135deg, var(--error), #dc2626); }

/* ─────────────────────────  PILL / STATUT  ───────────────────────── */
.qr-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
    background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.28);
    color: #86efac; font-size: 0.82rem; font-weight: 600;
}
.qr-pill .qr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: qr-blink 2s ease-in-out infinite; }
@keyframes qr-blink { 50% { opacity: 0.4; } }

/* ─────────────────────────  CARTES  ───────────────────────── */
.qr-card {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 1.8rem;
    transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
}
.qr-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.qr-card-icon {
    width: 52px; height: 52px; border-radius: var(--r-md);
    display: grid; place-items: center; margin-bottom: 1.1rem;
    background: rgba(124, 58, 237, 0.12); border: 1px solid var(--border);
    color: var(--violet-300);
}
.qr-card-icon svg { width: 26px; height: 26px; }
.qr-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--text); }
.qr-card p  { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

/* ─────────────────────────  BADGES  ───────────────────────── */
.qr-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.7rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; }
.qr-badge-admin { background: linear-gradient(135deg, var(--violet-500), var(--amber-500)); color: #fff; }
.qr-badge-success { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.qr-badge-warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
.qr-badge-danger  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }

/* ─────────────────────────  FORMULAIRES  ───────────────────────── */
.qr-field { margin-bottom: 1.25rem; }
.qr-label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); }
.qr-label .qr-req { color: var(--violet-300); }
.qr-input, .qr-textarea, .qr-select {
    width: 100%; font-family: var(--font-body); font-size: 0.95rem; color: var(--text);
    background: var(--bg-800); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 0.8rem 1rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.qr-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.qr-input::placeholder, .qr-textarea::placeholder { color: var(--text-faint); }
.qr-input:focus, .qr-textarea:focus, .qr-select:focus {
    outline: none; border-color: var(--violet-500);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); background: var(--surface);
}
.qr-hint { font-size: 0.8rem; color: var(--text-faint); margin-top: 0.35rem; }

/* ─────────────────────────  TABLEAUX  ───────────────────────── */
.qr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.qr-table thead th {
    text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
    padding: 0.9rem 1rem; border-bottom: 1px solid var(--border);
}
.qr-table tbody td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--border-soft); }
.qr-table tbody tr { transition: background var(--t-fast); }
.qr-table tbody tr:hover { background: rgba(124, 58, 237, 0.06); }

/* ─────────────────────────  TOASTS  ───────────────────────── */
.qr-toast {
    position: fixed; top: calc(var(--header-h) + 16px); right: 20px; z-index: 10000;
    max-width: 340px; padding: 0.9rem 1.1rem; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md); color: var(--text); font-size: 0.9rem; font-weight: 500;
    display: flex; align-items: center; gap: 0.6rem;
    transform: translateX(420px); transition: transform var(--t-med);
    border-left: 3px solid var(--info);
}
.qr-toast.qr-show { transform: translateX(0); }
.qr-toast.qr-success { border-left-color: var(--success); }
.qr-toast.qr-error   { border-left-color: var(--error); }
.qr-toast.qr-warning { border-left-color: var(--warning); }

/* ─────────────────────────  SKELETON  ───────────────────────── */
.qr-skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 37%, var(--surface) 63%);
    background-size: 400% 100%; animation: qr-shimmer 1.4s ease infinite; border-radius: var(--r-sm);
}
@keyframes qr-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ─────────────────────────  FOOTER  ───────────────────────── */
.qr-footer {
    margin-top: 6rem; padding: 3.5rem 0 1.5rem;
    background: rgba(8, 8, 13, 0.6); border-top: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
}
.qr-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.qr-footer-brand img { height: 46px; margin-bottom: 0.9rem; }
.qr-footer-brand p { color: var(--text-muted); font-size: 0.9rem; max-width: 280px; }
.qr-footer h4 { font-family: var(--font-display); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet-300); margin-bottom: 1rem; }
.qr-footer a { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; padding: 0.3rem 0; transition: color var(--t-fast), transform var(--t-fast); }
.qr-footer a:hover { color: var(--text); transform: translateX(4px); }
.qr-footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 0.85rem; }

/* ─────────────────────────  MENU MOBILE  ───────────────────────── */
.qr-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.4rem; z-index: 2; }
.qr-burger span { width: 24px; height: 2px; background: var(--violet-300); border-radius: 2px; transition: transform var(--t-fast), opacity var(--t-fast); }
.qr-burger.qr-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.qr-burger.qr-open span:nth-child(2) { opacity: 0; }
.qr-burger.qr-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.qr-mobile-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 899;
    background: rgba(8, 8, 13, 0.98); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border); padding: 1rem 0;
    transform: translateY(-120%); transition: transform var(--t-med);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.qr-mobile-nav.qr-open { transform: translateY(0); }
.qr-mobile-nav a { display: block; color: var(--text); text-decoration: none; padding: 0.9rem 1.5rem; font-size: 1.05rem; border-left: 3px solid transparent; }
.qr-mobile-nav a:hover, .qr-mobile-nav a.qr-active { background: rgba(124, 58, 237, 0.12); border-left-color: var(--violet-500); color: var(--violet-300); }
.qr-mobile-overlay { position: fixed; inset: 0; z-index: 898; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity var(--t-med); }
.qr-mobile-overlay.qr-open { opacity: 1; pointer-events: auto; }

/* ─────────────────────────  ANIMATIONS D'APPARITION  ───────────────────────── */
.qr-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.qr-reveal.qr-in { opacity: 1; transform: none; }

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width: 900px) {
    .qr-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .qr-nav { display: none; }
    .qr-burger { display: flex; }
    .qr-header-right .qr-desktop-only { display: none !important; }
    .qr-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─────────────────────────  ACCESSIBILITÉ  ───────────────────────── */
:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .qr-reveal { opacity: 1; transform: none; }
}