/*
 * PCGForge Deal Hunter — Design des cards "signaux d'achat" (v1.10.1)
 * Feuille dédiée, scopée sous .pcgforge-signaux-theme — n'affecte jamais les styles des cards
 * "classic" (card-deal.php), qui gardent leur propre feuille (frontend.css). Variables CSS
 * locales : personnalisation future en un seul endroit, sans toucher au reste du plugin. Pas de
 * framework externe (pas de Bootstrap/Tailwind) — CSS fait main.
 *
 * v1.10.8 — bascule dark theme : le thème clair d'origine (v1.10.1, fond blanc "standards
 * e-commerce actuels") ne correspondait plus au dark theme du reste du site. Toutes les couleurs
 * ci-dessous sont pilotées par ces variables, jamais en dur dans les règles plus bas — un seul
 * endroit à modifier pour toute palette future.
 */

.pcgforge-signaux-theme {
    --pcgforge-sx-bg:          #1a1a24;
    --pcgforge-sx-bg-page:     #141420;
    --pcgforge-sx-border:      #2a2a3a;
    --pcgforge-sx-text:        #ffffff;
    --pcgforge-sx-text-muted:  #8888aa;
    --pcgforge-sx-text-dim:    #8888aa;
    --pcgforge-sx-accent:      #7c3aed;
    --pcgforge-sx-accent-text: #ffffff;
    --pcgforge-sx-shadow:      0 8px 20px rgba(0, 0, 0, 0.35);
    --pcgforge-sx-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25);
    --pcgforge-sx-radius:      12px;
    --pcgforge-sx-gap:         1.1rem;

    color: var(--pcgforge-sx-text);
}

/* v1.10.6 — FIX bug UI 1b : cette règle imposait auto-fill/minmax à TOUTE grille en mode signaux,
   ignorant purement et simplement l'attribut `columns` du shortcode (et la classe
   .pcgforge-grid--cols-N qu'il génère, cf. frontend.css) — un shortcode `columns="4"` affichait
   donc un nombre de colonnes dicté uniquement par la largeur du conteneur, jamais la valeur
   demandée. Les classes .pcgforge-grid--cols-N (frontend.css) sont déjà responsive (media queries
   dédiées à 1024/768/480px) — il suffit de ne plus les écraser ici. Seul le gap reste personnalisé
   pour le mode signaux. */
.pcgforge-signaux-theme .pcgforge-grid {
    gap: var(--pcgforge-sx-gap);
}

@media (max-width: 480px) {
    .pcgforge-signaux-theme .pcgforge-grid {
        gap: 0.75rem;
    }
}

