/* Style global pour le tag <progress> */
progress {
    width: 100%; /* Largeur totale */
    height: 30px; /* Hauteur souhaitée */
    -webkit-appearance: none; /* Supprimer le style par défaut pour WebKit */
    appearance: none; /* Supprimer le style par défaut pour d'autres navigateurs */
}

/* Pour les navigateurs WebKit (Chrome, Safari) */
progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* Couleur de fond de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}

progress::-webkit-progress-value {
    background-color: #4caf50; /* Couleur de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}

/* Pour Firefox */
progress::-moz-progress-bar {
    background-color: #4caf50; /* Couleur de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}
#result {
	display: none;
}
.phrase-container {
    font-size: 1.5rem;
    position: relative;
    white-space: nowrap; /* Empêche les retours à la ligne */
    overflow-x: auto; /* Active le défilement horizontal si nécessaire */
    text-align: center;
    max-width: 100%; /* S'adapte à la largeur de l'écran */
    margin: 0 auto; /* Centre le conteneur */
    border: 1px solid #ddd; /* Optionnel : ajoute une bordure pour délimiter */
    padding: 4rem; /* afin de rendre visible la loupe */
}

.phrase-container::-webkit-scrollbar {
    height: 8px; /* Hauteur de la barre de défilement */
}

.phrase-container::-webkit-scrollbar-thumb {
    background: #888; /* Couleur du curseur */
    border-radius: 4px;
}

.phrase-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Couleur du curseur au survol */
}

@media (max-width: 576px) {
    .phrase-container {
        font-size: 1.2rem; /* Réduit la taille de la police pour les écrans très étroits */
    }
}

#phrase-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px; /* Espacement entre le bouton et la phrase */
    overflow: hidden; /* Assure que rien ne déborde */
}

.phrase-container span {
	cursor: pointer;
	position: relative;
	letter-spacing: 0.3rem;
}
.phrase-container span.space {
	background-color: #ffdddd;
	padding: 0 2px;
	border-radius: 2px;
}

.phrase-container span:hover::before {
    content: attr(data-preview);
    position: absolute;
    bottom: 120%; /* Ajuste la position pour être bien au-dessus */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Assure que la loupe est au premier plan */
    white-space: nowrap;
    font-family: monospace;
}

.cursor {
	color: red;
	font-weight: bold;
	font-size: 2rem;
	position: absolute;
	z-index: 10;
}
/* Style général de la barre de défilement */
.phrase-container::-webkit-scrollbar {
    height: 20px !important; /* Hauteur de la barre pour les défilements horizontaux */
    background-color: #e0e0e0; /* Couleur de la piste */
}

/* Style du "thumb" (curseur) */
.phrase-container::-webkit-scrollbar-thumb {
    background-color: red; /* Couleur de la barre */
    border-radius: 5px; /* Coins arrondis */
    border: 2px solid #f1f1f1; /* Bordure pour espacement */
}

/* Style au survol du "thumb" */
.phrase-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Couleur au survol */
}

/* Style pour Firefox */
.phrase-container {
    scrollbar-width: thin; /* Mince */
    scrollbar-color: red #e0e0e0; /* Couleur du thumb et de la piste */
}