/*
 * PCGForge Deal Hunter — Comparateur [pcgforge_comparateur] (v2.2.0, refonte recherche v2.2.2,
 * mode recherche libre retiré en v2.2.6)
 *
 * Feuille DÉDIÉE (v2.2.2) — palette LOCALE propre à cette page, cf. variables ci-dessous) — chargée
 * uniquement quand le shortcode [pcgforge_comparateur] est présent sur la page (cf. Shortcodes::
 * enqueue_assets()), jamais ailleurs. Les classes partagées avec les cards/la page produit
 * (.pcgforge-signal-chip, .pcgforge-tooltip-bubble, .pcgforge-single-history*,
 * .pcgforge-history-range-picker/.pcgforge-datepicker-*) restent dans frontend.css — jamais
 * dupliquées ici. ⚠️ v2.2.9 — correctif d'un commentaire erroné : `.pcgforge-amazon-*`/
 * `.pcgforge-competitor-*` ne sont PAS dans frontend.css (vérifié — zéro règle) mais uniquement
 * dans le `<style>` inline PAGE-SCOPÉ de single-pcgforge_deal.php, jamais chargé sur le
 * Comparateur : le bloc Amazon de la zone gauche (v2.2.0-v2.2.8) s'affichait donc en réalité SANS
 * AUCUN STYLE sur cette page depuis sa création — bug latent, jamais remarqué faute de test visuel
 * dédié, corrigé en même temps que son déplacement dans $offer_rows (cf. plus bas, règles
 * `.pcgforge-amazon-badge`/`-smile`/`-diff-note` dupliquées ICI, en miroir de single-pcgforge_deal.php).
 *
 * v2.2.6 — l'interface de recherche à deux étapes (catégories + terme + filtre prix, v2.2.2) est
 * entièrement retirée avec le mode "recherche libre" (cf. section COMPARATEUR de CLAUDE.md) : les
 * règles `.pcgforge-comparateur-search-form`/`-categories`/`-category-*`/`-price-filters`/`-price-
 * input` ont disparu avec le HTML qu'elles stylaient — pas seulement masquées, réellement retirées
 * (rien à maintenir pour un état qui n'existe plus).
 *
 * Palette (v2.2.2, cahier des charges) : fond de page #0f0f13, cards #1a1a24, accent violet
 * #7c3aed, texte principal #ffffff — variables locales scopées sous .pcgforge-comparateur, sans
 * toucher aux variables --pcgforge-* globales (qui restent utilisées par les cards/la page produit).
 */

/* v2.3.7 — HARMONISATION : alias vers frontend/assets/variables.css (source de vérité unique), cf.
   commentaire équivalent dans frontend.css. Seul --pcg-cmp-border change de valeur visible
   (#3a3a4a → #2a2a3a, désormais identique à la bordure du reste du plugin) ; --pcg-cmp-bg/-card
   étaient déjà les valeurs de référence reprises dans variables.css (ce fichier servait de
   référence "page/surface" au même titre que signaux.css servait de référence "signaux"). */
.pcgforge-comparateur {
    --pcg-cmp-bg:          var(--pcg-color-page);
    --pcg-cmp-card:        var(--pcg-color-surface);
    --pcg-cmp-border:      var(--pcg-color-border);
    --pcg-cmp-accent:      var(--pcg-color-primary);
    --pcg-cmp-accent-hover:var(--pcg-color-primary-hover);
    --pcg-cmp-text:        var(--pcg-color-text);
    --pcg-cmp-text-muted:  var(--pcg-color-text-muted);
    --pcg-cmp-text-dim:    var(--pcg-color-text-dim);
    --pcg-cmp-green:       var(--pcg-color-price);
    --pcg-cmp-radius:      10px;
    --pcg-cmp-radius-lg:   14px;

    width: 100%;
    box-sizing: border-box;
    color: var(--pcg-cmp-text);
    background: var(--pcg-cmp-bg);
    padding: 2rem 1.25rem;
    border-radius: var(--pcg-cmp-radius-lg);
}

.pcgforge-comparateur *,
.pcgforge-comparateur *::before,
.pcgforge-comparateur *::after {
    box-sizing: border-box;
}

/* =========================================================
   État vide (v2.2.6) — aucun canonical_id valide en URL
   ========================================================= */
