:root {
  /* PRIMARY COLORS */
  --primary-blue: #1E3A8A;
  --primary-orange: #F59E0B;

  /* HOVER / STATES */
  --orange-hover: #D97706;
  --blue-hover: #172554;
  --font-size-base: 16px !important;

  /* BACKGROUND */
  --bg-light: #F8FAFC;
  --bg-white: #FFFFFF;

  /* TEXT COLORS */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-light: #FFFFFF;

  /* BORDER */
  --border-color: #E5E7EB;

  /* SHADOW */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);

  /* BUTTON */
  --btn-radius: 10px;
  --transition: all 0.3s ease;
  
}
html{
    font-size: var(--font-size-base) !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg-light);
}

/* CONTAINER */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* évite les gaps invisibles */
section {
  margin: 0;
  padding: 0;
}
main {
  flex: 1;
}
/* --------------------------HEADER------------------------------ */

:root {
  --topbar-height: 48px;
}

   /* TOP BAR */

.top-bar {

  background: linear-gradient(
    90deg,
    var(--blue-hover),
    #1a3688,
    var(--primary-orange)
  );

  padding: 10px 0;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  z-index: 2000;
}

.top-bar-content {

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left {

  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.top-link {

  color: white;
  text-decoration: none;

  display: flex;
  gap: 8px;
  align-items: center;

  font-size: 14px;
}

.top-btn {

  background: rgba(255,255,255,0.15);

  color: white;

  padding: 6px 14px;

  border-radius: 8px;

  text-decoration: none;

  font-weight: 600;

  transition: var(--transition);
}

.top-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 15px rgba(245, 158, 11, 0.35);
}

   /* HEADER FIXE */

.main-header {

  position: fixed;

  top: var(--topbar-height);

  left: 0;

  width: 100%;

  background: white;

  z-index: 1500;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.header-content {

  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 80px;
}

/* =========================
   BODY SPACING
========================= */

body {

  padding-top: calc(var(--topbar-height) + 80px);
}

/* =========================
   LOGO
========================= */

.logo h1 {

  font-size: 28px;
  color: var(--primary-blue);
}

/* =========================
   NAV DESKTOP
========================= */

.nav ul {

  display: flex;
  gap: 30px;
  list-style: none;
}

.nav a {

  text-decoration: none;
  color: #111827;
  font-weight: 600;
}

.nav a:hover {
  color: var(--primary-orange);
}

/* =========================
   BUTTON
========================= */

.btn-primary {

  background: var(--primary-orange) !important;

  color: white !important;

  padding: 10px 18px !important;

  border-radius: 10px !important;

  text-decoration: none !important;

  font-weight: 600 !important;

  transition: var(--transition);
}

.btn-primary:hover {

  background-color: #D97706 !important;

  color: white !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 15px rgba(245, 158, 11, 0.35) !important;
}

/* =========================
   HAMBURGER
========================= */

.hamburger {

  display: none;

  background: none;
  border: none;

  cursor: pointer;

  z-index: 3000;
}

.hamburger span {

  display: block;

  width: 28px;
  height: 3px;

  margin: 6px 0;

  background: var(--primary-blue);

  border-radius: 5px;

  transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* =========================
   OVERLAY
========================= */

.overlay {

  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.4);

  opacity: 0;
  visibility: hidden;

  transition: 0.3s ease;

  z-index: 1400;
}

.overlay.active {

  opacity: 1;
  visibility: visible;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  :root {
    --topbar-height: 48px;
  }

  /* TOP BAR */

  .top-bar {

    height: var(--topbar-height);

    padding: 0;
  }

  .top-bar-content {

    height: 100%;

    justify-content: center;
  }

  .top-bar-left {

    width: 100%;

    justify-content: center;

    align-items: center;

    flex-wrap: nowrap;

    gap: 20px;
  }

  /* Cache localisation */

  .top-bar-left .top-link:first-child {
    display: none;
  }

  .top-link {

    font-size: 13px;

    white-space: nowrap;
  }

  .top-btn {
    display: none;
  }

  /* HEADER */

  .main-header {

    top: var(--topbar-height);
  }

  body {

    padding-top: calc(var(--topbar-height) + 80px);
  }

  .header-cta {
    display: none;
  }

  .hamburger {
    display: block;
  }

  /* MENU MOBILE */

  .nav {

    position: fixed;

    top: calc(var(--topbar-height) + 80px);

    left: 0;

    width: 100%;

    background: white;

    max-height: 0;

    overflow: hidden;

    transition: max-height .35s ease;

    z-index: 1501;

    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .nav.active {

    max-height: 500px;
  }

  .nav ul {

    flex-direction: column;

    gap: 0;
  }

  .nav li {

    width: 100%;
  }

  .nav a {

    display: block;

    width: 100%;

    padding: 16px;

    text-align: center;

    border-bottom: 1px solid #eee;
  }

}
/* -----------------------SECTION HERO----------------------------------- */
.hero {
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.hero-slide {

  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  opacity: 0;

  transition: opacity 1.8s ease-in-out;

  display: flex;

  align-items: center;

}

/* slide actif */
.hero-slide.active {
  opacity: 1;
  z-index: 2;
}

   /* ANIMATION IMAGE (ZOOM DOUX) */

.hero-slide {
  transform: scale(1.05);
  transition: opacity 1.8s ease-in-out, transform 6s ease-in-out;
}

.hero-slide.active {
  transform: scale(1);
}
   /* OVERLAY */

.hero-overlay {

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.75),
    rgba(30,58,138,0.55),
    rgba(245,158,11,0.25)
  );

  z-index: 1;
}

   /* CONTENT ALIGNÉ COMME HEADER */

.hero-content {

  position: absolute;

  top: 50%;
  transform: translateY(-50%);

  z-index: 2;

  color: white;

  max-width: 600px;

  text-align: left;

  /* IMPORTANT : même logique que container */
  left: 50%;
  transform: translate(-50%, -50%);

  /* MAIS on recentre dans container visuel */
}

   /* ASTUCE ALIGNEMENT CONTAINER */

.hero-content {
  width: 100%;
  max-width: 1100px; /* DOIT MATCH ton container */
  padding: 0 20px;
}

/* texte bloc interne */
.hero-inner {
  max-width: 600px;
}

   /* TYPO */

.hero-content h1 {

  font-size: 48px;
  margin-bottom: 15px;
}

.hero-content p {

  font-size: 18px !important;
  margin-bottom: 25px;
  opacity: 0.9;
}

   /* BUTTON */

.hero .btn-primary {
  display: inline-block;
  background-color: var(--orange-hover) !important;
  color: #FFFFFF;
}

   /* MOBILE */

@media (max-width: 768px) {

  .hero {
    height: 50vh;
  }

  .hero-content {

    top: 50%;
    left: 0;
    transform: translateY(-50%);

    width: 100%;

    text-align: center;
  }

  .hero-content h1 {
    font-size: 28px;
  }

  .hero-content p {
    font-size: 15px;
  }
}

/* ------------POURQUOI PERFINANCES ? ------------------------------- */
.why-us {

  padding: 70px 0;

  background: linear-gradient(180deg, #f8fafc, #ffffff);
}

.why-title {

  text-align: center;

  font-size: 34px;

  margin-bottom: 8px;

  line-height: 1.2;

  color: var(--text-primary);
  font-weight: 700px;
}

.why-title strong {
  color: var(--primary-blue);
}

.title-line {

  width: 60px;

  height: 3px;

  margin: 10px auto 18px;

  background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange));

  border-radius: 10px;
}

/* INTRO PLUS COURTE */

.why-intro {

  text-align: center;

  max-width: 650px;

  margin: 0 auto 35px;

  font-size: 16px !important;

  color: var(--text-secondary);

  line-height: 1.5;
}

.why-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  max-width: 1000px;

  margin: 0 auto;
}

