/* ================================================================
   NEWBITCOIN.FR — Professional Design System v2
   Light Minimalist · Bitcoin Orange · Mobile-First
   ================================================================ */

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

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  /* Colors */
  --c-orange:        #f7931a;
  --c-orange-hover:  #e07d0a;
  --c-orange-light:  #fff7ed;
  --c-orange-glow:   rgba(247, 147, 26, 0.22);

  --c-bg:            #ffffff;
  --c-surface:       #f8fafc;
  --c-surface-2:     #f1f5f9;
  --c-border:        #e2e8f0;
  --c-border-soft:   #f1f5f9;

  --c-text:          #0f172a;
  --c-text-2:        #475569;
  --c-text-muted:    #94a3b8;

  --c-dark:          #0f172a;
  --c-dark-2:        #1e293b;
  --c-dark-muted:    #64748b;

  /* Elevation */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md:  0 8px 28px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.05);
  --shadow-lg:  0 20px 50px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
  --shadow-orange: 0 6px 24px var(--c-orange-glow);
  --shadow-orange-lg: 0 12px 40px rgba(247,147,26,.35);

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Typography */
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 180ms var(--ease);
  --t-base: 260ms var(--ease);
  --t-slow: 400ms var(--ease);
}

/* ── Global Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box !important; }

html, body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  font-family: var(--font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--c-text) !important;
  background: var(--c-bg) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── DEBUG — voir quel élément déborde ── */

img { max-width: 100% !important; height: auto !important; }

a { text-decoration: none !important; }


/* ================================================================
   DONATION BANNER
   ================================================================ */
.donation-container {
  background: linear-gradient(90deg, #e07d0a 0%, var(--c-orange) 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
}

.donation-text p { color: #fff !important; font-size: 14px !important; }

.donation-btn {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  transition: background var(--t-fast) !important;
}

.donation-btn:hover {
  background: rgba(255,255,255,.35) !important;
}

.donation-modal-close {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  opacity: .75 !important;
  transition: opacity var(--t-fast) !important;
}
.donation-modal-close:hover { opacity: 1 !important; }


/* ================================================================
   NAV — Sticky, glass, professional
   ================================================================ */
.head {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 0 !important;
  transition: box-shadow var(--t-base) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.head > div {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
  gap: var(--sp-4) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Logo */
.head .logo {
  flex-shrink: 0 !important;
  margin-right: var(--sp-4) !important;
  display: flex !important;
  align-items: center !important;
}

.head .logo img {
  height: 36px !important;
  width: auto !important;
}


/* ================================================================
   HERO SECTION
   ================================================================ */
.mainhero {
  background: var(--c-bg) !important;
  position: relative !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  padding: 100px 0 88px !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Gradient mesh background */
.mainhero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(247,147,26,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(99,102,241,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(20,184,166,.05) 0%, transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Dot grid pattern */
.mainhero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(0,0,0,.055) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%) !important;
}

.hero-container {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Badge above title */
.hero-container::before {
  content: '✦ NewBitcoin — The Second Chance' !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  background: var(--c-orange-light) !important;
  border: 1px solid rgba(247,147,26,.3) !important;
  border-radius: var(--r-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--c-orange-hover) !important;
  margin-bottom: 28px !important;
}

/* Hero headline */
.mainsummary {
  font-size: clamp(1.55rem, 3.8vw, 2.55rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  color: var(--c-text) !important;
  margin: 0 auto var(--sp-10) !important;
  max-width: 760px !important;
  min-height: 3.2em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Phrase rotation animations */
@keyframes phraseIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phraseOut { from { opacity: 1; transform: translateY(0);    } to { opacity: 0; transform: translateY(-10px); } }

.mainsummary.phrase-in  { animation: phraseIn  .55s var(--ease) both !important; }
.mainsummary.phrase-out { animation: phraseOut .38s var(--ease) both !important; }

/* CTA buttons row */
.btn-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--sp-3) !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: var(--sp-8) !important;
}

/* Base button */
.btn-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast) !important;
}

.btn-home:hover { transform: translateY(-2px) !important; }
.btn-home:active { transform: translateY(0) !important; }

/* Primary — orange filled */
.btn-bright.btn-home {
  background: var(--c-orange) !important;
  color: #fff !important;
  border-color: var(--c-orange) !important;
  box-shadow: var(--shadow-orange) !important;
}

.btn-bright.btn-home:hover {
  background: var(--c-orange-hover) !important;
  border-color: var(--c-orange-hover) !important;
  box-shadow: var(--shadow-orange-lg) !important;
}

/* Secondary — outline */
.btn-light.btn-home {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-light.btn-home:hover {
  border-color: var(--c-orange) !important;
  color: var(--c-orange) !important;
  box-shadow: 0 4px 16px rgba(247,147,26,.15) !important;
}

/* Dark — solid dark */
.btn-dark.btn-home {
  background: var(--c-dark) !important;
  color: #fff !important;
  border-color: var(--c-dark) !important;
}

.btn-dark.btn-home:hover {
  background: var(--c-dark-2) !important;
  border-color: var(--c-dark-2) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Watch video button */
.mainvideo {
  margin-top: var(--sp-2) !important;
}

.mainvideo-btn-open {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px 9px 10px !important;
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-text-2) !important;
  cursor: pointer !important;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast) !important;
}

.mainvideo-btn-open:hover {
  border-color: var(--c-orange) !important;
  color: var(--c-orange) !important;
  background: var(--c-orange-light) !important;
  box-shadow: 0 2px 12px rgba(247,147,26,.18) !important;
}

.mainvideo-btn-open::before {
  content: '▶' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  background: var(--c-orange) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  padding-left: 2px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(247,147,26,.4) !important;
  transition: background var(--t-fast) !important;
}

.mainvideo-btn-open:hover::before {
  background: var(--c-orange-hover) !important;
}

/* ── Hero Stats Strip ──────────────────────────────────────── */
.hero-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-top: var(--sp-12) !important;
  padding: var(--sp-5) var(--sp-6) !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: var(--sp-3) var(--sp-6) !important;
  flex: 1 !important;
  min-width: 120px !important;
}

.hero-stat + .hero-stat {
  border-left: 1px solid var(--c-border) !important;
}

.hero-stat-num {
  display: block !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.hero-stat-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--c-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}


/* ================================================================
   OVERVIEW SECTION — 3 cards
   ================================================================ */
.mainoverview {
  background: var(--c-surface) !important;
  padding: var(--sp-24) 0 var(--sp-20) !important;
  border-top: 1px solid var(--c-border) !important;
  border-bottom: 1px solid var(--c-border) !important;
  text-align: center !important;
}

.mainoverview .container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
}

.mainoverview-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--c-text-muted) !important;
  margin-bottom: var(--sp-8) !important;
}

