/* ══════════════════════════════════════════════════════════════
   COMPOSANTS UI PARTAGÉS — Fast Bank
   Boutons custom, titres/labels de section, animation reveal au
   scroll. Utilisé sur toutes les pages publiques du site.
   Nécessite css/variables.css chargé avant ce fichier.
   ══════════════════════════════════════════════════════════════ */

/* ─── TITRES DE SECTION ─── */
.section-pad { padding: 80px 0; }
.section-label { display: inline-block; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); margin-bottom: 12px; }
.section-title { font-family: 'Nunito', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--dark); line-height: 1.2; margin-bottom: 0; }
.divider { width: 50px; height: 3px; background: var(--primary); margin: 1.2rem 0 2rem; border-radius: 2px; }
.section-desc { color: var(--gray); font-size: 1rem; max-width: 580px; line-height: 1.7; }

/* ─── BOUTONS CUSTOM ─── */
.btn-primary-custom { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 14px 28px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .95rem; cursor: pointer; transition: background .3s, transform .2s, box-shadow .3s; text-decoration: none; }
.btn-primary-custom:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6,187,204,.35); color: #fff; }
.btn-ghost-custom { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: 8px; padding: 12px 28px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .95rem; cursor: pointer; transition: background .3s, color .3s; text-decoration: none; }
.btn-ghost-custom:hover { background: var(--primary); color: #fff; }

/* ─── ANIMATION REVEAL AU SCROLL ─── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }