/* 📄 /assets/css/components.css */

/* --- DÉBUT DES AJUSTEMENTS DE BASE POUR L'ACCESSIBILITÉ (Zones Cliquables) --- */

/* Applique une taille minimale aux boutons flottants */
.like-btn,
.favorite-btn {
    /* Taille du bouton est déjà 36px/36px. On ajoute du padding pour augmenter la zone tactile */
    padding: 6px; 
    min-width: 44px; /* Augmentation minimale pour le WCAG (44px/44px recommandé) */
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
}

/* Applique une taille minimale aux boutons de la barre d'actions */
.product-actions-bar .icon-button {
    padding: 10px 14px;
    min-width: 44px;
    min-height: 44px;
}

/* Applique une taille minimale aux liens de la boutique dans les cartes */
.merchant-info .merchant-link {
    display: inline-block;
    padding: 4px 0;
    line-height: 1.2;
    min-height: 44px; /* Assure une zone de clic facile sur mobile */
}
/* Applique une taille minimale aux boutons de contact sous la carte boutique */
.store-actions button {
    min-width: 100px;
    min-height: 44px;
}
.contact-toggle {
    /* Ajout du min-height pour la zone tactile */
    min-height: 44px;
}
/* --- FIN DES AJUSTEMENTS DE BASE --- */

/* ✅ Cartes Produits : Design Marché (Style de base pour .product-card) */
.product-card {
    background: var(--background-soft); /* Fond doux de la carte */
    border-radius: 16px; /* Coins arrondis cohérents avec le thème */
    box-shadow: var(--shadow); /* Ombre par défaut de la carte */
    overflow: hidden; /* Assure que le contenu ne dépasse pas les bords arrondis */
    display: flex; /* Active Flexbox pour la disposition interne */
    flex-direction: column; /* Empile les éléments verticalement (image, corps, barre d'actions) */
    position: relative; /* TRÈS IMPORTANT : Nécessaire pour positionner les badges et boutons flottants */
    /* Transitions douces pour les effets de survol */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    border: 1px solid transparent; /* Bordure transparente par défaut pour un effet au survol */
}

.product-card:hover {
    transform: translateY(var(--card-hover-lift-product, -4px)); /* Soulèvement subtil de la carte au survol */
    box-shadow: var(--product-card-hover-shadow); /* Ombre légèrement plus prononcée et plus douce au survol */
    border-color: var(--border-color); /* Bordure discrète qui apparaît/s'assombrit au survol */
}

/* Lien de l'image (NE DOIT PAS ÊTRE POSITIONNÉ EN ABSOLU) */
.product-card > .product-image-link { /* Cible le lien direct enfant de .product-card */
    display: block; /* Prend toute la largeur disponible dans le flux */
    text-decoration: none; /* Pas de soulignement par défaut */
    color: inherit; /* Hérite la couleur du texte */
}

.product-image-container { /* Conteneur pour l'image principale du produit */
    width: 100%;
    aspect-ratio: 1/1; /* Force l'image à être carrée */
    background: var(--background); /* Fond pour l'espace vide autour de l'image */
    display: flex; /* Utilise Flexbox pour centrer l'image à l'intérieur */
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* Petit padding pour que l'image ne colle pas aux bords */
    border-bottom: 1px solid var(--border-color); /* Bordure légère sous l'image */
    flex-shrink: 0; 
}


.product-image { /* Image du produit elle-même */
    max-width: 95%; 
    max-height: 95%; 
    object-fit: contain; 
    border-radius: 8px; 
}

/* Règle générale pour les images DANS les cartes produit (à supprimer si non utilisée) */
.product-card img:not(.product-image) { /* Cible les images qui ne sont pas l'image principale */
    width: 100%;
    height: 200px; /* Exemple de hauteur, ajustez si besoin */
    object-fit: cover;
}


.product-card .product-info { /* Contenu principal de la carte produit */
    padding: 1.25rem; 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    flex-grow: 1; 
}

.product-card .product-title {
    font-size: 1.15rem; 
    font-weight: 600; 
    color: var(--text-main); 
    line-height: 1.4; 
    margin-bottom: 0.5rem; 

    /* --- AJOUTS CRUCIAUX POUR TRONQUER LE TITRE --- */
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    white-space: normal; 
}

/* --- AMÉLIORATION DIFFÉRENCIATION DES PRIX --- */
.product-card .product-pricing {
    display: flex; 
    align-items: baseline; 
    gap: 0.5rem; 
    flex-wrap: wrap; 
    font-weight: bold; 
}

/* Style du prix actuel (le plus important, souvent le prix promo) */
.product-card .product-pricing .current-price {
    font-size: 1.3rem; 
    color: var(--primary); 
}

/* Style du prix de base (barré) */
.product-card .product-pricing .base-price {
    text-decoration: line-through; 
    font-size: 0.95rem; 
    color: var(--text-muted); 
    font-weight: normal; 
}

.product-card .product-promo { /* Si c'est un texte de promotion séparé */
    color: var(--product-promo-color); 
    font-weight: bold;
    font-size: 0.95rem;
}

.product-card .badges, /* Conteneur général pour les badges */
.product-card .rating, /* Conteneur pour les étoiles d'évaluation */
.product-card .merchant-info { /* Conteneur pour les informations du marchand */
    font-size: 0.8rem; 
    color: var(--text-muted); 
}