/* Cards grid */
.mainoverview .container {
  display: block !important;
}

/* Card wrapper so they display in a row */
.mainoverview .container > .maincard {
  display: inline-flex !important;
  vertical-align: top !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: calc(33.33% - 18px) !important;
  margin: 0 9px !important;
}

.maincard {
  background: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-10) var(--sp-6) var(--sp-8) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base) !important;
  text-decoration: none !important;
}

.maincard:hover {
  border-color: var(--c-orange) !important;
  box-shadow: var(--shadow-orange) !important;
  transform: translateY(-6px) !important;
}

/* Icon circle */
.maincard-img {
  width: 56px !important;
  height: 56px !important;
  padding: 12px !important;
  background: var(--c-orange-light) !important;
  border-radius: 50% !important;
  margin-bottom: var(--sp-5) !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  transition: background var(--t-fast) !important;
}

.maincard:hover .maincard-img {
  background: rgba(247,147,26,.20) !important;
}

.maincard > div {
  width: 100% !important;
}

.maincard-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

.maincard-desc {
  font-size: 13.5px !important;
  color: var(--c-text-2) !important;
  line-height: 1.55 !important;
  margin: 0 0 var(--sp-5) !important;
}

.maincard-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--c-orange) !important;
  margin: 0 !important;
}

.maincard-link::after {
  content: '→' !important;
  transition: transform var(--t-fast) !important;
}

.maincard:hover .maincard-link::after {
  transform: translateX(4px) !important;
}

/* Arrow down */
.btn-down {
  display: flex !important;
  justify-content: center !important;
  margin-top: var(--sp-12) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ================================================================
   DESCRIPTION SECTION
   ================================================================ */
.maindesc {
  background: var(--c-bg) !important;
  padding: var(--sp-24) 0 var(--sp-20) !important;
}

.maindesc .container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
}

/* Section badge */
.home-title::before {
  content: 'Get Started' !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--c-orange) !important;
  margin-bottom: var(--sp-3) !important;
}

.section-title.home-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  letter-spacing: -.025em !important;
  line-height: 1.18 !important;
  margin-bottom: var(--sp-10) !important;
}

/* Two-column layout */
.maindesc-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-16) !important;
  flex-wrap: wrap !important;
}

.maindesc-row > div:first-child {
  flex: 1 !important;
  min-width: 280px !important;
}

