@charset "UTF-8";
/* ============================================================
   EXPERIMENT — style "Revolut x Airbnb"
   Chargé APRÈS download.css : ne fait que surcharger des tokens
   visuels (couleurs, radius, ombres) sans toucher au HTML.
   Fichier de test local uniquement — à retirer si non retenu.
   ============================================================ */

:root {
  --ra-coral: #0D9488;      /* teal — confiance + argent/croissance */
  --ra-coral-dark: #0F766E;
  --ra-purple: #0369A1;     /* bleu profond — sérieux, fiabilité */
  --ra-grad: linear-gradient(135deg, var(--ra-coral) 0%, var(--ra-purple) 100%);
}

/* ── Fond : premium sombre, orbes recolorées ── */
body {
  background: linear-gradient(160deg, #0b0710 0%, #140a14 55%, #1a0d16 100%) !important;
  animation: none !important;
}
body::before {
  background: radial-gradient(circle, rgba(13,148,136,0.16) 0%, transparent 70%) !important;
}
body::after {
  background: radial-gradient(circle, rgba(3,105,161,0.16) 0%, transparent 70%) !important;
}

/* ── Topnav : pill flottante ── */
.topnav {
  top: 0.75rem !important;
  left: 1rem !important; right: 1rem !important;
  border-radius: 1.5rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(20,10,18,0.7) !important;
}
.topnav-cta,
.topnav-download.active {
  background: var(--ra-grad) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(13,148,136,0.35) !important;
}

/* ── Titre : dégradé corail → violet ── */
.hero-title-grad {
  background: linear-gradient(270deg, #0D9488 0%, #0369A1 50%, #0D9488 100%) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Badges / bandeaux : accent corail ── */
.page > div[style*="rgba(16,185,129"] > div {
  background: rgba(13,148,136,0.1) !important;
  border-color: rgba(13,148,136,0.3) !important;
  color: #5eead4 !important;
}
.page > div[style*="rgba(59,130,246,0.08)"] > div {
  background: rgba(3,105,161,0.08) !important;
  border-color: rgba(3,105,161,0.28) !important;
}

/* ── Cartes OS : radius Airbnb + hover corail ── */
.os-card {
  border-radius: 1.75rem !important;
  background: rgba(255,255,255,0.035) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}
.os-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(13,148,136,0.35) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.4), 0 0 0 1px rgba(13,148,136,0.18) !important;
}
.os-format {
  border-radius: 999px !important;
}

/* ── Boutons : pilule dégradée corail → violet ── */
.btn-download {
  border-radius: 999px !important;
  background: var(--ra-grad) !important;
  box-shadow: 0 6px 24px rgba(13,148,136,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  padding: 0.9rem 1.25rem !important;
}
.btn-download:hover {
  box-shadow: 0 12px 32px rgba(13,148,136,0.5), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.btn-download.unavailable {
  background: rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}

/* ── Contact / liens ── */
a[href^="mailto:sav"] { color: var(--ra-coral) !important; font-weight: 700; }

/* ── Boîtes info / steps : radius généreux, accent corail ── */
.info-box {
  border-radius: 1.5rem !important;
  background: rgba(13,148,136,0.06) !important;
  border-color: rgba(13,148,136,0.2) !important;
}
.info-box strong { color: #5eead4 !important; }
.install-steps {
  border-radius: 1.75rem !important;
}
.step-num {
  background: var(--ra-grad) !important;
}

/* ── Footer ── */
.footer-links a:hover, .footer-legal a:hover { color: var(--ra-coral) !important; }