.pcgforge-comparateur-empty-state {
    max-width: 480px;
    margin: 2.5rem auto;
    text-align: center;
}

.pcgforge-comparateur-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.85rem 1.75rem;
    background: var(--pcg-cmp-accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--pcg-cmp-radius);
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.2s;
}

.pcgforge-comparateur-cta:hover {
    background: var(--pcg-cmp-accent-hover);
    color: #fff;
}

/* =========================================================
   Résultats
   ========================================================= */
.pcgforge-comparateur-empty {
    text-align: center;
    color: var(--pcg-cmp-text-muted);
    padding: 2.5rem 1rem;
}

.pcgforge-comparateur-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    width: 100%;
}

@media (min-width: 900px) {
    /* 40% / 60% (cf. cahier des charges) — pistes en fr, pas en %, pour que le gap se soustraie
       correctement de l'espace réparti (même raison que .pcgforge-single-grid, cf. v1.4.4). */
    .pcgforge-comparateur-layout {
        grid-template-columns: 2fr 3fr;
    }
}

.pcgforge-comparateur-left,
.pcgforge-comparateur-right {
    background: var(--pcg-cmp-card);
    border: 1px solid var(--pcg-cmp-border);
    border-radius: var(--pcg-cmp-radius-lg);
    padding: 1.5rem;
    overflow: hidden;
}

.pcgforge-comparateur-image {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pcg-cmp-bg);
    border-radius: var(--pcg-cmp-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.pcgforge-comparateur-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 12px;
}

.pcgforge-comparateur-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: var(--pcg-cmp-text);
}

.pcgforge-comparateur-price {
    margin-top: 0.5rem;
}

.pcgforge-comparateur-price-current {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pcg-cmp-green);
}

.pcgforge-comparateur-price-merchant {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    color: var(--pcg-cmp-text-muted);
    font-size: 0.9rem;
}

/* v2.2.6, point 5 — bouton lien affilié direct sous le prix du représentant. Réutilise le style de
   .pcgforge-comparateur-offer-btn (défini plus bas) mais en pleine largeur/plus grand, puisqu'il
   est ici seul plutôt que dans une ligne d'offre. */
.pcgforge-comparateur-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.pcgforge-comparateur-history {
    margin-top: 1.5rem;
    padding: 1rem;
}

.pcgforge-comparateur-observations {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--pcg-cmp-text-muted);
}

.pcgforge-comparateur-offers-title {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--pcg-cmp-text);
}

.pcgforge-comparateur-offers {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* v2.3.0 — carte : label → image+prix → date → boutons. v2.3.2 — passée en FLEX-ROW (au lieu de
   flex-column) : .pcgforge-comparateur-offer-main (label/image/prix/date) à gauche,
   .pcgforge-comparateur-offer-actions (2 boutons EMPILÉS, alignés à droite) à droite — auparavant
   les 2 boutons étaient côte à côte sous le contenu (v2.3.1). Même gabarit que le composant
   .pcgforge-offer-block de la page produit pour .pcgforge-comparateur-offer-main, classes propres
   à cette feuille (jamais partagées entre les deux pages, cf. commentaire d'en-tête de ce fichier). */
.pcgforge-comparateur-offer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--pcg-cmp-bg);
    border: 1px solid var(--pcg-cmp-border);
    border-radius: var(--pcg-cmp-radius);
}

.pcgforge-comparateur-offer-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 260px;
}

/* v2.3.1 — align-self:flex-start (+ width:fit-content en filet de sécurité) : sans ça, ce <span>
   est un enfant DIRECT d'un conteneur flex-column (.pcgforge-comparateur-offer-main depuis v2.3.2)
   et hérite du comportement par défaut align-items:stretch — il s'étirait donc sur toute la largeur
   disponible, y compris son fond plein (badge "Moins cher ici"/Amazon) qui devait pourtant
   s'ajuster exactement au texte. */
.pcgforge-comparateur-offer-label {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pcg-cmp-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcgforge-comparateur-offer-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* v2.3.1 — !important en filet de sécurité : un thème (Salient notamment) définit souvent des
   règles globales `img { max-width: 100%; height: auto; }` avec une spécificité suffisante pour
   faire déborder cette image au-delà des 60px prévus. Même précédent que les champs prix min/max
   du Comparateur (v2.2.3). */
.pcgforge-comparateur-offer-img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    flex-shrink: 0;
    object-fit: contain !important;
    background: var(--pcg-cmp-card);
    border-radius: 6px;
}

.pcgforge-comparateur-offer-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* v2.3.29 — offres de la zone droite (marchands trouvés) : logo plafonné à 80×24px, hauteur/
   largeur auto dans cette limite (ratio naturel préservé). Distinct du logo du représentant en
   zone gauche (.pcgforge-comparateur-price-merchant), qui reste sur la taille par défaut (80×24px,
   cf. frontend.css) et peut donc rester visuellement plus grand. Sélecteur EXACT vérifié contre le
   HTML généré par comparateur-results.php : Wording::merchant_logo_html() rend `<img class=
   "pcgforge-merchant-logo">` directement dans `.pcgforge-comparateur-offer-info` — inchangé par ce
   correctif, aucun autre sélecteur ne matche cette image. `!important` ajouté sur toutes les
   propriétés de taille — la première version de cette règle (v2.3.29 initiale, ci-dessus dans
   l'historique) n'en avait pas, contrairement à `.pcgforge-comparateur-offer-img` juste au-dessus
   (même conflit déjà documenté depuis la v2.3.1/v2.2.3 : le thème, Salient notamment, applique une
   règle globale sur les <img> de contenu avec une spécificité/priorité suffisante pour l'emporter
   sur une règle non !important, laissant l'image s'afficher à sa taille source réelle — confirmé
   ici en DevTools, `max-width` calculé à 800% au lieu des 120px attendus). */
.pcgforge-comparateur-offer-info .pcgforge-merchant-logo {
    width: auto !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

.pcgforge-comparateur-offer-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pcg-cmp-green);
    white-space: nowrap;
}

.pcgforge-comparateur-offer-checked {
    margin: 0;
    font-size: 0.7rem;
    color: var(--pcg-cmp-text-muted);
    font-style: italic;
}

/* v2.3.2 — les deux boutons (primaire + secondaire, si présent) sont désormais EMPILÉS
   verticalement, alignés à droite de la carte (auparavant côte à côte sous le contenu, v2.3.1).
   Largeur fixe pour une colonne visuellement homogène d'une ligne à l'autre de la liste ; passe en
   pleine largeur ≤480px, sous le contenu (cf. media query plus bas), quand la carte elle-même
   repasse en colonne. */
.pcgforge-comparateur-offer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
    width: 190px;
}

.pcgforge-comparateur-offer-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--pcg-cmp-radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .pcgforge-comparateur-offer {
        flex-direction: column;
        align-items: stretch;
    }
    .pcgforge-comparateur-offer-actions {
        width: 100%;
    }
}

/* Primaire — TOUJOURS le lien affilié direct (v2.3.0, point 2 de la demande). */
.pcgforge-comparateur-offer-btn--primary {
    background: var(--pcg-cmp-accent);
    color: #fff;
}
.pcgforge-comparateur-offer-btn--primary:hover {
    background: var(--pcg-cmp-accent-hover);
    color: #fff;
}

/* Secondaire — "Voir les détails du prix →", vers la page produit interne (wp_post_id) — absent du
   bloc si ce listing n'a pas encore de fiche CPT synchronisée, jamais pour Amazon. v2.3.2 — contour
   ET texte BLANCS (au lieu de l'outline violet v2.3.1) : même traitement que le bouton "Comparer"
   déjà établi ailleurs dans le plugin (contour neutre clair, texte clair) — fonctionne lisiblement
   sur N'IMPORTE QUEL fond de carte. v2.3.7 — ce traitement est désormais LA référence "outline
   blanc" (var(--pcg-color-outline)) reprise par tous les boutons secondaires du plugin (cards,
   page produit), cf. section HARMONISATION CSS de CLAUDE.md. */
.pcgforge-comparateur-offer-btn--secondary {
    background: transparent;
    border: 1px solid var(--pcg-color-outline);
    color: #fff;
}
.pcgforge-comparateur-offer-btn--secondary:hover {
    background: var(--pcg-color-outline-hover);
    border-color: #fff;
    color: #fff;
}

