/* ============================================================
   Sunu RH — styles custom partagés (toutes pages)
   Chargé APRÈS assets/styles.css (Tailwind compilé).
   Source unique : modifier ici, jamais dans les pages HTML.
   ============================================================ */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Inter', 'Calibri', system-ui, sans-serif; }
section[id] { scroll-margin-top: 80px; }
.gradient-navy { background: linear-gradient(135deg, #13253D 0%, #1E3A5F 50%, #2A4A6E 100%); }
.text-gradient { background: linear-gradient(90deg, #1E3A5F 0%, #2A4A6E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Honeypot anti-spam (champ invisible pour les humains) */
.hp-field { position: absolute; left: -9999px; }

/* ---------- Navigation ---------- */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #C8102E; transition: width 0.3s; }
.nav-link:hover::after { width: 100%; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; } }
/* Sans JS (classe posée par site.js), tout reste visible */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Hero (accueil) : split 50/50 ---------- */
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-text { grid-column: 1 / -1; }
.hero-image { grid-column: 1 / -1; position: relative; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 6fr 5fr !important; gap: 3.5rem !important; }
  .hero-text { grid-column: auto !important; }
  .hero-image { grid-column: auto !important; }
}

/* Hero mockup — glow + flottement subtil */
.hero-mockup-wrap { position: relative; }
.hero-mockup-wrap::before {
  content: ''; position: absolute; inset: -20px;
  background: radial-gradient(circle at 30% 50%, rgba(200, 16, 46, 0.25), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(15, 118, 110, 0.25), transparent 60%);
  filter: blur(40px); z-index: 0;
}
.hero-mockup-wrap img { position: relative; z-index: 1; animation: floatY 6s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Hero trust signals — espace garanti (override cascade Tailwind mt-X) */
.hero-trust-row { margin-top: 2.75rem !important; }
@media (max-width: 640px) { .hero-trust-row { margin-top: 2rem !important; } }

/* ---------- Cards "Pourquoi changer" — hover lift ---------- */
.pain-card { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; border: 1px solid #E5E7EB; }
.pain-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(30, 58, 95, 0.15); border-color: rgba(200, 16, 46, 0.3); }

/* ---------- Cards modules (navy) — hover scale + contraste ---------- */
.module-card { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.12) !important; transition: transform 0.25s, background 0.25s, border-color 0.25s; }
.module-card:hover { transform: translateY(-4px) scale(1.02); background: rgba(255,255,255,0.14) !important; border-color: rgba(200, 16, 46, 0.5) !important; }

/* ---------- Pilules "Articles Code du Travail" ---------- */
.law-pill { background: linear-gradient(135deg, rgba(200,16,46,0.08), rgba(30,58,95,0.05)); border: 1px solid rgba(200,16,46,0.2); transition: all 0.2s; }
.law-pill:hover { background: linear-gradient(135deg, rgba(200,16,46,0.15), rgba(30,58,95,0.08)); border-color: rgba(200,16,46,0.4); transform: translateY(-2px); }

/* ---------- FAQ ---------- */
.faq-item { transition: all 0.25s; }
.faq-item:hover { border-color: rgba(200,16,46,0.3); box-shadow: 0 4px 16px -4px rgba(30,58,95,0.08); }

/* ---------- WhatsApp pulse ---------- */
@keyframes pulse-wa { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 50% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } }
.wa-pulse { animation: pulse-wa 2.5s infinite; }

/* ---------- Sidebar fonctionnalités (scrollspy) ---------- */
.sidebar-link.active { background: #1E3A5F; color: white; }
/* Note : sélecteur corrigé (.active .num descendant — l'original ".active.num" ne matchait jamais) */
.sidebar-link.active .num { background: #C8102E; color: white; }

/* ---------- Pages légales (mentions, confidentialité) ---------- */
.legal h2 { font-size: 1.5rem; font-weight: 700; color: #1E3A5F; margin-top: 2rem; margin-bottom: 0.75rem; }
.legal h3 { font-size: 1.125rem; font-weight: 600; color: #1F2937; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.legal p { margin-bottom: 0.75rem; line-height: 1.7; color: #374151; }
.legal ul { margin-bottom: 1rem; padding-left: 1.5rem; }
.legal ul li { margin-bottom: 0.4rem; line-height: 1.6; color: #374151; list-style-type: disc; }
.legal strong { color: #1F2937; }
.legal a { color: #1E3A5F; text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.legal th, .legal td { padding: 0.6rem 0.8rem; text-align: left; border: 1px solid #E5E7EB; }
.legal th { background: #F9FAFB; font-weight: 600; color: #1F2937; }

/* ---------- Articles de blog ---------- */
.prose-article h2 { font-size: 1.75rem; font-weight: 700; color: #1E3A5F; margin-top: 3rem; margin-bottom: 1.25rem; line-height: 1.25; scroll-margin-top: 80px; }
.prose-article h3 { font-size: 1.25rem; font-weight: 700; color: #1E3A5F; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-article p { font-size: 1.0625rem; line-height: 1.75; color: #475569; margin-bottom: 1.25rem; }
.prose-article p strong { color: #1E3A5F; font-weight: 600; }
.prose-article ul, .prose-article ol { font-size: 1.0625rem; line-height: 1.75; color: #475569; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose-article ul li, .prose-article ol li { margin-bottom: 0.5rem; }
.prose-article ul li { list-style-type: disc; }
.prose-article ol li { list-style-type: decimal; }
.prose-article blockquote { border-left: 4px solid #C8102E; background: #F8FAFC; padding: 1rem 1.5rem; margin: 1.5rem 0; font-style: italic; color: #475569; }
.prose-article a { color: #1E3A5F; text-decoration: underline; }
.prose-article a:hover { color: #C8102E; }
.prose-article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.prose-article th, .prose-article td { padding: 0.75rem 1rem; text-align: left; border: 1px solid #E2E8F0; }
.prose-article th { background: #F8FAFC; font-weight: 600; color: #1E3A5F; }

/* Blog : article "5 erreurs RH" */
.error-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; background: #C8102E; color: white; font-size: 1.5rem; font-weight: 800; border-radius: 0.75rem; flex-shrink: 0; }
.error-header { display: flex; gap: 1.25rem; align-items: center; margin-top: 3.5rem; margin-bottom: 1.5rem; }
.error-header h2 { margin-top: 0; margin-bottom: 0; flex: 1; }
.error-cost { background: linear-gradient(135deg, #FEF3F2 0%, #FEE4E2 100%); border: 1px solid #FDA29B; border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1.25rem 0; font-size: 0.95rem; }
.error-cost strong { color: #B42318; }

/* Blog : article "Excel vs logiciel RH" */
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.compare-card { padding: 1.25rem; border-radius: 0.75rem; border: 1px solid #E2E8F0; }
.compare-card.excel { background: #FEF3F2; border-color: #FDA29B; }
.compare-card.sunurh { background: #ECFDF5; border-color: #6EE7B7; }
.compare-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.compare-card.excel h4 { color: #B42318; }
.compare-card.sunurh h4 { color: #047857; }
.compare-card p { font-size: 0.9rem; line-height: 1.5; color: #475569; margin: 0; }

/* ---------- Formulaire : état d'erreur téléphone ---------- */
.field-error { border-color: #C8102E !important; }
.field-error-msg { color: #C8102E; font-size: 0.75rem; margin-top: 0.35rem; }