.maindesc-img {
  flex: 0 0 340px !important;
  max-width: 340px !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.maindesc-text {
  font-size: 1.05rem !important;
  line-height: 1.82 !important;
  color: var(--c-text-2) !important;
  margin-bottom: var(--sp-6) !important;
}

.maindesc-text b { color: var(--c-text) !important; }

.maindesc-text a {
  color: var(--c-orange) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
}

/* Feature list */
.mainlist {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--sp-8) 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-1) !important;
}

.mainlist-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  padding: var(--sp-4) var(--sp-4) !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-soft) !important;
  border-radius: var(--r-md) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  transition: background var(--t-fast), border-color var(--t-fast) !important;
}

.mainlist-item:hover {
  background: var(--c-orange-light) !important;
  border-color: rgba(247,147,26,.25) !important;
}

.mainlist-item img {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  padding: 6px !important;
  background: var(--c-bg) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--c-border) !important;
}

.mainlist-item p { margin: 0 !important; }

/* CTA below desc */
.maindesc .btn-container {
  margin-top: var(--sp-10) !important;
  margin-bottom: 0 !important;
}

.maindesc .btn-dark.btn-home {
  padding: 16px 36px !important;
  font-size: 16px !important;
}


/* ================================================================
   FOOTER — Professional dark grid
   ================================================================ */
.footer {
  background: var(--c-dark) !important;
  color: var(--c-dark-muted) !important;
  font-family: var(--font) !important;
}

.footer .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: var(--sp-16) var(--sp-6) var(--sp-10) !important;
}

/* Footer top: logo + nav grid */
.footer .logo-footer {
  display: block !important;
  margin-bottom: var(--sp-10) !important;
}

.footer .logo-footer img {
  height: 160px !important;
  width: auto !important;
  opacity: .85 !important;
  filter: brightness(1.1) !important;
}

/* Footer row: donate + 4 link columns */
.footer-row {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: var(--sp-16) !important;
  align-items: start !important;
}

/* Donate block */
.donate {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-6) !important;
}

.donate .footer-title,
.footermenu-item .footer-title {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.9) !important;
  margin-bottom: var(--sp-4) !important;
}

.donate-btn,
a.donate-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--c-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  padding: 9px 22px !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast) !important;
  box-shadow: var(--shadow-orange) !important;
  margin-bottom: var(--sp-4) !important;
  text-decoration: none !important;
}

.donate-btn:hover,
a.donate-btn:hover {
  background: var(--c-orange-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-orange-lg) !important;
}

.donate-text { margin: 0 !important; }

.donate-link,
a.donate-link {
  font-size: 11px !important;
  color: var(--c-dark-muted) !important;
  word-break: break-all !important;
  line-height: 1.5 !important;
  transition: color var(--t-fast) !important;
}

.donate-link:hover { color: var(--c-orange) !important; }

/* Footer link columns */
.footermenu {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-8) !important;
}

.footermenu-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-2) !important;
}

.footermenu-list li a,
.footermenu-item > a {
  display: block !important;
  font-size: 13.5px !important;
  color: var(--c-dark-muted) !important;
  padding: 3px 0 !important;
  transition: color var(--t-fast) !important;
}

.footermenu-list li a:hover,
.footermenu-item > a:hover {
  color: var(--c-orange) !important;
}

.footermenu-item.footermenu-other {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Footer bottom bar */
.footer-bottom {
  background: rgba(0,0,0,.35) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

.footer-bottom .container {
  padding-top: var(--sp-5) !important;
  padding-bottom: var(--sp-5) !important;
}

.footer-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--sp-4) !important;
}

.footerlicense {
  font-size: 12.5px !important;
  color: rgba(255,255,255,.3) !important;
}

.footerlicense a {
  color: rgba(255,255,255,.45) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color var(--t-fast) !important;
}

.footerlicense a:hover { color: var(--c-orange) !important; }

.footer-status-block {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-5) !important;
}

.statusmenu {
  font-size: 12.5px !important;
  color: rgba(255,255,255,.35) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color var(--t-fast) !important;
}

.statusmenu::before {
  content: '' !important;
  width: 7px !important;
  height: 7px !important;
  background: #22c55e !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(34,197,94,.7) !important;
  flex-shrink: 0 !important;
  animation: pulse 2.5s ease-in-out infinite !important;
}

.statusmenu:hover { color: var(--c-orange) !important; }

/* Footer lang pill */
.footer-bottom .lang.is-expand > li > a {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.4) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}

.footer-bottom .lang.is-expand > li > a:hover {
  border-color: var(--c-orange) !important;
  color: var(--c-orange) !important;
}

/* Breadcrumbs */
.breadcrumbs { display: none !important; }


