/* ================================================
   CREDIAFINANX — main.css
   Design financier allemand — sobre, rigoureux, premium
   ================================================ */

/* ---- IMPORT POLICE ALLEMANDE ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---- VARIABLES -------------------------------- */
:root {
  /* Palette financière allemande */
  --primary:       #003B7A;   /* Bleu marine prussien */
  --primary-dk:    #00255C;
  --primary-lt:    #E8F0FB;
  --accent:        #C0392B;   /* Rouge accent discret */
  --accent-lt:     #FDECEA;
  --gold:          #B8963E;   /* Or — confiance, premium */
  --dark:          #0A1929;
  --text:          #1A1A2E;
  --text-light:    #5A6478;
  --border:        #DDE3ED;
  --bg-light:      #F4F6FA;
  --bg-section:    #FAFBFD;
  --white:         #FFFFFF;

  /* Rayons — moins arrondis = plus sobre */
  --radius-sm:  0.25rem;
  --radius-md:  0.4rem;
  --radius-lg:  0.6rem;
  --radius-xl:  0.8rem;
  --radius-2xl: 1rem;

  /* Ombres sobres */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12);

  --transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* ---- RESET & BASE ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family:  'Inter', -apple-system, BlinkMacSystemFont,
                'Segoe UI', sans-serif;
  font-size:    16px;
  font-weight:  400;
  color:        var(--text);
  background:   var(--white);
  padding-top:  74px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color:       var(--dark);
  line-height: 1.2;
}

p {
  font-size:   16px;
  line-height: 1.75;
  color:       var(--text);
}

a { transition: var(--transition); }

small, .small { font-size: 13px; }
.text-muted   { font-size: 15px; color: var(--text-light) !important; }

.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.pt-6 { padding-top: 6rem !important; }
.mb-6 { margin-bottom: 5rem !important; }

/* ---- NAVBAR ----------------------------------- */
#mainNav {
  background:    rgba(255,255,255,.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow:    0 1px 0 var(--border);
  transition:    var(--transition);
  padding:       0;
  height:        74px;
  display:       flex;
  align-items:   center;
}
#mainNav.scrolled {
  box-shadow: var(--shadow-md);
}
#mainNav .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
}

/* Logo */
.brand-logo {
  width:         40px;
  height:        40px;
  background:    var(--primary);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  position:      relative;
  overflow:      hidden;
}
.brand-logo::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  right:      0;
  width:      12px;
  height:     12px;
  background: var(--accent);
  border-radius: var(--radius-sm) 0 0 0;
}
.brand-n {
  color:       #fff;
  font-weight: 900;
  font-size:   20px;
  line-height: 1;
  z-index:     1;
}
.brand-name {
  font-weight:    800;
  font-size:      19px;
  color:          var(--dark);
  letter-spacing: -.3px;
}
.brand-name span {
  color: var(--accent);
}

/* Nav links */
#mainNav .nav-link {
  font-weight: 500;
  font-size:   14px;
  color:       var(--text);
  padding:     8px 14px !important;
  border-radius: var(--radius-md);
  transition:  var(--transition);
  letter-spacing: .1px;
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  background: var(--primary-lt);
  color:      var(--primary);
}

#mainNav .dropdown-menu {
  border:        1px solid var(--border);
  box-shadow:    var(--shadow-md);
  border-radius: var(--radius-lg);
  padding:       8px;
  margin-top:    4px;
}
#mainNav .dropdown-item {
  border-radius: var(--radius-md);
  padding:       9px 14px;
  font-size:     14px;
  font-weight:   500;
  color:         var(--text);
  transition:    var(--transition);
}
#mainNav .dropdown-item:hover {
  background: var(--primary-lt);
  color:      var(--primary);
}

/* CTA Navbar */
.btn-nav-cta {
  background:    var(--primary);
  color:         #fff !important;
  border:        none;
  border-radius: var(--radius-md);
  padding:       9px 18px;
  font-size:     14px;
  font-weight:   600;
  letter-spacing: .2px;
  transition:    var(--transition);
  white-space:   nowrap;
}
.btn-nav-cta:hover {
  background: var(--primary-dk);
  color:      #fff !important;
  transform:  translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,59,122,.3);
}

