/* ==========================================================================
   Carrousel — Anatole Lebreton
   Contrôles d'après le composant Oriions : barre segmentée + flèches rondes.
   Défilement natif avec scroll-snap (meilleur tactile, meilleure accessibilité
   qu'un translateX piloté en JS).
   ========================================================================== */

.alb-carousel {
  /* Jetons de couleur — à aligner sur les variables du site */
  --alb-sand:  #E6E2D5;
  --alb-navy:  #090947;
  --alb-lime:  #DCFE54;
  --alb-teal:  #0B4650;

  /* Réglages carrousel */
  --alb-visible: 4;      /* nombre de cartes visibles */
  --alb-gap: 24px;       /* gouttière entre cartes */
  --alb-peek: 0px;       /* largeur de la carte suivante qui dépasse */
  --alb-seg-idle: var(--alb-sand);
  --alb-seg-fill: var(--alb-navy);
  --alb-fill-duration: 0ms;  /* piloté par le JS quand autoplay actif */

  position: relative;
}

/* --- Zone de défilement ------------------------------------------------- */

.alb-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge */
  padding-bottom: 4px;              /* évite de rogner les ombres */
}
.alb-carousel__viewport::-webkit-scrollbar { display: none; }

.alb-carousel__track {
  display: flex;
  gap: var(--alb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.alb-carousel__slide {
  /* largeur = (100% - gouttières - dépassement) / nb visible */
  flex: 0 0 calc(
    (100% - (var(--alb-visible) - 1) * var(--alb-gap) - var(--alb-peek))
    / var(--alb-visible)
  );
  scroll-snap-align: start;
  min-width: 0;
}

/* La fin de course n'est pas un multiple de la largeur d'une carte, donc
   elle n'est pas un point d'ancrage valide. En snap `mandatory`, le
   navigateur refuse de s'y arrêter et rappelle la vue en arrière — le
   dernier produit devient inatteignable et le retour part de travers.
   Ancrer la dernière carte par sa droite crée le point manquant. */
.alb-carousel__slide:last-child { scroll-snap-align: end; }

/* --- Contrôles ---------------------------------------------------------- */

.alb-carousel__controls {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
}

.alb-carousel__progress {
  display: flex;
  flex: 1 1 0%;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alb-carousel__seg {
  flex: 1 1 0%;
  height: 2px;
  border-radius: 2px;
  background: var(--alb-seg-idle);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* cible tactile confortable sans épaissir le trait */
  position: relative;
}
.alb-carousel__seg::before {
  content: "";
  position: absolute;
  inset: -14px 0;                   /* zone cliquable de 30px de haut */
}
.alb-carousel__seg:focus-visible {
  outline: 2px solid var(--alb-navy);
  outline-offset: 6px;
}

.alb-carousel__fill {
  display: block;
  height: 100%;
  background: var(--alb-seg-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}

/* MODE MULTI-PRODUITS — un tiret par produit, en dégradé.
   Le produit au centre de la fenêtre est le plus foncé ; l'encre s'éclaircit
   vers les bords jusqu'à disparaître pour ceux qui sortent de l'écran.
   L'intensité est calculée par le JS et posée en variable sur le segment.
   Pas de transition : la valeur est rafraîchie à chaque image de défilement,
   donc le dégradé glisse déjà de façon continue. */
.alb-carousel__seg.is-visible .alb-carousel__fill {
  transform: scaleX(1);
  opacity: var(--alb-seg-intensity, 1);
  transition: none;
}

/* MODE UNE-SLIDE — segment déjà passé : rempli d'un coup */
.alb-carousel__seg.is-done .alb-carousel__fill { transform: scaleX(1); }

/* MODE UNE-SLIDE — segment courant sans autoplay */
.alb-carousel__seg.is-active .alb-carousel__fill { transform: scaleX(1); }

/* segment courant avec autoplay : se remplit en linéaire sur la durée */
.alb-carousel__seg.is-active .alb-carousel__fill.run {
  transition: transform var(--alb-fill-duration) linear;
  transform: scaleX(1);
}

/* --- Flèches ------------------------------------------------------------ */

.alb-carousel__arrows { display: flex; gap: 10px; }

.alb-carousel__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--alb-sand);
  background: transparent;
  color: var(--alb-navy);
  cursor: pointer;
  transition: background 200ms, color 200ms, opacity 200ms, border-color 200ms;
}
.alb-carousel__arrow:hover:not(:disabled) {
  background: var(--alb-navy);
  border-color: var(--alb-navy);
  color: #fff;
}
.alb-carousel__arrow:focus-visible {
  outline: 2px solid var(--alb-navy);
  outline-offset: 3px;
}
.alb-carousel__arrow:disabled { opacity: .35; cursor: default; }
.alb-carousel__arrow svg { width: 20px; height: 20px; fill: currentColor; }

/* --- Variante éditoriale (une slide, autoplay) -------------------------- */

.alb-carousel--editorial { --alb-visible: 1; --alb-gap: 0px; --alb-peek: 0px; }

/* --- Réactif ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .alb-carousel { --alb-visible: 2; --alb-peek: 32px; }
}
@media (max-width: 640px) {
  .alb-carousel { --alb-visible: 1; --alb-peek: 48px; --alb-gap: 16px; }
  .alb-carousel__controls { gap: 20px; margin-top: 20px; }
}

/* --- Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .alb-carousel__viewport { scroll-behavior: auto; }
  .alb-carousel__fill,
  .alb-carousel__seg.is-active .alb-carousel__fill.run { transition: none; }
}