/* ═══════════════════════════════════════════════════════════════════════════
   TAKALOO NTY SY NDAY — DESIGN MINIMAL "CLEAN EDITION"
   Refonte visuelle épurée — chargé en dernier, surcharge l'ancien thème "banking premium".
   Aucune logique JS / aucun ID modifié : uniquement de l'habillage.
   Principes : beaucoup d'espace blanc, 1 accent, bordures fines, ombres douces,
   suppression des dégradés lourds, halos flous et bandes tricolores.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #0B1B33;   /* texte principal / navy doux */
  --ink-soft:   #5A6B82;   /* texte secondaire */
  --line:       #E7EAF0;   /* bordures fines */
  --line-soft:  #F0F2F6;
  --surface:    #FFFFFF;   /* cartes */
  --bg:         #F7F8FA;   /* fond de page neutre */
  --accent:     #1E5EFF;   /* accent unique — bleu moderne */
  --accent-ink: #1747C4;
  --accent-50:  #EEF3FF;
  --gold:       #C8961E;   /* doré assagi (rares touches) */
  --emerald:    #0FA968;
  --radius:     16px;
  --radius-sm:  12px;
  --shadow-sm:  0 1px 2px rgba(11, 27, 51, .05);
  --shadow:     0 6px 24px -12px rgba(11, 27, 51, .18);
  --shadow-lg:  0 18px 50px -24px rgba(11, 27, 51, .25);
}

/* ───────── Base ───────── */
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.font-display, .font-banking { font-family: 'Outfit','Plus Jakarta Sans','Inter',sans-serif !important; letter-spacing: -0.02em; }

/* Adoucir tous les titres très gras */
h1, h2, h3 { letter-spacing: -0.02em; }

/* ───────── HEADER épuré ───────── */
header.bg-white\/95 {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
/* Supprime la bande tricolore criarde → fine ligne neutre */
.cobrand-stripe { background: var(--line) !important; height: 1px !important; }

/* Logos co-brand : carte plus douce, sans effet "carte flottante" */
.cobrand-logo-card {
  width: 42px !important; height: 42px !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
}
.cobrand-logo-card::after { content: none !important; }
.cobrand-logo-card:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; border-color: var(--accent); }
.cobrand-logos { gap: .4rem !important; }

/* Liens nav : style pilule discret */
.nav-banking-link {
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  border-radius: 9px !important;
}
.nav-banking-link:hover { background: var(--accent-50) !important; color: var(--accent-ink) !important; }
.nav-banking-link.active { background: var(--accent-50) !important; color: var(--accent-ink) !important; }
.nav-banking-link.active::after { display: none !important; }
/* Réduire les icônes dans la nav pour épurer */
.nav-banking-link i { opacity: .6; }

/* ───────── BOUTONS — flat & nets ───────── */
.btn-banking-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
  padding: .6rem 1.15rem !important;
}
.btn-banking-primary:hover { background: var(--accent-ink) !important; transform: none !important; box-shadow: var(--shadow) !important; }

.btn-banking-gold {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
  padding: .6rem 1.15rem !important;
}
.btn-banking-gold:hover { background: #142a4d !important; transform: none !important; box-shadow: var(--shadow) !important; }

.btn-banking-emerald {
  background: var(--emerald) !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-banking-emerald:hover { filter: brightness(.95); transform: none !important; }

/* ───────── CARTES — fond blanc, bordure fine, ombre douce ───────── */
.banking-card,
.offer-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
.banking-card:hover,
.offer-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px) !important;
  border-color: var(--line) !important;
}
.banking-card-gold, .banking-card-emerald, .banking-card-navy { border-top: 1px solid var(--line) !important; }

/* ───────── Neutraliser les DÉGRADÉS lourds ───────── */
.bg-gradient-navy, .bg-gradient-banking, .bg-gradient-fintech, .bg-gradient-takaloo {
  background: var(--ink) !important;
}
.bg-gradient-royal { background: var(--accent) !important; }
.bg-gradient-emerald { background: var(--emerald) !important; }
.bg-gradient-gold, .bg-gradient-cobrand { background: var(--ink) !important; }

/* Sections héro / fonds dégradés clairs → blanc cassé uniforme */
.bg-gradient-to-br.from-imana-50,
.bg-gradient-to-br.from-white,
section.bg-gradient-to-br { background: var(--bg) !important; }