/* ---- LANGUAGE SWITCHER ------------------------ */
.lang-switcher {
  display:     flex;
  align-items: center;
  gap:         4px;
  background:  var(--bg-light);
  border:      1px solid var(--border);
  border-radius: var(--radius-md);
  padding:     3px;
}
.lang-btn {
  background:    none;
  border:        none;
  padding:       4px 6px;
  cursor:        pointer;
  border-radius: var(--radius-sm);
  opacity:       .55;
  transition:    var(--transition);
  line-height:   1;
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     12px;
  font-weight:   600;
  color:         var(--text-light);
}
.lang-btn:hover { opacity: 1; }
.lang-btn.active {
  opacity:       1;
  background:    var(--white);
  color:         var(--primary);
  box-shadow:    var(--shadow-xs);
}
.lang-btn img {
  display:       block;
  border-radius: 2px;
  width:         20px;
  height:        14px;
  object-fit:    cover;
}

/* ---- SECTION HEADERS -------------------------- */
.section-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     var(--primary-lt);
  color:          var(--primary);
  padding:        5px 14px;
  border-radius:  2rem;
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom:  14px;
  border-left:    3px solid var(--primary);
}
.section-title {
  font-size:   clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color:       var(--dark);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -.3px;
}
.section-sub {
  color:       var(--text-light);
  font-size:   17px;
  line-height: 1.7;
  max-width:   560px;
  margin:      0 auto;
}

/* Ligne décorative sous titre section */
.section-divider {
  width:        48px;
  height:       3px;
  background:   var(--accent);
  border-radius: 2px;
  margin:       16px 0 24px;
}

/* ---- PAGE HEADER ------------------------------- */
.page-header {
  background: linear-gradient(
    135deg,
    var(--dark) 0%,
    var(--primary) 60%,
    #0055B3 100%
  );
  padding:       110px 0 56px;
  position:      relative;
  overflow:      hidden;
}
.page-header::before {
  content:      '';
  position:     absolute;
  top:          0; right: 0;
  width:        400px; height: 400px;
  background:   radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  border-radius: 50%;
}
.page-header h1 {
  font-size:   clamp(1.8rem, 3.5vw, 2.8rem);
  color:       #fff;
  font-weight: 800;
  letter-spacing: -.3px;
}
.page-header p {
  font-size: 17px;
  color:     rgba(255,255,255,.75);
}

/* ---- HERO SECTION ----------------------------- */
.hero-section {
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(
    140deg,
    var(--dark)  0%,
    #002F6C     45%,
    #003B7A     100%
  );
  min-height: 100vh;
  display:    flex;
  align-items: center;
}

/* Motif géométrique fond hero style allemand */
.hero-section::before {
  content:    '';
  position:   absolute;
  top:        -100px; right: -100px;
  width:      600px;  height: 600px;
  background: radial-gradient(
    circle,
    rgba(192,57,43,.12) 0%,
    transparent 65%
  );
  border-radius: 50%;
  pointer-events: none;
}
.hero-section::after {
  content:   '';
  position:  absolute;
  bottom:    50px; left: -80px;
  width:     350px; height: 350px;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.04) 0%,
    transparent 65%
  );
  border-radius: 50%;
  pointer-events: none;
}

.hero-eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  color:         rgba(255,255,255,.65);
  font-size:     13px;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
  padding:       5px 12px;
  border:        1px solid rgba(255,255,255,.15);
  border-radius: 2rem;
  backdrop-filter: blur(8px);
}
.hero-eyebrow::before {
  content:       '';
  width:         6px; height: 6px;
  background:    var(--accent);
  border-radius: 50%;
}