.why-card {

  background: var(--bg-white);

  border-radius: 14px;

  padding: 18px 16px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.06);

  transition: 0.25s ease;

  border: 1px solid rgba(0,0,0,0.04);

  text-align: center;
}

.why-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 18px 35px rgba(0,0,0,0.08);
}

/* ICON PLUS PETIT */

.why-card .icon {

  font-size: 26px;

  margin-bottom: 10px;
}

/* TITLE */

.why-card h3 {

  font-size: 16px !important;

  margin-bottom: 6px;

  color: var(--text-primary);
  font-weight: 600;
}

/* TEXT TRÈS COMPACT */

.why-card p {

  font-size: 16px;

  color: var(--text-secondary);

  line-height: 1.4;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px) {

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .why-us {
    padding: 50px 0;
  }

  .why-title {
    font-size: 24px;
  }

  .why-intro {
    font-size: 13px;
    margin-bottom: 25px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .why-card {
    padding: 16px;
  }

  .why-card .icon {
    font-size: 24px;
  }

  .why-card h3 {
    font-size: 14px;
  }

  .why-card p {
    font-size: 12.5px;
  }
}

/* -------------------------SECTION COUNTER SOUS HERO----------------------------- */

.pf-stats {

  position: relative;

  margin-top: -80px;

  z-index: 20;
}

.pf-stats-wrapper {

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.6)
  );

  backdrop-filter: blur(10px);

  border-radius: 20px;

  box-shadow: 0 25px 60px rgba(0,0,0,0.12);

  padding: 35px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

  border: 1px solid rgba(255,255,255,0.4);
}
/* CARD */

.pf-stat-card {

  text-align: center;

  padding: 20px;

  border-radius: 16px;

  transition: var(--transition);
}

.pf-stat-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-md);
}

.pf-stat-card.featured {

  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-orange)
  );

  color: white;
}

/* NUMBER */

.pf-counter {

  font-size: 42px;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 12px;

  color: var(--orange-hover);
}

.pf-stat-card.featured .pf-counter {
  color: white;
}

/* TEXT */

.pf-stat-card p {

  font-size: 15px;

  color: var(--text-secondary);

  font-weight: 600;
}

.pf-stat-card.featured p {
  color: white;
}

/* RESPONSIVE */

@media (max-width: 992px) {

  .pf-stats-wrapper {

    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .pf-stats {

    margin-top: -40px;

    padding: 0 15px;
  }

  .pf-stats-wrapper {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    padding: 15px;

    border-radius: 16px;
  }

  .pf-stat-card {

    padding: 12px 8px;
  }

  .pf-counter {

    font-size: 24px;

    margin-bottom: 6px;
  }

  .pf-stat-card p {

    font-size: 12px;

    line-height: 1.3;

    margin: 0;
  }

}

/* --------------Nos types de pret hero ------------- */

.about-style {

  padding: 100px 0;

  background: linear-gradient(
    180deg,
    #f8fafc,
    #ffffff
  );

  position: relative;
  overflow: hidden;
}

/* GRID */

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;
}

/* TEXT SIDE */

.about-text .tag {

  display: inline-block;

  background: rgba(245, 158, 11, 0.12);

  color: var(--primary-orange);

  padding: 6px 14px;

  border-radius: 20px;

  font-weight: 600;

  font-size: 13px;

  margin-bottom: 15px;
}

.about-text h2 {

  font-size: 38px;

  color: var(--text-primary);

  line-height: 1.2;

  margin-bottom: 20px;
}

.about-text h2 strong {

  color: var(--primary-blue);
}

.about-text p {

  font-size: 16px !important;

  color: var(--text-secondary);

  line-height: 1.7;

  margin-bottom: 20px;
}

/* LIST */

.about-text ul {

  list-style: none;

  padding: 0;
}

.about-text ul li {

  position: relative;

  padding-left: 28px;

  margin-bottom: 12px;

  font-size: 15px;

  color: var(--text-primary);
}

.about-text ul li::before {

  content: "✔";

  position: absolute;

  left: 0;

  color: var(--primary-orange);

  font-weight: bold;
}

/* PROGRESS BAR */

.progress {

  margin-top: 25px;

  width: 100%;

  height: 8px;

  background: #e5e7eb;

  border-radius: 20px;

  overflow: hidden;
}

.bar .fill {

  width: 85%;

  height: 100%;

  background: linear-gradient(
    90deg,
    var(--primary-blue),
    var(--primary-orange)
  );

  border-radius: 20px;
}

/* IMAGE SIDE */

.about-visual {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;
}

.about-visual img {

  width: 100%;

  max-width: 520px;

  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.15);

  transition: transform 0.6s ease;
}

.about-visual:hover img {

  transform: scale(1.03);
}

/* OVERLAY GLOW */

.about-visual::before {

  content: "";

  position: absolute;

  width: 350px;

  height: 350px;

  background: radial-gradient(
    circle,
    rgba(245,158,11,0.25),
    transparent 70%
  );

  top: -50px;

  right: -50px;

  z-index: 0;
}

