:root {
    --black-0: #070C1C;
    --black-1: #111728;
    --black-2: #1A2134;
    --black-3: #313749;
    --grey-0: #8E98BE;
    --grey-1: #8E93A6;
    --grey-2: #B1B4C1;
    --white-0: #C9CCD5;
    --white-1: #D2D4DC;
    --white-2: #DADCE2;
    --white-3: #FFF;
    --heart-color: #EC0B43;
    --spade-color: #001011;
    --club-color: #06D6A0;
    --diamond-color: #5DA9E9;
    --dark-blue: hsla(217, 100%, 50%, 1);
    --light-blue: hsla(186, 100%, 69%, 1);
    --orange: hsla(33, 94%, 57%, 1);
    --red: hsla(333, 100%, 53%, 1);
    --blue-radiant-1: linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
    --red-radiant-1: linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%);
    --play-button-gradient: linear-gradient(90deg, #5DA9E9 0%, #06D6A0 100%);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: var(--black-1);
    color: var(--white-2);
}

#quizz,#vocabulaire,#categories,#results{
    display: block;
}

h1 {
    text-align: center;
    color: var(--white-3);
    margin-bottom: 30px;
}
#top_container {
    width: 90%;
    margin: 0 auto;
    display: flex; /* Aligne les enfants horizontalement */
    justify-content: space-between; /* Optionnel : pour espacer uniformément */
    gap: 10px; /* Espacement entre les onglets */
}

.tab_top {
    flex: 1; /* Chaque onglet prend une part égale de l'espace */
    text-align: center; /* Centre le texte dans chaque onglet */
    padding: 10px;
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    border-bottom: 1px solid #ccc; /* Optionnel : bordure pour la visibilité */
    cursor: pointer; /* Change le curseur au survol */
    opacity: 0.35;
}
.tab_top.active{
    opacity: 1;

}
/* Conteneur du tableau avec défilement horizontal sur mobile */
#vocabulaire, #categories {
    width: 100%;
    max-width: 100%; /* Empêche le dépassement */
    overflow-x: auto; /* Défilement horizontal si nécessaire */
    margin: 10px auto; /* Marges verticales réduites sur mobile */
    border-radius: 8px;
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
    padding: 0; /* Supprime les padding indésirables */
}


/* Style du tableau (inchangé) */
/* Tableau lui-même */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent; /* Fond transparent pour éviter les doublons */
}

/* En-têtes et cellules */
th, td {
    padding: 10px 12px;
    text-align: left;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
}

/* Cellules spécifiques (ex: "categorie") */
td[data-field="categorie"] {
    min-width: 120px; /* Largeur minimale pour éviter que la cellule ne rétrécisse trop */
    max-width: 200px; /* Largeur maximale pour éviter qu'elle ne devienne trop large */
    white-space: normal; /* Permet le retour à la ligne si nécessaire */
    word-break: break-word; /* Casse les mots trop longs */
}

/* Lignes alternées et survol */
tr:nth-child(even) {
    background-color: var(--black-3);
}

tr:hover {
    background-color: rgba(65, 105, 225, 0.2);
}

/* Style des en-têtes */
th {
    background: var(--black-0);
    color: var(--white-3);
    font-weight: 600;
}

/* Curseur pour les cellules cliquables */
td[data-field="categorie"] {
    cursor: pointer;
}

#vocabulaire-table,#vocabulaire-quizz-table {
    width: 100%;
    min-width: 600px; /* Largeur minimale pour éviter que les colonnes ne rétrécissent trop */
    border-collapse: collapse;
    background-color: transparent;
}

/* En-têtes du tableau */
#vocabulaire-table th,#vocabulaire-quizz-table th {
    background: var(--black-0);
    color: var(--white-3);
    padding: 10px;
    text-align: left;
    font-weight: 600;
    font-size: clamp(0.8rem, 2vw, 1rem);
    vertical-align: top; /* Alignement en haut pour les champs de filtrage */
}

/* Cellules du tableau */
#vocabulaire-table td,#vocabulaire-quizz-table td {
    padding: 10px;
    border-bottom: 1px solid var(--black-3);
    color: var(--white-1);
    font-size: clamp(0.7rem, 2vw, 0.9rem);
}

