/* * Styles de la carte prix (genere en dur dans les fiches par * scripts/render-fiches.js). Charge dans le -> rendu instantane. */ .produit__price.prix-card { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; padding: 1rem 1.15rem; border-radius: 16px; max-width: 340px; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 70%); border: 1px solid #d1fae5; box-shadow: 0 6px 18px rgba(16, 124, 51, 0.1); } .produit__price.prix-card--indispo { background: linear-gradient(135deg, #fff7f7 0%, #ffffff 70%); border-color: #fecaca; box-shadow: 0 6px 18px rgba(176, 0, 32, 0.08); } .prix-card .prix-keepa { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: #0f1111; } .prix-card .prix-keepa--baisse { color: #0a7d33; } .prix-card .prix-keepa .prix-suffix { font-size: 0.8rem; font-weight: 600; color: #6b7280; margin-left: 0.45rem; letter-spacing: 0; } .prix-card .prix-baisse { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #0a7d33; background: #dcfce7; border: 1px solid #bbf7d0; } .prix-card .prix-baisse .prix-baisse-ref { font-weight: 500; color: #15803d; opacity: 0.8; } .prix-card .prix-indispo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 1.05rem; font-weight: 700; color: #b00020; } .prix-card .prix-indispo .prix-indispo-sub { display: block; width: 100%; font-size: 0.78rem; font-weight: 500; color: #9ca3af; margin-top: 0.15rem; } .produit__price.prix-card .btn--price { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; box-sizing: border-box; padding: 0.7rem 1rem; margin: 0; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; color: #0f1111; background: linear-gradient(180deg, #ffd814, #f7ca00); border: 1px solid #e0ab00; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transition: filter 0.15s ease, transform 0.05s ease; } .produit__price.prix-card .btn--price:hover { filter: brightness(1.04); } .produit__price.prix-card .btn--price:active { transform: translateY(1px); } .produit__price.prix-card--indispo .btn--price { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; box-shadow: none; } .prix-card .prix-maj { font-size: 0.7rem; color: #9ca3af; } @media (max-width: 640px) { .produit__price.prix-card { max-width: none; } } /* ------------------------------------------------------------------ */ /* Listing (index.html) : le prix s'affiche directement dans le bouton */ /* (logo Amazon + montant sur fond blanc), la date de maj juste en */ /* dessous. Cible .product__price, distinct de .produit__price (fiches).*/ /* ------------------------------------------------------------------ */ .product__price.prix-card { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; } .product__price.prix-card .btn--price { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; box-sizing: border-box; padding: 0.7rem 1rem; border-radius: 10px; font-weight: 800; font-size: 1.2rem; text-decoration: none; color: #0f1111; background: linear-gradient(180deg, #ffd814, #f7ca00); border: 1px solid #e0ab00; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transition: filter 0.15s ease, transform 0.05s ease; } .product__price.prix-card .btn--price:hover { filter: brightness(1.04); } .product__price.prix-card .btn--price:active { transform: translateY(1px); } .product__price.prix-card .btn--price .amazon-logo { flex: none; } .product__price.prix-card--indispo .btn--price { color: #6b7280; background: #f9fafb; font-size: 1rem; } .product__price.prix-card .prix-maj { font-size: 0.7rem; color: #9ca3af; text-align: center; }