/*
 * JL Slider – diaporama de la page d'accueil (LABROSSE SHOP).
 *
 * La hauteur est fixée dès l'affichage (proportion 1920 × 520 sur ordinateur,
 * hauteur fixe sur mobile) : la page ne se décale pas quand les images arrivent.
 * Les réglages visuels se changent dans les variables ci-dessous.
 */

.jlslider {
  --jls-bleu: #14476f;            /* fond des diapositives composées, bouton */
  --jls-bleu-fonce: #0e3352;
  --jls-voile: 14, 51, 82;        /* voile des photos (rouge, vert, bleu) */
  --jls-hauteur-mobile: 560px;
  --jls-duree: 0.6s;

  position: relative;
  /* clip (et hidden pour les navigateurs anciens) : le navigateur ne peut pas faire
     défiler le diaporama de lui-même pour montrer un élément ciblé. */
  overflow: hidden;
  overflow: clip;
  background: var(--jls-bleu);
}

/* ---- Piste et diapositives ---- */

.jlslider__piste { display: flex; margin: 0; padding: 0; list-style: none; transition: transform var(--jls-duree) ease; }
.jlslider__diapo { position: relative; flex: 0 0 100%; aspect-ratio: 1920 / 520; min-height: 380px; margin: 0; overflow: hidden; }
.jlslider__fond { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Voile dégradé sur les photos, pour que le texte reste lisible. */
.jlslider__diapo--photo::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(var(--jls-voile), 0.92) 0%, rgba(var(--jls-voile), 0.75) 38%, rgba(var(--jls-voile), 0) 70%);
}

/* Marge latérale : le texte ne passe jamais sous les flèches. */
.jlslider__contenu { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; padding-inline: 70px; }
.jlslider__texte { max-width: 560px; color: #fff; }
.jlslider__surtitre { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.jlslider__badge { padding: 4px 10px; border-radius: 5px; background: #fff; color: var(--jls-bleu); letter-spacing: 0; }
.jlslider .jlslider__titre { margin: 0 0 14px; color: #fff; font-size: 40px; font-weight: 700; line-height: 1.15; text-transform: none; }
.jlslider__description { margin: 0 0 24px; color: rgba(255, 255, 255, 0.9); font-size: 17px; line-height: 1.5; }
.jlslider__description strong { color: #fff; }
.jlslider__bouton { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 5px; background: #fff; color: var(--jls-bleu); font-size: 15px; font-weight: 600; text-decoration: none; }
.jlslider__bouton:hover, .jlslider__bouton:focus { background: #eaf1f7; color: var(--jls-bleu); text-decoration: none; }
.jlslider__bouton:focus-visible, .jlslider__fleche:focus-visible, .jlslider__point:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* !important : le thème impose « svg:not(:root) { height: 25px !important } » à tout le site. */
.jlslider svg { width: 18px; height: 18px !important; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Diapositive composée : texte sur fond bleu, photos produits sur fond blanc ---- */

.jlslider__diapo--composee { background: linear-gradient(105deg, var(--jls-bleu) 0%, var(--jls-bleu-fonce) 49%, #fff 49.1%); }
.jlslider__diapo--sans-produit { background: linear-gradient(105deg, var(--jls-bleu) 0%, var(--jls-bleu-fonce) 100%); }
.jlslider__diapo--composee .jlslider__contenu { justify-content: space-between; gap: 30px; }
.jlslider__produits { position: relative; flex: 0 0 46%; height: 88%; }
/* Les photos produits ont un fond blanc : en mode « produit », le blanc d'une photo
   ne masque pas la photo voisine qu'elle chevauche. */
.jlslider__produit { position: absolute; bottom: 4%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
/* 3 photos : la première au centre (la plus grande), la deuxième à gauche, la troisième à droite. */
.jlslider__produits--3 .jlslider__produit:nth-child(1) { left: 26%; width: 52%; z-index: 3; }
.jlslider__produits--3 .jlslider__produit:nth-child(2) { left: 6%; width: 36%; bottom: 10%; z-index: 2; }
.jlslider__produits--3 .jlslider__produit:nth-child(3) { right: -4%; width: 40%; bottom: 8%; z-index: 1; }
.jlslider__produits--2 .jlslider__produit:nth-child(1) { left: 8%; width: 50%; z-index: 2; }
.jlslider__produits--2 .jlslider__produit:nth-child(2) { right: 0; width: 44%; bottom: 8%; z-index: 1; }
.jlslider__produits--1 .jlslider__produit { left: 20%; width: 60%; }

/* ---- Flèches et points ---- */

.jlslider__fleche {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--jls-bleu);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.jlslider__fleche:hover { background: #fff; }
.jlslider__fleche--prec { left: 18px; }
.jlslider__fleche--suiv { right: 18px; }
.jlslider__points { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.jlslider__point { width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 6px; background: transparent; cursor: pointer; transition: width 0.3s ease; }
.jlslider__point[aria-current="true"] { width: 26px; background: #fff; }

/* ---- Tablette et téléphone ---- */

@media (max-width: 991.98px) {
  .jlslider__diapo { aspect-ratio: auto; min-height: 0; height: var(--jls-hauteur-mobile); }
  .jlslider__contenu { padding-inline: 15px; }
  .jlslider .jlslider__titre { font-size: 26px; }
  .jlslider__description { margin-bottom: 18px; font-size: 15px; }
  .jlslider__fleche { display: none; }
  .jlslider__diapo--photo::before { background: linear-gradient(180deg, rgba(var(--jls-voile), 0.9) 0%, rgba(var(--jls-voile), 0.65) 60%, rgba(var(--jls-voile), 0.3) 100%); }

  /* Composée : texte en haut sur le bleu, photos alignées en dessous sur le blanc. */
  .jlslider__diapo--composee { background: linear-gradient(180deg, var(--jls-bleu) 0%, var(--jls-bleu-fonce) 66%, #fff 66.1%); }
  .jlslider__diapo--composee .jlslider__contenu { flex-direction: column; justify-content: flex-start; padding-top: 28px; }
  .jlslider__produits { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-evenly; width: 100%; height: auto; margin-top: 34px; }
  /* Largeurs cumulées inférieures à 100 % : aucune photo n'est coupée au bord de l'écran. */
  .jlslider__produits .jlslider__produit { position: static; flex: 0 1 auto; width: 30%; max-width: 30%; max-height: 150px; }
  /* 3 photos : la principale au milieu, un peu plus grande. */
  .jlslider__produits--3 .jlslider__produit:nth-child(1) { order: 2; width: 35%; max-width: 35%; }
  .jlslider__produits--3 .jlslider__produit:nth-child(2) { order: 1; }
  .jlslider__produits--3 .jlslider__produit:nth-child(3) { order: 3; }
}

/* Animations coupées si le visiteur l'a demandé à son système. */
@media (prefers-reduced-motion: reduce) {
  .jlslider__piste, .jlslider__point { transition: none; }
}