.hero-title {
  font-size:   clamp(2.2rem, 4.5vw, 3.8rem);
  color:       #fff;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.5px;
  margin-bottom: 24px;
}
.hero-title .text-accent {
  color:    #E8B84B;
  position: relative;
}
.hero-title .text-accent::after {
  content:    '';
  position:   absolute;
  bottom:     -4px; left: 0;
  width:      100%; height: 3px;
  background: var(--accent);
  border-radius: 2px;
  opacity:    .6;
}
.text-accent { color: #E8B84B; }

.hero-subtitle {
  color:       rgba(255,255,255,.78);
  font-size:   17px;
  line-height: 1.75;
  margin-bottom: 36px;
  max-width:   520px;
  font-weight: 400;
}

.hero-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  background:   rgba(255,255,255,.08);
  border:       1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  padding:      8px 14px;
  font-size:    13px;
  color:        rgba(255,255,255,.8);
  font-weight:  500;
  margin-top:   16px;
}
.hero-badge i { color: #4ADE80; }

.hero-wave {
  position: absolute;
  bottom:   0; left: 0; right: 0;
  line-height: 0;
  z-index:  1;
}
.hero-wave svg { display: block; }

/* ---- HERO IMAGE ------------------------------- */
.hero-image-wrapper {
  position:      relative;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  box-shadow:    0 24px 64px rgba(0,0,0,.35);
  border:        1px solid rgba(255,255,255,.1);
  max-width:     520px;
  width:         100%;
}
.hero-image-wrapper::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  z-index:    2;
}
.hero-image {
  max-height:  460px;
  width:       100%;
  object-fit:  cover;
  display:     block;
  filter:      brightness(.95) contrast(1.05);
}

/* Bandeau confiance sur l'image hero */
.hero-trust-badge {
  position:      absolute;
  bottom:        16px; left: 16px;
  background:    rgba(10,25,41,.85);
  backdrop-filter: blur(12px);
  border:        1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding:       10px 16px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  z-index:       3;
}
.hero-trust-badge .badge-icon {
  width:         36px; height: 36px;
  background:    var(--primary);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}
.hero-trust-badge .badge-text {
  font-size:   11px;
  color:       rgba(255,255,255,.7);
  line-height: 1.3;
}
.hero-trust-badge .badge-text strong {
  display:    block;
  font-size:  14px;
  color:      #fff;
  font-weight: 700;
}

/* ---- LOAN TABS (home) ------------------------- */
.loan-tabs { gap: .5rem; }
.loan-tab-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 18px;
  background:    var(--white);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size:     14px;
  font-weight:   600;
  color:         var(--text);
  text-decoration: none;
  transition:    var(--transition);
  letter-spacing: .1px;
}
.loan-tab-btn:hover,
.loan-tab-btn.active {
  background:   var(--primary-lt);
  border-color: var(--primary);
  color:        var(--primary);
  box-shadow:   var(--shadow-xs);
}
.loan-tab-btn img {
  width:       22px; height: 22px;
  object-fit:  contain;
}

/* ---- OFFER STATS ------------------------------ */
.offer-stat {
  background:    var(--bg-light);
  border-radius: var(--radius-md);
  padding:       16px 20px;
  border-left:   3px solid var(--primary);
  text-align:    left;
}
.offer-stat-label {
  font-size:      11px;
  color:          var(--text-light);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom:  4px;
}
.offer-stat-value {
  font-size:   1.5rem;
  font-weight: 800;
  color:       var(--primary);
}

/* ---- SVG ILLUSTRATIONS (offres) --------------- */
.offer-svg-container {
  background:    var(--bg-light);
  border-radius: var(--radius-xl);
  padding:       2rem;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         100%;
  max-width:     420px;
  border:        1px solid var(--border);
  transition:    var(--transition);
}
.offer-svg-container:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.offer-svg-img {
  width:      100%;
  max-width:  380px;
  height:     auto;
  min-height: 220px;
}

/* ---- STATS SECTION ---------------------------- */
.stats-section {
  background: var(--primary);
  position:   relative;
  overflow:   hidden;
}
.stats-section::before {
  content:    '';
  position:   absolute;
  top:        0; right: 0;
  width:      300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
  border-radius: 50%;
}
.stat-card {
  padding:       2rem;
  border-radius: var(--radius-xl);
  background:    rgba(255,255,255,.06);
  border:        1px solid rgba(255,255,255,.1);
  border-top:    3px solid var(--accent);
  transition:    var(--transition);
}
.stat-card:hover {
  background: rgba(255,255,255,.1);
}
.stat-number {
  font-size:   2.8rem;
  font-weight: 900;
  color:       #fff;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size:   14px;
  color:       rgba(255,255,255,.65);
  font-weight: 500;
}