/* ───────── Atténuer les HALOS flous décoratifs ───────── */
[class*="blur-3xl"], [class*="blur-2xl"] { opacity: .35 !important; }

/* ───────── Ombres "premium" → ombres douces uniformes ───────── */
.shadow-takaloo, .shadow-takaloo-gold, .shadow-takaloo-xl,
.shadow-banking, .shadow-banking-hover { box-shadow: var(--shadow) !important; }
.shadow-banking-card { box-shadow: var(--shadow-sm) !important; }

/* ───────── Chips / pills devises : plates ───────── */
.currency-chip {
  background: var(--accent-50) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  border: 1px solid var(--line) !important;
  font-weight: 600 !important;
}
.method-pill {
  background: var(--accent-50) !important;
  color: var(--accent-ink) !important;
  font-weight: 600;
}

/* ───────── FORMULAIRES — inputs nets et confortables ───────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  border-radius: 11px !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-50) !important;
}

/* Boutons "bleu imana" hérités → accent unifié */
.bg-imana-500 { background: var(--accent) !important; }
.hover\:bg-imana-600:hover { background: var(--accent-ink) !important; }

/* ───────── FOOTER épuré : sombre uni, sans halos ni dégradé ───────── */
footer.bg-gradient-banking { background: var(--ink) !important; }
footer .blur-3xl { display: none !important; }

/* ───────── Scrollbar discrète ───────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #D3D9E3; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #B9C2D1; }

/* ───────── Réduire le bruit visuel des badges "uppercase tracking" ───────── */
.tracking-\[0\.2em\], .tracking-\[0\.25em\], .tracking-\[0\.18em\] { letter-spacing: .12em !important; }

/* Apparition douce */
.fade-up, .fade-in { animation-duration: .35s; }

/* ═══════════════════════════════════════════════════════════════════════════
   COUCHE 2 — Épuration site-wide (toutes pages : espace, deposer, admin, guide…)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Titres de page : plus légers ───────── */
h1.text-3xl, h1.text-2xl { font-weight: 800 !important; color: var(--ink) !important; }

/* ───────── Boîtes d'info colorées → douces et discrètes ───────── */
/* (bandeaux bleu/ambre/vert/rouge clair omniprésents pour expliquer chaque section) */
.bg-blue-50, .bg-amber-50, .bg-yellow-50, .bg-emerald-50, .bg-green-50,
.bg-indigo-50, .bg-purple-50, .bg-cyan-50, .bg-sky-50, .bg-orange-50, .bg-rose-50 {
  background: var(--line-soft) !important;
}
.border-blue-200, .border-amber-200, .border-yellow-200, .border-emerald-200,
.border-green-200, .border-indigo-200, .border-purple-200, .border-cyan-200,
.border-sky-200, .border-orange-200, .border-rose-200, .border-blue-100 {
  border-color: var(--line) !important;
}
.text-blue-800, .text-blue-700, .text-amber-800, .text-amber-700,
.text-indigo-800, .text-purple-800, .text-emerald-800, .text-green-800 {
  color: var(--ink-soft) !important;
}

/* ───────── Cartes génériques (rounded-xl bg-white) : unifier rayon + ombre ───────── */
.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg {
  border-radius: var(--radius-sm) !important;
}
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--shadow) !important; }

/* ───────── Onglets (tabs) : style minimal underline ───────── */
.tab-btn { color: var(--ink-soft) !important; border-color: transparent !important; }
.tab-btn.border-imana-500,
.tab-btn[class*="text-imana-700"] {
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

/* ───────── Boutons d'action génériques hérités → cohérence ───────── */
button.bg-imana-500, a.bg-imana-500, .bg-imana-600 { background: var(--accent) !important; color:#fff !important; }
button.bg-imana-500:hover, a.bg-imana-500:hover { background: var(--accent-ink) !important; }

/* ───────── Badges "uppercase pill" décoratifs (Process, Pourquoi nous…) ───────── */
.bg-imana-100.text-imana-700, .bg-nsn-100.text-nsn-700 {
  background: var(--accent-50) !important;
  color: var(--accent-ink) !important;
}

/* ───────── Réduire les très grandes typos décoratives ───────── */
.text-5xl { font-size: 2.5rem !important; }
.text-6xl { font-size: 3rem !important; }

/* ───────── <details> épurés (filtres avancés, comptes démo, blocs repliés) ───────── */
details > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  font-weight: 500;
  transition: color .15s ease;
}
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { color: var(--ink); }
details > summary::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .65em;
  transition: transform .2s ease;
  opacity: .7;
}
details[open] > summary::after { transform: rotate(180deg); }

