/* ==========================================================================
   Epsylon Box — CORE
   Fondations : imports fonts, variables (dark/light), reset, typographie,
   utilities globales (scrollbar, focus, skip-link, animations génériques).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=DM+Sans:wght@400;500;600&display=swap');

/* === THEME TOKENS === */
:root {
  --bg: #0a0a0f;
  --bg2: #12121a;
  --bg3: #1a1a26;
  --surface: #1e1e2e;
  --border: #2a2a3a;
  --text: #e8e8f0;
  --text2: #9898b0;
  --accent: #00d4ff;
  --accent2: #7b5cff;
  --accent3: #ff6b9d;
  --glow: rgba(0, 212, 255, 0.15);
  --glow2: rgba(123, 92, 255, 0.15);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --bg2: #eaebef;
  --bg3: #dfe0e6;
  --surface: #ffffff;
  --border: #d0d1d9;
  --text: #1a1a2e;
  --text2: #5c5c72;
  --accent: #0099cc;
  --accent2: #6244cc;
  --accent3: #e04577;
  --glow: rgba(0, 153, 204, 0.1);
  --glow2: rgba(98, 68, 204, 0.1);
  --shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-theme="light"] .site-header { background: rgba(244, 245, 247, 0.92); }
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .hero::before { opacity: 0.5; }
[data-theme="light"] .hero h1 .gradient { background: linear-gradient(135deg, #0088bb, #5533bb, #cc3366); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .tool-card:hover { box-shadow: 0 8px 32px rgba(0, 100, 180, 0.08); }
[data-theme="light"] .copy-toast { background: var(--accent); color: #fff; }
[data-theme="light"] .badge.new { background: rgba(0,180,80,0.1); color: #008844; }
[data-theme="light"] .badge.tools { background: rgba(0,130,190,0.08); color: #006699; }
[data-theme="light"] .bottom-nav { background: rgba(244, 245, 247, 0.95); }

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === GLOBAL ANIMATIONS === */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.visible { animation: fadeUp 0.4s cubic-bezier(.4,0,.2,1) forwards; }

.tool-grid .tool-card.visible:nth-child(1) { animation-delay: 0s; }
.tool-grid .tool-card.visible:nth-child(2) { animation-delay: .04s; }
.tool-grid .tool-card.visible:nth-child(3) { animation-delay: .08s; }
.tool-grid .tool-card.visible:nth-child(4) { animation-delay: .12s; }
.tool-grid .tool-card.visible:nth-child(5) { animation-delay: .16s; }
.tool-grid .tool-card.visible:nth-child(6) { animation-delay: .20s; }
.tool-grid .tool-card.visible:nth-child(7) { animation-delay: .24s; }
.tool-grid .tool-card.visible:nth-child(8) { animation-delay: .28s; }
.tool-grid .tool-card.visible:nth-child(9) { animation-delay: .32s; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; animation: pulse 2s ease infinite; margin-right: 4px; }

/* === SELECTION === */
::selection { background: var(--accent); color: #000; }
::-moz-selection { background: var(--accent); color: #000; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* === FOCUS VISIBLE (accessibility) === */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* === SKIP-TO-CONTENT === */
.skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: #000; padding: 10px 16px; font-weight: 700; font-size: 0.9rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 9999; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 0; }