/**
 * Grille de produits en petites cartes
 * (app/Blocks/GrilleProduits/views/grille-produits.blade.php).
 *
 * Feuille de style autonome, chargée directement par wp_enqueue_style()
 * (voir app/setup.php) et NON compilée par Laravel Mix : le bloc ne doit pas
 * dépendre d'une reconstruction de dist/. Elle ne contient donc que du CSS
 * standard - pas de directive Tailwind (@apply, @screen...).
 *
 * La mise en forme reprend celle des cartes de la boutique, dont le CSS est
 * verrouillé sur `body.post-type-archive-product` et ne pouvait donc pas être
 * réutilisé tel quel sur une page. Mêmes proportions (quatre cartes par rangée,
 * visuel détouré occupant 80 % de la hauteur), même panneau de couleur au
 * survol. Seule la mécanique change : une grille CSS remplace Masonry, ce qui
 * supprime aussi le script d'égalisation des hauteurs.
 */

.grilleProduits {
    width: 100%;
}

.grilleProduits__titre {
    margin: 0 0 2rem;
    font-size: 2.25rem;
    font-style: italic;
    font-weight: 700;
    text-align: center;
}

.grilleProduits__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
}

/* --- La carte ------------------------------------------------------------ */

.grilleProduits__carte {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.25;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

/* Le visuel du produit, détouré, jamais recadré : comme sur la boutique il
   occupe 80 % de la hauteur de la carte et reste centré. */

.grilleProduits__visuel {
    position: absolute;
    inset: 0;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 80%;
    transition: transform 0.5s ease;
}

.grilleProduits__carte:hover .grilleProduits__visuel {
    transform: scale(1.04);
}

/* --- La pastille « Nouveau » --------------------------------------------- */

/* Mêmes coordonnées que sur la boutique. Elle passe au-dessus du panneau pour
   rester lisible pendant le survol. */

.grilleProduits__vignette {
    position: absolute;
    top: 20%;
    right: 15%;
    z-index: 2;
    display: block;
    width: 6.5rem;
    max-width: 40%;
    pointer-events: none;
}

.grilleProduits__vignette svg {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Le panneau de survol ------------------------------------------------- */

/* Le panneau ne porte que la mise en page et le fondu. La couleur vit sur son
   propre calque, le voile, qui porte les 90 % d'opacité : le nom et le
   pictogramme restent ainsi pleinement opaques, comme sur la boutique. */

.grilleProduits__panneau {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.grilleProduits__voile {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0.9;
}

.grilleProduits__carte:hover .grilleProduits__panneau,
.grilleProduits__carte:focus-visible .grilleProduits__panneau {
    opacity: 1;
}

.grilleProduits__panier {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: block;
    width: 3rem;
}

.grilleProduits__panier svg {
    display: block;
    width: 100%;
    height: auto;
}

.grilleProduits__nom {
    position: relative;
    display: block;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* --- Écrans intermédiaires et étroits ------------------------------------ */

/* Mêmes seuils que la boutique (1200 px puis 600 px) : quatre cartes par
   rangée, puis deux, puis une. La grille change de rythme au même endroit que
   celle de « Tous nos produits ». */

@media screen and (max-width: 1200px) {
    .grilleProduits__grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .grilleProduits__titre {
        font-size: 1.875rem;
    }
}

@media screen and (max-width: 600px) {
    .grilleProduits__grille {
        grid-template-columns: 1fr;
    }
}

/* Sans survol - un écran tactile - le nom ne se révélerait jamais. Le panneau
   se réduit alors à un bandeau permanent en bas de la carte. */

@media (hover: none) {
    .grilleProduits__panneau {
        top: auto;
        justify-content: flex-end;
        padding: 0.75rem 1rem;
        opacity: 1;
    }

    .grilleProduits__panier {
        display: none;
    }

    .grilleProduits__nom {
        font-size: 1.125rem;
    }
}