/* ==========================================================================
   NguePay — Composants additionnels (components.css)
   ========================================================================== */

/* Tooltip */
.tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--color-text-muted); }
.tooltip::after {
  content: attr(data-tip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.tooltip:hover::after { opacity: 1; }

/* Logos providers (bandeau) */
.logos-row { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; align-items: center; }
.logo-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-text-muted); font-size: 15px; }

/* Mockup téléphone */
.phone { width: 230px; margin: 0 auto; border: 10px solid #0b1726; border-radius: 32px; background: #fff; padding: 14px; box-shadow: var(--shadow-hover); }
.phone .ph-head { text-align: center; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; }
.phone .ph-amount { text-align: center; font-size: 26px; font-weight: 800; margin: 10px 0; }
.phone .ph-btn { background: var(--color-primary); color: #fff; text-align: center; padding: 10px; border-radius: 8px; font-weight: 600; font-size: 14px; margin-top: 12px; }

/* Bulle WhatsApp */
.wa-bubble { max-width: 280px; background: #dcf8c6; border-radius: 12px 12px 12px 2px; padding: 12px 14px; font-size: 14px; box-shadow: var(--shadow-card); }
.wa-bubble a { word-break: break-all; }
.wa-bubble small { color: var(--color-text-muted); display: block; text-align: right; margin-top: 4px; }

/* Toast copie */
.copied-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-text); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 1000; opacity: 0; transition: opacity var(--transition); }
.copied-toast.show { opacity: 1; }

/* Page hero générique (sous-pages) */
.page-hero { background: linear-gradient(180deg, #eaf6fb, #fff); padding: 64px 0 40px; text-align: center; }
.page-hero h1 { font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; letter-spacing: -0.02em; }
.page-hero p { color: var(--color-text-muted); font-size: 18px; max-width: 600px; margin: 14px auto 0; }