.TousLesDivs > div {
    display: none; /* Tous les divs sont initialement cachés */
  }

table {
    border-collapse: collapse;
    margin-bottom: 20px;
}

.title-container {
    text-align: center; /* Centrer le contenu */
    padding-top: 50px; /* Ajouter de l'espace au-dessus du titre */
}

.title-container2 {
    position: absolute; /* Position absolue */
    top: 50%; /* Positionne le haut de l'élément au milieu de son conteneur */
    left: 50%; /* Positionne la gauche de l'élément au milieu de son conteneur */
    transform: translate(-50%, -50%); /* Centre l'élément horizontalement et verticalement */
    text-align: center;
}

h1 {
    font-family: 'Times New Roman', Times, serif;
    color: black; /* Couleur noire */
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

h2 {
    text-align: center;
}

/* Style pour le conteneur */
.container {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    flex-direction: column; /* Empiler les éléments verticalement */
}

/* Style pour le bouton encadré */
.button {
    display: inline-block;
    background-color: transparent; /* Fond transparent */
    color: black; /* Couleur du texte */
    text-align: center;
    padding: 15px 30px; /* Augmenter le padding pour agrandir le bouton */
    border: 3px solid black; /* Bordure plus épaisse */
    border-radius: 40px; /* Bord arrondi pour un aspect plus doux */
    text-decoration: none; /* Supprimer la décoration du lien */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition fluide lors du survol */
    font-size: 20px; /* Augmenter la taille du texte */
    margin-bottom: 20px; /* Ajouter de l'espace en dessous du bouton */
}

/* Style pour le survol du bouton */
.button:hover {
    background-color: black; /* Changement de couleur de fond au survol */
    color: white; /* Changement de couleur du texte au survol */
}

/* Style pour le bouton inversé */
.button-inverse {
    background-color: black; /* Fond noir */
    color: white; /* Texte blanc */
    border: 3px solid black; /* Bordure de couleur noire */
    border-radius: 40px; /* Bord arrondi pour un aspect plus doux */
    text-decoration: none; /* Supprimer la décoration du lien */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition fluide lors du survol */
}

.bouttonErreur {
    background-color: black; /* Fond noir */
    color: white; /* Texte blanc */
    padding: 10px 20px; /* Augmenter le padding pour agrandir le bouton */
    border: 3px solid black; /* Bordure de couleur noire */
    border-radius: 40px; /* Bord arrondi pour un aspect plus doux */
    text-decoration: none; /* Supprimer la décoration du lien */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition fluide lors du survol */
}

.bouttonErreur:hover {
    background-color: white; /* Changement de couleur de fond au survol */
    color: black; /* Changement de couleur du texte au survol */
}

/* Style pour le survol du bouton inversé */
.button-inverse:hover {
    background-color: white; /* Changement de couleur de fond au survol */
    color: black; /* Changement de couleur du texte au survol */
}

.sousregle {
    border: 2px solid black; /* Bordure noire de 2px */
    border-radius: 10px; /* Bord arrondi */
    text-align: center; /* Centrer le texte */
}

#decompte {
    font-size: 48px; /* Taille de la police très grande */
    text-align: center; /* Centrer horizontalement */
    -webkit-text-stroke: 2px #3214d8; /* Contour de 2px de large en gris */
    color: black; /* Rend le texte transparent */
    display: inline-block; /* Permet d'appliquer des bordures au texte */
    padding: 10px; /* Ajoute un espacement autour du texte */
    border-radius: 10px; /* Coins arrondis */
    margin-top: 13vh; /* Positionne l'élément dans le premier tiers de la page */
    margin-left: auto; /* Centrer horizontalement */
    margin-right: auto; 
}

.lemot {
    font-family: 'Times New Roman', Times, serif; /* Utiliser la police Times New Roman */
    font-size: 72px; /* Taille de police très grande */
    text-align: center; /* Centrer le texte horizontalement */
    padding: 20px; /* Ajouter de l'espacement autour du texte */
    border: 3px solid #ccc; /* Bordure grise de 3px */
    border-radius: 20px; /* Coins arrondis */
}

.lemot h2 {
    font-size: 5vw;
    max-width: 100%;
}

#contenurlistedemots {
    font-size: 24px; /* Taille du texte bien plus grosse */
    text-align: left; /* Alignement à gauche */
    max-height: 340px; /* Hauteur maximale de la liste */
    overflow-y: auto; /* Ajoute un défilement vertical si nécessaire */
}

/* Sélectionnez toutes les cases à cocher dans la liste */
input[type="checkbox"] {
    transform: scale(2); /* Augmentez la taille de la case à cocher */
    margin-right: 10px; /* Ajoutez de l'espace entre la case à cocher et le texte */
}

/* Sélectionnez chaque élément de la liste de cases à cocher et appliquez des styles d'encadrement */
.checkbox-list-item {
    border: 2px solid #ccc; /* Bordure de 2px solide */
    border-radius: 10px; /* Coins arrondis */
    margin-bottom: 10px; /* Ajoute de l'espace entre chaque élément */
    padding: 10px; /* Ajoute de l'espace à l'intérieur de chaque élément */
}

#recapscoremanche {
    display: flex; /* Utilise un affichage flexbox */
    justify-content: space-around; /* Répartit l'espace entre les éléments */
    margin-top: 20px; /* Ajoute un peu d'espace en haut */
}

.score-table {
    text-align: center; /* Centrer horizontalement */
    margin: 0 20px; /* Ajoute de l'espace entre les tableaux */
}

.score-table h3 {
    margin: 0; /* Réinitialise les marges */
}

.score-table table {
    border-collapse: collapse; /* Fusionne les bordures de cellules */
    width: 100%; /* Définit la largeur de chaque tableau */
    font-size: 18px; /* Augmente la taille de la police dans les tableaux */
}

.score-table th,
.score-table td {
    border: 1px solid #ddd; /* Bordures de cellules */
    padding: 12px; /* Espacement interne */
    text-align: center; /* Centrage du texte */
}

.score-table th {
    background-color: #f2f2f2; /* Couleur de fond pour les cellules d'en-tête */
}

#recapscoremanche h4 {
    margin-top: 10px; /* Ajoute un peu d'espace en haut des totaux */
}

.button {
    display: block; /* Affiche le bouton en tant que bloc pour ajuster la largeur */
    margin: 20px auto; /* Centrer le bouton horizontalement */
}