.performance-summary-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left; /* Alignement à gauche pour améliorer la lisibilité */
    margin-bottom: 20px;
    overflow-x: auto; /* Permet un défilement horizontal sur les petits écrans */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
    display: block; /* Permet le défilement horizontal si nécessaire */
    white-space: nowrap; /* Empêche le texte de se couper sur des lignes différentes */
}

.performance-summary-table th,
.performance-summary-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center; /* Centrer le texte dans les cellules */
    word-wrap: break-word; /* Permet de couper le texte pour éviter le débordement */
}

.performance-summary-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.performance-summary-table td {
    background-color: #fff;
}

/* Optimisation pour les petits écrans comme l’iPhone */
@media (max-width: 768px) {
    .performance-summary-table {
        font-size: 14px; /* Réduit la taille de la police pour les écrans plus petits */
        padding: 0; /* Réduit les marges du tableau pour plus de lisibilité */
    }

    .performance-summary-table th,
    .performance-summary-table td {
        padding: 12px 8px; /* Ajoute un peu plus de padding pour améliorer la lisibilité */
    }

    .performance-summary-table th {
        font-size: 16px; /* Agrandir la taille du texte des en-têtes pour la lisibilité */
    }
}

/* Pour les très petits écrans (moins de 480px, comme l'iPhone 16 en mode portrait) */
@media (max-width: 480px) {
    .performance-summary-table {
        font-size: 12px; /* Réduit la taille de la police pour les très petits écrans */
    }

    .performance-summary-table th,
    .performance-summary-table td {
        padding: 10px 5px; /* Réduit l'espacement des cellules */
    }

    .performance-summary-table th {
        font-size: 14px; /* Taille des en-têtes ajustée pour éviter la surcharge d’information */
    }

    /* Pour un affichage de type "tableau mobile" */
    .performance-summary-table td {
        display: block; /* Transforme chaque cellule en bloc pour un affichage plus flexible */
        width: 100%; /* Prend toute la largeur disponible */
        box-sizing: border-box; /* Assure que le padding ne dépasse pas les limites */
    }

    /* Pour transformer les lignes en un format plus lisible sous forme de liste */
    .performance-summary-table tr {
        display: block; /* Affiche chaque ligne comme un bloc */
        margin-bottom: 10px; /* Ajoute de l'espace entre les lignes */
    }

    .performance-summary-table td::before {
        content: attr(data-label); /* Affiche le nom de la colonne avant le contenu de chaque cellule */
        font-weight: bold; /* Met en gras le nom de la colonne */
        display: block; /* Affiche le nom de la colonne comme un bloc */
        margin-bottom: 5px; /* Ajoute de l'espace entre le label et la donnée */
    }

    .performance-summary-table td {
        display: block; /* Chaque cellule devient un bloc pour s'adapter à l'écran */
        width: 100%; /* Permet à la cellule de prendre toute la largeur */
        box-sizing: border-box; /* Permet de gérer le padding */
    }
}