/**
 * La Croquetterie Homepage - Surcouche d'amélioration (v2)
 * Chargée APRÈS homepage.css. Ne modifie aucun template ni réglage BO.
 * Pour revenir en arrière : supprimer ce fichier (ou retirer son
 * enregistrement dans lc_homepage.php) — rien d'autre n'est impacté.
 *
 * Objectifs : lisibilité / contraste (WCAG AA), cartes produit plus
 * lisibles, tuiles « univers » plus contrastées, repères de swipe mobile.
 */

:root {
    /* Vert lisible sur fond blanc (≈ 5,6:1 ; l'ancien #8fa339 ≈ 2,9:1) */
    --lc-vert-text: #5d6d1a;
    --lc-gris-text: #5a5a5a;
}

/* ---------------------------------------------------------------
   1. CARTES PRODUIT (favoris + nouveautés)
   --------------------------------------------------------------- */
.lc-bestsellers .product-miniature,
.lc-newproducts .product-miniature {
    transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
    .lc-bestsellers .product-miniature:hover,
    .lc-newproducts .product-miniature:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(65, 65, 66, .12);
    }
}

/* Textes : tailles minimales plus confortables */
.lc-bestsellers .product-miniature h2.product-title,
.lc-bestsellers .product-miniature h3.product-title,
.lc-newproducts .product-miniature h2.product-title,
.lc-newproducts .product-miniature h3.product-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
}
.lc-bestsellers .product-miniature .product-short-desc .short-desc-text,
.lc-newproducts .product-miniature .product-short-desc .short-desc-text {
    font-size: 13px !important;
    color: var(--lc-gris-text) !important;
}
.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars p,
.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars p {
    font-size: 12px !important;
    color: var(--lc-gris-text) !important;
}

/* Prix : plus grand, plus contrasté ; prix au kilo mis en avant */
.lc-bestsellers .product-miniature .price-line .price,
.lc-bestsellers .product-miniature .lc-best-price-widget .price,
.lc-newproducts .product-miniature .price-line .price,
.lc-newproducts .product-miniature .lc-best-price-widget .price {
    font-size: 19px !important;
    color: var(--lc-vert-text) !important;
}
.lc-bestsellers .product-miniature .price-per-kg,
.lc-bestsellers .product-miniature .lc-price-per-kg,
.lc-newproducts .product-miniature .price-per-kg,
.lc-newproducts .product-miniature .lc-price-per-kg {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--lc-gris-text) !important;
}
.lc-bestsellers .product-miniature .regular-price,
.lc-newproducts .product-miniature .regular-price {
    color: #767676 !important;
    font-size: 13px !important;
}

/* Focus clavier visible */
.lc-bestsellers .product-miniature a:focus-visible,
.lc-newproducts .product-miniature a:focus-visible,
.lc-products-btn:focus-visible,
.lc-slider-prev:focus-visible,
.lc-slider-next:focus-visible,
.lc-cta-btn:focus-visible,
.lc-other-card:focus-visible {
    outline: 3px solid var(--lc-gris);
    outline-offset: 3px;
}

/* Boutons de carrousel : cible tactile ≥ 44 px */
.lc-products-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ---------------------------------------------------------------
   2. TUILES « TOUT L'UNIVERS » : contraste du texte blanc
   (fonds vert/kraft clairs -> texte blanc faible)
   --------------------------------------------------------------- */
.lc-other-card-title {
    font-size: 1.3rem;
    letter-spacing: .6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 0 1px rgba(0, 0, 0, .35);
}
.lc-other-card::before {
    /* voile très léger pour assombrir sans changer l'identité couleur */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(40, 40, 40, .22), rgba(40, 40, 40, 0) 65%);
    pointer-events: none;
    z-index: 1;
}
@media (hover: hover) {
    .lc-other-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(65, 65, 66, .18);
    }
}

/* ---------------------------------------------------------------
   3. HERO : CTA un peu plus présent (position inchangée : le texte
      du visuel est incrus­té dans les images)
   --------------------------------------------------------------- */
.lc-hero-slider .lc-cta-primary {
    font-size: 1.05rem;
    padding: 14px 28px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
@media (hover: hover) {
    .lc-hero-slider .lc-cta-primary:hover {
        transform: translateY(-2px);
        background: var(--lc-vert, #a7bc44);
        color: #1f1f1f;
    }
}

/* ---------------------------------------------------------------
   4. ENGAGEMENTS (carrousel mobile) : pagination par points
   --------------------------------------------------------------- */
.lc-eng-dots {
    display: none;
}
@media (max-width: 991px) {
    .lc-eng-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: 4px 0 18px;
    }
    .lc-eng-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(65, 65, 66, .3);
        cursor: pointer;
        transition: width .25s ease, background-color .25s ease;
        /* zone tactile élargie sans grossir le point */
        position: relative;
    }
    .lc-eng-dot::after {
        content: "";
        position: absolute;
        inset: -18px -6px;
    }
    .lc-eng-dot.is-active {
        width: 24px;
        border-radius: 4px;
        background: var(--lc-vert-dark, #8fa339);
    }
}

/* ---------------------------------------------------------------
   5. Accessibilité : respect de prefers-reduced-motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lc-bestsellers .product-miniature,
    .lc-newproducts .product-miniature,
    .lc-other-card,
    .lc-hero-slider .lc-cta-primary,
    .lc-eng-dot {
        transition: none !important;
        transform: none !important;
    }
}