/* =====================================================================
   LISTES DE PRODUITS — feuille partagée
   (carte, grille, pagination, habillage « coup de cœur »)
   ---------------------------------------------------------------------
   Styles de la brique templates/store/includes/product_card.html et de
   la grille qui l'entoure.

   Ces règles vivaient dans le <style> en ligne de store.html. Elles en
   sortent parce que la carte ne sert plus seulement à la boutique : la
   section « Produits similaires » de la fiche produit affiche les mêmes
   cartes, et sans cette feuille elles s'y retrouvaient sans grille, sans
   bouton d'ajout rapide stylé et sans affichage des fourchettes de prix.

   Chargée pour tout le site depuis base.html : elle ne coûte que
   quelques centaines d'octets et évite de redéclarer les mêmes règles
   page par page.
   ===================================================================== */

/* Hover vert sur le nom du produit */
.card-product-grid .title {
    color: #212529;              /* couleur normale */
    transition: color 0.2s ease;
}

.card-product-grid .title:hover {
    color: #198754 !important;              /* vert Bootstrap */
    text-decoration: none;
}

/* Ligne d'actions sous chaque carte produit (voir détails + ajout rapide) */
.product-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: auto; /* toujours calée en bas de la carte, voir .products-grid plus bas */
}

.product-actions .btn-view-details {
    flex: 1 1 auto;
}

.btn-quick-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    background-color: #ffffff;
    border: 1px solid #008020;
    color: #008020;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-quick-add:hover,
.btn-quick-add:focus {
    background-color: #008020;
    color: #ffffff;
}

.quick-add-form {
    margin: 0;
    display: flex;
}

/* Affichage ergonomique du range de prix (produits à plusieurs conditionnements) */
.price-range {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-range-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e6f4ea;
    color: #008020;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
}

.price-range-values {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.price-range-from-label {
    font-size: 12px;
    color: #6c757d;
}

.price-range-min {
    font-size: 1.15rem;
    font-weight: 700;
    color: #008020;
    line-height: 1;
}

.price-range-min small {
    font-size: 0.7rem;
    font-weight: 600;
}

.price-range-sep {
    color: #adb5bd;
    font-size: 13px;
}

.price-range-max {
    font-size: 13px;
    color: #6c757d;
}

/* Produit en rupture de stock : image atténuée pour marquer visuellement
   qu'il n'est pas disponible à l'achat (en plus du badge "Hors stock"). */
.img-wrap-out-of-stock img {
    opacity: 0.5;
    filter: grayscale(60%);
}

/* ===== Grille produits : CSS Grid pour permettre au visiteur de choisir
   librement le nombre de colonnes via le sélecteur ci-dessus. Les valeurs
   par défaut (3 en desktop, 1 en mobile) reproduisent l'ancienne mise en
   page Bootstrap (col-md-4). ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
    align-items: stretch; /* toutes les cartes d'une même rangée ont la même hauteur */
}
.products-grid > .products-grid-empty {
    grid-column: 1 / -1;
}
.products-grid.cols-desktop-2 { grid-template-columns: repeat(2, 1fr); }
.products-grid.cols-desktop-3 { grid-template-columns: repeat(3, 1fr); }
.products-grid.cols-desktop-4 { grid-template-columns: repeat(4, 1fr); }

/* La cellule de grille (stretch par défaut) doit transmettre sa hauteur
   à la carte visible à l'intérieur : sans ça, les cartes plus "légères"
   en contenu (ex : sans bouton d'ajout rapide pour un produit à
   plusieurs formats) restent à leur hauteur naturelle et paraissent plus
   petites que leurs voisines, même si l'espace réservé est identique. */
.products-grid .product-grid-item {
    display: flex;
}
.products-grid .card-product-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}
.products-grid .card-product-grid .info-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* La zone titre/prix a une hauteur fixe (80px, définie globalement dans
   ui.css) avec le texte qui dépasse coupé (overflow:hidden) : sur une
   carte plus étroite (plus de colonnes par ligne), le prix d'un produit
   à plusieurs formats passe sur 2-3 lignes ("À partir de" + montant) et
   se fait tronquer. On rend ici cette zone extensible : la hauteur
   égale entre cartes d'une même rangée reste assurée par le stretch de
   la grille + le flex ci-dessus, pas par ce plafond fixe. */
.products-grid .card-product-grid .fix-height {
    height: auto;
    min-height: 80px;
    overflow: visible;
}