/* FLOATING CARDS */

.floating-card {

  position: absolute;

  background: white;

  padding: 14px 16px;

  border-radius: 14px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

  width: 180px;

  animation: float 6s ease-in-out infinite;
}

.floating-card h4 {

  font-size: 14px;

  margin-bottom: 5px;

  color: var(--primary-blue);
}

.floating-card p {

  font-size: 12px;

  color: var(--text-secondary);
}

.floating-card.top {
  top: 10%;
  left: -20px;
}

.floating-card.middle {
  bottom: 40%;
  right: -30px;
}

.floating-card.bottom {
  bottom: 10%;
  left: 20px;
}

.floating-card.active {

  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-orange)
  );

  color: white;
}

.floating-card.active h4,
.floating-card.active p {
  color: white;
}

/* FLOAT ANIMATION */

@keyframes float {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-10px); }
}

/* CTA */

.about-style .top {

  text-align: center;

  margin-top: 40px;
}

.about-style .btn-primary {

  padding: 12px 24px;

  font-size: 16px;
}

/* RESPONSIVE */

@media (max-width: 992px) {

  .about-grid {

    grid-template-columns: 1fr;

    gap: 40px;
  }

  .about-text h2 {

    font-size: 30px;
  }

  .about-visual {

    order: -1;
  }

  /* ===== AJOUT CENTRAGE ===== */

  .about-text {
    text-align: center;
  }

  .about-text ul {
    display: inline-block;
    text-align: left;
  }

  .about-text .tag {
    margin: 0 auto 15px;
  }

  .about-visual {
    justify-content: center;
  }

  .about-visual img {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {

  .about-style {

    padding: 70px 0;
  }

  .floating-card {

    display: none;
  }

  .about-text h2 {

    font-size: 22px;
    line-height: 1.3;
  }

  .about-text p,
  .about-text ul li {

    font-size: 14px;
  }

  /* ===== CENTRAGE MOBILE FINAL ===== */

  .about-text {
    text-align: center;
  }

  .about-text ul {
    display: inline-block;
    text-align: left;
  }
}

/* ---------SIMULATION CREDIT--------------- */
.loan-sim {
  padding: 100px 0;
  background: #f8fafc;
}

/* IMPORTANT : respect container */
.loan-sim-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* TITRE */

.loan-sim-title {
  text-align: center;
  font-size: 36px;
  color: #0f172a;
  margin-bottom: 10px;
}

.loan-sim-title strong {
  color: #1e3a8a;
}

.loan-sim-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
  color: #64748b;
}

/* GRID  */

.loan-sim-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;

  align-items: start;

  max-width: 1100px;
  margin: 0 auto;
}

/* FORM CARD */

.loan-sim-form {
  background: #fff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.loan-field {
  margin-bottom: 16px;
}

.loan-field label {
  display: block;
  margin-bottom: 6px;
  color: #475569;
}

.loan-field input {
  width: 100%;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
}

/* BUTTON */

.loan-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--orange-hover);
  transition: 0.2s;
}

.loan-btn:hover {
  transform: translateY(-2px);
}

/* RESULT CARD */

.loan-result-card {
  background: #fff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);

  border-left: 4px solid #1e3a8a;
}

.loan-result-title {
  font-size: 25px;
  margin-bottom: 15px;
  font-weight: 800;
  color: var(--primary-blue);
  text-decoration: overline;
  text-decoration-color: var(--orange-hover);
}

.loan-placeholder {
  color: #64748b;
}

/* résultats */

.loan-results p {
  margin: 10px 0;
  padding: 12px;
  background: #c5c6c8;
  border-radius: 10px;
}

/* CTA */

.loan-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: white;
  background: var(--orange-hover);
}

.loan-cta:hover {
  background: #ae620b;
}

/* NOTE */

.loan-note {
  font-size: 12px;
  color: #272727;
  margin-top: 10px;
}

.loan-static-value {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
  -webkit-text-fill-color: #0f172a;
  opacity: 1;
  cursor: not-allowed;
}

/* =========================
   HOW IT WORKS
========================= */

.how-it-works {
  padding: 100px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  position: relative;
}

.how-it-works::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(30,58,138,0.06), transparent 60%);
  z-index: 0;
}

.how-it-works .container {
  position: relative;
  z-index: 1;
}

.text-center {
  text-align: center;
}

.how-it-works h2 {
  font-size: 36px;
  font-weight: 700;
  margin-top: 15px;
  color: var(--primary-blue) !important;
}

.how-it-works h2 strong {
  color: var(--blue-hover) !important;
}

.how-it-works p {
  color: #64748b;
  max-width: 650px;
  margin: 15px auto 0;
  font-size: 16px;
  line-height: 1.7;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.step-box {
  background: #ffffff;
  padding: 40px 28px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.step-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.step-number {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
  background: var(--orange-hover);
  box-shadow: 0 10px 25px rgba(245,158,11,0.2);
}

.step-box h5 {
  font-size: 18px;
  color: var(--blue-hover);
  margin-bottom: 10px;
}

.step-box p {
  font-size: 16px !important;
  color: #64748b;
  line-height: 1.6;
}

/* =========================
   RESPONSIVE + AJOUTS
========================= */

@media (max-width: 900px) {

  .loan-sim-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .how-it-works h2 {
    font-size: 28px;
  }

  .how-it-works p {
    padding: 0 10px;
  }

  .step-box {
    padding: 28px 20px;
  }

  /* ===== AJOUT CENTRAGE ===== */

  .loan-sim-title,
  .loan-sim-intro {
    text-align: center;
  }

  .loan-sim-wrapper {
    text-align: center;
  }

  .loan-sim-form,
  .loan-result-card {
    margin: 0 auto;
  }

  .loan-result-title {
    text-align: center;
  }
}

/* MOBILE FINAL */

@media (max-width: 600px) {

  .loan-sim-title {
    font-size: 24px;
  }

  .loan-sim-intro {
    font-size: 14px;
  }
}

/* ---------------AVIS CLIENTS -------------------- */

.testimonial-section {
  padding: 100px 0;
  background: #f8fafc;
}

.testimonial-section h2 {
  text-align: center;
  font-size: 34px;
  margin-bottom: 10px;
  color: var(--primary-blue);
}

.testimonial-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
  color: #64748b;
  font-size: 16px !important;
}

/* SLIDER */

.testimonial-slider {
  overflow: hidden;
  width: 100%;
}

.testimonial-track {
  display: flex;
  gap: 25px;
  transition: transform 0.7s ease;
}

/* CARDS */

.testimonial-card {
  flex: 0 0 calc((100% - 50px) / 3);

  background: #fff;

  padding: 30px;

  border-radius: 18px;

  text-align: center;

  box-shadow: 0 10px 25px rgba(0,0,0,0.06);

  transition: 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;

  margin-bottom: 15px;

  border: 3px solid #f59e0b;
}

.testimonial-card h5 {
  margin-bottom: 10px;
  color: #0f172a;
}

.testimonial-card p {
  color: #64748b;
  line-height: 1.6;
}

/* TABLET */

@media (max-width: 992px) {

  .testimonial-card {
    flex: 0 0 calc((100% - 25px) / 2);
  }
}

/* MOBILE */

@media (max-width: 768px) {

  .testimonial-card {
    flex: 0 0 100%;
  }

  .testimonial-section {
    padding: 70px 0;
  }

  .testimonial-section h2 {
    font-size: 28px;
  }
}

/* ---------------SECTION FINALE--------------- */

.cta-section {
  padding: 60px 0;
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    #2747a6,
    var(--primary-orange)
  );
  position: relative;
  overflow: hidden;
}

.cta-section::before,
.cta-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.cta-section::before {
  width: 220px;
  height: 220px;
  top: -120px;
  right: -80px;
  background: rgba(255,255,255,0.08);
}

.cta-section::after {
  width: 180px;
  height: 180px;
  bottom: -80px;
  left: -60px;
  background: rgba(255,255,255,0.05);
}

.cta-box {
  position: relative;
  z-index: 2;

  max-width: 850px;
  margin: 0 auto;

  text-align: center;

  padding: 35px 30px;

  border-radius: 20px;

  background: rgba(255,255,255,0.12);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.15);

  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* TITRE */

.cta-box h2 {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;

  color: white;

  margin-bottom: 12px;
}

/* TEXTE */

.cta-box p {
  max-width: 650px;

  margin: 0 auto 22px;

  font-size: 16px;
  line-height: 1.6;

  color: rgba(255,255,255,0.92);
}

/* BOUTON */

.cta-btn {
  display: inline-block;

  padding: 14px 28px;

  border-radius: 12px;

  text-decoration: none;

  font-size: 16px;
  font-weight: 700;

  color: white;

  background: linear-gradient(
    90deg,
    var(--primary-orange),
    #ffb020
  );

  box-shadow: 0 10px 25px rgba(245,158,11,0.35);

  transition: all .3s ease;
}

.cta-btn:hover {
  transform: translateY(-3px);
  color: white;
  box-shadow: 0 14px 30px rgba(245,158,11,0.45);
}

/* =========================
   RESPONSIVE + AJOUTS
========================= */

@media (max-width: 768px) {

  .cta-section {
    padding: 45px 0;
  }

  .cta-box {
    padding: 25px 20px;
    text-align: center; /* force centrage propre */
  }

  .cta-box h2 {
    font-size: 22px; /* réduit pour mobile */
    line-height: 1.3;
  }

  .cta-box p {
    font-size: 14px !important;
    margin-bottom: 18px;
  }

  .cta-btn {
    width: 100%;
    padding: 13px;
    display: block;
  }
}

/* EXTRA CENTRAGE SÉCURISÉ (petits écrans) */
@media (max-width: 480px) {

  .cta-box {
    padding: 22px 15px;
  }

  .cta-box h2 {
    font-size: 20px;
  }
}
/* --------------------------------------------
          PAGE SERVICES 
------------------------------------------- */

.services-hero {

    position: relative;

    padding: 70px 20px;

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        var(--primary-blue) 0%,
        var(--blue-hover) 55%,
        var(--primary-orange) 100%
    );
}

/* Overlay léger */

.services-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.12);

    z-index: 1;
}

/* Effet décoratif */

.services-hero::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -120px;

    right: -80px;

    border-radius: 50%;

    background: rgba(255,255,255,0.08);

    z-index: 1;
}

/* Container */

.services-hero .container {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto;
}

/* Titre */

.services-hero h2 {

    font-size: 32px !important;

    font-weight: 600 !important;

    color: #fff !important;

    margin-bottom: 12px;

    line-height: 1.2;

    text-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

   /* MINI HERO PERFINANCES FIX */

.services-hero h1,
.services-hero h2 {
    font-size: 36px;  
    font-weight: 700;       
    color: #ffffff;        
    margin-bottom: 10px;
    line-height: 1.2;
}

/* PARAGRAPHE */

.services-hero p {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Texte */

.services-hero p {

    font-size: 16px !important;

    line-height: 1.7;

    color: rgba(255,255,255,0.92);

    max-width: 650px;

    margin: 0 auto;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .services-hero {

        padding: 45px 15px;
    }

    .services-hero h2 {

        font-size: 20px;

        margin-bottom: 8px;
    }

    .services-hero p {

        font-size: 14px;

        line-height: 1.5;

        max-width: 100%;
    }
}

/* PETIT MOBILE */

@media (max-width: 480px) {

    .services-hero {

        padding: 35px 15px;
    }

    .services-hero h2 {

        font-size: 20px;
    }

    .services-hero p {

        display: none;
    }
}

/* ---------TYPES DE PRET------------- */

.loan-types-section {

    padding: 90px 0;

    background: linear-gradient(
        180deg,
        #f8fafc 0%,
        #ffffff 100%
    );
}

/* TITRE */

.loan-types-section h2 {

    font-size: 38px;

    font-weight: 800;

    color: var(--primary-blue);

    text-align: center;

    margin-bottom: 15px;
}

/* INTRO */

.loan-intro {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    font-size: 16px;

    line-height: 1.8;

    color: var(--text-secondary);
}

/* CARD FULL WIDTH */

.loan-card {

    display: flex;

    gap: 25px;

    align-items: center;

    background: #fff;

    border-radius: 18px;

    padding: 20px;

    margin-bottom: 20px;

    box-shadow: 0 12px 30px rgba(30,58,138,0.08);

    border: 1px solid rgba(30,58,138,0.06);

    transition: all .3s ease;

    position: relative;

    overflow: hidden;
}

/* TOP BAR GRADIENT */

.loan-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--primary-orange)
    );
}

.loan-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(30,58,138,0.12);
}

/* IMAGE */

.loan-card img {

    width: 220px;

    height: 140px;

    object-fit: cover;

    border-radius: 14px;

    flex-shrink: 0;
}

/* CONTENT */

.loan-card h5 {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary-blue);

    margin-bottom: 8px;
}

.loan-card p {

    font-size: 16px !important;

    line-height: 1.7;

    color: var(--text-secondary);

    margin-bottom: 12px;
}

/* BUTTON */

.loan-card .btn-primary {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    font-weight: 700;

    text-decoration: none;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--primary-orange)
    );

    color: #fff !important;

    transition: .3s ease;
}

.loan-card .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(245,158,11,0.3);
}

/* =========================
   RESPONSIVE + AJOUTS
========================= */

@media (max-width: 900px) {

    .loan-card {

        flex-direction: column;

        text-align: center;

        padding: 18px;
    }

    .loan-card img {

        width: 100%;

        height: 180px;
    }

    .loan-types-section h2 {
        font-size: 28px;
    }

    .loan-intro {
        padding: 0 15px;
    }
}

/* MOBILE EXTRA OPTIMISÉ */
@media (max-width: 600px) {

    .loan-types-section h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .loan-intro {
        font-size: 14px;
    }

    .loan-card {
        padding: 16px;
    }

    .loan-card h5 {
        font-size: 18px;
    }

    .loan-card p {
        font-size: 14px !important;
    }

    .loan-card .btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* ----------INFO CREDIT -------- */

.credit-section {
    padding: 70px 0;

    background: radial-gradient(
        circle at top left,
        #eef2ff 0%,
        #ffffff 40%,
        #f8fafc 100%
    );
}

/* GRID */
.credit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* IMAGE */
.credit-image {
    position: relative;
}

.credit-image .img-main {
    width: 100%;
    height: 360px;
    object-fit: cover;

    border-radius: 30px 10px 30px 10px;

    box-shadow: 0 15px 35px rgba(30,58,138,0.12);

    transition: transform .35s ease;
}

.credit-image .img-main:hover {
    transform: scale(1.04);
}

/* CONTENT */
.credit-content h2 {
    font-size: 35px;
    font-weight: 800;
    line-height: 1.2;

    color: var(--primary-blue);
    margin-bottom: 12px;
}

.credit-content h2 span {
    color: var(--primary-orange);
}

.credit-content p {
    font-size: 16px;
    line-height: 1.7;

    color: var(--text-secondary);
    margin-bottom: 12px;

    max-width: 560px;
}

/* CTA */
.credit-content .btn-primary {
    display: inline-block;

    margin-top: 8px;

    padding: 12px 18px;

    border-radius: 10px;

    font-weight: 700;

    text-decoration: none;

    color: #fff !important;

    background: linear-gradient(
        90deg,
        var(--primary-blue),
        var(--primary-orange)
    );

    box-shadow: 0 10px 20px rgba(245,158,11,0.25);

    transition: .3s ease;
}

.credit-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245,158,11,0.35);
}
@media (max-width: 992px) {

  .credit-content {
    text-align: center;
  }

  .credit-content .btn-primary {
    display: inline-block;
  }
}
/* =========================
   ADVANTAGES
========================= */

.advantages-section {
    padding: 80px 0;
    background: #ffffff;
}

/* GRID */
.advantages-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
}

/* HEADER */
.advantages-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 10px;
    line-height: 1.2;
}

.advantages-header p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 600px;
}

/* LIST */
.advantages-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.adv-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(30,58,138,0.08);
    transition: all .25s ease;
}

.adv-item i {
    font-size: 20px;
    color: var(--primary-orange);
    margin-top: 4px;
}

.adv-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 4px;
}

.adv-item p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;

    /* 🔥 améliore lisibilité */
    max-width: 520px;
}

/* hover subtil */
.adv-item:hover {
    padding-left: 6px;
    background: rgba(30,58,138,0.02);
    border-radius: 8px;
}

/* IMAGE RIGHT */
.advantages-right {
    position: relative;
}

.advantages-right::before {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    top: -30px;
    right: -30px;

    background: linear-gradient(
        135deg,
        rgba(30,58,138,0.25),
        rgba(245,158,11,0.18)
    );

    filter: blur(50px);
    opacity: 0.18;

    border-radius: 50%;

    z-index: 0;
}

.advantages-right img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 420px;

    object-fit: cover;

    border-radius: 18px;

    border: 1px solid rgba(30,58,138,0.12);

    box-shadow: 0 18px 45px rgba(15,23,42,0.12);

    transition: all .35s ease;
}

.advantages-right img:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(15,23,42,0.16);
}

/* =========================
   RESPONSIVE OPTIMISÉ
========================= */

@media (max-width: 992px) {

    .credit-grid,
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .credit-content h2,
    .advantages-header h2 {
        font-size: 26px;
        text-align: center;
    }

    .credit-content p,
    .advantages-header p {
        max-width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .advantages-right img {
        height: 320px;
    }

    .credit-image .img-main {
        height: 300px;
    }
}

@media (max-width: 768px) {

    .credit-section {
        padding: 50px 0;
    }

    .credit-content h2,
    .advantages-header h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .credit-content p,
    .advantages-header p {
        font-size: 14px;
    }

    .credit-image .img-main {
        height: 240px;
    }

    .advantages-right img {
        height: 240px;
    }

    /* LISTE plus lisible */
    .adv-item {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .adv-item p {
        max-width: 100%;
    }
}

/* ------CTA SERVICES----- */

.pf-cta-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

/* CARD */

.pf-cta-card {
    max-width: 850px;
    margin: 0 auto;

    text-align: center;

    background: #ffffff;

    padding: 50px 30px;

    border-radius: 22px;

    box-shadow: 0 20px 50px rgba(30,58,138,0.08);

    border: 1px solid rgba(30,58,138,0.08);

    position: relative;
    overflow: hidden;
}

/* glow */

.pf-cta-card::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    top: -120px;
    right: -120px;

    background: linear-gradient(
        135deg,
        rgba(30,58,138,0.15),
        rgba(245,158,11,0.15)
    );

    filter: blur(50px);

    border-radius: 50%;
}

/* TITLE */

.pf-cta-card h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 12px;
}

/* TEXT */

.pf-cta-card p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px;

    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* BUTTON WRAPPER */

