/* =====================================================================
   PAGE « NOS COUPS DE CŒUR »
   ---------------------------------------------------------------------
   Gabarit : templates/store/coups_de_coeur.html
   Chargée uniquement par cette page (bloc extra_css).

   Ce fichier ne contient QUE ce qui est propre à la page : l'en-tête et
   ses états. La carte, la grille, la pagination et l'habillage doré
   (étoile + liseré) viennent de product-card.css, chargée pour tout le
   site — c'est ce qui garantit qu'un produit et son étoile s'affichent
   ici exactement comme dans la section de la page d'accueil.
   ===================================================================== */

/* ---------------------------------------------------------------------
   EN-TÊTE DE PAGE
   Bandeau sombre plutôt que clair : cette page n'a pas la vidéo de fond
   de l'accueil, et un dégradé vert profond fait ressortir l'or bien
   mieux qu'un fond blanc, où il virait au jaune passé.
   --------------------------------------------------------------------- */
.favoris-pagetop {
    position: relative;
    padding: 3.25rem 0 3rem;
    text-align: center;
    background: linear-gradient(135deg, #0b2e14 0%, #14532d 55%, #166534 100%);
    color: #fff;
    overflow: hidden;
}

/* Halo doré diffus, décalé vers le haut : donne du relief au bandeau
   sans dessiner de forme identifiable qui entrerait en concurrence avec
   le titre. */
.favoris-pagetop::before {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, rgba(245, 197, 66, 0.18) 0%, rgba(245, 197, 66, 0) 65%);
    pointer-events: none;
}

/* Filet doré en bas du bandeau : la même signature que le panneau de la
   page d'accueil, pour que les deux se reconnaissent. */
.favoris-pagetop::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(212, 160, 23, 0) 0%,
        var(--favori-or-clair, #f5c542) 25%,
        var(--favori-or, #d4a017) 50%,
        var(--favori-or-clair, #f5c542) 75%,
        rgba(212, 160, 23, 0) 100%);
}

.favoris-pagetop .container {
    position: relative;
    z-index: 1;
}

.favoris-pagetop-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--favori-or-clair, #f5c542), var(--favori-or, #d4a017));
    color: #4a3600;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.favoris-pagetop-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
}

.favoris-pagetop-sub {
    max-width: 620px;
    margin: 0 auto;
    /* Blanc franchement adouci plutôt qu'un gris : sur fond vert profond,
       un gris tourne au sale alors qu'un blanc transparent reste net. */
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
   LA GRILLE
   Quatre par rangée : la page en montre 24, soit six rangées pleines.
   --------------------------------------------------------------------- */
.favoris-contenu {
    background: #f7f9f6;
}

.favoris-page-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

/* ---------------------------------------------------------------------
   ÉTAT VIDE
   --------------------------------------------------------------------- */
.favoris-vide {
    max-width: 520px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.favoris-vide-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--favori-or-clair, #f5c542), var(--favori-or-fonce, #a97b06));
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 20px rgba(169, 123, 6, 0.3);
}

.favoris-vide-titre {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b2e14;
    margin-bottom: 0.6rem;
}

.favoris-vide-texte {
    color: #6b7a6e;
    margin-bottom: 1.6rem;
}

.favoris-vide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #198754;
    color: #fff;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.favoris-vide-btn:hover,
.favoris-vide-btn:focus {
    background: #14663f;
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   ADAPTATIONS
   Les paliers reprennent ceux de la section de la page d'accueil, pour
   que le passage de l'une à l'autre ne change pas la densité.
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .favoris-page-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
    .favoris-pagetop { padding: 2.5rem 0 2.25rem; }
    .favoris-pagetop-title { font-size: 1.75rem; }
    .favoris-pagetop-sub { font-size: 0.92rem; }
    .favoris-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }
}

/* Téléphone : deux par ligne, comme sur l'accueil. La carte est dessinée
   pour un tiers d'écran d'ordinateur, tout ce qui est calibré en dur doit
   être resserré — voir le même raisonnement, détaillé, dans home.css. */
@media (max-width: 575.98px) {
    .favoris-pagetop-title { font-size: 1.5rem; }

    /* Les 10 px du conteneur Bootstrap ne suffisent pas : les cartes
       frolaient les deux bords de l'ecran. On aligne sur la marge de la
       section de la page d'accueil, ~25 px au total. */
    .favoris-contenu > .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .favoris-page-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.7rem;
        row-gap: 1.4rem;
    }

    .favoris-page-grid .card-product-grid .img-wrap { height: 132px; }
    .favoris-page-grid .card-product-grid .info-wrap { padding: 10px 10px 12px; }
    .favoris-page-grid .card-product-grid .fix-height { min-height: 0; }

    .favoris-page-grid .card-product-grid .title {
        font-size: 0.82rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* !important : le prix porte .fs-5, utilitaire Bootstrap lui-même en
       !important. */
    .favoris-page-grid .price { font-size: 0.95rem !important; }
    .favoris-page-grid del { font-size: 0.72rem; }

    .favoris-page-grid .price-range-badge { font-size: 9px; padding: 2px 7px; gap: 3px; }
    .favoris-page-grid .price-range-from-label { font-size: 10px; }
    .favoris-page-grid .price-range-min { font-size: 0.95rem; }
    .favoris-page-grid .price-range-sep,
    .favoris-page-grid .price-range-max { display: none; }

    .favoris-page-grid .product-actions { gap: 5px; }
    .favoris-page-grid .btn-view-details {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 6px 4px;
        font-size: 0.72rem;
        line-height: 1.2;
    }
    .favoris-page-grid .btn-quick-add { width: 42px; min-height: 42px; }

    .favoris-page-grid .jr-favori {
        width: 27px;
        height: 27px;
        font-size: 0.68rem;
        top: 8px;
        right: 8px;
    }
    .favoris-page-grid .img-wrap-out-of-stock ~ .jr-favori { top: 40px; }

    .favoris-page-grid .badge { font-size: 0.62rem; }
    .favoris-page-grid .badge-out-of-stock {
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
    }
}