/* Témoignages : cartes (carrousel de l'accueil, liste des témoignages)
   et page d'un témoignage (theme/blog/blog-detail). */

/* Mobile : la plupart des témoignages sont des vidéos portrait (9:16). Dans
   la boîte paysage de la carte (≈ 300 × 140) on ne voyait que le haut du
   front : boîte portrait, cadrée sur le visage. La classe is-portrait est
   posée par le script de cards/blog-card-one quand le média est plus haut
   que large ; une image paysage garde sa boîte paysage. */
@media (max-width: 767px) {
    .blog-card-figma .blog-image-container.is-portrait {
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        max-height: 420px !important;
    }
}

/* À toutes les largeurs, le média portrait est cadré au tiers supérieur, là
   où est le visage (calé en haut, on voyait du front au nez sur desktop).
   Sur desktop la boîte garde sa hauteur : la grille reste alignée. */
.blog-card-figma .is-portrait .blog-image {
    object-position: center 30% !important;
}

/* Sous 520 px, app.css met tous les .btn à 100 % : ici le bouton,
   non compressible, élargissait la page à ~490 px. */
.blog-detail-nav .btn {
    width: auto;
}

/* Les témoignages sont souvent collés depuis Word : police Times et
   texte justifié imposés en style en ligne. On garde la police du site. */
.blog-details-content [style*="font-family"] {
    font-family: inherit !important;
}

@media (max-width: 767px) {
    /* Même retrait que le texte (mx-4 md:mx-0) : la flèche ne colle plus au bord. */
    .blog-detail-nav {
        padding-inline: 1rem;
    }

    .blog-details-content [style*="text-align:justify"],
    .blog-details-content [style*="text-align: justify"] {
        text-align: left !important;
    }
}