.pf-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* PRIMARY BUTTON */

.pf-btn-primary {
    padding: 13px 20px;

    border-radius: 12px;

    font-weight: 700;

    text-decoration: none;

    color: #fff;

    background: var(--orange-hover);

    box-shadow: 0 10px 25px rgba(30,58,138,0.15);

    transition: all .3s ease;
}

.pf-btn-primary:hover {
    transform: translateY(-3px);
}

/* SECONDARY BUTTON */

.pf-btn-secondary {
    padding: 13px 20px;

    border-radius: 12px;

    font-weight: 700;

    text-decoration: none;

    color: var(--primary-blue);

    border: 1px solid rgba(30,58,138,0.25);

    background: transparent;

    transition: all .3s ease;
}

.pf-btn-secondary:hover {
    background: rgba(30,58,138,0.05);
}

/* =========================
   RESPONSIVE OPTIMISÉ
========================= */

@media (max-width: 768px) {

    .pf-cta-section {
        padding: 60px 0;
    }

    .pf-cta-card {
        padding: 30px 18px;
        text-align: center;
    }

    .pf-cta-card h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .pf-cta-card p {
        font-size: 14px;
        padding: 0 10px;
    }

    .pf-cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .pf-btn-primary,
    .pf-btn-secondary {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}

/* EXTRA SMALL SCREENS */
@media (max-width: 480px) {

    .pf-cta-card {
        padding: 25px 15px;
    }

    .pf-cta-card h2 {
        font-size: 20px;
    }
}
html, body {
    overflow-x: hidden;
}

.container,
.credit-grid,
.advantages-grid,
.loan-card,
.pf-cta-card {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    display: block;
}

/* améliore fluidité scroll mobile */
body {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

/* -----------------------------------------
         PAGE A PROPOS
----------------------------------------- */
.about-company {
    padding: 80px 0;
    background: #ffffff;
}

.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 50px;
    align-items: center;
}

.about-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15,23,42,0.12);
}

.about-content h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.about-content p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;

    max-width: 600px;
}

.about-content strong {
    color: var(--primary-blue);
}

/* =========================
   MISSIONS ET VALEURS
========================= */

.mv-section {
    padding: 80px 0;
    background: #f8fafc;
}

.mv-title {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.mv-title span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.mv-title h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.mv-title p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    text-align: center;
}

.mv-block h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.mv-block p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* =========================
   HISTORY TIMELINE
========================= */

.history-section {
    padding: 90px 0;
    background: #f1f5f9;
}

.history-title {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

.history-title span {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-orange);
    text-transform: uppercase;
}

.history-title h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-blue);
    margin: 10px 0;
}

.history-title p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.history-line {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.history-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: rgba(30,58,138,0.2);
    transform: translateX(-50%);
}

.history-step {
    width: 50%;
    padding: 15px 30px;
    position: relative;
}

.history-step.left {
    left: 0;
    text-align: right;
}

.history-step.right {
    left: 50%;
}

.history-box {
    background: #ffffff;
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,0.08);
    transition: 0.3s ease;
}

.history-box:hover {
    transform: translateY(-5px);
}

.history-box h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.history-box p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.history-step::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary-orange);
    border-radius: 50%;
    top: 25px;
}

.history-step.left::after {
    right: -6px;
}

.history-step.right::after {
    left: -6px;
}

/* =========================
   CTA ABOUT
========================= */

.ap-cta-section {
    padding: 85px 0;
    background: radial-gradient(
        circle at top,
        rgba(30, 59, 138, 0.08),
        rgba(245, 159, 11, 0.04)
    );
}

.ap-cta-card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 35px 25px;
    border-radius: 22px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 60px rgba(15,23,42,0.12);
    border: 1px solid rgba(30,58,138,0.10);
}

.ap-cta-card h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 12px;
}

.ap-cta-card p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 25px;

    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.ap-btn-primary {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background-color: var(--primary-orange);
    box-shadow: 0 15px 30px rgba(30,58,138,0.20);
    transition: all 0.3s ease;
}

.ap-btn-primary:hover {
    transform: translateY(-4px);
    background-color: var(--orange-hover);
}

/* =========================
   RESPONSIVE GLOBAL
========================= */

@media (max-width: 992px) {

    .about-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-image img {
        height: 300px;
    }

    .about-content h2 {
        font-size: 26px;
        text-align: center;
    }

    .about-content p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .mv-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mv-title h2 {
        font-size: 26px;
    }

    .history-title h2 {
        font-size: 26px;
    }

    .ap-cta-card h2 {
        font-size: 22px;
    }
}

/* =========================
   MOBILE FINAL OPTIMISÉ
========================= */

@media (max-width: 768px) {

    .about-company,
    .mv-section,
    .history-section,
    .ap-cta-section {
        text-align: center;
    }

    .about-content p,
    .mv-title p,
    .history-title p,
    .ap-cta-card p {
        font-size: 14px;
        padding: 0 10px;
    }

    .history-line::before {
        left: 10px;
    }

    .history-step {
        width: 100%;
        padding-left: 40px;
        text-align: left;
    }

    .history-step.right,
    .history-step.left {
        left: 0;
    }

    .history-step::after {
        left: 6px;
    }

    .ap-cta-card {
        padding: 28px 18px;
    }
}

/* EXTRA SMALL */

@media (max-width: 480px) {

    .about-content h2,
    .mv-title h2,
    .history-title h2,
    .ap-cta-card h2 {
        font-size: 20px;
        line-height: 1.3;
    }
}
/* -------------------------------------------------
                   PAGE CONTACT
---------------------------------------------- */

.pf-contact {
    padding: 90px 0;
    background: #f8fafc;
}

/* GRID */
.pf-contact-grid {
    max-width: 1100px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* FORM (LEFT) */
.pf-contact-form {
    background: #ffffff;

    padding: 40px;
    border-radius: 16px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.08);

    text-align: left;
}

.pf-contact-form h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.pf-contact-form p {
    color: #64748b;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.6;
}

/* FIELDS */
.pf-field {
    margin-bottom: 18px;
}

.pf-field input,
.pf-field textarea {
    width: 100%;
    padding: 14px 15px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    outline: none;

    font-size: 15px;

    transition: 0.2s ease;
}

.pf-field input:focus,
.pf-field textarea:focus {
    border-color: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(30,58,138,0.08);
}

