<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>theAIstep - votre partenaire Automatisation IA</title>
  <link rel="stylesheet" href="assets/css/styles.css">
  <style>
    /* Styles globaux */
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(180deg, #0b0d1d 0%, #14172b 100%);
      color: white;
      overflow-x: hidden;
    }

    h1, h2, h3, p {
      margin: 0;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* Styles pour la navbar */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px;
    }
    
    /* Logo et texte alignés */
    .logo {
      display: flex; /* Utilisation de Flexbox */
      align-items: center; /* Aligne verticalement l'image et le texte */
    }
    
    .logo-img {
      width: 40px; /* Taille du logo (ajustez selon vos besoins) */
      height: auto; /* Maintient les proportions */
      margin-right: 10px; /* Espace entre le logo et le texte */
    }
    
    .logo span {
      font-size: 24px;
      font-weight: bold;
    }



    .nav-links {
      list-style-type: none;
      display: flex;
      gap: 20px;
    }

    .nav-links li a {
      font-size: 16px;
      color: white;
      transition: color 0.3s ease-in-out;
    }

    .nav-links li a:hover {
      color: #6c63ff;
    }

    .btn-primary {
      background-color: #6c63ff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
    }

    .btn-primary:hover {
      background-color: #5a54d4;
      transform: scale(1.05);
    }

    /* Section principale */
    .hero-section {
      text-align: center;
      padding-top: 100px;
      padding-bottom: 100px;
      position: relative; /* Nécessaire pour le canvas */
    }

    .hero-content {
      max-width: 800px;
      margin: auto;
    }

    /* Classe pour le spacer */
    .spacer {
      height: 20px; /* Ajustez la hauteur du spacer selon vos besoins */
      width: 100%; /* S'assure que le spacer occupe toute la largeur */
    }

    /* Conteneur de l'image */
    .image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%; /* Prend toute la largeur disponible */
      height: auto; /* Ajuste la hauteur automatiquement */
    }
    
    .rounded-image {
      width: 100%; /* L'image remplit le conteneur */
      max-width: 800px; /* Limite la largeur maximale */
      height: auto; /* Conserve les proportions */
      border-radius: 15px; /* Coins arrondis */
    }
    
    /* Conteneur des cartes */
    .cards-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; /* Espace égal entre les cartes */
      gap: 20px; /* Espacement entre les cartes */
      margin-top: 40px; /* Espacement au-dessus des cartes */
    }


    .card {
      background-color: #1c1e2b; /* Fond sombre pour correspondre au design */
      border-radius: 10px; /* Coins arrondis */
      padding: 20px;
      text-align: center;
      color: white;
      flex: 1; /* Les cartes prennent une taille égale */
    }
    
    .card h4 {
      font-size: 18px;
      margin-top: 15px;
    }
    
    .card p {
      font-size: 14px;
    }
    
    .card-image img {
      width: 100%;
      height: auto;
      border-radius: 10px; /* Coins arrondis pour l'image dans la carte */
    }

    /* Section des avantages */
    .benefits-section {
      display: flex;
      flex-direction: column; /* Les items sont empilés verticalement */
      gap: 20px; /* Espacement entre chaque item */
      margin-top: 40px; /* Espacement au-dessus de la section */
    }
    
    .benefit-item {
      background-color: #1c1e2b; /* Fond sombre */
      padding: 20px; /* Espacement interne */
      border-radius: 10px; /* Coins arrondis */
    }
    
    .benefit-item h4 {
      font-size: 18px;
      margin-bottom: 10px; /* Espacement sous le titre */
    }
    
    .benefit-item p {
      font-size: 14px;
      line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    }

    /* Section À propos de Nous */
    .about-us-section {
      background-color: #14172b; /* Fond sombre pour contraster avec le reste */
      color: white; /* Texte en blanc */
      padding: 50px 20px; /* Espacement interne */
      text-align: center; /* Centrer le texte */
    }
    
    .about-us-container {
      max-width: 800px; /* Limite la largeur du contenu */
      margin: auto; /* Centre horizontalement */
    }
    
    .about-us-container h2 {
      font-size: 28px; /* Taille du titre */
      margin-bottom: 20px; /* Espacement sous le titre */
    }
    
    .about-us-container p {
      font-size: 16px; /* Taille du texte */
      line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
      margin-bottom: 20px; /* Espacement entre les paragraphes */
    }

    /* Section Contact */
    .contact-section {
      background: linear-gradient(180deg, #0b0d1d, #14172b); /* Fond dégradé sombre */
      color: white;
      padding: 50px 20px;
    }
    
    .contact-container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; /* Permet de s'adapter aux petits écrans */
      gap: 40px;
      max-width: 1200px;
      margin: auto; /* Centre la section */
    }
    
    .contact-info {
      flex: 1;
      min-width: 300px; /* Largeur minimale pour les petits écrans */
    }
    
    .contact-info h2 {
      font-size: 28px;
      margin-bottom: 20px;
    }
    
    .contact-info p {
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    .contact-info ul {
      list-style: none;
      padding: 0;
    }
    
    .contact-info ul li {
      font-size: 16px;
      margin-bottom: 10px;
    }
    
    .contact-info ul li span {
      margin-right: 10px; /* Espace entre l'icône et le texte */
    }
    
    /* Formulaire de contact */
    .contact-form {
      flex: 1;
      min-width: 300px; /* Largeur minimale pour les petits écrans */
    }
    
    .contact-form form {
      display: flex;
      flex-direction: column; /* Aligne les éléments verticalement */
    }
    
    .contact-form label {
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .contact-form input,
    .contact-form textarea {
      background-color: #1c1e2b; /* Fond sombre des champs */
      border: none;
      border-radius: 5px; /* Coins arrondis */
      padding: 10px;
      color: white; /* Texte blanc */
      margin-bottom: 15px; /* Espacement entre les champs */
    }
    
    .contact-form button {
      background-color: #6c63ff; /* Couleur du bouton */
      color: white;
      border: none;
      border-radius: 5px; /* Coins arrondis */
      padding: 10px;
      font-size: 16px;
    }
    
    .contact-form button:hover {
      background-color: #5a54d4; /* Couleur au survol */
    }


    /* Section FAQ */
    .faq-section {
      background-color: #0b0d1d; /* Fond sombre */
      color: white;
      padding: 50px 20px;
      text-align: center;
    }
    
    .faq-container {
      max-width: 800px;
      margin: auto;
    }
    
    .faq-container h2 {
      font-size: 28px;
      margin-bottom: 10px;
    }
    
    .faq-container p {
      font-size: 16px;
      margin-bottom: 30px;
    }
    
    .faq-item {
      margin-bottom: 15px;
    }
    
    .faq-question {
      background-color: #14172b; /* Fond sombre des questions */
      color: white;
      border: none;
      width: 100%;
      text-align: left;
      padding: 15px;
      border-radius: 10px;
      font-size: 16px;
      display: flex;
      justify-content: space-between; /* Ajoute un espace entre le texte et l'icône */
      align-items: center;
    }
    
    .faq-question:hover {
      background-color: #1c1e2b; /* Couleur au survol */
    }
    
    .faq-answer {
      background-color: #2a2d3e; /* Fond des réponses */
      color: white;
      padding: 15px;
      border-radius: 5px;
      margin-top: 10px;
      display: none; /* Masque la réponse par défaut */
    }
    
    .faq-answer p {
      margin: 0;
    }
    
    /* Animation pour afficher les réponses */
    .faq-item.open .faq-answer {
      display: block; /* Affiche la réponse lorsque l'élément est ouvert */
    }

    .animated-text {
      font-size: 22px; /* Taille du texte */
      color: #6c63ff; /* Couleur principale */
      text-align: center; /* Centrer le texte */
      margin-top: 20px;
    
      /* Animation */
      opacity: 0; /* Le texte est initialement invisible */
      transform: translateY(20px); /* Le texte commence légèrement décalé vers le bas */
      animation: fadeInUp 1.5s ease-out forwards; /* Animation avec fondu et montée */
    }
    
    /* Définition de l'animation */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


    .badge {
      display: inline-block;
      background-color: #6c63ff; /* Couleur de secours */
      background-color: rgba(108, 99, 255, 0.2);
      color: #6c63ff;
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 14px;
      margin-bottom: 20px;
    }

    h1 {
      font-size: clamp(36px, 5vw, 64px); /* Responsive */
      line-height: 1.2em;
      font-weight: bold;
    }

    p {
      margin-top: 20px;
      font-size: clamp(16px, 2vw, 20px);
      line-height: 1.6em;
    }

    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 20px; /* Espacement entre les boutons */
      margin-top: 30px;
    }

    .btn-secondary {
      background-color: #6c63ff; /* Couleur principale */
      color: white;
      border-radius: 8px;
      border: none;
      padding: 10px 20px; /* Espacement interne */
      font-size: 16px;
      cursor: pointer;
    }
    
    .btn-secondary:hover {
      background-color: #5a54d4; /* Couleur au survol */
    }

