.navbar .nav-link {
  color: #6c757d; /* gris bootstrap */
  transition: color 0.3s;
}

.navbar .nav-link:hover {
  color: #0d6efd; /* bleu bootstrap */
}

.navbar .nav-link.active {
  color: #0d6efd; /* bleu quand actif */
  font-weight: 600;
}

.navbar-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

/* Styles personnalisés pour le bouton CTA */
        .cta-button {
            background: #0d6efd !important;
            color: white !important;
            border: none !important;
            padding: 8px 20px !important;
            border-radius: 25px !important;
            text-decoration: none !important;
            font-weight: 500;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .cta-button:hover {
            background: #0b5ed7 !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
        }

        /* Container pour le bouton sur desktop */
        .cta-desktop {
            margin-left: 15px;
        }

        /* Container pour le bouton sur mobile */
        .cta-mobile {
            display: none;
            margin-right: 10px;
        }

        /* Media queries pour la responsivité */
        @media (max-width: 991.98px) {
            /* Sur écrans moyens et petits */
            .cta-desktop {
                display: none;
            }
            
            .cta-mobile {
                display: block;
            }
        }

        @media (min-width: 992px) {
            /* Sur grands écrans */
            .cta-desktop {
                display: block;
            }
            
            .cta-mobile {
                display: none;
            }
        }

        /* Ajustements pour le logo et l'espacement */
        .logo {
            margin-bottom: 0;
        }

        /* Espacement pour les liens de navigation */
        .navbar-nav .nav-link {
            margin-right: 10px;
        }
/* Style par défaut pour desktop */
#hero h1 {
  font-size: 2.5rem !important; /* ~40px */
  font-weight: 700;
}

/* Pour les écrans de smartphone */
@media (max-width: 576px) {
  #hero h1 {
    font-size: 1.5rem !important; /* ~24px */
    line-height: 1.3 !important;
  }

  #hero h2 {
    font-size: 1rem !important;
  }
}

/* HERO section */
#hero {
  background: url("asset/img_hero4.png") no-repeat center center;
  background-size: cover;
  min-height: 100vh; /* occupe toute la hauteur */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* H1 + H2 stylés */
#hero h1 {
  font-family: 'Poppins', sans-serif; /* police moderne (Google Fonts) */
  font-weight: 800; /* bien épais */
  font-size: 3rem;
  color: #009eca; /* bleu foncé lisible */
  line-height: 1.3;
}

#hero h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: #fff;
  margin-top: 15px;
}

/* Bouton CTA */
#hero .btn-get-started {
  text-decoration: none; /* supprime soulignement */
  border: none; /* supprime éventuelle bordure */
  font-weight: 600;
  transition: all 0.3s ease;
}

#hero .btn-get-started:hover {
  background-color: #0b5ed7; /* bleu plus foncé */
  transform: translateY(-3px); /* petit effet de survol */
}

.text-color {
    color: white
}

.icon-box {
  background: #fff; /* Fond blanc pour contraster */
  border-radius: 10px; /* Bords arrondis */
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1); /* Ombre douce */
  transition: all 0.3s ease-in-out; /* Animation hover */
  margin: 15px 0; /* Séparation verticale */
}

.icon-box:hover {
  transform: scale(1.05); /* Zoom */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
}

#hero h4:hover, 
#hero h2:hover {
  color: #007bff; /* bleu bootstrap */
  transition: color 0.3s ease; /* effet fluide */
}


.icon-box .icon {
  font-size: 40px; /* Taille icône */
  color: #0d6efd; /* Couleur Bootstrap primary */
  margin-bottom: 15px; /* Espace entre icône et titre */
}

.icon-box .title a {
  color: #333; /* Couleur texte titre */
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
}

.icon-box .description {
  font-size: 15px;
  color: #555;
}

.hover-zoom {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-zoom:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.testimonial-item .testimonial-img {
  width: 100px;           /* taille fixe */
  height: 100px;
  object-fit: cover;      /* garde le bon cadrage sans déformation */
  border-radius: 50%;     /* cercle parfait */
  margin: 0 auto 20px;    /* centré et espace en bas */
  display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* optionnel: effet flottant */
}

.note-importante {
  margin-top: 20px;
  font-size: 12px;
  color: #666;
}

/* === HEADER FIXE === */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff; /* garde la couleur de fond */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ombre légère */
}

/* Évite que le contenu passe sous le header */
body {
  margin: 0;
  padding-top: 80px; /* adapte à la hauteur réelle de ton header */
}

/* === LOGO === */
header .logo img {
  max-height: 60px; /* adapte selon ton besoin */
  width: auto;       /* garde le ratio */
  display: block;
}