/* BUTTON */
.pf-contact-form button {
    width: 100%;

    padding: 14px;

    border: none;
    border-radius: 12px;

    font-weight: 700;

    cursor: pointer;

    color: #fff;

    background: var(--orange-hover);

    transition: 0.3s ease;

    font-size: 16px;
}

.pf-contact-form button:hover {
    transform: translateY(-3px);
}

/* RIGHT INFO */
.pf-contact-info h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 10px;
}

.pf-contact-info p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 16px;
}

/* BOX INFO */
.pf-info-box {
    background: #ffffff;

    padding: 20px;

    border-radius: 14px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.pf-info-box p {
    margin-bottom: 10px;
    font-size: 16px;
}

/* =========================
   RESPONSIVE FIX MOBILE
========================= */

@media (max-width: 900px) {

    .pf-contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .pf-contact-form {
        padding: 28px 20px;
        text-align: center;
    }

    .pf-contact-form h2 {
        font-size: 26px;
    }

    .pf-contact-form p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .pf-contact-info {
        text-align: center;
    }

    .pf-info-box {
        text-align: left;
    }

    .pf-contact-form button {
        font-size: 15px;
    }
}
/* ------------------------------------------
FORMULAIRE DE DEMANDE
----------------------------------------- */

.pf-credit-form-section {
    padding: 110px 0;
    background: #f8fafc;
}

/* WRAPPER PLUS LARGE */

.pf-credit-wrapper {
    max-width: 1050px;
    margin: auto;
}

/* HEADER */

.pf-credit-header {
    text-align: center;
    margin-bottom: 45px;
}

.pf-credit-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.pf-credit-header p {
    font-size: 16px;
    color: #64748b;
}

/* FORM PLUS GRAND */

.pf-credit-form {
    background: #fff;

    padding: 45px;

    border-radius: 18px;

    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

/* GRID PLUS ESPACÉ */

.pf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

/* FIELD PLUS AÉRÉ */

.pf-field {
    display: flex;
    flex-direction: column;
}

.pf-field label {
    font-size: 14px;
    color: var(--blue-hover);
    margin-bottom: 8px;
    font-weight: 600;
}

/* INPUTS PLUS GRANDS */

.pf-field input,
.pf-field select,
.pf-field textarea {
    padding: 16px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    font-size: 15px;

    outline: none;

    transition: 0.2s;
}

/* BUTTON PLUS LARGE */

.pf-btn {
    width: 100%;
    margin-top: 30px;

    padding: 16px;

    border: none;

    border-radius: 12px;

    font-weight: 800;

    font-size: 16px;

    color: #fff;

    background: var(--orange-hover);

    cursor: pointer;

    transition: 0.3s ease;
}

.pf-btn:hover {
    transform: translateY(-4px);
    background: var(--orange-hover);
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .pf-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pf-credit-form {
        padding: 25px;
    }

    .pf-credit-header h2 {
        font-size: 28px;
    }
}
/* =========================
   MOBILE OPTIMIZATION
   CREDIT FORM (CENTRAGE + LISIBILITÉ)
========================= */

@media (max-width: 768px) {

    .pf-credit-form-section {
        padding: 70px 15px;
    }

    /* HEADER CENTRÉ + PLUS LISIBLE */
    .pf-credit-header {
        text-align: center;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .pf-credit-header h2 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .pf-credit-header p {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 5px;
    }

    /* FORM PLUS AÉRÉ */
    .pf-credit-form {
        padding: 22px;
        border-radius: 14px;
    }

    /* GRID FULL MOBILE */
    .pf-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* CHAMPS PLUS CONFORT */
    .pf-field label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .pf-field input,
    .pf-field select,
    .pf-field textarea {
        padding: 14px;
        font-size: 14px;
        border-radius: 10px;
    }

    /* BUTTON CENTRÉ VISUELLEMENT */
    .pf-btn {
        width: 100%;
        padding: 15px;
        font-size: 15px;
        margin-top: 20px;
        display: block;
    }

    /* OPTION : améliore espacement global */
    .pf-field {
        margin-bottom: 10px;
    }
}

/* ----------------------------------
PAGE AVISO LEAL 
---------------------------------- */
.pf-legal {
    padding: 90px 0;
    background: #f8fafc;
}

.pf-legal-wrapper {
    max-width: 1050px;
    margin: auto;
}

.pf-legal-header {
    text-align: center;
    margin-bottom: 40px;
}

.pf-legal-header h1 {
    font-size: 36px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 10px;
}

.pf-legal-header p {
    color: #64748b;
    max-width: 750px;
    margin: auto;
    line-height: 1.6;
    font-size: 16px;
}

.pf-legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.pf-legal-card {
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.pf-legal-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 12px;
}

.pf-legal-card p {
    font-size: 16px;
    color: #475569;
    margin-bottom: 6px;
}

.pf-legal-card.full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .pf-legal-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------
Privacidad
-------------------------------- */

.pf-privacy {
    padding: 100px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

/* WRAPPER */

.pf-privacy-wrapper {
    max-width: 850px;
    margin: auto;
}

/* HEADER */

.pf-privacy-header {
    text-align: center;
    margin-bottom: 50px;
}

.pf-privacy-header h1 {
    font-size: 36px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 10px;
}

.pf-privacy-header p {
    font-size: 16px;
    color: #64748b;
}

/* MAIN BOX */

.pf-privacy-box {
    background: #ffffff;

    padding: 45px;

    border-radius: 18px;

    box-shadow: 0 25px 60px rgba(0,0,0,0.08);

    text-align: center;
}

/* TITLES */

.pf-privacy-box h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-hover);
    margin-top: 25px;
    text-decoration: underline;
    
}

/* TEXT */

.pf-privacy-box p {
    font-size: 16px;
    color: #475569;
    line-height: 1.7;
    margin-top: 8px;
}

/* FIRST SPACING FIX */

.pf-privacy-box h2:first-child {
    margin-top: 0;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .pf-privacy {
        padding: 70px 15px;
    }

    .pf-privacy-header h1 {
        font-size: 28px;
    }

    .pf-privacy-box {
        padding: 25px;
    }
}
/* =========================
   MOBILE OPTIMIZATION
   LEGAL + PRIVACY PAGES
========================= */

@media (max-width: 768px) {

    /* ===== LEGAL PAGE ===== */

    .pf-legal {
        padding: 70px 15px;
    }

    .pf-legal-header {
        text-align: center;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .pf-legal-header h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .pf-legal-header p {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 5px;
    }

    .pf-legal-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pf-legal-card {
        padding: 18px;
        border-radius: 12px;
    }

    .pf-legal-card h3 {
        font-size: 16px;
    }

    .pf-legal-card p {
        font-size: 14px;
        line-height: 1.5;
    }

    /* ===== PRIVACY PAGE ===== */

    .pf-privacy {
        padding: 70px 15px;
    }

    .pf-privacy-header {
        text-align: center;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .pf-privacy-header h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .pf-privacy-header p {
        font-size: 14px;
        line-height: 1.5;
    }

    .pf-privacy-box {
        padding: 22px;
        border-radius: 14px;
        text-align: left; /* mieux pour lecture mobile */
    }

    .pf-privacy-box h2 {
        font-size: 16px;
        margin-top: 18px;
    }

    .pf-privacy-box p {
        font-size: 14px;
        line-height: 1.6;
    }
}
/* ----------------------------------------
MERCI PAGE 
-------------------------------------- */

.pf-success-section{

    position: relative;

    padding: 50px 20px;

    background:
    url("images/espana.jpg")
    center center / cover no-repeat;
}

.pf-success-overlay{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.72);
}

/* =========================
   CARD
========================= */

.pf-success-card{
    position:relative;
    z-index:2;

    max-width:600px;
    margin:auto;

    background:rgba(255,255,255,.98);

    padding:30px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

/* =========================
   ICON
========================= */

.pf-success-icon{
    display:flex;
    justify-content:center;
    margin-bottom:15px;
}

.pf-icon-circle{
    width:70px;
    height:70px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        #f59e0b,
        #f97316
    );

    position:relative;

    z-index:1;

    animation:pulseOrange 2s ease-in-out infinite;
}

.pf-icon-circle i{
    font-size:26px;
    color:#fff;

    animation:iconFloat 2s ease-in-out infinite;
}

/* Cercle animé */

.pf-icon-circle::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    border-radius:50%;

    border:3px solid rgba(245,158,11,.5);

    z-index:-1;

    animation:ringOrange 2s linear infinite;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes ringOrange{
    0%{
        transform:scale(1);
        opacity:0.8;
    }
    100%{
        transform:scale(1.8);
        opacity:0;
    }
}

@keyframes pulseOrange{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}

@keyframes iconFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
}

/* =========================
   TEXT
========================= */

.pf-success-card h1{
    font-size:28px;
    font-weight:800;
    color:#1e3a8a;
    margin-bottom:10px;
}

.pf-success-card p{
    max-width:480px;
    margin:0 auto 20px;

    font-size:16px;
    line-height:1.6;

    color:#475569;
}

/* =========================
   INFO GRID
========================= */

.pf-success-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;

    margin-bottom:20px;
}

.pf-info-item{
    background:#f8fafc;
    padding:12px;
    border-radius:10px;
}

.pf-info-item strong{
    display:block;
    color:#1e3a8a;
    font-size:13px;
    margin-bottom:4px;
}

.pf-info-item span{
    font-size:12px;
    color:#64748b;
}

/* =========================
   BUTTON
========================= */

.pf-success-btn{
    display:inline-block;

    padding:12px 24px;

    background: var(--orange-hover);
    color:#fff;

    border-radius:8px;

    text-decoration:none;
    font-weight:700;

    transition:.3s;
}

.pf-success-btn:hover{
    transform:translateY(-2px);
    background-color: var(--blue-hover);
}

/* =========================
   MOBILE FIX
========================= */

@media (max-width:768px){

    .pf-success-section{
        padding:40px 15px;
    }

    .pf-success-card{
        padding:22px;
        max-width:100%;
    }

    .pf-success-card h1{
        font-size:24px;
        line-height:1.3;
    }

    .pf-success-card p{
        font-size:14px;
        line-height:1.6;
        margin-bottom:18px;
    }

    .pf-success-info{
        grid-template-columns:1fr;
        gap:8px;
    }

    .pf-info-item{
        text-align:center;
        padding:10px;
    }

    .pf-success-btn{
        display:block;
        width:100%;
        text-align:center;
        padding:13px 18px;
        border-radius:10px;
    }
}
.nav a.active {
    color: #0057ff;
    font-weight: 600;
}

/* Effet underline desktop */
.nav a.active {
    position: relative;
}

.nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #0057ff;
}

