/* ═══════════════════════════════════════════════════════════
   CHRONO PERSONA — app.css
   Styles globaux partagés (variables, reset, base)
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --void:          #030508;
  --surface:       #0d1025;
  --glass-border:  rgba(255,255,255,0.07);
  --text-primary:  #e0e5f0;
  --text-secondary:#9ba5be;
  --text-muted:    #5a6482;
  --teal:          #00d4aa;
  --gold:          #c9a84c;
  --violet:        #8b5cf6;
  --rose:          #f472b6;
  --green:         #4ade80;
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'Space Mono', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  background:var(--void);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
img { max-width:100%; }

/* ── Aurora ── */
.aurora { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.ao { position:absolute;border-radius:50%;filter:blur(80px);opacity:0.045; }
.ao1 { width:600px;height:600px;background:radial-gradient(circle,var(--violet),transparent 70%);top:-200px;right:-100px;animation:drift1 18s ease-in-out infinite; }
.ao2 { width:500px;height:500px;background:radial-gradient(circle,var(--teal),transparent 70%);bottom:-150px;left:-100px;animation:drift2 22s ease-in-out infinite; }
.ao3 { width:400px;height:400px;background:radial-gradient(circle,var(--gold),transparent 70%);top:40%;left:30%;animation:drift3 26s ease-in-out infinite;opacity:0.025; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,40px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-30px)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(30px,20px)} 66%{transform:translate(-20px,-30px)} }

/* ── Glassmorphism ── */
.glass {
  background:rgba(255,255,255,0.025);
  border:1px solid var(--glass-border);
  border-radius:16px;
  backdrop-filter:blur(12px);
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width:4px; }
::-webkit-scrollbar-track  { background:transparent; }
::-webkit-scrollbar-thumb  { background:rgba(255,255,255,0.08);border-radius:2px; }
::selection { background:rgba(0,212,170,0.2);color:var(--text-primary); }

/* ── Typographie utilitaires ── */
.font-display   { font-family:var(--font-display); }
.font-mono      { font-family:var(--font-mono); }
.text-teal      { color:var(--teal); }
.text-gold      { color:var(--gold); }
.text-violet    { color:var(--violet); }
.text-muted     { color:var(--text-muted); }
.text-secondary { color:var(--text-secondary); }


/* ── HEADER ── */
.site-header { position:sticky;top:0;z-index:50;padding:0 32px;height:64px;display:flex;align-items:center;background:rgba(3,5,8,0.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.04); }
.site-header.scrolled { border-bottom-color:rgba(255,255,255,0.07); }
.nav-inner { width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:32px; }
.nav-logo { display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary);font-size:1.05rem;font-weight:500;letter-spacing:0.06em;flex-shrink:0; }
.logo-svg { flex-shrink:0;width:52px;height:52px; }
.nav-links { display:flex;list-style:none;gap:4px;margin:0;padding:0; }
.nav-link { color:var(--text-secondary);text-decoration:none;font-size:0.82rem;padding:7px 12px;border-radius:8px;transition:all 0.2s; }
.nav-link:hover,.nav-link.active { color:var(--text-primary);background:rgba(255,255,255,0.05); }
.nav-link.active { color:var(--teal); }
.nav-actions { display:flex;align-items:center;gap:10px;margin-left:auto; }
.nav-premium-btn { font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.15em;padding:7px 14px;background:rgba(201,168,76,0.08);border:1px solid rgba(201,168,76,0.25);border-radius:20px;color:var(--gold);text-decoration:none;transition:all 0.25s; }
.nav-premium-btn:hover { background:rgba(201,168,76,0.14);transform:translateY(-1px); }
.nav-premium-badge { font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.15em;padding:7px 14px;background:rgba(0,212,170,0.06);border:1px solid rgba(0,212,170,0.15);border-radius:20px;color:var(--teal); }
.nav-cta { padding:9px 20px;border-radius:10px;background:linear-gradient(135deg,rgba(0,212,170,0.15),rgba(0,212,170,0.25));border:1px solid rgba(0,212,170,0.3);color:var(--teal);text-decoration:none;font-size:0.8rem;font-weight:500;transition:all 0.25s; }
.nav-cta:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,212,170,0.2); }