/* ───────── KPI / stats tiles : sobres ───────── */
[id^="kpi-"] { letter-spacing: -0.02em; }

/* ───────── Tableaux admin : lignes claires ───────── */
table { border-color: var(--line) !important; }
thead { background: var(--line-soft) !important; }
th { color: var(--ink-soft) !important; font-weight: 600 !important; }
td, th { border-color: var(--line) !important; }

/* ───────── Modales : fond + rayon doux ───────── */
[id^="modal-"] > div, [class*="modal"] .bg-white { border-radius: var(--radius) !important; }

/* ───────── Atténuer les icônes décoratives surdimensionnées ───────── */
.fa-3x, .text-3xl.fas, i.text-4xl { opacity: .85; }

/* ───────── Liens : accent cohérent ───────── */
.text-imana-600, .text-imana-700 { color: var(--accent-ink) !important; }
a.text-imana-600:hover { color: var(--accent) !important; }

/* ───────── Espacements de page un peu plus aérés ───────── */
section { scroll-margin-top: 6rem; }

/* ═══════════════════════════════════════════════════════════════════
   COUCHE 3 — Refonte ultra-minimaliste « icon-first »
   Rails d'icônes (espace / admin), tuiles KPI, boutons-symboles
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── Rail d'onglets en tuiles d'icônes ───────── */
.icon-rail { border-bottom: none !important; }
.icon-rail .tab-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 64px;
  padding: .55rem .5rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff;
  color: var(--ink-soft) !important;
  font-size: .7rem !important;
  font-weight: 500 !important;
  line-height: 1;
  transition: all .15s ease;
  white-space: nowrap;
}
.icon-rail .tab-btn i { font-size: 1.05rem; opacity: .85; }
.icon-rail .tab-btn .rail-label { font-size: .66rem; letter-spacing: -.01em; }
.icon-rail .tab-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-50);
}
/* État actif : le JS ajoute la classe text-imana-700 sur le bouton actif */
.icon-rail .tab-btn.text-imana-700,
.icon-rail .tab-btn.is-active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.icon-rail .tab-btn.text-imana-700 i,
.icon-rail .tab-btn.is-active i { opacity: 1; }

/* ───────── KPI : tuiles compactes icône + nombre ───────── */
[id^="kpi-"] { font-size: 1.4rem !important; }

/* ───────── Boutons-symboles : icône seule, label optionnel ───────── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  transition: all .15s ease;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-50); }
.btn-icon.btn-icon-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-icon.btn-icon-primary:hover { background: var(--accent); border-color: var(--accent); }

/* ───────── Sous-onglets annonces : pills compactes ───────── */
.offers-subtab-btn { border-radius: 999px !important; }

/* ───────── Tooltip natif renforcé (les title= suffisent) ───────── */
[title] { cursor: pointer; }

/* ───────── Sélecteur de sens (page Offres) ───────── */
.dir-btn { transition: all .15s ease; }
.dir-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.dir-btn-active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.dir-btn-active i { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════
   COUCHE 4 — Landing animée « esprit transfert 🇪🇺 ⇄ 🇲🇬 »
   Couleurs vivantes + micro-animations pour convaincre
   ═══════════════════════════════════════════════════════════════════ */

/* Palette d'accent transfert */
:root {
  --eu-blue:   #2563EB;   /* Europe */
  --mg-red:    #E11D2A;   /* Madagascar (rouge drapeau) */
  --mg-green:  #00843D;   /* Madagascar (vert drapeau) */
  --warm:      #F59E0B;   /* énergie / cash */
}

/* ---- Hero : fond dégradé doux animé ---- */
.hero-gradient {
  background:
    radial-gradient(1200px 400px at 15% 10%, rgba(37,94,235,.10), transparent 60%),
    radial-gradient(1000px 400px at 85% 20%, rgba(0,132,61,.10), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(245,158,11,.08), transparent 60%),
    #fff;
}

/* ---- Drapeaux : léger flottement ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-7px) rotate(1deg); }
}
.flag-float { animation: floaty 4s ease-in-out infinite; }
.flag-float.delay { animation-delay: 1.2s; }

/* ---- Câble de transfert : particules qui voyagent EU ⇄ MG ---- */
.transfer-line {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eu-blue), var(--warm), var(--mg-green));
  background-size: 200% 100%;
  animation: line-shift 5s linear infinite;
  overflow: visible;
}
@keyframes line-shift { to { background-position: -200% 0; } }

