/* =====================================================
   TRX Image - CSS corrigé v1.3
   ===================================================== */

/* Conteneur de base */
.sc_image {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden; /* Empêche le débordement */
}

/* Marges par défaut seulement pour les images non centrées */
.sc_image:not(.aligncenter) {
    margin: 0 1em 1em 0;
}

/* Pour que fit-content fonctionne avec les alignements */
.sc_image:not(.aligncenter):not(.alignleft):not(.alignright) {
    width: fit-content;
}

/* Image responsive */
.sc_image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: inherit;
}

/* Forme ronde */
.sc_image_shape_round img {
    border-radius: 50%;
}

/* Légende */
.sc_image figcaption {
    font-size: 0.9em;
    text-align: center;
    color: #555;
    margin-top: 0.5em;
}

/* =====================================================
   Alignements
   ===================================================== */

/* Alignement à gauche */
.sc_image.alignleft {
    float: left;
    margin-right: 1em;
    margin-left: 0;
    width: fit-content; /* S'adapte à la taille de l'image */
    max-width: 100%;
}

/* Alignement à droite */
.sc_image.alignright {
    float: right;
    margin-left: 1em;
    margin-right: 0;
    width: fit-content; /* S'adapte à la taille de l'image */
    max-width: 100%;
}

/* Alignement au centre - CORRECTION PRINCIPALE v1.3 */
.sc_image.aligncenter {
    display: table; /* Alternative à fit-content qui fonctionne mieux avec margin auto */
    float: none !important; /* Important : annule tout float précédent */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1em;
    margin-bottom: 1em;
    clear: both; /* Évite les problèmes avec d'autres éléments flottants */
    max-width: 100%; /* Mais ne dépasse pas l'écran */
}

/* Pour les images avec largeur fixe centrées */
.sc_image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   Cas spécifiques - Prévention débordement
   ===================================================== */

/* Pour les images avec largeur fixe, s'assurer qu'elles ne dépassent pas */
.sc_image[style*="width"] {
    max-width: 100% !important;
}

/* Forcer la largeur 100% UNIQUEMENT si une largeur est spécifiée */
.sc_image[style*="width"] img {
    width: 100%;
}

/* Pour les conteneurs figure avec largeur inline */
.sc_image figure {
    max-width: 100%;
}

/* Clearfix pour les alignements flottants */
.sc_image.alignleft::after,
.sc_image.alignright::after {
    content: "";
    display: table;
    clear: both;
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 768px) {
    /* Sur mobile, forcer le centrage pour toutes les images */
    .sc_image {
        float: none !important;
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100%;
    }
    
    .sc_image.alignleft,
    .sc_image.alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}