/* ═══ Theme: "Security Modern" — alarme-maison-devis.fr ═══
   Inspiration : Verisure + Securitas modern app UI
   Dark navy + red accent + clean typography
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --primary:        #0F172A;
  --primary-dark:   #020617;
  --primary-light:  #E2E8F0;
  --accent:         #DC2626;
  --accent-soft:    #FEE2E2;
  --ink:            #0F172A;
  --paper:          #FFFFFF;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, .hero h1, .cluster-hero h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Header noir */
header, nav, .navbar {
  background: var(--primary) !important;
  color: var(--paper) !important;
}
header a, nav a, .navbar a {
  color: var(--paper) !important;
}
.btn-warning, .header-cta {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Hero with shield gradient */
.hero, .cluster-hero {
  background: linear-gradient(135deg, var(--primary) 0%, #1E293B 50%, var(--primary-dark) 100%) !important;
  color: var(--paper) !important;
  padding: 5rem 5% !important;
}
.hero h1, .cluster-hero h1 {
  color: var(--paper) !important;
}
.hero p, .cluster-hero p {
  color: rgba(226, 232, 240, 0.9) !important;
}

/* CTAs red bold */
.btn-primary, .btn-cta {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  transition: all 0.2s !important;
}
.btn-primary:hover, .btn-cta:hover {
  background: #B91C1C !important;
  transform: translateY(-1px) !important;
}

/* Cards : shield style */
.card, .card-rea, .feature-card, .ra-card {
  background: #fff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  border-top: 3px solid var(--accent) !important;
  padding: 1.5rem !important;
}

/* Trust badges */
.trust-bar, .trust-logos, .trust-strip {
  background: var(--primary) !important;
  color: var(--paper) !important;
  padding: 1rem 5% !important;
  border-top: 1px solid #1E293B !important;
  border-bottom: 1px solid #1E293B !important;
}
.trust-item {
  color: var(--paper) !important;
}

/* Sticky CTA mobile */
.a54-sticky-cta-bar, #cro-sticky-mobile {
  background: var(--accent) !important;
  border-top: 2px solid var(--primary-dark) !important;
  box-shadow: 0 -4px 14px rgba(220, 38, 38, 0.3) !important;
}
.a54-sticky-cta-bar a, #cro-sticky-mobile a {
  color: var(--paper) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Widget zone (no fake bg) */
.vud-widget-top-wrap, #devis-section {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
}

/* Focus accessible */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}