/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes nbFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* Staggered entrance */
.mainsummary       { animation: nbFadeUp .55s .05s both !important; }
.btn-container     { animation: nbFadeUp .55s .15s both !important; }
.mainvideo         { animation: nbFadeUp .55s .25s both !important; }
.hero-stats        { animation: nbFadeUp .55s .35s both !important; }

/* Scroll-in for sections */
.mainoverview,
.maindesc {
  animation: nbFadeUp .6s .05s both !important;
}


/* ================================================================
   YOUTUBE MODAL
   ================================================================ */
.modal {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-overlay {
  background: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.mainvideo-btn-close {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--r-full) !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  transition: background var(--t-fast) !important;
}

.mainvideo-btn-close:hover {
  background: rgba(255,255,255,.28) !important;
}


/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Desktop nav (≥641px) — main51db.css controls everything below 641px */
@media (min-width: 641px) {
  .head > div {
    display: flex !important;
    align-items: center !important;
    height: 68px !important;
  }
  .menusimple.menumain {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
  }
  /* Hide hamburger on desktop */
}

/* ── Tablet ──────────────────────────────── 1024px and below */
@media (max-width: 1024px) {
  .footer-row {
    grid-template-columns: 1fr !important;
    gap: var(--sp-10) !important;
  }
  .footermenu {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mainoverview .container > .maincard {
    width: calc(33.33% - 14px) !important;
    margin: 0 7px !important;
  }
}

/* ── Medium tablet ────────────────────────── 860px and below */
@media (max-width: 860px) {
  .maindesc-row {
    flex-direction: column !important;
  }
  .maindesc-img {
    flex: none !important;
    max-width: 100% !important;
    order: -1 !important;
    border-radius: var(--r-md) !important;
  }
  .mainoverview .container > .maincard {
    width: calc(50% - 14px) !important;
  }
}

/* ── Mobile ───────────────────────────────── 768px and below */
@media (max-width: 768px) {

  /* ── HERO : pleine largeur, centré ── */
  .mainhero {
    padding: 72px 0 60px !important;
    width: 100% !important;
    overflow-x: hidden !important;
    text-align: center !important;
  }

  .hero-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 var(--sp-5) !important;
    margin: 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .hero-container::before {
    font-size: 11px !important;
    padding: 5px 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mainsummary {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    margin-bottom: var(--sp-8) !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .btn-container {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .btn-home {
    padding: 13px 22px !important;
    font-size: 14px !important;
  }

  /* Stats strip */
  .hero-stats {
    gap: 0 !important;
    margin-top: var(--sp-8) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-stat {
    min-width: 80px !important;
    padding: var(--sp-3) var(--sp-4) !important;
  }

  .hero-stat-num   { font-size: 1.1rem !important; }
  .hero-stat-label { font-size: 10px !important; }

  /* Overview cards en colonne */
  .mainoverview {
    padding: var(--sp-16) 0 var(--sp-12) !important;
  }

  .mainoverview .container > .maincard {
    width: calc(100% - 24px) !important;
    flex-direction: row !important;
    text-align: left !important;
    padding: var(--sp-5) !important;
  }

  .maincard-img {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .maincard > div { text-align: left !important; }

  /* Section desc */
  .maindesc { padding: var(--sp-16) 0 var(--sp-12) !important; }

  /* Footer */
  .footermenu {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer .container {
    padding: var(--sp-10) var(--sp-4) var(--sp-8) !important;
  }
}

/* ── Mobile small ─────────────────────────── 520px and below */
@media (max-width: 520px) {
  .mainhero { padding: 60px 0 48px !important; }

  .hero-container {
    padding: 0 var(--sp-4) !important;
    box-sizing: border-box !important;
  }

  .mainsummary {
    font-size: clamp(1.35rem, 6.4vw, 2rem) !important;
    line-height: 1.4 !important;
  }

  .btn-container {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 var(--sp-4) !important;
    box-sizing: border-box !important;
    gap: var(--sp-2) !important;
  }

  .btn-home {
    width: 100% !important;
    max-width: 340px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* Stats en grille 2×2 */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-stat + .hero-stat { border-left: none !important; }
  .hero-stat:nth-child(odd)  { border-right: 1px solid var(--c-border) !important; }
  .hero-stat:nth-child(n+3)  { border-top:   1px solid var(--c-border) !important; }

  /* Cards pleine largeur */
  .mainoverview .container > .maincard {
    width: 100% !important;
    margin: 0 0 var(--sp-3) !important;
  }

  .footermenu {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--sp-6) !important;
  }

  .footer-bottom-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── Tiny mobile ──────────────────────────── 380px and below */
@media (max-width: 380px) {
  .mainsummary { font-size: 1.5rem !important; }
  .hero-stat-num { font-size: 1rem !important; }
  .footermenu { grid-template-columns: 1fr !important; }
}