/* Champs de filtrage dans les en-têtes */
.filter_table,.filter_quizz_table {
    width: 100%;
    padding: 6px;
    margin-top: 5px;
    border: 1px solid var(--black-3);
    border-radius: 4px;
    background-color: var(--grey-0);
    color: var(--black-0);
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    box-sizing: border-box;
}

.cat_container{
    position: absolute;
    background-color: var(--black-0);
    border: 1px solid var(--grey-0);
    border-radius: 5px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}
.option_div {
    padding: 8px 12px; margin: 0;
    cursor: pointer;
    color: inherit;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

/* Couleur de fond pour les options paires */
.option_div:nth-child(even) {
    background-color: var(--black-0); /* Fond clair pour les options paires */
}

/* Couleur de fond pour les options impaires */
.option_div:nth-child(odd) {
    background-color: var(--black-3); /* Fond légèrement plus foncé pour les options impaires */
}

/* Effet au survol */
.option_div:hover {
    background-color: #dee2e6 !important; /* Fond au survol */
}



.audio-button {
    background: var(--play-button-gradient);
    display: block;
    margin: 0 auto;
    color: white;
    border: none;
    width: 5vw; /* Taille fixe en pixels */
    height: 5vw; /* Même taille pour un cercle parfait */
    border-radius: 50%; /* Forme ronde */
    font-size: clamp(0.7rem, 2vw, 9rem);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.audio-button:hover {
    transform: translateY(-2px);
}

.save-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background: var(--blue-radiant-1);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.save-button:hover {
    background: linear-gradient(90deg, hsla(217, 100%, 40%, 1) 0%, hsla(186, 100%, 59%, 1) 100%);
}



.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.checkbox-cell {
    text-align: center;
}

.checkbox-cell input[type="checkbox"] {
    transform: scale(1.3);
    cursor: pointer;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

.quiz-options select, .quiz-options button {
    padding: 10px 15px;
    border-radius: 4px;
    border: none;
    background-color: var(--black-3);
    color: var(--white-2);
    font-size: 16px;
    cursor: pointer;
}

.quiz-options button {
    background: var(--blue-radiant-1);
    color: var(--white-3);
    font-weight: 600;
    transition: transform 0.2s;
}

.quiz-options button:hover {
    transform: translateY(-2px);
}

#question-count {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

/* Style pour les cases à cocher */
.type_checkbox {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

/* Style pour les labels des cases à cocher */
.type_checkbox + label {
    font-size: 16px;
    cursor: pointer;
    user-select: none;
}

/* Style pour le conteneur des cases à cocher */
.checkbox-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}



#color-table-container {
    width: 20%;
    margin: 20px auto;
}

#color-table {
    width: 100%;
    border-collapse: collapse;
}

#color-table tr:nth-child(even) {
    background-color: var(--black-2);
}
#color-table tr:nth-child(odd) {
    background-color: var(--black-1);
}
#color-table td:nth-child(even) {
    border-left: solid 1px var(--grey-0);
    width: 20%;
}
#color-table td {
    position: relative;
    height: 30px;
    padding: 10px;
}

.text-cell {
    position: relative;
    min-height: 30px;
}


.color-picker {
    position: absolute;
    inset: 0;               /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    opacity: 0;             /* invisible */
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}

.add_row_button{
    background: var(--play-button-gradient);
}
button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}


@media (max-width: 768px) {
    table {
        font-size: 0.8rem;
    }

    th, td {
        padding: 8px 10px;
    }

    #color-table-container {
        width: 95%;
    }
}

@media (min-width: 1024px) {
    body {
        padding: 20px;
    }

    #top_container {
        width: 90%;
    }

    .quiz-options select, .quiz-options button {
        max-width: 400px;
    }
}

/* Adaptation pour les petits écrans */
@media (max-width: 768px) {
    #vocabulaire-table,#vocabulaire-quizz-table {
        min-width: 100%; /* Permet au tableau de rétrécir si nécessaire */
    }

    #vocabulaire-table th, #vocabulaire-table td,#vocabulaire-quizz-table th,#vocabulaire-quizz-table td {
        padding: 8px 6px;
        font-size: clamp(0.6rem, 1.8vw, 0.8rem);
    }

    .filter_table {
        font-size: clamp(0.6rem, 1.8vw, 0.8rem);
        padding: 4px;
    }
}

}