:root {
    --article-card-img-tablet-height: 180px;
    --article-card-img-desktop-height: 160px;
}

.article-img-fixed {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    height: auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-hover:hover .article-img-fixed {
    transform: scale(1.03);
}

@media (min-width: 992px) {
    .article-img-fixed {
        aspect-ratio: auto;
        height: var(--article-card-img-desktop-height);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .article-img-fixed {
        aspect-ratio: auto;
        height: var(--article-card-img-tablet-height);
    }
}

body {
    background-color: #f5f5f5;
    color: #333;
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

.titre-nouveaute{
    justify-content: center;
    align-items: center;
    z-index: 2; 
    margin: 5px; 
    padding: 5px; 
    color: rgb(0, 0, 0); 
    position: relative; 
}

.card-body{
    padding: 12px 10px 3px 10px !important; /* Padding professionnel */
}
/* .articles{
    padding: 0 5px; 
    background-color: #f3f3f3;
    box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
} */

/* Conteneur pour prix et like sur la même ligne (page d'accueil) */
.article-price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 2px 10px 0;
    gap: 8px;
}

/* Style pour le prix */
.article-price {
    white-space: nowrap;/* Empêche le retour à la ligne */
    font-size: 14px; /* Taille de la police */
    color: rgb(218, 134, 44); /* Couleur orange */
    font-weight: bold; /* Texte en gras */
    padding: 0;
    font-family: 'Arial', sans-serif; /* Police sans-serif pour un look moderne */
    flex: 1;
    min-width: 0; /* Permet au prix de se rétrécir si nécessaire */
}

/* Style du like inline (page d'accueil) */
.like-container-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0; /* Empêche le conteneur de like de rétrécir */
}

.like-container-inline form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}

/* Bouton de like inline */
.like-button-inline {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.like-button-inline:hover {
    background: rgba(220, 53, 69, 0.1);
    transform: scale(1.1);
}

.like-button-inline:active {
    transform: scale(0.95);
}

/* Icône de like inline */
.like-icon-inline {
    font-size: 18px;
    color: #dc3545;
    transition: all 0.2s ease;
    line-height: 1;
    display: block;
}

.like-icon-inline.liked {
    color: #dc3545;
}

/* Compteur de like inline */
.like-count-inline {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    width: 100%;
}

.like-count-inline .like-number {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
}

/* Responsive mobile */
@media (max-width: 575px) {
    .article-price-wrapper {
        gap: 6px;
        margin: 2px 2px 8px 0;
    }
    
    .article-price {
        font-size: 13px;
    }
    
    .like-container-inline {
        gap: 3px;
    }
    
    .like-container-inline form {
        gap: 3px;
    }
    
    .like-button-inline {
        width: 24px;
        height: 24px;
    }
    
    .like-icon-inline {
        font-size: 16px;
    }
    
    .like-count-inline,
    .like-count-inline .like-number {
        font-size: 0.65rem;
    }
}

/* Style pour le titre */
.article-title {
        margin: 0 0 10px 0;
        color: #2c3e50; /* Couleur sombre professionnelle */
        font-weight: 600; /* Texte en semi-gras */
        overflow: hidden; /* Cache le texte qui dépasse */
        text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
        font-size: 13px; /* Taille de la police augmentée */
        line-height: 1.4; /* Ajuste l'espacement entre les lignes */
        height: 2.8em; /* Hauteur totale */
        max-height: 2.8em; /* Limite la hauteur */
        max-width: 100%; /* Largeur complète */
        display: -webkit-box; /* Nécessaire pour le texte tronqué */
        -webkit-box-orient: vertical; /* Orientation verticale pour le texte */
        -webkit-line-clamp: 2; /* Limite à 2 lignes */
        white-space: normal; /* Permet le retour à la ligne */
        text-transform: none; /* Pas de transformation */
        font-family: 'Poppins', sans-serif; /* Police uniforme */
   
}


.article-hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre professionnelle subtile */
    background: rgb(255, 255, 255); /* Fond blanc */
    border-radius: 12px; /* Coins plus arrondis */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transition fluide */
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Bordure subtile */
    overflow: hidden; /* Pour les effets d'image */
}

.article-hover:hover {
    transform: translateY(-4px); /* Légère élévation au survol */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Ombre plus prononcée */
    border-color: rgba(0, 0, 0, 0.1); /* Bordure plus visible au survol */
}


.profil-certification{
    display: flex; 
    justify-content: space-between; /*elements aux 2 bordures*/
    align-items: center;
    margin: 5px 0 0 0;
    padding: 0;
    min-height: 30px;
    gap: 8px;
}

.certification {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 4px 8px; 
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    gap: 4px;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

/* Logo de certification */
.certification-logo {
    width: 18px;
    height: 18px;
}

/* Texte "Vérifié" */
.certification-text {
    font-size: 10px;
    font-weight: bold;
    color: #28a745; /* Vert Bootstrap */
}


/* Conteneur pour la photo de profil et le nom */
.user-info {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 2px;
}

/* photo de profil de l'utilisateur */
.profile-picture {
    width: 24px; 
    height: 24px;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    object-fit: cover;  
    border: 1px solid rgba(0,0,0,0.3);/*Ajout d'une bordure noire*/
}


/* Nom d'utilisateur */
.user-name {  
    font-size: 11px; /* Taille de police réduite */
    font-weight: bold;
    color: #6c757d; /* Couleur discrète (text-muted) */
    white-space: nowrap; /* Empêche le retour à la ligne */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute "..." si le texte est trop long */
    max-width: 50px; /* Limite la largeur du texte */
    text-transform: capitalize; /* Met la première lettre de chaque mot en majuscule */
    /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); Ajoute une ombre douce */
    padding: 2px 5px;
    border-radius: 12px; /* Coins arrondis */
    
}

.user-name.not-certified {
    font-size: 11px; 
    font-weight: bold;
    color: #6c757d; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px !important;
    text-transform: capitalize; 
    /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); Ajoute une ombre douce */
    padding: 2px 5px;
    border-radius: 12px; /* Coins arrondis */  
}


.profile-picture{
    margin: 0 !important;
    padding: 0 !important;
}



/* Conteneur de la localisation */
.article-localisation {
    margin: 0 0 8px 0;
    padding: 0;
    display: flex; /* Alignement horizontal */
    align-items: center; /* Centrer verticalement */
    gap: 4px; /* Espacement entre l'icône et le texte */
}

/* Icône de localisation */
.localisation-icon {
    padding: 0; /* Supprime le padding */
    margin: 0; /* Supprime les marges */ 
    width: 12px; /* Largeur de l'icône */
    height: 12px; /* Hauteur de l'icône */
    object-fit: contain; /* Ajuste l'image sans la déformer */
}

/* Texte de la localisation */
.localisation-text {
    color: #6c757d; /* Couleur du texte professionnelle */
    margin: 0; /* Supprime les marges par défaut */
    white-space: nowrap; /* Empêche le retour à la ligne */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
    text-transform: none; /* Pas de transformation */
    font-size: 11px; /* Taille du texte */
    padding: 0; /* Supprime tous les espacements internes */
    max-width: 100px; /* Limite la largeur du texte */
    font-family: 'Poppins', sans-serif; /* Police uniforme */
} 



/* style de like */
/* Style du bouton de like */
.like-button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;

}

/* Icône de cœur non liké (bordure rouge uniquement) */
.like-icon {
    display: flex; /* Utilisation de flexbox pour centrer l'icône */
    justify-content: center; /* Centre horizontalement l'icône */
    align-items: center; /* Centre verticalement l'icône */
    position: absolute;
    font-size: 20px;
    color: transparent; /* Pas de couleur de remplissage */
    border: 2px solid red; /* Bordure rouge */
    border-radius: 50%; /* Coins arrondis pour l'icône */
    padding: 0px; /* Espacement interne */
    transition: all 0.3s ease; /* Animation fluide */
    background-color: white; /* Fond blanc pour le cœur */
    top: 3px;
    left: 3px; 
    height: 20px; /* Hauteur de l'icône */ 
    width: 20px;
}

/* Icône de cœur liké (remplissage rouge) */
.like-icon.liked {
    color: red; /* Remplissage rouge */
    border: none; /* Pas de bordure */
}

/* Supprimer l'effet de cercle rouge */
.like-icon:not(.liked) {
    border: none; /* Pas de bordure autour du cœur */
    color: red; /* Bordure rouge uniquement pour le contour */
}

/* Animation au survol */
.like-icon:hover {
    transform: scale(1.1); /* Zoom léger au survol */
}

/* Positionnement du bouton de like */
.like-container {
    position: absolute;
    top: 230px; /* Décalage depuis le haut */
    right: 10px; /* Décalage depuis la droite */
    z-index: 1; /* Assure que le bouton est au-dessus des autres éléments */
    width: 26px; /* Largeur du cercle */
    height: 26px; /* Hauteur du cercle (égale à la largeur pour un cercle parfait) */
    border-radius: 50%; /* Rend le conteneur circulaire */
    /* background-color: rgba(0, 0, 0, 0.1); Arrière-plan légèrement transparent */
    background-color: rgb(255, 255, 255); /* Arrière-plan légèrement transparent */
    display: flex; /* Active le flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    transition: transform 0.3s ease; /* Animation fluide au survol */
}

@media (min-width: 992px) {
    .like-container {
        top: calc(var(--article-card-img-desktop-height) + 30px);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .like-container {
        top: calc(var(--article-card-img-tablet-height) + 30px);
    }
}

/* Compteur de likes */
.like-count {
    font-size: 0.7rem; /* Taille de la police */
    color: #555; /* Couleur grise pour le texte */
    margin-top: 25px; /* Espacement au-dessus du compteur */
    text-align: center; /* Centre le texte */
    font-weight: bold; /* Texte en gras */ 
}


/* affichage de la date */
.heure{
    border-radius: 8px;
    border-top-right-radius: 12px; /* Arrondi du coin supérieur droit */ 
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85) 0%, rgba(52, 73, 94, 0.85) 100%); /* Arrière-plan gris professionnel */
    backdrop-filter: blur(8px); /* Effet de flou moderne */
    color: #fff; /* Couleur de l'écriture blanche */
    padding: 4px 8px; /* Espacement interne */
    font-size: 0.65rem; /* Taille de la police */
    font-weight: 600; /* Texte en semi-gras */
    text-align: center; /* Centre le texte */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre subtile */
    font-family: 'Poppins', sans-serif; /* Police uniforme */
}

/* Séparateur professionnel */
.article-hover hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 12px 0 8px 0;
    width: 100%;
}

/* Badge Pro professionnel */
.article-hover .badge.bg-warning {
    background: linear-gradient(135deg, #f4751a 0%, #ff9900 100%) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(244, 117, 26, 0.3);
}