/* ============================================================
   EDITPDFREE — THEME CLEAN & PRO
   ============================================================ */

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

/* ─── Design Tokens ────────────────────────────────────────── */
:root {
  --ep-coral:  #ff3a54;
  --ep-violet: #7c3aed;
  --ep-green:  #10d488;
  --ep-amber:  #ffb400;
  --ep-bg:     #060910;
  --ep-border: rgba(255,255,255,0.065);
}

/* ─── Global Typography ─────────────────────────────────────── */
h1, h2, h3, h4, .font-black, .font-extrabold, .font-bold {
  font-family: 'Outfit', -apple-system, sans-serif !important;
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
header.bg-\[#0f172a\],
.bg-\[#0f172a\].sticky {
  background: #0a0d14 !important;
  border-bottom: 2px solid rgba(255,58,84,0.35) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
header.bg-\[#0f172a\] .max-w-7xl,
.bg-\[#0f172a\].sticky .max-w-7xl {
  height: 64px !important;
}

/* Force taille correcte sur TOUS les liens nav */
header nav a {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* Logo */
header a[href="/"] span[style*="color:#3b82f6"] { color: var(--ep-coral) !important; }
header a[href="/"] span[style*="color:#10b981"] { color: var(--ep-green) !important; }

/* Nav links */
header nav a.text-gray-300 { color: #94a3b8 !important; }
header nav a.text-gray-300:hover { color: #f1f5f9 !important; }
header nav a.text-emerald-400 { color: var(--ep-green) !important; }
header nav a.text-blue-400    { color: #60a5fa !important; }
header nav a.text-amber-400   { color: var(--ep-amber) !important; }

/* Download App button */
header nav a.bg-blue-600 {
  background: var(--ep-coral) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(255,58,84,0.35) !important;
  transition: all 0.2s ease !important;
}
header nav a.bg-blue-600:hover {
  background: #e02d47 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(255,58,84,0.5) !important;
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero-gradient {
  background:
    radial-gradient(ellipse 70% 60% at 10% 50%, rgba(124,58,237,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 50%, rgba(255,58,84,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #060910 0%, #090f1e 100%) !important;
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
  pointer-events: none;
}
.hero-gradient::after {
  content: '';
  position: absolute;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,58,84,0.1) 0%, transparent 70%);
  top: -80px; right: -80px; pointer-events: none;
  animation: hero-orb 6s ease-in-out infinite;
}
@keyframes hero-orb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12) translate(-15px, 15px); }
}

.tool-count-badge {
  background: rgba(255,58,84,0.1) !important;
  border: 1px solid rgba(255,58,84,0.25) !important;
  color: #ff8fa0 !important;
}
.tool-count-badge .badge-dot {
  background: var(--ep-coral) !important;
  box-shadow: 0 0 6px var(--ep-coral);
}

section.hero-gradient h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  background: linear-gradient(135deg, #ffffff 30%, #c8d5e8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
section.hero-gradient p.text-blue-200 { color: #8ea5c8 !important; }

.hero-cta.bg-white {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  transition: all 0.2s ease !important;
}
.hero-cta.bg-white:hover {
  background: #f1f5f9 !important;
  transform: translateY(-2px) !important;
}
.hero-cta.bg-blue-500\/30 {
  background: rgba(255,58,84,0.12) !important;
  border-color: rgba(255,58,84,0.3) !important;
  color: #ffb3bc !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
.hero-cta.bg-blue-500\/30:hover {
  background: rgba(255,58,84,0.2) !important;
}

/* ════════════════════════════════════════════════════════════
   SECTION HEADINGS — propre, pas de gradient agressif
   ════════════════════════════════════════════════════════════ */
h2.text-gray-900,
h2.font-extrabold {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* ════════════════════════════════════════════════════════════
   POPULAR TOOLS — fond blanc propre
   ════════════════════════════════════════════════════════════ */
section.py-16.bg-white:first-of-type,
section.py-16.md\:py-24.bg-white {
  background: #ffffff !important;
}

/* Cartes populaires */
.tool-card-home {
  background: #fff !important;
  border: 1.5px solid #e8ecf3 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  transition: all 0.22s ease !important;
  position: relative; overflow: hidden;
}
.tool-card-home:hover {
  border-color: rgba(255,58,84,0.3) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.1) !important;
  transform: translateY(-4px) !important;
}
.tool-card-home:hover h3 { color: var(--ep-coral) !important; }
.tool-card-home h3 {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-size: 1.05rem !important;
  color: #0f172a !important;
  transition: color 0.2s ease !important;
}
.tool-card-home p.text-gray-500 { font-size: 0.84rem !important; line-height: 1.55 !important; }

/* Icônes */
.bg-red-50  { background: #fff1f2 !important; }
.text-red-500 { color: #f43f5e !important; }
.bg-blue-50 { background: #eff6ff !important; }
.text-blue-500 { color: #6366f1 !important; }

/* ════════════════════════════════════════════════════════════
   ALL TOOLS — fond gris clair, cartes blanches propres
   ════════════════════════════════════════════════════════════ */
section#all-tools {
  background: #f4f6fa !important;
}
section#all-tools h3 {
  color: #1e293b !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.015em !important;
}
section#all-tools h2.text-gray-900 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Badges catégories P/W/+ */
.w-8.h-8.bg-red-100 {
  background: linear-gradient(135deg, #ff3a54, #ff6b84) !important;
  color: white !important;
}
.w-8.h-8.bg-blue-100 {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  color: white !important;
}
.w-8.h-8.bg-amber-100 {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: white !important;
}

/* Petites cartes outils */
.flex.items-center.gap-3.bg-white.border.border-gray-200.rounded-xl {
  background: #fff !important;
  border: 1.5px solid #e8ecf3 !important;
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.flex.items-center.gap-3.bg-white.border.border-gray-200.rounded-xl:hover {
  border-color: rgba(255,58,84,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}
.flex.items-center.gap-3.bg-white.border.border-gray-200.rounded-xl:hover h4,
.flex.items-center.gap-3.bg-white.border.border-gray-200.rounded-xl:hover .group-hover\:text-blue-600 {
  color: var(--ep-coral) !important;
}
.flex.items-center.gap-3.bg-white.border.border-gray-200.rounded-xl h4 {
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  color: #334155 !important;
}

/* ════════════════════════════════════════════════════════════
   FEATURES / HOW IT WORKS
   ════════════════════════════════════════════════════════════ */
section.bg-gray-50 .rounded-2xl.bg-white,
section.py-16.bg-gray-50 .bg-white.rounded-2xl {
  background: #fff !important;
  border: 1.5px solid #e8ecf3 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition: all 0.22s ease !important;
}
section.py-16.bg-gray-50 .bg-white.rounded-2xl:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.09) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255,58,84,0.2) !important;
}
.bg-rose-100    { background: #fff1f2 !important; }
.bg-yellow-100  { background: #fefce8 !important; }
.bg-emerald-100 { background: #ecfdf5 !important; }
.bg-indigo-100  { background: #eef2ff !important; }

section.py-16.bg-white .w-14.h-14.bg-blue-600,
section.py-16.md\:py-24.bg-white .w-14.h-14.bg-blue-600 {
  background: linear-gradient(135deg, var(--ep-coral), #ff6b84) !important;
  box-shadow: 0 6px 20px rgba(255,58,84,0.3) !important;
  border-radius: 14px !important;
}

/* ════════════════════════════════════════════════════════════
   STATS — fond sombre existant, compteurs coral
   ════════════════════════════════════════════════════════════ */
section.py-16.bg-\[#0f172a\],
section.py-16.md\:py-24.bg-\[#0f172a\] {
  background: linear-gradient(160deg, #07090f 0%, #0c1220 60%, #070c16 100%) !important;
  position: relative; overflow: hidden;
}
section.py-16.bg-\[#0f172a\]::before,
section.py-16.md\:py-24.bg-\[#0f172a\]::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 20% 50%, rgba(124,58,237,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 50%, rgba(255,58,84,0.08) 0%, transparent 60%);
  pointer-events: none;
}
/* Compteurs SEULEMENT — sélecteur précis */
section.py-16.bg-\[#0f172a\] .counter,
section.py-16.md\:py-24.bg-\[#0f172a\] .counter {
  color: var(--ep-coral) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM SECTION
   ════════════════════════════════════════════════════════════ */
section#premiumBanner,
.bg-gradient-to-br.from-amber-50 {
  background: linear-gradient(135deg, #0c0d12 0%, #120c1e 50%, #0c1218 100%) !important;
  border-top: 1px solid var(--ep-border) !important;
  border-bottom: 1px solid var(--ep-border) !important;
  position: relative; overflow: hidden;
}
section#premiumBanner::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,0,0.05) 0%, transparent 70%);
  top: -150px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
section#premiumBanner .w-16.h-16 {
  background: linear-gradient(135deg, var(--ep-amber), #ff9100) !important;
  box-shadow: 0 6px 24px rgba(255,180,0,0.3) !important;
}
section#premiumBanner h2.text-gray-900 {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
section#premiumBanner p.text-gray-600 { color: #8896ad !important; }
section#premiumBanner a.bg-gradient-to-r {
  background: linear-gradient(135deg, var(--ep-amber), #ff9100) !important;
  color: #0c0d12 !important; font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(255,180,0,0.35) !important;
}
section#premiumBanner a.bg-gradient-to-r:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(255,180,0,0.5) !important;
}
section#premiumBanner span.text-amber-700 { color: var(--ep-amber) !important; }

/* ════════════════════════════════════════════════════════════
   BLOG
   ════════════════════════════════════════════════════════════ */
section.py-16.bg-white .bg-gray-50.rounded-2xl {
  background: #f8fafc !important;
  border: 1.5px solid #e8ecf3 !important;
  transition: all 0.22s ease !important;
}
section.py-16.bg-white .bg-gray-50.rounded-2xl:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,0.08) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255,58,84,0.15) !important;
}
section.py-16.bg-white .bg-gray-50.rounded-2xl:hover h3 { color: var(--ep-coral) !important; }
.from-blue-100.to-blue-200   { background: linear-gradient(135deg, #e8eeff, #c7d2fe) !important; }
.from-green-100.to-green-200 { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; }
.from-purple-100.to-purple-200 { background: linear-gradient(135deg, #ede9fe, #c4b5fd) !important; }
a.border-2.border-blue-600.text-blue-600 {
  border-color: var(--ep-coral) !important; color: var(--ep-coral) !important;
  border-radius: 10px !important; font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
a.border-2.border-blue-600.text-blue-600:hover {
  background: var(--ep-coral) !important; color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   TRUST BADGES
   ════════════════════════════════════════════════════════════ */
section.py-16 .w-14.h-14.bg-green-50  { background: rgba(16,212,136,0.08) !important; border: 1px solid rgba(16,212,136,0.15) !important; }
section.py-16 .w-14.h-14.bg-yellow-50 { background: rgba(255,180,0,0.08) !important;  border: 1px solid rgba(255,180,0,0.15) !important; }
section.py-16 .w-14.h-14.bg-blue-50   { background: rgba(99,102,241,0.08) !important;  border: 1px solid rgba(99,102,241,0.15) !important; }
section.py-16 .w-14.h-14.bg-purple-50 { background: rgba(124,58,237,0.08) !important;  border: 1px solid rgba(124,58,237,0.15) !important; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer.bg-\[#0f172a\] {
  background: #060910 !important;
  border-top: 1.5px solid rgba(255,58,84,0.2) !important;
}
footer a { transition: color 0.15s ease !important; }
footer a:hover { color: var(--ep-coral) !important; }

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
.fade-in { animation: ep-fade-up 0.6s cubic-bezier(0.4,0,0.2,1) forwards; opacity: 0; transform: translateY(16px); }
.fade-in.visible { opacity: 1 !important; transform: translateY(0) !important; }
@keyframes ep-fade-up { to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0d14; }
::-webkit-scrollbar-thumb { background: #1e2d45; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3d5c; }

/* ════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ════════════════════════════════════════════════════════════ */
.ep-bottom-nav {
  display: none;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 60px !important;
  background: #07090f !important;
  border-top: 1.5px solid rgba(255,58,84,0.3) !important;
  z-index: 99999 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
  align-items: stretch !important;
}
@media (max-width: 900px) {
  .ep-bottom-nav { display: flex !important; }
  body { padding-bottom: 60px !important; }
  .nav-mobile-toggle { display: none !important; }
}
.ep-bottom-nav a {
  flex: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  color: #3d5166 !important;
  text-decoration: none !important;
  font-size: 0.6rem !important; font-weight: 700 !important;
  gap: 2px !important;
  border-top: 2.5px solid transparent !important;
  transition: color 0.15s, border-color 0.15s !important;
  padding: 0 4px !important;
  font-family: 'Outfit', sans-serif !important;
}
.ep-bottom-nav a:hover,
.ep-bottom-nav a.ep-active {
  color: var(--ep-coral) !important;
  border-top-color: var(--ep-coral) !important;
}
.ep-tab-icon  { font-size: 1.25rem !important; line-height: 1 !important; display: block !important; }
.ep-tab-label { display: block !important; margin-top: 2px !important; }

/* ════════════════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════════════════ */
#ep-back-top {
  position: fixed; bottom: 76px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ep-coral);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(255,58,84,0.45);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#ep-back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#ep-back-top:hover   { background: #e02d47 !important; transform: translateY(-2px) !important; }
#ep-back-top svg     { width: 18px; height: 18px; stroke: white; stroke-width: 2.5; }

/* ════════════════════════════════════════════════════════════
   GLOBAL
   ════════════════════════════════════════════════════════════ */
body { -webkit-font-smoothing: antialiased !important; }
::selection { background: rgba(255,58,84,0.18); color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ep-coral) !important; outline-offset: 2px !important; }