/* ---- TRUST SECTION (nouvelle pour allemand) --- */
.trust-bar {
  background:    var(--white);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding:       18px 0;
}
.trust-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   14px;
  font-weight: 600;
  color:       var(--text);
  padding:     0 24px;
  border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-item i { color: var(--primary); font-size: 20px; }

/* ---- LOAN TYPE CARDS (select type) ------------ */
.loan-type-card {
  background:    var(--white);
  border-radius: var(--radius-xl);
  padding:       28px 24px;
  text-align:    left;
  box-shadow:    var(--shadow-xs);
  border:        1.5px solid var(--border);
  transition:    var(--transition);
  position:      relative;
  overflow:      hidden;
}
.loan-type-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--primary);
  transform:  scaleX(0);
  transition: var(--transition);
  transform-origin: left;
}
.loan-type-card:hover {
  border-color: var(--primary);
  box-shadow:   var(--shadow-md);
  transform:    translateY(-4px);
}
.loan-type-card:hover::before {
  transform: scaleX(1);
}
.ltc-icon-wrap {
  width:         52px; height: 52px;
  background:    var(--primary-lt);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 16px;
  transition:    var(--transition);
}
.loan-type-card:hover .ltc-icon-wrap {
  background: var(--primary);
}
.loan-type-card:hover .ltc-icon-wrap img {
  filter: brightness(10);
}
.ltc-icon-wrap img {
  width:      28px; height: 28px;
  object-fit: contain;
  transition: var(--transition);
}
.ltc-title {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--dark);
  margin-bottom: 6px;
}
.ltc-desc {
  color:       var(--text-light);
  font-size:   13px;
  line-height: 1.5;
}
.ltc-meta {
  display:        flex;
  justify-content: space-between;
  margin-top:     16px;
  padding-top:    14px;
  border-top:     1px solid var(--border);
  font-size:      12px;
}
.ltc-meta-item { font-weight: 700; color: var(--primary); }
.ltc-meta-label { color: var(--text-light); font-weight: 400; }