/* ⭐ Badges Produit (éléments flottants sur la carte) */
.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espacement vertical entre les badges */
    z-index: 901; 
    pointer-events: none; 
}
/* Les badges individuels sont cliquables s'ils ont des actions (normalement non) */
.product-badges .badge {
    pointer-events: auto; 
    padding: 4px 8px;
    font-size: 0.7rem; /* Taille trop petite pour l'accessibilité si on le garde seul, mais acceptable dans un badge */
    border-radius: 8px;
    font-weight: bold;
    color: white; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

/* Attribution des couleurs distinctes aux badges */
.badge-new { background: var(--badge-new-bg); } /* Badge "Nouveau" */
/* --- CORRECTION DE CONTRASTE CRITIQUE POUR ACCESSIBILITÉ --- */
.badge-promo { 
    background: var(--badge-promo-bg); 
    /* Si --badge-promo-bg est clair, le texte doit être sombre */
    color: var(--text-dark, #000) !important; 
} 
/* --- FIN CORRECTION --- */
.badge-out-of-stock { /* Badge "Épuisé" */
    background: var(--badge-sold-out-bg); 
}


/* ⭐ Notation Étoiles */
.rating.stars {
    font-size: 0.95rem; 
    color: var(--accent); 
}

.rating.stars .review-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 0.25rem; 
}

/* ❤️ Like / ⭐ Favori : Boutons Flottants sur la carte */
.product-actions-float {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px; 
    z-index: 900; 
    pointer-events: none; 
}

/* Style de base des boutons Like/Favoris */
.like-btn,
.favorite-btn {
    background: var(--background-soft); 
    border-radius: 50%; 
    /* La taille 44px/44px est garantie par le bloc d'ajustement WCAG en haut du fichier */
    width: 44px; 
    height: 44px;
    font-size: 1.1rem; 
    color: var(--text-muted); 
    border: 1px solid var(--border-color); 
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); 
    pointer-events: auto; 
}

/* Style au survol des boutons Like/Favoris (quand non encore aimés/favoris) */
.like-btn:hover,
.favorite-btn:hover {
    background: var(--primary); 
    color: white; 
    transform: scale(1.1); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
}

/* Style quand le produit est "aimé" */
.like-btn.liked {
    background: transparent; 
    border-color: transparent; 
    color: var(--icon-liked-color); 
}
/* Style quand le produit est "en favori" */
.favorite-btn.favorited {
    background: transparent; 
    border-color: transparent; 
    color: var(--icon-favorited-color); 
}

/* Au survol d'un bouton déjà aimé/favori (garde la couleur active sans fond) */
.like-btn.liked:hover {
    background: rgba(var(--icon-liked-color-rgb), 0.1); 
    border-color: var(--icon-liked-color); 
    color: var(--icon-liked-color); 
    transform: scale(1.1);
    box-shadow: none;
}
.favorite-btn.favorited:hover {
    background: rgba(var(--icon-favorited-color-rgb), 0.1); 
    border-color: var(--icon-favorited-color); 
    color: var(--icon-favorited-color); 
    transform: scale(1.1);
    box-shadow: none;
}

.like-btn .count,
.favorite-btn .count {
    font-size: 0.7rem;
    font-weight: bold;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.like-btn:hover .count,
.favorite-btn:hover .count {
    transform: scale(1.1);
}

/* 🌙 Dark Mode pour les boutons flottants */
.dark-theme .like-btn,
.dark-theme .favorite-btn {
    background: var(--background); 
    border-color: var(--border-color);
    color: var(--text-main); 
}
/* Style pour les boutons aimés/favoris en mode sombre */
.dark-theme .like-btn.liked {
    background: transparent;
    border-color: transparent;
    color: var(--icon-liked-color); 
}
.dark-theme .favorite-btn.favorited {
    background: transparent;
    border-color: transparent;
    color: var(--icon-favorited-color); 
}
/* Survol des boutons aimés/favoris en mode sombre */
.dark-theme .like-btn.liked:hover {
    background: rgba(var(--icon-liked-color-rgb), 0.1);
    border-color: var(--icon-liked-color);
    color: var(--icon-liked-color);
}
.dark-theme .favorite-btn.favorited:hover {
    background: rgba(var(--icon-favorited-color-rgb), 0.1);
    border-color: var(--icon-favorited-color);
    color: var(--icon-favorited-color);
}


/* 🛍️ Barre d'Actions Produit (en bas de carte) */
.product-actions-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    z-index: 3; 
    pointer-events: auto; 
}

.icon-button { /* Boutons avec icône (panier, etc.) */
    background: transparent; 
    color: var(--text-muted); 
    border: none;
    font-size: 1.1rem;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto; 
}

.icon-button:hover {
    background: var(--icon-button-hover-bg); 
    color: var(--icon-button-hover-color); 
    transform: scale(1.02);
}

.icon-button:disabled {
    background: var(--border-color);
    color: white;
    cursor: not-allowed;
    pointer-events: none; 
}

/* ✅ Carte Boutique (Style de base pour .store-card) */
.store-card-wrapper {
    padding: 0.5rem;
}

.store-card {
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.store-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover-default);
    border-color: var(--border-color);
}

.store-card .store-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.store-card .store-logo img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    object-fit: cover;
}

.store-card .store-meta h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-main);
}

.store-card .store-meta p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.store-card .store-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.follow-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.follow-btn:hover {
    background: var(--secondary);
    transform: scale(1.02);
}

.follow-btn.following {
    background: var(--secondary);
}

/* --- BOUTON CONTACT (SOUS CARTE BOUTIQUE) --- */
.contact-toggle { /* Style du bouton "Contacter" (sous la carte boutique) */
    background: transparent; 
    color: var(--primary); 
    border: 1px solid var(--primary); 
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    /* AJOUT WCAG: Zone tactile minimale garantie par le min-height en haut du fichier */
}

.contact-toggle:hover {
    background: var(--primary); 
    color: white; 
    transform: scale(1.02);
}
.contact-toggle:disabled {
    background: var(--border-color);
    color: white;
    cursor: not-allowed;
}

.store-card .store-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    height: 100px;
    overflow: hidden;
}

.store-card .store-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}