/* Style de l'overlay */
.introjs-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Overlay semi-transparent */
}

/* Style de la bulle d'information */
.introjs-tooltip {
    background-color: #ffffff; /* Couleur de fond de la bulle */
    border-radius: 5px; /* Bordures légèrement arrondies */
    padding: 20px; /* Espacement interne */
    max-width: 400px; /* Largeur maximale de la bulle */
    width: auto; /* Largeur adaptable */
    font-family: 'Arial', sans-serif; /* Typographie simple et lisible */
    color: #333333; /* Couleur du texte */
    border: 1px solid #007db8; /* Fine bordure de la couleur principale */
    outline: none;
}

/* Style du texte dans la bulle */
.introjs-tooltiptext {
    font-size: 16px; /* Taille du texte */
    line-height: 1.5; /* Hauteur de ligne pour améliorer la lisibilité */
    color: #333333; /* Couleur du texte */
}

/* Style du titre de la bulle */
.introjs-tooltip-title {
    font-size: 18px; /* Taille du titre */
    font-weight: bold; /* Titre en gras */
    margin-bottom: 10px; /* Espacement sous le titre */
    color: #007db8; /* Couleur du titre (couleur principale) */
}

/* Style des boutons */
.introjs-button {
    background-color: #007db8; /* Couleur de fond des boutons (couleur principale) */
    color: #ffffff; /* Couleur du texte des boutons */
    border-radius: 3px; /* Bordures légèrement arrondies */
    padding: 8px 12px; /* Espacement interne des boutons */
    border: 1px solid #007db8; /* Bordure fine de la même couleur */
    font-size: 14px; /* Taille du texte des boutons */
    cursor: pointer; /* Curseur en forme de main pour les boutons */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
    text-shadow: none;
    box-shadow: none !important;
}

/* Style au survol des boutons */
.introjs-button:hover {
    background-color: #005f8a; /* Couleur légèrement plus foncée au survol */
    color: #ffffff; /* Couleur du texte des boutons */
}

/* Style spécifique pour le bouton "Suivant" */
.introjs-nextbutton {
    background-color: #007db8 !important; /* Couleur secondaire pour "Suivant" */
    border-color: #007db8; /* Bordure de la même couleur */
    color: #ffffff !important; /* Couleur du texte des boutons */
}

.introjs-nextbutton:hover {
    background-color: #006fa1 !important; /* Couleur plus sombre au survol */
    color: #ffffff; /* Couleur du texte des boutons */
}

/* Style pour le bouton "Précédent" */
.introjs-prevbutton {
    background-color: #c3c3c3; /* Couleur grise pour "Précédent" */
    border-color: #c3c3c3; /* Bordure grise */
    color: #ffffff; /* Couleur du texte des boutons */
}

.introjs-prevbutton:hover {
    background-color: #a5a5a5; /* Couleur plus sombre au survol */
    color: #ffffff; /* Couleur du texte des boutons */
}

/* Style pour le bouton "Terminer" */
.introjs-donebutton {
    background-color: #007db8; /* Couleur secondaire pour "Terminer" */
    border-color: #007db8; /* Bordure de la même couleur */
    color: #ffffff; /* Couleur du texte des boutons */
}

.introjs-donebutton:hover {
    background-color: #006fa1; /* Couleur plus sombre au survol */
    color: #ffffff; /* Couleur du texte des boutons */
}

/* Style des flèches de la bulle */
.introjs-arrow {
    border-color: #ffffff transparent transparent transparent; /* Flèche de la même couleur que la bulle */
}