/* ── Profil dropdown ── */
.nav-profile { position:relative; }
.profile-trigger { display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:20px;padding:5px 12px 5px 5px;cursor:pointer;transition:all 0.2s; }
.profile-trigger:hover { background:rgba(255,255,255,0.07); }
.profile-initials { width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,rgba(139,92,246,0.3),rgba(0,212,170,0.2));display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:600;color:var(--text-primary); }
.profile-arrow { font-size:0.55rem;color:var(--text-muted);transition:transform 0.2s; }
.nav-profile.open .profile-arrow { transform:rotate(180deg); }
.profile-dropdown { position:absolute;top:calc(100% + 8px);right:0;width:220px;background:rgba(13,16,37,0.98);border:1px solid rgba(255,255,255,0.08);border-radius:14px;backdrop-filter:blur(20px);box-shadow:0 16px 48px rgba(0,0,0,0.6);z-index:100;opacity:0;transform:translateY(-6px) scale(0.97);transition:all 0.2s cubic-bezier(0.16,1,0.3,1);pointer-events:none; }
.nav-profile.open .profile-dropdown { opacity:1;transform:translateY(0) scale(1);pointer-events:auto; }
.pd-header { padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,0.05); }
.pd-name { font-size:0.85rem;font-weight:500;color:var(--text-primary);margin-bottom:2px; }
.pd-archetype { font-size:0.7rem;color:var(--teal); }
.pd-links { padding:8px; }
.pd-link { display:flex;align-items:center;padding:8px 10px;border-radius:8px;color:var(--text-secondary);text-decoration:none;font-size:0.78rem;transition:all 0.15s;justify-content:space-between; }
.pd-link:hover { background:rgba(255,255,255,0.04);color:var(--text-primary); }
.pd-badge { background:rgba(244,63,138,0.15);color:#f472b6;font-size:0.6rem;padding:1px 5px;border-radius:4px; }
.pd-logout { display:block;padding:12px 16px;font-size:0.78rem;color:rgba(244,63,138,0.6);text-decoration:none;border-top:1px solid rgba(255,255,255,0.05);transition:color 0.2s; }
.pd-logout:hover { color:#f472b6; }

/* ── Hamburger / Menu mobile ── */
.nav-hamburger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px; }
.nav-hamburger span { display:block;width:20px;height:1.5px;background:var(--text-secondary);border-radius:1px;transition:all 0.3s; }
.mobile-menu { display:none;position:fixed;inset:64px 0 0;background:rgba(3,5,8,0.97);z-index:49;padding:24px;flex-direction:column;gap:4px;overflow-y:auto; }
.mobile-menu.open { display:flex; }
.mm-link { padding:14px 16px;border-radius:10px;color:var(--text-secondary);text-decoration:none;font-size:0.88rem;border:1px solid transparent;transition:all 0.2s; }
.mm-link:hover { background:rgba(255,255,255,0.04);color:var(--text-primary);border-color:var(--glass-border); }
.mm-premium { color:var(--gold);border-color:rgba(201,168,76,0.2);background:rgba(201,168,76,0.04); }
.mm-logout  { color:rgba(244,63,138,0.6);margin-top:auto; }

/* ── Flash global ── */
.global-flash { position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:80;padding:12px 20px 12px 16px;border-radius:10px;font-size:0.82rem;display:flex;align-items:center;gap:12px;max-width:480px;box-shadow:0 8px 32px rgba(0,0,0,0.4);animation:slideDown 0.3s ease; }
@keyframes slideDown { from{opacity:0;transform:translateX(-50%) translateY(-10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.flash-success { background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.25);color:var(--teal); }
.flash-error   { background:rgba(244,63,138,0.1);border:1px solid rgba(244,63,138,0.25);color:#f472b6; }
.flash-info    { background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.25);color:var(--gold); }
.flash-premium { background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.25);color:var(--violet); }
.flash-close   { background:none;border:none;color:currentColor;opacity:0.5;cursor:pointer;padding:0;font-size:0.75rem;margin-left:auto;flex-shrink:0; }
.flash-close:hover { opacity:1; }

/* ── Main content ── */
.main-content { min-height:calc(100vh - 64px);position:relative;z-index:1; }

/* ── Footer ── */
.site-footer { border-top:1px solid rgba(255,255,255,0.05);padding:56px 32px 32px;background:rgba(3,5,8,0.6); }
.footer-inner { max-width:1100px;margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:48px;margin-bottom:40px; }
.footer-logo { display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary);font-size:0.85rem;font-weight:400;margin-bottom:10px; }
.footer-tagline { font-size:0.78rem;color:var(--text-muted);line-height:1.6; }
.footer-cols { display:grid;grid-template-columns:repeat(4,1fr);gap:24px; }
.fc-title { font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px; }
.fc-link { display:block;color:var(--text-secondary);text-decoration:none;font-size:0.78rem;padding:4px 0;transition:color 0.2s; }
.fc-link:hover { color:var(--teal); }
.footer-bottom { max-width:1100px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;gap:8px;font-size:0.72rem;color:var(--text-muted);flex-wrap:wrap; }
.fb-sep { opacity:0.3; }

/* ── Responsive ── */
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex !important; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-cols  { grid-template-columns:1fr 1fr; }
  .site-header  { padding:0 16px; }
}
@media (max-width:480px) {
  .footer-cols { grid-template-columns:1fr; }
}

/* ── Curseur système — override universel haute priorité ── */
html, body { cursor:default !important; }
a, button, label, [role=button],
input[type=checkbox], input[type=radio],
input[type=submit], input[type=button],
input[type=reset], select,
.btn, [onclick], summary { cursor:pointer !important; }
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=url],
input[type=date], input[type=time], textarea { cursor:text !important; }
[disabled], [disabled] * { cursor:not-allowed !important; }
#cursor, #cursor-ring, #cur, #ring { display:none !important; }