/* ============================================================================
   Liste des langues : habillage v5.

   Remplace css/sidebar.css, qui posait une barre latérale fixe de 250 px et
   n'avait plus aucune couleur depuis que root.css (legacy) n'est plus chargé.
   Le menu du site assure déjà la navigation : la barre est abandonnée.
   ========================================================================== */

/* Même feuille opaque que les autres pages d'Aventures : sans elle, le titre et
   l'introduction s'écrivent sur l'image de fond du site et deviennent illisibles
   dès que le décor s'éclaircit. La table, elle, portait déjà son propre fond,
   ce qui masquait le problème. */
.langues-page {
    max-width: 1100px;
    margin: 90px auto 4rem;
    padding: 1.75rem 2rem 2rem;
    background: rgba(0, 24, 44, 0.94);
    border: 1px solid var(--blue-500);
    font-family: 'Crimson Text', Georgia, serif;
    color: var(--blue-100);
}

.langues-page h1 {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: left;
    margin: 0 0 0.6rem;
}

.langues-intro {
    color: rgba(223, 234, 242, 0.72);
    line-height: 1.6;
    max-width: 75ch;
    margin: 0 0 1.25rem;
}
.langues-intro strong { color: var(--gold); }

.langues-recherche {
    width: 100%;
    background: var(--blue-800);
    border: 1px solid var(--blue-500);
    border-radius: 0;
    padding: 0.7rem 1rem;
    color: var(--blue-100);
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1rem;
    outline: none;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.langues-recherche::placeholder { color: rgba(223, 234, 242, 0.35); }
.langues-recherche:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(245, 197, 66, 0.15);
}

.langues-scroll { overflow-x: auto; }

.langues-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 35, 64, 0.55);
    border: 1px solid var(--blue-500);
    font-size: 0.97rem;
}

.langues-table thead th {
    background: var(--blue-800);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: left;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--blue-500);
    white-space: nowrap;
}

.langues-table tbody td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid rgba(10, 61, 102, 0.45);
    vertical-align: top;
    line-height: 1.5;
}
.langues-table tbody tr:last-child td { border-bottom: none; }
.langues-table tbody tr:nth-child(even) { background: var(--blue-100-05); }
.langues-table tbody tr:hover { background: rgba(245, 197, 66, 0.05); }

.langues-nom {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.9rem;
    color: var(--blue-100);
    white-space: nowrap;
}

.langues-races { color: rgba(223, 234, 242, 0.75); }
.langues-aucune { color: rgba(223, 234, 242, 0.35); font-style: italic; }

.langues-compteur {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: rgba(223, 234, 242, 0.45);
    min-height: 1.2em;
}

.langues-vide {
    padding: 1.1rem 1.25rem;
    background: var(--blue-900-transparent);
    border: 1px solid var(--blue-500);
    border-left: 3px solid var(--blue-200);
}

@media (max-width: 900px) {
    .langues-page { margin-top: 75px; }
    .langues-table { font-size: 0.92rem; }
}