/*
 * Fichier : style.css
 * Chemin : wp-content/plugins/mon-api-tableau/css/style.css
 */

.mon-api-tableau-wrapper {
    overflow-x: auto; /* Permet le défilement horizontal sur les petits écrans */
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.mon-api-tableau {
    width: 100%;
    border-collapse: collapse; /* Supprime l'espace entre les bordures de cellules */
    font-family: 'Inter', sans-serif; /* Utilisez une police moderne */
    color: #333;
    background-color: #ffffff;
    border-radius: 8px; /* Applique les bords arrondis au tableau */
    overflow: hidden; /* Assure que le border-radius s'applique */
}

.mon-api-tableau th,
.mon-api-tableau td {
    padding: 12px 15px; /* Augmente le rembourrage pour une meilleure lisibilité */
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* Ligne de séparation douce */
}

.mon-api-tableau th {
    background-color: #f8f8f8; /* Fond légèrement grisé pour les en-têtes */
    font-weight: 600; /* Plus gras pour les en-têtes */
    color: #555;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

/* Style des lignes impaires (pour une meilleure lisibilité) */
.mon-api-tableau tbody tr:nth-child(odd) {
    background-color: #fdfdfd;
}

/* Effet de survol sur les lignes */
.mon-api-tableau tbody tr:hover {
    background-color: #eef7ff;
    transition: background-color 0.3s ease;
}

/* Styles pour les messages d'erreur ou d'information */
.api-error-message {
    padding: 15px;
    background-color: #ffebeb;
    border: 1px solid #ff0000;
    color: #ff0000;
    border-radius: 5px;
    margin: 20px 0;
    text-align: center;
}