/**
 * Caisse-Connect — Styles présentations page d'accueil
 *
 * Styles pour les titres et la mise en page des présentations
 * de produits (sliders WoosPro) affichées sur la page d'accueil.
 *
 * @file        cc-presentations-accueil.css
 * @package     CaisseConnect
 * @subpackage  Frontend
 * @since       1.1.7
 * @version     1.7.2
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 */

 
.slide-accueil {
    margin: 0 0 40px 0;
    position: relative;
    overflow: visible;
}

/* Le titre remonte de 15px au-dessus de sa ligne (top: -15px) et sa rotation
   fait monter son coin plus haut encore. Quand un slider ouvre la page, il
   entre donc dans la bande du header collant, qui le recouvre. Les sliders
   suivants n'ont pas ce problème : le slider précédent leur fait écran.
   Le sélecteur ne matche que le slider RÉELLEMENT en tête de contenu : sous
   une entête d'accueil active, qui se préfixe aux sliders, la marge ne
   s'applique pas — et elle n'a alors rien à compenser. */
.slide-accueil:first-child {
    margin-top: 24px;
}



/* Titre vignette inclinée au-dessus de chaque slider */
.slide-accueil-titre {
    display: inline-block;
    position: relative;
    top: -15px;
    left: 1em;
    z-index: 2;
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    font-weight: var(--cc-graisse-titre);
    line-height: 1.3;
    color: var(--cc-couleur-front-forte-texte);
    text-shadow: 0 1px 2px var(--cc-couleur-front-ombre-legere);
    background-color: var(--cc-couleur-front-forte);
    padding: 0.4em 1.2em;
    margin: 0 0 0 0;
    border-radius: var(--cc-rayon);
    transform: rotate(-3deg);
    box-shadow: var(--cc-ombre-petite);
}

.slide-accueil-titre a,
.slide-accueil-titre a:hover,
.slide-accueil-titre a:focus,
.slide-accueil-titre a:visited {
    text-decoration: none !important;
}

.slide-accueil-titre a {
    color: var(--cc-couleur-front-forte-texte);
    cursor: pointer;
}

/* Le lien couvre toute la vignette : zone cliquable = le badge, pas le seul texte. */
.slide-accueil-titre a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.slide-accueil-titre a:hover,
.slide-accueil-titre a:focus {
    color: var(--cc-couleur-front-forte-texte);
}

/* Le survol éclaire la vignette entière, portée par le h2 et non par le lien en ligne. */
.slide-accueil-titre:has(a:hover),
.slide-accueil-titre:has(a:focus) {
    filter: brightness(1.1);
    box-shadow: 2px 3px 8px var(--cc-couleur-front-ombre-standard);
}

.slide-accueil-titre a:visited {
    color: var(--cc-couleur-front-forte-texte);
}

@media (max-width: 768px) {
    .slide-accueil-titre {
        font-size: 0.8rem;
        left: 0.5em;
        transform: rotate(-2deg);
    }
}


/* Égaliser la hauteur des cartes dans le slider */
.slide-accueil .slick-track {
    display: flex !important;
}

.slide-accueil .slick-slide {
    height: auto !important;
    display: flex !important;
}

.slide-accueil .slick-slide > div {
    display: flex;
    width: 100%;
}



.woopspro-product-slider .woocommerce-loop-product__title {
  padding: 0 0 0 10px;
}

.slide-accueil .slick-list {
  padding: 1px;
}

@media (min-width: 1200px) {
  body .woopspro-product-slider .products li {
      padding: 1em !important;

  }
}


.slick-slide {
    padding: 8px;
    margin: 10px;
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border: 1px var(--cc-couleur-front-bordure-champ) solid;
    border-radius: var(--cc-rayon);
}

/* Boutons navigation slider — pastilles rondes */
.slide-accueil .slick-slider .slick-prev,
.slide-accueil .slick-slider .slick-next {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: var(--cc-couleur-front-forte) !important;
    z-index: 10 !important;
    opacity: 0.9;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.slide-accueil .slick-slider .slick-prev:hover,
.slide-accueil .slick-slider .slick-next:hover {
    background-color: var(--cc-couleur-front-forte) !important;
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
}

/* Chevrons en gras */
.slide-accueil .slick-slider .slick-prev::before,
.slide-accueil .slick-slider .slick-next::before {
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--cc-couleur-front-forte-texte) !important;
    opacity: 1 !important;
    content: '' !important;
}

.slide-accueil .slick-slider .slick-prev::before {
    content: '❮' !important;
}

.slide-accueil .slick-slider .slick-next::before {
    content: '❯' !important;
}

/* Mobile : centrer verticalement le titre dans la vignette du slider */
@media (max-width: 768px) {
    .slide-accueil .woocommerce-loop-product__title {
        top: 30%;
        transform: translateY(-30%);
    }
}