/*
 * STYLE SPÉCIFIQUE À LA PAGE EXPRESSIONS
 * La majorité du design vient de public.css.
 */

.expression-header {
    min-height: 54px;
}

.expression-title {
    flex: 1;
    min-width: 0;
    color: #2c312f;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.expression-details {
    display: none;
    padding: 2px 18px 17px;
    border-top: 1px solid #f0f1f0;
}

.expression-item.open .expression-details {
    display: block;
}

.expression-audio-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0 3px;
}

.expression-translation {
    flex: 1;
    min-width: 0;
    color: #147b83;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    white-space: pre-line;
}

.expression-audio-button {
    margin-top: -2px;
}

.expression-no-translation {
    color: #9ba39e;
    font-size: 13px;
    font-style: italic;
    padding-top: 10px;
}

.expression-category {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f6f0df;
    color: #7c6022;
    font-size: 10px;
    font-weight: 750;
}

.expression-mot-an {
    margin-top: 8px;
    color: #68726d;
    font-size: 13px;
    line-height: 1.4;
}

.expression-mot-an strong {
    color: #4b5751;
}

@media (max-width: 420px) {
    .expression-title {
        font-size: 15px;
    }

    .expression-translation {
        font-size: 17px;
    }
}