/* Variables personnalisées B2B */
 :root {
     --primary-blue: #1565C0;
     --primary-green: #008741;
     --dark: #111827;
     --gray: #6b7280;
     --light-gray: #f9fafb;
     --white: #ffffff;
     --gradient-primary: linear-gradient(135deg, #1565C0 0%, #008741 100%);
     --gradient-green: linear-gradient(135deg, #008741 0%, #005a2b 100%);
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
     --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: #ffffff;
 }

 /* Navigation B2B */
 .navbar-b2b {
     background: white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     padding: 1rem 0;
 }

 .navbar-brand {
     font-weight: 700;
     color: var(--primary-blue) !important;
     font-size: 1.5rem;
 }

 .demo-badge {
     background: var(--primary-green);
     color: white;
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 600;
     margin-left: 1rem;
 }

 /* Hero B2B */
 .hero-b2b {
     background: linear-gradient(135deg, rgba(21, 101, 192, 0.05) 0%, rgba(0, 135, 65, 0.05) 100%);
     padding: 80px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 }

 .hero-title {
     font-size: 3rem;
     font-weight: 800;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 1.5rem;
 }

 h1 .text-accent {
     color: #ffe082;
 }

 /* Banner B2B */
 .b2b-banner {
     background: var(--gradient-primary);
     color: white;
     padding: 1.5rem;
     border-radius: 12px;
     margin-bottom: 2rem;
     box-shadow: var(--shadow-lg);
 }

 .b2b-banner h3 {
     font-weight: 700;
     margin-bottom: 0.5rem;
 }

 /* Formulaire Demo */
 .form-container {
     background: white;
     border-radius: 20px;
     box-shadow: 0 15px 35px rgba(21, 101, 192, 0.15);
     padding: 2rem;
     border: 2px solid rgba(21, 101, 192, 0.1);
 }

 .form-control,
 .form-select {
     border: 2px solid #e9ecef;
     border-radius: 10px;
     padding: 12px;
     font-size: 16px;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: var(--primary-blue);
     box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.25);
 }

 /* Boutons */
 .btn-primary {
     background: var(--gradient-primary);
     border: none;
     font-weight: 600;
     border-radius: 10px;
     padding: 12px 30px;
     transition: all 0.3s;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-xl);
 }

 .btn-success {
     background: var(--gradient-green);
     border: none;
     font-weight: 600;
     border-radius: 10px;
     padding: 12px 30px;
 }

 .choice-btn {
     transition: all 0.3s;
     border-radius: 10px;
     border: 2px solid #e9ecef;
     background: white;
     color: #495057;
     padding: 15px;
     font-weight: 500;
 }

 .choice-btn:hover {
     background-color: rgba(21, 101, 192, 0.05);
     border-color: var(--primary-blue);
     transform: scale(1.02);
 }

 .choice-btn.btn-selected {
     background-color: var(--primary-blue) !important;
     color: white !important;
     border-color: var(--primary-blue) !important;
 }

 /* Progress Bar */
 .progress {
     height: 10px;
     border-radius: 10px;
     background-color: #e9ecef;
 }

 .progress-bar {
     background: var(--gradient-green);
     border-radius: 10px;
     transition: width 0.5s ease;
 }

 /* Features B2B */
 .feature-b2b {
     background: white;
     border: 1px solid rgba(21, 101, 192, 0.1);
     border-radius: 15px;
     padding: 2rem;
     height: 100%;
     transition: all 0.3s;
 }

 .feature-b2b:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-xl);
     border-color: var(--primary-blue);
 }

 .feature-icon {
     width: 60px;
     height: 60px;
     background: var(--gradient-primary);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     margin-bottom: 1rem;
 }

 /* Stats B2B */
 .stats-section {
     background: rgba(21, 101, 192, 0.03);
     padding: 4rem 0;
 }

 .stat-card {
     text-align: center;
     padding: 2rem;
 }

 .stat-number {
     font-size: 3rem;
     font-weight: 800;
     color: var(--primary-blue);
 }

 /* CTA B2B */
 .cta-b2b {
     background: var(--gradient-primary);
     color: white;
     padding: 4rem 0;
     border-radius: 20px;
     margin: 3rem 0;
 }

 /* Steps */
 .step-hidden {
     display: none;
 }

 .step-visible {
     display: block;
     animation: fadeIn 0.5s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

/* Container du slider */
.logos-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Ligne des logos en mouvement */
.logos-track {
  display: flex;
  animation: scroll-desktop 35s linear infinite;
}

/* Chaque logo */
.logo-item {
  height: 60px;
  margin: 0 40px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Animation desktop */
@keyframes scroll-desktop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive : mobile/tablette */
@media (max-width: 768px) {
  .logos-track {
    animation: scroll-mobile 40s linear infinite; /* plus lent */
  }

  .logo-item {
    height: 45px;
    margin: 0 20px;
  }

  @keyframes scroll-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}

/* ========== FAQ ========== */
.faq-modern {
    padding: 5rem 0;
    background: white;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    background: white;
    border: none;
    text-align: left;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--light-gray);
}

.faq-question.active {
    background: var(--primary-light);
    color: var(--primary);
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-question.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-answer.active {
    padding: 1.5rem;
    max-height: 500px;
}
 /* Footer */
 footer {
     background: #1a1a1a;
     color: white;
     padding: 3rem 0 1rem;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .hero-title {
         font-size: 2rem;
     }

     .stat-number {
         font-size: 2rem;
     }
 }