* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fc;
    color: #2c3e50;
    line-height: 1.6;
}
header {
    background: linear-gradient(to right, #0e3352, #0e3352);
    color: white;
    padding: 2.5rem 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.logo {
  width: 100%;               /* Occupe toute la largeur du parent */
  display: flex;             /* Pour centrer avec flexbox */
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.logo img {
  width: 300px;              /* Largeur fixe */
  height: 100px;             /* Hauteur fixe (donc rectangle) */
  object-fit: cover;         /* Remplit tout le cadre en recadrant si besoin */
  border-radius: 12px;       /* Coins arrondis (optionnel) */
  display: block;
}

#presentation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  /* Centrer le contenu */
  padding: 3rem 2rem;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  width: 100%;  /* S'assurer que la section prend toute la largeur */
}
#presentation h2 {
  text-align: center;    /* Centrer le titre horizontalement */
  margin: 0 auto;        /* Supprimer les marges verticales */
  padding: 0;            /* Supprimer le padding si nécessaire */
  width: 100%;           /* Assurer que l'élément prend toute la largeur du parent */
  display: block;        /* S'assurer que l'élément se comporte comme un bloc */
}
/* Titre principal dans le header */
header h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
  margin: 1rem 0 0.5rem;
  text-align: center;
}
h2 {
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
.profil-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.bubble {
  background: #f0f4fa;
  border: 1px solid #d6e0ef;
  padding: 1.2rem 1.5rem;
  border-radius: 15px;
  font-size: 1rem;
  color: #2c3e50;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bubble i {
  color: #007bff;
  font-size: 1.3rem;
}
.bubble:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}
#presentation .content {
  display: flex;
  justify-content: center;  /* Centrer horizontalement */
  align-items: center;  /* Centrer verticalement */
  flex-direction: row; /* Garder les éléments côte à côte */
  flex-wrap: wrap;  /* Permet de réorganiser les éléments sur les petits écrans */
  width: 100%;  /* Occuper toute la largeur du parent */
  padding: 0;  /* Pas de padding */
  margin: 0 auto;  /* Centrer le contenu dans son parent */
  box-sizing: border-box;  /* Inclure le padding et bordures dans les dimensions totales */
}

#presentation .photo {
  width: 160px;
  height: 190px;
  border-radius: 30%;
  border: 3px solid #007bff;
  overflow: hidden;
  flex-shrink: 0;
}
#presentation .photo:hover {
  transform: scale(1.05);
}

#presentation .texte {
  max-width: 800px;  /* Limiter la largeur du texte */
  text-align: left;  /* Centrer le texte horizontalement */
  margin: 0;  /* Aucune marge externe */
  padding: 0;  /* Aucun padding interne qui pourrait causer un décalage */
  display: block;  /* Le texte se comporte comme un bloc */
  box-sizing: border-box;  /* Evite les effets de padding sur la largeur totale */
}
nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    background-color: #ffffff;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
nav a {
    color: #1c2e4a;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}
nav a:hover { color: #007bff; }

section {
    padding: 4rem 2rem;
    border-bottom: 1px solid #e0e0e0;
}
.hero {
    text-align: center;
    padding: 5rem 2rem;
    background: linear-gradient(to bottom, #f0f4fa, #e8edf5);
}

/* Section Présentation */
#presentation {
    background-color: #ffffff;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

#presentation h3 {
    font-size: 2rem;
    color: #1c2e4a;
}

#presentation p {
    font-size: 1.1rem;
    color: #555;
    margin-top: 1rem;
}

/* État initial de base */
.service-card,
.pricing-card,
.review-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quand visible (ajouté par JS) */
.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.cta-button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.75rem 1.75rem;
    background-color: #007bff;
    color: white;
    border-radius: 8px;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.cta-button:hover { background-color: #0056b3; }

.services, .pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.service-card {
  padding: 2rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  cursor: pointer;
  text-align: center;
  margin: 1em; /* Utilisation de margin relative */
}
.service-card:hover, .pricing-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.service-card i {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 1rem;
}
.service-card h3 {
  font-size: 1.2em;
  align-items: center; /* verticalement centrés */
  color: #333;
  text-align: center;
}
.service-card i {
  color: #4A90E2; /* couleur de l’icône */
}
.service-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* effet hover plus fort */
}
.service-card p {
  margin-top: 0.5em;
  color: #666; /* texte plus doux */
}
#tarifs-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* espace entre les cartes */
  padding: 1rem 0;
}

