/* Styles pour rendre les formules mathématiques et tableaux responsives */

/* Styles généraux pour le contenu des articles */
.post-content {
    overflow-x: hidden;
    width: 100%;
}

/* Correction des espaces étranges après les éléments spéciaux */
.post-content strong,
.post-content em,
.post-content sub,
.post-content sup {
    display: inline-block;
    margin-right: 0;
    padding-right: 0;
}

/* Optimisation de l'espace dans les formules */
.post-content p {
    letter-spacing: -0.01em;
}

/* Formules mathématiques centrées */
.post-content p[style*="text-align:center"] {
    overflow-x: auto;
    padding: 0.5rem 0;
    max-width: 100%;
    display: block;
}

/* Tableaux responsifs */
.post-content table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    overflow-x: auto;
    display: block;
    border-collapse: collapse;
}

/* Pour les écrans mobiles */
@media (max-width: 767px) {
    /* Ajustement des formules mathématiques */
    .post-content p {
        overflow-x: auto;
        scroll-behavior: smooth;
        white-space: normal;
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }
    
    /* Seulement les paragraphes avec formules mathématiques en nowrap */
    .post-content p[style*="text-align:center"] {
        white-space: nowrap;
    }
    
    /* Permettre aux formules de défiler horizontalement */
    .post-content p[style*="text-align:center"] {
        white-space: nowrap;
        text-align: center !important;
        padding: 0.25rem 0;
        width: 100%;
        display: inline-block;
    }
    
    /* Ajustement des tableaux */
    .post-content table {
        font-size: 0.85rem;
    }
    
    /* Ajustement des cellules de tableau */
    .post-content table td, 
    .post-content table th {
        padding: 0.4rem;
    }
    
    /* Réduire la taille des sous-indices et exposants */
    .post-content sub, 
    .post-content sup {
        font-size: 0.7em;
    }
}

/* Styles spécifiques pour les formules mathématiques complexes */
.post-content .formula-container {
    overflow-x: auto;
    margin: 0.5rem 0;
    padding: 0.25rem 0;
    max-width: 100%;
    scroll-behavior: smooth;
    width: 100%;
}

/* Indicateur de défilement pour les formules qui dépassent */
.post-content .scrollable {
    position: relative;
}

.post-content .scrollable::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0 0.3rem;
    font-size: 1rem;
    color: #007C91;
    display: none;
}

@media (max-width: 767px) {
    .post-content .scrollable.overflowing::after {
        display: block;
    }
}