:root {
          --bg-color: #F0F6FF;
          /* Bleu très pâle comme l'image */
          --primary-green: #00BFA6;
          /* Le vert/teal du bouton "Download App" */
          --text-dark: #111827;
          --card-bg: #FFFFFF;
          --bubble-green: #D1FAE5;
          --bubble-grey: #E5E7EB;
      }

      body {
          font-family: 'Inter', sans-serif;
          background-color: var(--bg-color);
          color: var(--text-dark);
          overflow-x: hidden;
          /* Légère grille de fond pour imiter l'image */
          background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
          background-size: 100px 100%;
      }

      /* --- TYPOGRAPHIE --- */
      h1 {
          font-weight: 700;
          letter-spacing: -1px;
          font-size: 3.5rem;
          line-height: 1.1;
          margin-bottom: 20px;
          color: #fff;
      }

      .lead {
          font-weight: 400;
          color: #fff;
          max-width: 700px;
          margin: 0 auto 40px auto;
      }

      /* --- BOUTON CTA --- */
      .btn-teal {
          background-color: var(--primary-green);
          color: white;
          font-weight: 600;
          padding: 15px 30px;
          border-radius: 50px;
          border: none;
          font-size: 1.1rem;
          box-shadow: 0 10px 20px rgba(0, 191, 166, 0.2);
          transition: transform 0.2s;
      }

      .btn-teal:hover {
          transform: translateY(-2px);
          color: white;
          background-color: #00a892;
      }

      /* --- IPHONE MOCKUP --- */
      .phone-container {
          position: relative;
          width: 300px;
          height: 600px;
          background: #000;
          border-radius: 45px;
          border: 8px solid #1F2937;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          margin: 0 auto;
          overflow: hidden;
          z-index: 10;
      }

      .phone-video {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      /* --- ELEMENT FLOTTANTS (UI CARDS) --- */
      .stage-wrapper {
          position: relative;
          padding-top: 50px;
          padding-bottom: 100px;
          min-height: 800px;
          /* Espace pour les éléments flottants */
      }

      .float-card {
          position: absolute;

          padding: 15px 20px;
          border-radius: 16px;

          font-size: 0.9rem;
          z-index: 5;
          max-width: 260px;
          animation: float 6s ease-in-out infinite;
      }

      /* Positions spécifiques (Desktop) */
      .card-voice {
          top: 100px;
          left: 10%;
          background: #3B82F6;
          color: white;
          border-radius: 20px 20px 20px 0;
      }

      .card-image {
          top: 250px;
          left: 15%;
          padding: 0;
          overflow: hidden;

      }

      .card-stat {
          bottom: 100px;
          left: 18%;
          background: #D1FAE5;
          color: #065F46;
      }

      .card-security {
          top: 180px;
          right: 10%;
          background: #D1FAE5;
          color: #065F46;
      }

      .card-chat {
          top: 350px;
          right: 8%;
          background: #3B82F6;
          color: white;
          border-radius: 20px 20px 0 20px;
          padding: 10px 20px;
      }

      .card-file {
          bottom: 150px;
          right: 15%;
          background: #E5E7EB;
          color: #374151;
          width: 280px;
      }

      /* Flèches dessinées (SVG) */
      .arrow-draw {
          position: absolute;
          width: 80px;
          opacity: 0.6;
          z-index: 1;
      }

      .arrow-left {
          top: 300px;
          left: 28%;
          transform: rotate(10deg);
      }

      .arrow-right {
          bottom: 250px;
          right: 28%;
          transform: scaleX(-1) rotate(20deg);
      }

      @keyframes float {
          0% {
              transform: translateY(0px);
          }

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

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

      /* --- RESPONSIVE MOBILE --- */
      @media (max-width: 991px) {
          h1 {
              font-size: 2.5rem;
          }

          .stage-wrapper {
              min-height: auto;
              padding-bottom: 50px;
          }

          /* Sur mobile, on cache les éléments flottants complexes ou on les empile */
          .float-card,
          .arrow-draw {
              display: none;
          }

          .phone-container {
              margin-top: 40px;
          }
      }

      /* Conteneur qui défile */
      .testimonial-container {
          display: flex;
          gap: 15px;
          overflow-x: auto;
          padding: 10px 5px 20px 5px;
          /* Espace pour l'ombre */
          scroll-behavior: smooth;
          /* Défilement fluide */
          -webkit-overflow-scrolling: touch;
          /* Fluidité sur iOS */
          scrollbar-width: none;
          /* Cache scrollbar Firefox */
      }

      /* Cache la barre de scroll sur Chrome/Safari */
      .testimonial-container::-webkit-scrollbar {
          display: none;
      }

      /* Style des cartes */
      .testimonial-card {
          min-width: 250px;
          background-color: #f8f9fa;
          /* bg-light */
          padding: 1rem;
          border-radius: 0.5rem;
          /* rounded */
          border: 1px solid #e9ecef;
          transition: transform 0.2s;
      }

      /* Style des boutons flèches */
      .scroll-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: white;
          border: 1px solid #dee2e6;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
          color: #333;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
      }

      .scroll-btn:hover {
          background-color: #00BFA6;
          /* Votre couleur verte */
          color: white;
          border-color: #00BFA6;
      }

      /* Positionnement des boutons */
      .prev-btn {
          left: -20px;
      }

      .next-btn {
          right: -20px;
      }

      /* Ajustement mobile : on cache les flèches car on swipe avec le doigt */
      @media (max-width: 768px) {
          .scroll-btn {
              display: none;
          }

          .testimonial-container {
              padding-right: 20px;
          }

          /* Espace fin de scroll */
      }

      /* Le conteneur principal de la section Hero */
      .hero-section {
          position: relative;
          overflow: hidden;
          /* Important pour que le flou ne déborde pas */
          background-color: var(--bg-color);
          /* Couleur de fond de secours */

      }

      /* L'image de fond */
      .hero-background-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh;
          background-size: cover;
          background-position: center;
          filter: blur(12px);
          transform: scale(1.7);
          z-index: 0;
      }

      /* Ajout d'un "voile" semi-transparent par-dessus l'image pour la lisibilité */
      .hero-background-image::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;


          background: rgba(255, 255, 255, 0.05);
      }

      @media (max-width: 560px) {
          h1 {
              font-size: 2rem;
          }

          .lead {
              font-size: 1rem;
          }

          .stage-wrapper {
              padding-top: 0;
              padding-bottom: 0 !important;
          }

          .container.text-center.pt-5.pb-5.position-relative {
              padding-bottom: 0 !important;
          }
      }