/* --- Styles confinés au DIV .languette --- */

.languette {
    padding: 0.5rem;
    width: 100% !important; /* Nécessaire uniquement si d'autres règles le surchargent */

}

/* Assure que l'élément .flex-grow-1 prend 100% de la largeur UNIQUEMENT sur mobile (< 768px) */
@media (max-width: 767.98px) {
    .languette .languette-card > .flex-grow-1 {
        width: 100% !important; /* Nécessaire uniquement si d'autres règles le surchargent */
    }
}


/* 1. Style de la Carte Générale */
.languette .languette-card {
    border-radius: 0.25rem;
    border: none;
    /* Ajout d'une transition pour l'animation générale (ombre et transformation) */
    transition: box-shadow .25s ease-in-out, transform 0.3s ease-in-out;
}

/* Effet Hover de la Carte : Ombre et légère élévation (animation) */
.languette .hoverable-card:hover {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    transform: translateY(-2px); /* Légère élévation de la carte */
}

/* 2. Style de la zone Image */
.languette .languette-card-image {
    width: 100%; /* Défaut : 100% de la largeur du parent sur mobile */
    height: 150px; /* Donne une hauteur fixe sur mobile pour éviter une image étirée */
    min-width: auto;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}

/* Style de l'image (pour qu'elle remplisse sa zone) */
.languette .languette-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* S'assure que l'image couvre l'espace sans se déformer */
    /* Retrait de border-radius pour une image carrée */
    transition: transform 0.4s ease-out;
    padding: 12px;
}

/* Effet de ZOOM sur l'image au survol */
/* On cible l'image img */
.languette .languette-card-image:hover img {
    transform: scale(1.1); /* Zoom de 10% */
}


/* Appliquer la largeur et hauteur fixe (carrée) UNIQUEMENT à partir de la taille moyenne (md) */
@media (min-width: 768px) {
    .languette .languette-card-image {
        width: 150px;
        min-width: 150px;
        height: 150px; /* Assure que la zone est un carré */
    }
}

/* 2. Correction des Chips (alignement vertical) */
.languette .languette-chip {
    display: inline-flex;
    align-items: center; /* **CLÉ : Centre les icônes et le texte verticalement** */
    height: 32px;
    line-height: 1.2; /* Ajuster pour un meilleur alignement */
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    padding: 6px 10px; /* Ajuster padding pour la nouvelle line-height */
    border-radius: 0;
    background-color: #e4e4e4;
    cursor: default;
    /* Ajout d'une transition pour le survol */
    transition: background-color 0.2s;
}

.languette .languette-chip i {
    /* S'assurer que les icônes Font Awesome sont de la bonne taille et alignées */
    font-size: 14px;
    vertical-align: middle;
    line-height: 1; /* S'assurer que l'icône n'ajoute pas de hauteur supplémentaire */
}

/* Style pour les likes et commentaires (dans le ms-md-auto) */
.languette .card-footer .text-secondary,
.languette .card-footer .text-muted {
    font-size: 13px;
}

.languette .card-footer .text-secondary .fas.fa-heart {
    color: #dc3545; /* Couleur rouge pour le cœur (Boostrap danger) */
}

/* Style de survol pour les chips */
.languette .languette-chip:hover {
    background-color: #d4d4d4;
    text-decoration: none;
}
/* Style spécifique pour la puce pixelplus si elle contient une image */
.languette .languette-chip.pixelplus {
    padding: 4px 12px;
}

.languette .languette-chip.pixelplus img {
    display: inline-block;
    width: 18px;
    height: auto;
    vertical-align: middle;
    margin-right: 4px;
    float: none;
}

/* Style de l'en-tête */
.languette h5 {
    font-size: 1.5rem;
}

/* S'assurer que le texte tronqué a la bonne couleur au survol */
.languette .card-body a:hover h5 {
    color: #039be5 !important; /* Couleur du lien Bootstrap par défaut */
}