/* ==========================================================================
   carousel.css — .lba-carousel

   Un seul composant, deux modes portes par une classe modificatrice :

     .lba-carousel--fade   carrousel photo (hero de la Home et pages internes)
                           1 slide par vue, fondu 500 ms, autoplay 5000 ms,
                           boucle infinie, fleches rouges en bas a gauche.

     .lba-carousel--slide  bandeau de logos (Home)
                           glissement 500 ms, delai 800 ms, boucle infinie,
                           aucune navigation, N logos par vue selon le palier.

   Le pilotage vit dans www/assets/js/carousel.js. Sans JS, les deux modes
   restent lisibles : le mode fade affiche la premiere image, le mode slide
   defile horizontalement au doigt (voir §5, repli sans JS).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Structure commune
   --------------------------------------------------------------------------
   `--lba-carousel-per-view` porte le nombre de slides par vue. Le mode fade la
   laisse a 1 ; le mode slide la redefinit par palier (§4). Cette variable est
   la seule chose que le JS n'a pas besoin de savoir : il lit la largeur reelle
   d'une slide dans le DOM.
   -------------------------------------------------------------------------- */

.lba-carousel {
  --lba-carousel-per-view: 1;
  --lba-carousel-gap: 0px;

  position: relative;
}

.lba-carousel__viewport {
  overflow: hidden;
}

.lba-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lba-carousel__slide {
  flex: 0 0 calc(
    (100% - (var(--lba-carousel-per-view) - 1) * var(--lba-carousel-gap))
    / var(--lba-carousel-per-view)
  );
  min-width: 0;
}


/* --------------------------------------------------------------------------
   2. Mode fondu — .lba-carousel--fade
   --------------------------------------------------------------------------
   Les slides sont superposees dans la meme case de grille : aucune n'occupe de
   place propre, la hauteur vient de la plus haute. `opacity` + `visibility`
   font le fondu ; `visibility` retire la slide inactive du parcours clavier et
   des lecteurs d'ecran, ce qu'`opacity: 0` seul ne fait pas.

   L'ombre porte sur le viewport et non sur le carrousel : le conteneur porte
   aussi les fleches, qui debordent volontairement du bord inferieur.
   -------------------------------------------------------------------------- */

.lba-carousel--fade .lba-carousel__viewport {
  border-radius: var(--lba-radius-card);
  box-shadow: var(--shadow-card);
}

.lba-carousel--fade .lba-carousel__track {
  display: grid;
}

.lba-carousel--fade .lba-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease-in-out, visibility 0s linear 500ms;
}

.lba-carousel--fade .lba-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease-in-out, visibility 0s;
}

.lba-carousel--fade .lba-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   3. Fleches du mode fondu
   --------------------------------------------------------------------------
   Deux blocs pleins rouges de 85 x 70 px, colles en bas a gauche, a cheval sur
   le bord inferieur de l'image, separes par un filet vertical.

   ⚠️ Les deux fleches sont posees dans un conteneur `absolute` UNIQUE et
   adjacentes par le flux. Ne pas les positionner individuellement en
   `position: relative` avec `left: 0` / `left: 85px` : un selecteur de palier
   qui cesserait de distinguer « precedent » de « suivant » leur donnerait le
   meme `left` et les superposerait. Avec le conteneur unique, la reduction a
   75 x 60 px au palier 1400 px n'a aucun effet de bord.
   -------------------------------------------------------------------------- */

.lba-carousel__nav {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.lba-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 70px;
  padding: 0;
  border: 0;
  background: var(--primary-color);
  color: rgba(237, 237, 237, .9);
  cursor: pointer;
}

/* Filet vertical entre les deux fleches (1 x 20 px, blanc a 40 %) */
.lba-carousel__arrow--next::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 20px;
  background: #FFFFFF66;
  transform: translateY(-50%);
}

.lba-carousel__arrow--next {
  position: relative;
}

.lba-carousel__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Retour au survol volontairement minimal : le curseur main pose ci-dessus, et
   un eclaircissement discret du chevron — sans changer le fond, pour ne pas
   denaturer le bloc rouge. */
.lba-carousel__arrow:hover,
.lba-carousel__arrow:focus-visible {
  color: var(--white);
}

@media screen and (max-width: 1400px) {

  .lba-carousel__arrow {
    width: 75px;
    height: 60px;
  }
}


/* --------------------------------------------------------------------------
   4. Mode glissement — .lba-carousel--slide
   --------------------------------------------------------------------------
   Bandeau de logos. Le JS decale la piste par `transform: translateX()` ; la
   transition de 500 ms est portee ici, et le JS la neutralise le temps du saut
   de boucle (classe `is-jumping`) pour que le retour au debut soit invisible.

   Paliers : 6 logos par vue au-dessus de 1400 px, 4 a 1200 px, 3 a 767 px,
   1 en dessous. La bascule 6 -> 4 est portee au palier 1400 px, l'un des sept
   paliers du site, plutot qu'a 1366 px : 34 px d'ecart de largeur de fenetre,
   sans effet visible, et un palier de moins a maintenir.
   -------------------------------------------------------------------------- */

.lba-carousel--slide {
  --lba-carousel-per-view: 6;
}

.lba-carousel--slide .lba-carousel__track {
  transition: transform 500ms ease-in-out;
  will-change: transform;
}

/* Saut de boucle : la piste revient a sa position d'origine sans animation */
.lba-carousel--slide .lba-carousel__track.is-jumping {
  transition: none;
}

.lba-carousel--slide .lba-carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.lba-carousel--slide .lba-carousel__slide img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 1400px) {
  .lba-carousel--slide { --lba-carousel-per-view: 4; }
}

@media screen and (max-width: 1200px) {
  .lba-carousel--slide { --lba-carousel-per-view: 3; }
}

@media screen and (max-width: 767px) {
  .lba-carousel--slide { --lba-carousel-per-view: 1; }
}


/* --------------------------------------------------------------------------
   5. Repli sans JavaScript
   --------------------------------------------------------------------------
   Le JS ajoute la classe `is-ready` sur le carrousel une fois initialise. Tant
   qu'elle est absente, on garde un rendu utilisable plutot qu'un composant
   fige :
     - mode fade  : la premiere slide est visible (les autres restent masquees,
                    la mise en page ne bouge pas) ;
     - mode slide : la piste defile horizontalement au doigt / a la molette.
   Les fleches, inertes sans JS, sont masquees dans ce cas.
   -------------------------------------------------------------------------- */

.lba-carousel--fade:not(.is-ready) .lba-carousel__slide:first-child {
  opacity: 1;
  visibility: visible;
}

.lba-carousel:not(.is-ready) .lba-carousel__nav {
  display: none;
}

.lba-carousel--slide:not(.is-ready) .lba-carousel__viewport {
  overflow-x: auto;
}


/* --------------------------------------------------------------------------
   6. Mouvement reduit
   --------------------------------------------------------------------------
   `prefers-reduced-motion` est deja traite globalement dans base.css, qui
   neutralise les transitions. Le seul point que le CSS ne peut pas couvrir est
   l'autoplay, arrete cote JS en lisant la meme media query. Rien a declarer
   de plus ici.
   -------------------------------------------------------------------------- */