.transfer-dot {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,94,235,.35), 0 2px 8px rgba(0,0,0,.15);
}
.transfer-dot.go   { animation: dot-go 2.6s cubic-bezier(.55,0,.45,1) infinite; }
.transfer-dot.back { animation: dot-back 2.6s cubic-bezier(.55,0,.45,1) infinite; animation-delay: 1.3s; box-shadow: 0 0 0 3px rgba(0,132,61,.35), 0 2px 8px rgba(0,0,0,.15); }
@keyframes dot-go   { 0% { left: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes dot-back { 0% { left: 100%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 0%; opacity: 0; } }

/* ════════════ Ronds-devises qui se baladent sur le circuit ════════════ */
/* Petits ronds contenant € $ £ Ar circulant entre 🇪🇺 et 🇲🇬          */
.currency-dot {
  width: 26px; height: 26px;
  margin-top: -13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.5px;
  will-change: left, transform, opacity;
}
@media (min-width: 640px) {
  .currency-dot { width: 32px; height: 32px; margin-top: -16px; font-size: 14px; }
}

/* Couleurs par devise */
.currency-dot.eur { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 3px 10px rgba(37,99,235,.4); }
.currency-dot.usd { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 0 0 3px rgba(22,163,74,.25), 0 3px 10px rgba(22,163,74,.4); }
.currency-dot.gbp { background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 3px 10px rgba(124,58,237,.4); }
.currency-dot.ar  { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0 0 3px rgba(245,158,11,.3), 0 3px 10px rgba(245,158,11,.45); font-size: 11px; }
@media (min-width: 640px) { .currency-dot.ar { font-size: 13px; } }

/* Circuit : les devises EUR/USD/GBP voyagent EU → MG (décalées),
   l'Ariary revient MG → EU. Cadence lente et continue.            */
.currency-dot.go  { animation: cur-go 5.4s cubic-bezier(.45,.05,.5,.95) infinite; }
.currency-dot.back{ animation: cur-back 5.4s cubic-bezier(.45,.05,.5,.95) infinite; }
.currency-dot.eur { animation-delay: 0s; }
.currency-dot.usd { animation-delay: 1.8s; }
.currency-dot.gbp { animation-delay: 3.6s; }
.currency-dot.ar  { animation-delay: 2.7s; }

/* Aller (EU → MG) : entre par la gauche, sort à droite, léger rebond vertical */
@keyframes cur-go {
  0%   { left: 0%;   opacity: 0; transform: scale(.5) translateY(0); }
  10%  { opacity: 1; transform: scale(1) translateY(-3px); }
  50%  { transform: scale(1.1) translateY(2px); }
  90%  { opacity: 1; transform: scale(1) translateY(-3px); }
  100% { left: 100%; opacity: 0; transform: scale(.5) translateY(0); }
}
/* Retour (MG → EU) */
@keyframes cur-back {
  0%   { left: 100%; opacity: 0; transform: scale(.5) translateY(0); }
  10%  { opacity: 1; transform: scale(1) translateY(3px); }
  50%  { transform: scale(1.1) translateY(-2px); }
  90%  { opacity: 1; transform: scale(1) translateY(3px); }
  100% { left: 0%;   opacity: 0; transform: scale(.5) translateY(0); }
}

/* ---- Halo pulsant autour du bouclier escrow ---- */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,94,235,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(37,94,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,94,235,0); }
}
.escrow-pulse { animation: pulse-ring 2.4s ease-out infinite; }

/* ---- Apparition en cascade ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise .6s ease-out both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .15s; }
.rise-3 { animation-delay: .25s; }
.rise-4 { animation-delay: .35s; }
.rise-5 { animation-delay: .45s; }

/* ---- Tuiles d'accès : barre de couleur animée au survol ---- */
.quick-tile { position: relative; overflow: hidden; }
.quick-tile::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--eu-blue), var(--mg-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.quick-tile:hover::after { transform: scaleX(1); }

/* ---- Pictos méthodes : pop au survol ---- */
.method-pop { transition: transform .2s ease, color .2s ease; }
.method-pop:hover { transform: translateY(-3px) scale(1.06); }

/* ---- Badge brillant ---- */
.shine-badge {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(37,94,235,.10), rgba(0,132,61,.10));
}
.shine-badge::before {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: badge-shine 3.5s ease-in-out infinite;
}
@keyframes badge-shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }

/* Respecte les préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .flag-float, .transfer-dot, .escrow-pulse, .rise, .transfer-line, .shine-badge::before {
    animation: none !important;
  }
  /* Sans animation : répartir les devises statiquement sur le circuit
     pour qu'elles restent visibles et lisibles.                         */
  .currency-dot { opacity: 1 !important; transform: none !important; }
  .currency-dot.eur { left: 12%; }
  .currency-dot.usd { left: 38%; }
  .currency-dot.gbp { left: 64%; }
  .currency-dot.ar  { left: 86%; }
}

/* ═══════════════════════════════════════════════════════════════════
   COUCHE 5 — Bouton « Envoyer » remarquable + double flèche verticale
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Bouton ENVOYER : dégradé animé + glow pulsant + brillance ---- */
.btn-send {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #2563EB, #6D28D9, #059669, #2563EB);
  background-size: 280% 280%;
  animation: send-flow 6s ease infinite, send-glow 2.6s ease-in-out infinite;
  color: #fff;
}
@keyframes send-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes send-glow {
  0%, 100% { box-shadow: 0 8px 22px -6px rgba(37,94,235,.55), 0 0 0 0 rgba(109,40,217,.45); }
  50%      { box-shadow: 0 12px 30px -6px rgba(5,150,105,.6), 0 0 0 10px rgba(109,40,217,0); }
}
.btn-send:hover { transform: translateY(-2px) scale(1.03); }
.btn-send::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: send-shine 3s ease-in-out infinite;
}
@keyframes send-shine { 0% { left: -75%; } 55%, 100% { left: 130%; } }
.btn-send i { animation: send-plane 2.2s ease-in-out infinite; }
@keyframes send-plane { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(3px) translateY(-2px); } }

/* ---- Flèches croisées (← en haut / → en bas) + globe rotatif au centre ---- */
.dual-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
/* Flèche du haut : pointe vers la GAUCHE (Madagascar → Europe), glisse vers la gauche */
.dual-arrows .left  { color: var(--eu-blue); animation: arrow-left 1.8s ease-in-out infinite; }
/* Flèche du bas : pointe vers la DROITE (Europe → Madagascar), glisse vers la droite */
.dual-arrows .right { color: var(--mg-green); animation: arrow-right 1.8s ease-in-out infinite; }
@keyframes arrow-left  { 0%,100% { transform: translateX(2px); opacity: .55; } 50% { transform: translateX(-4px); opacity: 1; } }
@keyframes arrow-right { 0%,100% { transform: translateX(-2px); opacity: .55; } 50% { transform: translateX(4px); opacity: 1; } }

/* Globe coloré qui tourne en permanence */
.globe-spin {
  display: inline-block;
  font-size: 1.35em;
  margin: 1px 0;
  filter: drop-shadow(0 1px 3px rgba(37, 94, 235, .35)) saturate(1.4);
  animation: spin-globe 5s linear infinite;
}
@keyframes spin-globe { to { transform: rotate(360deg); } }

/* ---- Bandeau coloré qui met en avant le bouton « Envoyer » ---- */
.send-banner {
  background: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 50%, #059669 100%);
  background-size: 200% 200%;
  animation: send-banner-shift 8s ease infinite;
  box-shadow: 0 18px 40px -14px rgba(37, 94, 235, .55);
}
@keyframes send-banner-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.send-banner-label i { animation: label-bounce 1.4s ease-in-out infinite; }
@keyframes label-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* Sur fond coloré, le bouton passe en blanc éclatant avec texte dégradé pour ressortir */
.send-banner .btn-send {
  background: #ffffff;
  color: #1D4ED8;
  animation: send-glow 2.6s ease-in-out infinite;
}
.send-banner .btn-send:hover { color: #6D28D9; }
.send-banner .btn-send::after { background: linear-gradient(90deg, transparent, rgba(37,94,235,.25), transparent); }

@media (prefers-reduced-motion: reduce) {
  .btn-send, .btn-send::after, .btn-send i,
  .dual-arrows .left, .dual-arrows .right,
  .globe-spin, .send-banner, .send-banner-label i { animation: none !important; }
}