/* ============================================================
   PETSCOMPARE - CARTES PRODUIT (refonte 24/09/2026)
   ============================================================
   Refonte visuelle validee par Kevin sur mockup Artifact :
   - Photo 180x180 (2x plus grande qu'avant, cliquable, hover zoom)
   - Format en chip Mono uppercase (marine + valeur en pill fonce)
   - Titre Fraunces plus gros, cliquable, italique sur mot-cle
   - Badge economie visible (sauge, chiffre en Fraunces 22px)
   - Deux boutiques cote a cote, cliquables :
       * Bitiba (ou la moins chere) : card marine profond avec
         etoile "Moins cher", prix Fraunces 30px
       * Zooplus (ou autre) : card blanche "Voir aussi", 24px
   - CTA principal amber pleine largeur en bas
   - Actions secondaires (fav / alerte / avis) en icones SVG
     rondes sous la photo

   Nomme .pcard-* pour eviter la collision avec l'ancien
   .comp-* qui reste dans style.css.
   ============================================================ */

/* Container principal */
.pcard {
    background: #fff;
    border: 1px solid rgba(30, 58, 95, .10);
    border-radius: var(--r-lg, 20px);
    padding: 22px;
    margin-bottom: 20px;
    display: grid;
    /* 180 -> 220 le 24/09/2026 (Jefferson trouvait le packshot petit). La
       colonne de droite y perd 40px, sans consequence : elle n'a pas de
       minimum intrinseque serre, .pcard-prices etant en minmax(0, ...). */
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pcard:hover {
    box-shadow: 0 12px 32px rgba(10, 25, 41, .08);
    transform: translateY(-1px);
}

/* Colonne media : photo + actions secondaires */
.pcard-media {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.pcard-image {
    width: 220px;
    height: 220px;
    border-radius: var(--r-md, 12px);
    background: var(--cream-2, #ebe6dd);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: transform .3s ease;
}
.pcard-image:hover { transform: scale(1.02); }
/* Cadre sans photo : taille fixe et modeste, il n'y a rien a agrandir. */
.pcard-image-vide {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    max-width: 110px;
    max-height: 110px;
}
.pcard-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;   /* explicite : le cadre n'est pas
                                         toujours carre selon l'ecran */
    display: block;
    margin: auto;
    padding: 6px;
    box-sizing: border-box;
}

/* Badge marque sur la photo */
.pcard-brand-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(10, 25, 41, .82);
    color: var(--cream, #faf7f2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--r-pill, 999px);
    backdrop-filter: blur(6px);
    z-index: 1;
    font-weight: 600;
    text-decoration: none;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions secondaires : icones rondes discretes.
   Note du 24/09 : les regles .alert-btn et .review-btn du CSS
   historique (style.css/product.css) imposent width: 140px+ padding
   pour afficher "Alerte prix" et "Donner mon avis" en toutes lettres.
   Ces classes sont preservees pour les handlers JS. On les override
   avec !important quand elles sont dans une carte .pcard, sinon les
   icones font 140x36 et debordent a gauche de la colonne 180px. */
.pcard-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.pcard .pcard-icon-btn,
.pcard-actions .fav-btn,
.pcard-actions .alert-btn,
.pcard-actions .review-btn {
    background: #fff !important;
    border: 1px solid rgba(30, 58, 95, .12) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted, #6b7a8a) !important;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    font-size: 14px;
    line-height: 1;
    min-width: 0 !important;
    flex: 0 0 auto;
    box-shadow: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}
.pcard-icon-btn:hover {
    color: var(--amber, #d96b27);
    border-color: var(--amber, #d96b27);
    background: rgba(217, 107, 39, .06);
}
.pcard-icon-btn.is-active {
    color: var(--amber, #d96b27);
    border-color: var(--amber, #d96b27);
    background: rgba(217, 107, 39, .10);
}
.pcard-icon-btn svg { width: 16px; height: 16px; }

/* Colonne contenu */
.pcard-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Header : format + savings badge cote a cote */
.pcard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pcard-format {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    background: rgba(30, 58, 95, .06);
    border: 1px solid rgba(30, 58, 95, .12);
    border-radius: var(--r-pill, 999px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-primary, #1e3a5f);
    font-weight: 500;
    flex-shrink: 0;
}
.pcard-format-value {
    padding: 2px 7px;
    background: var(--brand-primary, #1e3a5f);
    color: var(--cream, #faf7f2);
    border-radius: var(--r-pill, 999px);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Badge economie hyper visible */
.pcard-savings {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 8px 14px;
    background: var(--brand-accent-light, #a3d4c5);
    color: var(--brand-primary-dark, #0a1929);
    border-radius: var(--r-md, 12px);
    text-align: right;
    flex-shrink: 0;
    max-width: 100%;
}
.pcard-savings-pct {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.pcard-savings-eur {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.78;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Titre : Fraunces gros, cliquable */
.pcard-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--ink, #0a1929);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: color .15s ease;
}
.pcard-title:hover {
    color: var(--brand-primary, #1e3a5f);
    text-decoration: none;
}

/* Badge "Plus bas 90j" — subtile mais visible */
.pcard-lowest-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 4px 10px;
    background: rgba(217, 107, 39, .10);
    border: 1px solid rgba(217, 107, 39, .25);
    color: var(--amber-dark, #b6541d);
    border-radius: var(--r-pill, 999px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: -4px;
}

/* Comparaison des 2 prix cote a cote */
.pcard-prices {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    align-items: stretch;
}
.pcard-price-card {
    padding: 12px 14px;
    border-radius: var(--r-md, 12px);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    position: relative;
}
.pcard-price-card.pcard-price-best {
    background: var(--brand-primary-dark, #0a1929);
    color: var(--cream, #faf7f2);
    border: 1px solid var(--brand-primary-dark, #0a1929);
}
.pcard-price-card.pcard-price-alt {
    background: #fff;
    border: 1px solid rgba(30, 58, 95, .15);
}
.pcard-price-card:hover {
    transform: translateY(-1px);
}
.pcard-price-card.pcard-price-best:hover {
    box-shadow: 0 8px 20px rgba(10, 25, 41, .22);
}
.pcard-price-card.pcard-price-alt:hover {
    border-color: var(--brand-primary, #1e3a5f);
}

.pcard-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--amber, #d96b27);
    margin-bottom: 2px;
}
.pcard-price-alt .pcard-price-tag {
    color: var(--muted, #6b7a8a);
}
.pcard-price-shop {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.pcard-price-amount {
    font-family: 'Fraunces', serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-top: 2px;
}
.pcard-price-alt .pcard-price-amount {
    font-size: 24px;
    color: var(--ink, #0a1929);
}
.pcard-price-kg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(250, 247, 242, .60);
    letter-spacing: 0.02em;
    margin-top: 2px;
    font-weight: 400;
}
.pcard-price-alt .pcard-price-kg {
    color: var(--muted, #6b7a8a);
}

/* CTA amber pleine largeur */
.pcard-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--amber, #d96b27);
    color: var(--cream, #faf7f2);
    border: none;
    border-radius: var(--r-md, 12px);
    padding: 13px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 6px 16px rgba(217, 107, 39, .22);
    letter-spacing: -.005em;
    text-align: center;
}
.pcard-cta:hover {
    background: var(--amber-dark, #b6541d);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(217, 107, 39, .30);
    color: var(--cream, #faf7f2);
    text-decoration: none;
}
.pcard-cta-arrow {
    font-size: 18px;
    transition: transform .2s ease;
    line-height: 1;
}
.pcard-cta:hover .pcard-cta-arrow { transform: translateX(4px); }

/* Lien fiche detaillee : SOUS LE TITRE depuis le 24/09/2026 (Jefferson).
   Il vivait en bas de carte, centre, en gris 10px sous le CTA amber : a cet
   endroit et dans cette couleur, il ne se lisait pas comme un lien. Or c'est
   la seule porte vers les boutiques 3 et suivantes, la carte n'en montrant
   que deux.
   Il est donc colle au titre (marge negative pour manger le gap de 14px de
   .pcard-content), en amber souligne : le titre est cliquable mais rien ne
   le disait, ce lien le dit a sa place. */
.pcard-detail-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber, #d96b27);
    text-decoration: none;
    align-self: flex-start;
    padding: 0 0 2px;
    margin-top: -9px;
    border-bottom: 1px solid rgba(217, 107, 39, .40);
    transition: color .15s ease, border-color .15s ease;
}
.pcard-detail-link:hover {
    color: var(--amber-dark, #b6541d);
    border-bottom-color: var(--amber-dark, #b6541d);
    text-decoration: none;
}

/* Mobile : compactage pour maximiser le nombre de cartes visibles.
   Retour Kevin du 24/09 : garder les deux boutiques cote a cote
   plutot que de les empiler, la moins chere en gros marine, la 2e
   en compact blanc. Ratio 1.6:1 : la moins chere reste dominante,
   l'alternative reste lisible et cliquable sans prendre trop de
   scroll. Le CTA amber garde sa presence pleine largeur en bas. */
@media (max-width: 720px) {
    .pcard {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }
    .pcard-media {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    /* AGRANDIE le 24/09/2026 (Jefferson). Mesure avant : la photo faisait
       120px dans une rangee de 313, les trois icones 32, et il restait
       149px de vide a droite. La photo occupe donc maintenant la place
       libre, bornee a 210px pour ne pas transformer chaque carte en
       plein ecran (hauteur de carte : 588px avant, ~660 apres).
       Carre impose par aspect-ratio plutot que par une hauteur fixe : le
       packshot est en object-fit: contain, un cadre large et plat ne
       l'agrandirait pas, il ajouterait de la creme a gauche et a droite.

       Plafond releve de 210 a 340px le meme jour : Jefferson voulait la
       photo collee aux icones, sans blanc entre les deux. A 320 elle
       n'est plus bornee sur un telephone (375px d'ecran laissent 269px
       de place, 430px en laissent 324 : a 320 il restait 4px de blanc),
       la borne ne sert donc plus qu'a
       une chose : empecher une tablette de 700px d'afficher un packshot
       de 600px de cote, la mise en page mobile allant jusqu'a 720px. */
    .pcard-image {
        width: auto;
        height: auto;
        flex: 1 1 auto;
        aspect-ratio: 1 / 1;
        max-width: 340px;
        max-height: 340px;
        min-width: 0;
    }
    .pcard-actions {
        flex-direction: column;
        gap: 6px;
        margin-left: auto;   /* icones calees a droite, photo a gauche */
        align-self: flex-start;  /* et en haut : centrees sur une photo de
                                    210px elles flottaient au milieu du vide */
        flex-shrink: 0;
    }
    .pcard .pcard-icon-btn,
    .pcard-actions .fav-btn,
    .pcard-actions .alert-btn,
    .pcard-actions .review-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .pcard-icon-btn svg { width: 14px; height: 14px; }
    .pcard-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .pcard-savings {
        align-items: center;
        text-align: left;
        flex-direction: row;
        gap: 10px;
        padding: 6px 12px;
    }
    .pcard-savings-pct { font-size: 18px; }
    .pcard-savings-eur { font-size: 9px; }
    .pcard-title {
        font-size: 17px;
        line-height: 1.28;
    }

    /* Deux cards cote a cote, la moins chere prend 1.6x l'espace */
    .pcard-prices {
        grid-template-columns: 1.6fr 1fr;
        gap: 8px;
    }
    .pcard-price-card {
        padding: 10px 11px;
    }
    .pcard-price-tag {
        font-size: 8px;
        letter-spacing: 0.12em;
    }
    .pcard-price-shop { font-size: 13px; }
    .pcard-price-amount {
        font-size: 22px;
        letter-spacing: -0.02em;
    }
    .pcard-price-alt .pcard-price-amount {
        font-size: 17px;
    }
    .pcard-price-kg { font-size: 9px; }

    .pcard-cta {
        padding: 11px 16px;
        font-size: 14px;
    }
    .pcard-detail-link {
        font-size: 10px;
        margin-top: -8px;
    }
}

/* Tres petit ecran (< 380px, iPhone SE) : basculer les deux prix
   en colonne unique, sinon 1.6fr / 1fr n'a plus assez de place pour
   afficher deux prix a deux chiffres sans coupure. */
@media (max-width: 380px) {
    .pcard-prices {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .pcard-price-alt .pcard-price-amount { font-size: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pcard,
    .pcard-image,
    .pcard-price-card,
    .pcard-cta,
    .pcard-cta:hover .pcard-cta-arrow,
    .pcard-icon-btn { transition: none; }
    .pcard:hover,
    .pcard-price-card:hover,
    .pcard-cta:hover { transform: none; }
    .pcard-image:hover { transform: none; }
}