/* === Style spécifique aux fiches Grehnilien === */

/* Conteneur principal */
.fiche article {
    margin-bottom: 2rem;
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Texte pédagogique */
.fiche .intro p {
    margin-bottom: 1rem;
    text-align: justify;
}

/* Tableau de lexique */
.fiche .tableau table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
    background-color: #fdfdfd;
}

.fiche .tableau caption {
    text-align: left;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.fiche .tableau th,
.fiche .tableau td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    vertical-align: top;
}

.fiche .tableau th {
    background-color: #273c75;
    color: white;
    text-align: left;
}

.fiche .tableau td b {
    color: #e84118;
}

/* Responsive tableau */
@media (max-width: 768px) {

    .fiche .tableau table,
    .fiche .tableau thead,
    .fiche .tableau tbody,
    .fiche .tableau th,
    .fiche .tableau td,
    .fiche .tableau tr {
        display: block;
    }

    .fiche .tableau tr {
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        overflow: hidden;
    }

    .fiche .tableau td {
        padding: 0.75rem;
        text-align: right;
        position: relative;
    }

    .fiche .tableau td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        text-align: left;
        font-weight: bold;
        color: #444;
    }

    .fiche .tableau thead {
        display: none;
    }

    .fiche .tableau td {
        min-height: 2.5rem;
        padding: 0.75rem;
        text-align: right;
        position: relative;
        background-color: white;
    }

    .fiche .tableau td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        text-align: left;
        font-weight: bold;
        color: #444;
        white-space: nowrap;
        max-width: 45%;
    }

    /* Empêche les cases vides de "disparaître" */
    .fiche .tableau td:empty::after {
        content: "\00a0";
        /* espace insécable */
        display: block;
        min-height: 1rem;
    }

}