/* ---- SIMULATOR RESULT PANEL ------------------- */
.sim-result-panel {
  background:    var(--primary);
  color:         #fff;
  border-radius: var(--radius-xl);
  padding:       28px;
  border-top:    4px solid var(--accent);
}
.sim-row {
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  padding:       10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sim-row.last   { border-bottom: none; }
.sim-row.highlight {
  background:    rgba(255,255,255,.08);
  margin:        6px -12px;
  padding:       12px;
  border-radius: var(--radius-md);
  border:        none;
}
.sim-row span          { font-size: 14px; opacity: .8; }
.sim-row strong        { font-size: 15px; font-weight: 700; }
.sim-row.highlight strong { font-size: 1.2rem; color: #FFD700; }

.schedule-preview { font-size: 11px; }
.sp-header, .sp-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
  gap:     4px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sp-header { opacity: .6; font-weight: 700; }
.sp-row    { opacity: .85; }

/* ---- TESTIMONIALS ----------------------------- */
.testimonial-card {
  background:    var(--white);
  border-radius: var(--radius-xl);
  padding:       28px;
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--border);
  border-left:   4px solid var(--primary);
  transition:    var(--transition);
  height:        100%;
}
.testimonial-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tc-quote {
  font-size:   32px;
  color:       var(--primary);
  line-height: 1;
  margin-bottom: 12px;
  font-weight: 900;
  opacity:     .3;
}
.tc-stars   { font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.tc-content {
  font-size:   15px;
  color:       var(--text);
  line-height: 1.7;
  font-style:  italic;
}
.tc-avatar {
  width:         44px; height: 44px;
  background:    var(--primary);
  color:         #fff;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   800;
  font-size:     17px;
  flex-shrink:   0;
}

/* ---- CTA BOX ---------------------------------- */
.cta-box {
  background:    var(--primary);
  border-radius: var(--radius-2xl);
  padding:       60px 48px;
  position:      relative;
  overflow:      hidden;
  border-left:   6px solid var(--accent);
}
.cta-box::before {
  content:       '';
  position:      absolute;
  top:           -60px; right: -60px;
  width:         240px; height: 240px;
  background:    radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius: 50%;
}

/* ---- VALUE CARDS (about) ---------------------- */
.value-card {
  background:    var(--white);
  border-radius: var(--radius-xl);
  padding:       28px;
  box-shadow:    var(--shadow-xs);
  border:        1px solid var(--border);
  border-top:    3px solid var(--primary);
  height:        100%;
  transition:    var(--transition);
}
.value-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}
.vc-icon {
  width:         48px; height: 48px;
  background:    var(--primary-lt);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     22px;
  margin-bottom: 16px;
}

/* ---- CONTACT ICON BOX ------------------------- */
.contact-icon-box {
  width:         46px; height: 46px;
  background:    var(--primary);
  color:         #fff;
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     18px;
  flex-shrink:   0;
}

/* ---- CONFIRMATION ----------------------------- */
.ref-badge {
  display:       inline-block;
  font-family:   'Courier New', monospace;
  font-size:     1.8rem;
  font-weight:   800;
  color:         var(--primary);
  background:    var(--primary-lt);
  padding:       12px 32px;
  border-radius: var(--radius-md);
  letter-spacing: 3px;
  cursor:        pointer;
  border:        2px dashed rgba(0,59,122,.25);
  transition:    var(--transition);
}
.ref-badge:hover {
  background: rgba(0,59,122,.1);
  border-style: solid;
}

/* ---- DASHBOARD LOAN CARDS --------------------- */
.loan-card-dash {
  transition:    var(--transition);
  border-left:   3px solid var(--primary) !important;
}
.loan-card-dash:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.display-6 { font-size: 2.8rem !important; }

/* ---- FILE UPLOAD CUSTOM ----------------------- */
.file-upload-input { display: none; }
.file-upload-label {
  cursor:        pointer;
  border:        2px dashed var(--border);
  border-radius: var(--radius-md);
  padding:       14px 16px;
  transition:    var(--transition);
  color:         var(--text-light);
}
.file-upload-label:hover {
  border-color: var(--primary);
  color:        var(--primary);
  background:   var(--primary-lt);
}
.file-upload-label.has-file {
  border-color: var(--primary);
  color:        var(--primary);
  background:   var(--primary-lt);
  border-style: solid;
}

/* ---- FOOTER ----------------------------------- */
.site-footer   { background: var(--dark); }
.footer-top    { padding: 64px 0 40px; }
.footer-bottom {
  padding:     20px 0;
  border-top:  1px solid rgba(255,255,255,.07);
}
.footer-title {
  color:         #fff;
  font-size:     13px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom:  1px solid rgba(255,255,255,.08);
}
.footer-links {
  list-style: none;
  padding:    0;
  margin:     0;
}
.footer-links li {
  margin-bottom: 10px;
  font-size:     14px;
  color:         rgba(255,255,255,.55);
}
.footer-links a {
  color:          rgba(255,255,255,.55);
  text-decoration: none;
  transition:     var(--transition);
}
.footer-links a:hover { color: rgba(255,255,255,.9); }

.social-link {
  width:         36px; height: 36px;
  background:    rgba(255,255,255,.06);
  color:         rgba(255,255,255,.6);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     15px;
  text-decoration: none;
  border:        1px solid rgba(255,255,255,.08);
  transition:    var(--transition);
}
.social-link:hover {
  background: var(--primary);
  border-color: var(--primary);
  color:        #fff;
}

/* ---- WHATSAPP FLOAT --------------------------- */
.whatsapp-float {
  position:      fixed;
  bottom:        28px; left: 22px;
  z-index:       9000;
  width:         52px; height: 52px;
  background:    #25D366;
  color:         #fff;
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     24px;
  text-decoration: none;
  box-shadow:    0 4px 16px rgba(37,211,102,.4);
  transition:    var(--transition);
}
.whatsapp-float:hover {
  transform:    scale(1.05) translateY(-2px);
  color:        #fff;
  box-shadow:   0 6px 20px rgba(37,211,102,.5);
}

/* ---- BUTTONS ---------------------------------- */
.btn {
  font-size:     14px;
  font-weight:   600;
  border-radius: var(--radius-md);
  letter-spacing: .2px;
}
.btn-lg {
  font-size: 15px;
  padding:   13px 26px;
}
.btn-primary {
  background:   var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background:   var(--primary-dk);
  border-color: var(--primary-dk);
  transform:    translateY(-1px);
  box-shadow:   0 4px 12px rgba(0,59,122,.3);
}
.btn-danger-custom {
  background:   var(--accent);
  border-color: var(--accent);
  color:        #fff;
}
.btn-danger-custom:hover {
  background:   #A93226;
  border-color: #A93226;
  color:        #fff;
}
.btn-outline-primary {
  border-color: var(--primary);
  color:        var(--primary);
}
.btn-outline-primary:hover {
  background:   var(--primary);
  border-color: var(--primary);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.15);
  color:      #fff;
}