.pricing-card {
  padding: 2rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  cursor: pointer;
  text-align: center;
  margin: 1em; /* Utilisation de margin relative */
  flex: 1 1 300px;
  max-width: 400px;
}
.pricing-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.testimonial-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
/* Cartes d'avis */
.review-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrer le contenu horizontalement */
  justify-content: space-between; /* Centrer le contenu en haut */
  background-color: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  flex: 1 1 calc(30% - 1rem); /* Largeur de 30% */
  box-sizing: border-box;
  min-width: 220px;
  margin-bottom: 1.5rem;
  max-width: 300px;
  height: auto; /* Hauteur fixe pour éviter la carte trop grande */
  overflow: hidden; /* Empêche le débordement du texte */
  text-align: center; /* Assurer que le texte est centré */
  display: flex; 
  flex-direction: column;
  justify-content: space-between; /* Aligner le texte et les icônes */
  height: auto;
}
.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.review-icon {
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 1rem;
}
.review-text {
    font-style: italic;
    margin-bottom: 1rem;
    overflow: hidden; /* Empêche le texte de déborder */
    text-overflow: ellipsis; /* Affiche des "..." si le texte est trop long */
    word-wrap: break-word; /* Assure que le texte long est bien séparé en plusieurs lignes */
    flex-grow: 1; /* Permet à la zone de texte d'occuper l'espace restant */
    margin: 10px 0;
}
.review-name {
    font-weight: 600;
    color: #2c3e50;
}
.review-stars {
  color: #FFD700; /* doré */
  margin-bottom: 8px;
}
.review-stars i {
  margin-right: 2px;
  font-size: 1.2rem;
}
/* Conteneur des avis */
#avis-container {
  display: flex;
  flex-wrap: wrap; /* Permet aux cartes de passer à la ligne suivante */
  justify-content: center; /* Centrer les cartes dans le conteneur */
  gap: 5rem; /* Réduit l'espace entre les cartes */
  padding: 2rem 1rem;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
/* Lien "Voir tous les avis" en bas, centré */
.voir-tous-les-avis {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* Centrer horizontalement */
  text-align: center;
  width: 100%;
  padding: 1rem 0;
}

.voir-tous-les-avis a {
  color: #0073e6;
  font-size: 0.95rem;
  text-decoration: none;
  font-weight: 500;
}

.voir-tous-les-avis a:hover {
  text-decoration: underline;
}