/* Card */
.pcgforge-signaux-theme .pcgforge-deal-card--signaux {
    background: var(--pcgforge-sx-bg);
    border: 0.5px solid var(--pcgforge-sx-border);
    border-radius: var(--pcgforge-sx-radius);
    box-shadow: var(--pcgforge-sx-shadow-sm);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.pcgforge-signaux-theme .pcgforge-deal-card--signaux:hover {
    transform: translateY(-2px);
    box-shadow: var(--pcgforge-sx-shadow);
    border-color: var(--pcgforge-sx-accent);
    background: var(--pcgforge-sx-bg);
}

/* Image — ratio fixe, jamais de saut de hauteur entre cards */
.pcgforge-signaux-theme .pcgforge-deal-image {
    aspect-ratio: 4 / 3;
    height: auto;
    background: var(--pcgforge-sx-bg-page);
}

.pcgforge-signaux-theme .pcgforge-deal-img {
    padding: 14px;
}

/* Corps */
.pcgforge-signaux-theme .pcgforge-deal-merchant {
    color: var(--pcgforge-sx-text-dim);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* v1.10.6 — remplace .pcgforge-deal-category (catégorie, retirée des cards signaux) */
.pcgforge-signaux-theme .pcgforge-deal-updated {
    color: var(--pcgforge-sx-text-dim);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.pcgforge-signaux-theme .pcgforge-deal-title {
    color: var(--pcgforge-sx-text);
}

/* Prix — élément le plus visible après l'image */
.pcgforge-signaux-theme .pcgforge-deal-prices {
    align-items: center;
    gap: 0.35rem;
}

/* v1.10.8 — le prix conserve la couleur verte utilisée partout ailleurs sur le site
   (--pcgforge-green, frontend.css) plutôt que la couleur de texte du thème signaux, qui n'était de
   toute façon pas appliquée en pratique : cette règle est plus spécifique que la règle de base
   .pcgforge-deal-price-current (frontend.css) et gagnait donc déjà avant ce correctif. */
.pcgforge-signaux-theme .pcgforge-deal-price-current {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pcgforge-green, #4ade80);
}

.pcgforge-signaux-theme .pcgforge-price-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-style: normal;
    line-height: 1;
    color: var(--pcgforge-sx-text-dim);
    background: var(--pcgforge-sx-bg-page);
    cursor: help;
    transition: color 150ms ease, background 150ms ease;
}

.pcgforge-signaux-theme .pcgforge-price-info:hover,
.pcgforge-signaux-theme .pcgforge-price-info:focus-visible {
    color: var(--pcgforge-sx-accent);
    background: var(--pcgforge-sx-bg-page);
    outline: none;
}

/* Ligne "Promo {marchand}" — accompagne le prix, ne le concurrence pas */
.pcgforge-signaux-theme .pcgforge-deal-merchant-promo {
    color: var(--pcgforge-sx-text-muted);
    font-size: 0.76rem;
}

.pcgforge-signaux-theme .pcgforge-deal-merchant-promo del {
    color: var(--pcgforge-sx-text-dim);
    opacity: 1;
}

/* Puces de signaux — fond teinté + texte clair de la même famille, calibrés pour rester lisibles
   sur le fond sombre de la card (v1.10.8) ; hiérarchie : Prix record la plus contrastée, Baisse
   confirmée chaude, Plus bas 30j/Moins cher ici plus douces. Redéfinit les couleurs globales
   (frontend.css) dans ce scope, sans toucher à leur usage sur la page produit. */
.pcgforge-signaux-theme .pcgforge-signal-chip {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
}

.pcgforge-signaux-theme .pcgforge-signal-record {
    background: rgba(220, 38, 38, 0.22);
    color: #fca5a5;
}

.pcgforge-signaux-theme .pcgforge-signal-promo {
    background: rgba(217, 119, 6, 0.22);
    color: #fcd34d;
}

.pcgforge-signaux-theme .pcgforge-signal-floor,
.pcgforge-signaux-theme .pcgforge-signal-cheaper {
    background: rgba(255, 255, 255, 0.08);
    color: var(--pcgforge-sx-text-muted);
}

/* CTA — pleine largeur, couleur d'accent du site (reprend --pcgforge-accent, personnalisable) */
.pcgforge-signaux-theme .pcgforge-deal-cta-btn {
    background: var(--pcgforge-sx-accent);
    color: var(--pcgforge-sx-accent-text);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcgforge-signaux-theme .pcgforge-deal-cta-btn:hover {
    background: var(--pcgforge-sx-accent);
    color: var(--pcgforge-sx-accent-text);
    opacity: 0.88;
}

/* v1.10.6 — bouton "Comparer" (compare_button="true") */
.pcgforge-signaux-theme .pcgforge-deal-compare-btn {
    background: transparent;
    color: var(--pcgforge-sx-text-muted);
    border-color: var(--pcgforge-sx-border);
}

.pcgforge-signaux-theme .pcgforge-deal-compare-btn:hover {
    background: var(--pcgforge-sx-bg-page);
    color: var(--pcgforge-sx-text);
    border-color: var(--pcgforge-sx-accent);
}

/* Lien méthodologie / "voir tout" */
.pcgforge-signaux-theme .pcgforge-methodology-link a,
.pcgforge-signaux-theme .pcgforge-signaux-categorie-more a {
    color: var(--pcgforge-sx-text-muted);
}

/* Tap targets ≥40px sur mobile (puces-filtres, chips, CTA) */
@media (max-width: 480px) {
    .pcgforge-signaux-theme .pcgforge-deal-cta-btn {
        min-height: 44px;
    }
}