/* Page « Le langage CoddyRun » : sélecteur de langage et recherche des messages d'erreur */

.lg-langue {
    margin: -8px 0 18px;
}

.lg-langue-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.lg-langue-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.lg-langue-label .mdi {
    font-size: 18px;
    color: var(--accent);
}

.lg-choix {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border-radius: 999px;
    background: var(--surface3);
    border: 1px solid var(--border);
}

.lg-choix button,
.lg-mini button {
    font: inherit;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: var(--text-dim);
    border-radius: 999px;
    transition: background .15s, color .15s;
}

.lg-choix button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
}

.lg-choix button:hover,
.lg-mini button:hover {
    color: var(--text);
}

.lg-choix button.is-active,
.lg-mini button.is-active {
    background: var(--accent);
    color: #fff;
}

.lg-choix button:focus-visible,
.lg-mini button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lg-choix button:disabled,
.lg-mini button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.lg-beta {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 122, 0, .14);
    color: var(--accent4);
}

.lg-choix button.is-active .lg-beta {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.lg-langue-aide {
    flex: 1 1 260px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-dim);
}

.lg-note {
    margin: 10px 0 0;
}

.lg-note .mdi {
    font-size: 18px;
    line-height: 1.2;
}

/* bascule compacte dans la barre des chapitres (collante) */
.lg-mini {
    position: sticky;
    left: 0;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: -10px 0 0 0 var(--bg), 10px 0 8px -2px var(--bg);
}

.lg-mini button {
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 600;
}

/* recherche dans « Toutes les erreurs » */
.lg-recherche {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.lg-recherche .mdi {
    position: absolute;
    left: 12px;
    font-size: 18px;
    color: var(--text-dimmer);
    pointer-events: none;
}

.lg-recherche input {
    flex: 1;
    min-width: 0;
    padding-left: 38px;
}

.lg-recherche-total {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-dimmer);
    white-space: nowrap;
}

.lg-recherche-vide {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px dashed var(--border2);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text-dim);
}

.lg-exemple-err {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 4px 0 12px;
}

/* liste des signatures */
.lg-sig-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 6px 14px;
}

.lg-sig-liste li {
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--surface2);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.lg-sig-liste code {
    font-size: 11px;
}

/* tableaux d'erreurs lisibles sur mobile : les longs messages passent à la ligne */
#erreurs .ref-table code,
#erreurs-completes .ref-table code {
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    /* tableaux d'erreurs empilés : message, puis cause, puis solution */
    #erreurs .ref-table thead,
    #erreurs-completes .ref-table thead {
        display: none;
    }

    #erreurs .ref-table tr,
    #erreurs-completes .ref-table tr {
        display: block;
        padding: 10px 2px;
        border-bottom: 1px solid var(--border);
    }

    #erreurs .ref-table td,
    #erreurs-completes .ref-table td {
        display: block;
        padding: 3px 0;
        border: 0;
    }

    #erreurs .ref-table tr:hover td,
    #erreurs-completes .ref-table tr:hover td {
        background: none;
    }

    #erreurs .ref-table td:first-child,
    #erreurs-completes .ref-table td:first-child {
        padding-bottom: 6px;
    }

    #erreurs .ref-table td:nth-child(2)::before,
    #erreurs-completes .ref-table td:nth-child(2)::before {
        content: "Cause : ";
        font-weight: 600;
        color: var(--text);
    }

    #erreurs .ref-table td:nth-child(3)::before,
    #erreurs-completes .ref-table td:nth-child(3)::before {
        content: "Solution : ";
        font-weight: 600;
        color: var(--text);
    }

    .lg-langue-ligne {
        padding: 12px;
    }

    .lg-recherche {
        flex-wrap: wrap;
    }

    .lg-recherche-total {
        width: 100%;
        order: 2;
    }
}

#erreurs-completes [hidden],
.kw-grid [hidden],
.lg-langue [hidden] {
    display: none !important;
}