/* Styles pour le formulaire */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.contact-form button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #0056b3;
}
  
  .confirmation-message {
    padding: 1rem;
    background-color: #d4edda;
    color: #155724;
    border-radius: 8px;
    margin-top: 1rem;
    text-align: center;
  }  
  .popup {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
  
    display: flex; /* pour le centrage */
    justify-content: center;
    align-items: center;
  
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
  }
  
  .popup.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Contenu de la popup */
  .popup-content {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #closeLegalPopup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
  }
  

  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.3s ease;
    text-decoration: none;
  }

  .whatsapp-float:hover {
    transform: scale(1.1);
  }  

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
/* Styles pour les écrans de petite taille (comme les téléphones) */
@media only screen and (max-width: 768px) {
  body {
    font-size: 16px; /* Réduire la taille du texte sur les petits écrans */
  }
  header {
      flex-direction: column;
      align-items: center;
      padding: 15px;
  }
  .logo {
    background-size: contain; /* Assure que l'image est entièrement visible sans être coupée */
    background-position: center center; /* Centre l'image si elle ne couvre pas tout l'espace */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    height: 50px; /* Donne une hauteur spécifique pour éviter l'agrandissement */
  }
  nav {
    padding-left: 25px;   /* espace à gauche */
    padding-right: 25px;  /* espace à droite */
    gap: 25px;
  }
  header .logo img {
    height: 75px; /* Garde la hauteur du logo à 35px pour les petites tailles d'écran */
    width: 250px; /* La largeur s'ajustera proportionnellement */
  }
  
  header nav ul {
      flex-direction: column;
      align-items: center;
  }
  
  header nav a {
      font-size: 1rem;
      margin: 10px 0;
  }
  
  .cta-button {
      padding: 10px 20px;
      margin-top: 15px;
  }
  #presentation .content {
    flex-direction: column; /* En mode colonne sur les petits écrans */
    text-align: center; /* Centrer le texte pour une meilleure lisibilité */
  }

  #presentation .photo {
    width: 100px; /* Réduit la taille de l'image pour les petits écrans */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px; /* Espace sous l'image */
    order: 1; /* L'image viendra au-dessus du texte */
  }

  #presentation .texte {
    width: 100%; /* Le texte occupe toute la largeur disponible */
    order: 2; /* Le texte viendra sous l'image */
  }
  }

  .container {
    grid-template-columns: 1fr;
  }

  .menu {
    display: block;
    width: 100%;
  }
  .whatsapp-float {
    width: 40px;
    height: 40px;
    bottom: 10px; /* Réduire la distance du bas */
    right: 10px; /* Réduire la distance du bord droit */
  }
  .pricing-card {
    margin: 1rem; /* Réduire les marges pour les petits écrans */
    padding: 1.5rem; /* Réduire le padding pour plus de flexibilité */
  }
  .contact-form {
    width: 90%;  /* Réduit la largeur du formulaire pour s'adapter aux petits écrans */
    padding: 1.5rem;  /* Réduit le padding pour plus de flexibilité */
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;  /* Réduit légèrement la taille du texte pour un meilleur ajustement */
  }

  .contact-form button {
    font-size: 1rem;  /* Ajuste la taille du texte du bouton */
    padding: 10px;  /* Réduit le padding pour les petits écrans */
  }
img {
  max-width: 100%;
  height: auto;
}
@media only screen and (min-width: 1200px) {
  .container {
      grid-template-columns: repeat(4, 1fr); /* Plus de colonnes sur grands écrans */
  }
}
.legal-btn {
  background-color: #0057b3c7;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.legal-btn:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Ajout du style pour la page des cours */
#cours {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.cours {
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  transition: transform 0.3s ease;
  text-align: center;
  justify-content: center;
}

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

.cours h2 {
  font-size: 1.3em;
  margin-bottom: 10px;
}

.cours p {
  font-size: 0.95em;
  margin-bottom: 15px;
}

/* Boutons */
.btn-group {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.btn-group .btn {
  flex: 1;
  max-width: 120px;
  background-color: #007bffcc;
  color: white;
  border: none;
  padding: 8px;
  font-size: 0.85em;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.btn-group .btn:hover {
  background-color: #007bff;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.filtre-btn {
  background-color: #ffffff;
  color: #007bff;
  border: 2px solid #007bff;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.95em;
  margin: 0 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.filtre-btn:hover {
  background-color: #007bff;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.filtre-btn.active {
  background-color: #007bff;
  color: #ffffff;
}


/* Pour un meilleur alignement sur mobile */
@media (max-width: 768px) {
  #cours {
    padding: 10px;
  }

  .cours {
    padding: 15px;
  }
  header h1 {
  font-size: 15px;   /* Plus petit sur mobile */
}
}