.pcgforge-comparateur-divider {
    border: none;
    border-top: 1px dashed var(--pcg-cmp-border);
    margin: 0.5rem 0;
}
/* ⚠️ v2.2.9 — plus jamais générée par comparateur-results.php (la liste $offer_rows est
   désormais triée uniquement par prix, sans séparateur par signal) ; règle laissée en place au
   cas où un thème surchargerait le template pour la réintroduire, sans effet visuel sinon. */

/* v2.2.9, ajusté v2.3.0 — offre marchand moins chère que le représentant affiché en zone gauche
   (possible depuis que `?listing_id=` peut désigner un listing qui n'est pas le moins cher du
   groupe, cf. Database::build_group_payload_from_rows()). Le libellé ("Moins cher ici", cf.
   Wording::offer_position_label()) devient un badge plutôt qu'un texte muet, cohérent avec le
   composant de la page produit. v2.3.6 — le fond/bordure teintés de la CARTE (15% d'opacité,
   #d97706) sont retirés sur demande explicite : seule la pastille de label reste ambre, la carte
   elle-même garde le même fond neutre que toutes les autres (`.pcgforge-comparateur-offer` de
   base) — même changement que .pcgforge-offer-block--cheaper de la page produit. */
.pcgforge-comparateur-offer--cheaper .pcgforge-comparateur-offer-label {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--pcg-color-signal-cheaper);
    color: #fff;
    font-weight: 700;
}

/* v2.3.0 — Amazon TOUJOURS EN DERNIER (cf. Shortcode_Comparateur::render_results()), avec sa
   propre couleur violette (jamais confondue avec une offre marchand moins chère, ambre) quand
   Amazon bat elle-même le représentant. .pcgforge-amazon-smile/-diff-note sont dupliquées dans ce
   fichier en miroir de single-pcgforge_deal.php (son <style> inline, page-scopé, n'est jamais
   chargé sur cette page — cf. commentaire d'en-tête de ce fichier) plutôt que réutilisées à
   distance. v2.3.6 — même retrait du fond/bordure teintés de la carte que ci-dessus, seule la
   pastille de label reste violette. */
.pcgforge-comparateur-offer--amazon-cheaper .pcgforge-comparateur-offer-label {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--pcg-color-amazon);
    color: #fff;
    font-weight: 700;
}

/* v2.3.7 — couleurs de marque Amazon (navy/orange officiels), extraites en variables dédiées
   (--pcg-color-amazon-brand-*, cf. variables.css) — DISTINCTES de --pcg-color-amazon (le violet
   "moins cher chez Amazon" ci-dessus) : ce sont les couleurs du wordmark/bouton, jamais mélangées. */
.pcgforge-comparateur-offer-amazon-badge {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pcg-color-amazon-brand-bg);
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    color: #fff;
    letter-spacing: 0.01em;
}

.pcgforge-amazon-smile {
    color: var(--pcg-color-amazon-brand-accent);
    font-weight: 700;
    margin-left: 1px;
}

.pcgforge-amazon-diff-note {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--pcg-cmp-text-muted);
}

/* Amazon garde son bouton orange distinctif (marque), même gabarit que le bouton primaire. */
.pcgforge-comparateur-offer-btn--amazon {
    background: var(--pcg-color-amazon-brand-accent);
    color: var(--pcg-color-amazon-brand-bg);
}
.pcgforge-comparateur-offer-btn--amazon:hover {
    background: var(--pcg-color-amazon-brand-hover);
    color: var(--pcg-color-amazon-brand-bg);
}

/* =========================================================
   Debug admin-only (v2.2.6) — entonnoir total/fraîcheur/dédup + raison d'exclusion par marchand,
   même convention visuelle que .pcgforge-amazon-debug (frontend.css) : fond gris, texte technique
   monospace, petite taille.
   ========================================================= */
.pcgforge-comparateur-debug {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--pcg-color-surface-2);
    color: var(--pcg-cmp-text-muted);
    font-size: 0.72rem;
    border-radius: 6px;
    font-family: Consolas, Monaco, monospace;
    overflow-x: auto;
}

.pcgforge-comparateur-debug-summary {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.pcgforge-comparateur-debug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.pcgforge-comparateur-debug-table th,
.pcgforge-comparateur-debug-table td {
    text-align: left;
    padding: 3px 8px 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}