/***************************
 * LISTE CARACTERES / CLES *
 ***************************/

@font-face {
    font-family: 'contentSectionFont';
    src: url(../fonts/Oswald.woff2);
}

@font-face {
    font-family: 'cursive';
    src: url('https://ai-chinois.fr/assets/fonts/cursive.woff2') format('woff2'),
    url('https://ai-chinois.fr/assets/fonts/cursive.woff') format('woff'),
    url('https://ai-chinois.fr/assets/fonts/cursive.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'simsun';
    src: url(../fonts/simsun.ttc);
}

@font-face {
    font-family: 'kaiti';
    src: url(../fonts/simkai.ttf);
}

@font-face {
    font-family: 'slidexiaxing';
    src: url(../fonts/Slidexiaxing.ttf);
}

#listeCaracteresPanel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: scroll;
}

#listeCaracteresPanel .listeCaractereBox {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#listeCaracteresPanel a {
    text-decoration: none;
}

#listeCaracteresPanel span {
    font-weight: 700;
    font-size: 22px;
    color: #008cba;
}

/*************
 * CARACTERE *
 *************/

#caractereBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#card {
    width: 250px;
    background: white;
    padding: 20px 20px 0 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#card .caractereTitle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.character {
    font-size: 50px;
    font-weight: bold;
    color: #008cba;
}


#caractereTitle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 25px;
}

#card .simplifieBox {
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #008cba;
}

#card .traditionnelBox {
    font-size: 25px;
}

#caractereTitle .nbStrokeBox {
    margin-left: 7px;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #008cba;
    font-size: 15px;
    padding: 2px;
}

.grosPoint {
    width: 12px;
    height: 12px;
    background-color: #008cba;
    border-radius: 50%;
    margin: 3px 7px 0 7px;
}





.infoContent {
    text-align:justify;
}



.badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: bold;
}

.blue { background: #cce4ff; color: #00509e; }
.green { background: #d4edda; color: #155724; }
.red { background: #f8d7da; color: #721c24; }
.yellow { background: #fff3cd; color: #856404; }
.purple { background: #e9d5ff; color: #6f42c1; }

.description {
    margin-top: 10px;
    color: gray;
    font-size: 18px;
}

.actionIconSelected {
    filter: invert(36%) sepia(92%) saturate(748%) hue-rotate(180deg);
}

.active {
    filter: invert(48%) sepia(83%) saturate(1135%) hue-rotate(90deg) brightness(92%) contrast(91%);
}

.inactive {
    filter: brightness(0) saturate(100%) invert(24%) sepia(94%) saturate(7376%) hue-rotate(358deg) brightness(105%) contrast(119%);
}

.disable {
    filter: grayscale(100%) brightness(90%) contrast(30%);
}

.caractereSelected {
    background-color: #008cba;
}

#listeCaracteresPanel .caractereSelected span {
    color: white;
}