@media (max-width: 767.98px) {
    .products-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .products-grid.cols-mobile-1 { grid-template-columns: repeat(1, 1fr); }
    .products-grid.cols-mobile-2 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* =====================================================================
   SECTION « PRODUITS SIMILAIRES » (fiche produit)
   Occupe la place laissée par la section Avis.
   ===================================================================== */

.similaires-section {
    background: #f6f8f5;
    border-top: 1px solid #e4ebe2;
}

.similaires-heading {
    text-align: center;
    margin-bottom: 2rem;
}

.similaires-eyebrow {
    display: inline-block;
    background: #e3f0e4;
    color: #155724;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.similaires-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b2e14;
    margin-bottom: 0.4rem;
}

.similaires-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Cinq produits proposés : une seule rangée en desktop. La grille de la
   boutique plafonne à 4 colonnes, celle-ci a donc son propre réglage.
   Les paliers intermédiaires évitent des cartes trop étroites : 5 sur
   grand écran, 3 sur portable/tablette large, 2 en dessous, 1 sur
   téléphone (repris de .products-grid). */
.similaires-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

@media (max-width: 1199.98px) {
    .similaires-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
    .similaires-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

@media (max-width: 479.98px) {
    .similaires-grid { grid-template-columns: repeat(1, 1fr); }
}


/* =====================================================================
   PAGINATION
   ---------------------------------------------------------------------
   Sortie du <style> en ligne de store.html : la page « Coups de cœur »
   pagine elle aussi, et sans ces règles elle serait retombée sur les
   cases carrées de Bootstrap au milieu d'un site qui n'en a nulle part.
   ===================================================================== */

/* ===== Pagination modernisée : pastilles rondes dans un ruban blanc
   flottant, flèches précédent/suivant en icônes, page active en dégradé
   vert avec légère ombre portée — plus agréable que les cases pleine
   bordure d'origine. ===== */
.pagination-nav {
    display: flex;
    justify-content: center;
}
.pagination-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 6px;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.pagination-modern .page-item {
    display: flex;
}
.pagination-modern .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border: none;
    border-radius: 50%;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pagination-modern .page-link:hover {
    background: #e6f4ea;
    color: #008020;
    text-decoration: none;
}
.pagination-modern .page-item.active .page-link {
    background: linear-gradient(135deg, #008020, #28a745);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0,128,32,0.35);
    transform: translateY(-1px);
}
.pagination-modern .page-link-arrow {
    color: #008020;
    background: #f1f3f2;
}
.pagination-modern .page-link-arrow:hover {
    background: #008020;
    color: #ffffff;
}
.pagination-modern .page-item.disabled .page-link {
    color: #ced4da;
    background: transparent;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.pagination-modern .page-item.disabled .page-link-arrow {
    background: #f8f9fa;
    color: #ced4da;
}
.pagination-modern .page-item-ellipsis .page-link {
    background: transparent;
    cursor: default;
}
@media (max-width: 575px) {
    .pagination-modern .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }
}


/* =====================================================================
   HABILLAGE « COUP DE CŒUR »
   ---------------------------------------------------------------------
   Partagé par la section de la page d'accueil et la page qui liste toute
   la sélection. Vivait dans home.css, qui n'est chargée que sur
   l'accueil : la nouvelle page y aurait perdu l'étoile et le liseré.

   L'or est choisi parce que les deux autres couleurs de la boutique sont
   prises et signifient autre chose : le vert est la couleur de marque
   (prix, boutons), le rouge celle des promotions. Sans teinte propre,
   « coup de cœur » se serait confondu avec « en promo ».
   ===================================================================== */

:root {
    --favori-or: #d4a017;
    --favori-or-clair: #f5c542;
    --favori-or-fonce: #a97b06;
}

/* ---------- Les cartes ---------- */
/* Liseré doré discret et relief au survol : la carte reste celle des
   autres pages, elle est seulement « habillée » pour la vitrine. */
.favoris-grid .card-product-grid {
    border: 1px solid rgba(212, 160, 23, 0.3);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(11, 46, 20, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.favoris-grid .card-product-grid:hover {
    transform: translateY(-5px);
    border-color: var(--favori-or);
    box-shadow: 0 16px 30px rgba(169, 123, 6, 0.22);
}

/* ---------- La pastille étoile ---------- */
/* Médaillon rond, sans texte : c'est le seul repère qui distingue ces
   produits, il doit se lire d'un coup d'œil sans rien à déchiffrer. Le
   sens est porté par le title et l'aria-label posés dans le gabarit. */
.jr-favori {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--favori-or-clair), var(--favori-or-fonce));
    color: #fff;
    font-size: 0.8rem;
    box-shadow: 0 3px 9px rgba(169, 123, 6, 0.45);
    /* Anneau blanc : le médaillon garde son contour même posé sur une
       photo sombre ou chargée. */
    border: 2px solid #fff;
}

/* Produit en rupture : le badge « Hors stock » occupe déjà ce coin, le
   médaillon descend sous lui. Possible parce que la pastille est écrite
   APRÈS .img-wrap dans le gabarit — le combinateur « ~ » ne regarde que
   vers l'avant. */
.img-wrap-out-of-stock ~ .jr-favori {
    top: 46px;
}

@media (prefers-reduced-motion: reduce) {
    .favoris-grid .card-product-grid { transition: none; }
    .favoris-grid .card-product-grid:hover { transform: none; }
}