/* ===== MOBILE MENU ===== */
.mobile-nav a.active {
    color: #0057ff;
    font-weight: 600;
    background: rgba(0, 87, 255, 0.1);
    padding: 6px 10px;
    border-radius: 6px;
}
/* ------------------FOOTER------------------------------- */

.footer {

  background: linear-gradient(
    135deg,
    var(--text-primary) 0%,
    var(--primary-blue) 40%,
    var(--blue-hover) 100%
  );

  color: var(--text-light);

  padding: 35px 0 15px;
}

   /* CONTENT */

.footer-content {

  display: flex;
  justify-content: space-between;
  gap: 30px;

  flex-wrap: wrap;
}

   /* COMPANY */

.footer-company h3 {

  font-size: 22px;
  margin-bottom: 12px;
  letter-spacing: 1px;

  transition: 0.3s ease;
}

.footer-contact p {

  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 8px;

  font-size: 14px;

  transition: 0.3s ease;
}

.footer-contact i {
  width: 18px;
  color: rgba(255,255,255,0.9);
}

   /* LINKS */

.footer-links h4 {

  margin-bottom: 12px;
  font-size: 16px;

  transition: 0.3s ease;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {

  color: rgba(255,255,255,0.85);
  text-decoration: none;

  font-size: 14px;

  transition: 0.3s ease;

  display: inline-block;
}

/* animation hover premium */
.footer-links a:hover {

  color: var(--bg-light);

  transform: translateX(5px);
}

   /* BOTTOM */

.footer-bottom {

  margin-top: 20px;

  padding-top: 12px;

  border-top: 1px solid rgba(255,255,255,0.2);

  text-align: center;
}

.footer-bottom p {
  font-size: 12px;
  opacity: 0.85;

  transition: 0.3s ease;
}

   /* RESPONSIVE */

@media (max-width: 768px) {

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .footer-contact p {
    justify-content: center;
  }

  /* on neutralise les déplacements sur mobile */
  .footer-links a:hover,
  .footer-contact p:hover,
  .footer-company h3:hover {
    transform: none;
  }
}