/* Bouton d'action principal (CTA) */
.btn-cta {
  background:    var(--accent);
  border:        none;
  color:         #fff;
  font-weight:   700;
  padding:       14px 32px;
  border-radius: var(--radius-md);
  font-size:     15px;
  letter-spacing: .3px;
  transition:    var(--transition);
  position:      relative;
  overflow:      hidden;
}
.btn-cta:hover {
  background: #A93226;
  color:      #fff;
  transform:  translateY(-2px);
  box-shadow: 0 6px 18px rgba(192,57,43,.4);
}

/* ---- FORMS ------------------------------------ */
.form-label {
  font-size:   13px;
  font-weight: 700;
  color:       var(--text);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.form-control,
.form-select {
  font-size:     15px;
  border-radius: var(--radius-md);
  border-color:  var(--border);
  padding:       10px 14px;
  color:         var(--text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(0,59,122,.1);
  outline:      none;
}

/* ---- BADGES & PILLS --------------------------- */
.badge-trust {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    var(--primary-lt);
  color:         var(--primary);
  border:        1px solid rgba(0,59,122,.2);
  border-radius: var(--radius-sm);
  padding:       3px 10px;
  font-size:     11px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---- LEGAL CONTENT ---------------------------- */
.col-lg-8 h4 {
  color:       var(--primary);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin-top:  2.5rem;
}

/* ---- ANIMATIONS ------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-in { animation: fadeInUp .5s ease both; }
.animate-in:nth-child(2) { animation-delay: .08s; }
.animate-in:nth-child(3) { animation-delay: .16s; }
.animate-in:nth-child(4) { animation-delay: .24s; }
.animate-in:nth-child(5) { animation-delay: .32s; }

/* ---- RESPONSIVE ------------------------------- */
@media (max-width: 991px) {
  #mainNav .navbar-collapse {
    background:    var(--white);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-lg);
    padding:       16px;
    margin-top:    8px;
    border:        1px solid var(--border);
  }
}

@media (max-width: 768px) {
  body         { font-size: 15px; padding-top: 64px; }
  .hero-title  { font-size: 2rem; }
  .cta-box     { padding: 36px 20px; }
  .hero-image-wrapper {
    max-width:    100%;
    margin-top:   2rem;
  }
  .hero-image  { max-height: 260px; }
  .hero-section .row { text-align: center; }
  .hero-subtitle {
    margin-left:  auto;
    margin-right: auto;
  }
  .hero-section .d-flex.flex-wrap { justify-content: center; }
  .offer-svg-container { max-width: 100%; }
  .btn-lg      { font-size: 14px; padding: 11px 20px; }
  .loan-type-card { text-align: center; }
  .ltc-icon-wrap  { margin: 0 auto 16px; }
  .offer-stat  { border-left: none; border-top: 3px solid var(--primary); }
  .trust-item  { border-right: none; border-bottom: 1px solid var(--border); padding: 10px 0; }
  .stat-number { font-size: 2.2rem; }
}

@media (min-width: 769px) and (max-width: 991px) {
  .hero-image-wrapper { max-width: 360px; margin-top: 1.5rem; }
  .hero-image { max-height: 300px; }
}