/**
 * Steps AB - Divi 5 custom module (parent + child)
 * Structure:
 *   .ab-steps__wrapper
 *     .ab-steps__endpoint--top   (cercle A)
 *     .ab-steps__track
 *       .ab-steps__line-track    (rail complet)
 *       .ab-steps__line-fill     (portion remplie, height animée par JS)
 *       .ab-steps__items
 *         .ab-steps__item        (bullet + body + image)
 *     .ab-steps__endpoint--bottom (cercle B)
 *
 * L'animation two-way (suit scroll dans les deux sens) est gérée par
 * assets/js/steps.js qui met à jour --fill-height et data-active sur les items.
 */

.ab-steps {
  --ab-steps-line-color:      #F62E02;
  --ab-steps-line-track:      #FCFBF7;
  --ab-steps-line-width:      4px;
  --ab-steps-endpoint-size:   80px;
  --ab-steps-bullet-size:     16px;
  --ab-steps-bullet-active:   #F62E02;
  --ab-steps-bullet-inactive: #FCFBF7;
  --ab-steps-number-active:   #F62E02;
  --ab-steps-number-inactive: #FCFBF7;
  --ab-steps-image-width:     45%;
  --ab-steps-image-ratio:     3 / 2;

  --ab-steps-track-left:      calc(var(--ab-steps-endpoint-size) / 2);
  --ab-steps-body-gap:        32px;

  box-sizing: border-box;
}

.ab-steps__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  box-sizing: border-box;
}

/* ===== Endpoints (cercles A et B) =====
   Le SVG upload par le user est utilisé comme mask CSS pour permettre de
   recolorer le glyphe indépendamment du fond du cercle selon l'état.
   Inactif: fond blanc AB, glyphe dark. Actif: fond rouge AB, glyphe blanc AB. */
.ab-steps__endpoint {
  position: relative;
  width: var(--ab-steps-endpoint-size);
  height: var(--ab-steps-endpoint-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ab-steps-bullet-inactive);
  transition: background-color 260ms ease;
}
.ab-steps__endpoint[data-active="1"] {
  background-color: var(--ab-steps-bullet-active);
}

.ab-steps__endpoint-mask {
  display: block;
  width: 60%;
  height: 60%;
  background-color: var(--ab-steps-endpoint-svg-inactive, #222222);
  transition: background-color 260ms ease;
  mask-image: var(--ab-steps-endpoint-mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--ab-steps-endpoint-mask);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ab-steps__endpoint[data-active="1"] .ab-steps__endpoint-mask {
  background-color: var(--ab-steps-endpoint-svg-active, #FCFBF7);
}

.ab-steps__endpoint-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ab-steps-endpoint-svg-inactive, #222222);
  font-family: 'PP Fragment Sans', sans-serif;
  font-weight: 700;
  font-size: calc(var(--ab-steps-endpoint-size) * 0.5);
  text-transform: lowercase;
  transition: color 260ms ease;
}
.ab-steps__endpoint[data-active="1"] .ab-steps__endpoint-placeholder {
  color: var(--ab-steps-endpoint-svg-active, #FCFBF7);
}

/* ===== Track (la zone qui contient la ligne verticale et les items) ===== */
.ab-steps__track {
  position: relative;
  width: 100%;
  padding-left: 0;
  box-sizing: border-box;
}

/* La ligne (track gris) court de haut en bas de la zone .ab-steps__track,
   positionnée au centre horizontal du cercle A (donc à --ab-steps-track-left). */
.ab-steps__line-track,
.ab-steps__line-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ab-steps-track-left);
  transform: translateX(-50%);
  width: var(--ab-steps-line-width);
  z-index: 1;
  pointer-events: none;
}
.ab-steps__line-track {
  background-color: var(--ab-steps-line-track);
}
.ab-steps__line-fill {
  background-color: var(--ab-steps-line-color);
  bottom: auto;
  height: var(--ab-steps-fill, 0%);
  transition: height 200ms linear;
}

/* Sans JS (fallback): remplir la ligne à 100% pour que ce ne soit pas cassé */
.ab-steps.no-js .ab-steps__line-fill {
  height: 100%;
}

/* ===== Items container ===== */
.ab-steps__items {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 60px 0;
}

/* ===== Un item ===== */
.ab-steps__item {
  position: relative;
  display: grid;
  grid-template-columns:
    calc(var(--ab-steps-endpoint-size)) 2fr 1fr;
  align-items: center;
  gap: var(--ab-steps-body-gap);
  min-height: var(--ab-steps-endpoint-size);
}

/* Bullet centrée verticalement sur la row, à --ab-steps-track-left.
   Pleine par défaut (couleur inactive), change de couleur au scroll. */
.ab-steps__bullet {
  width: var(--ab-steps-bullet-size);
  height: var(--ab-steps-bullet-size);
  border-radius: 50%;
  background-color: var(--ab-steps-bullet-inactive);
  border: none;
  justify-self: center;
  align-self: center;
  transition:
    background-color 240ms ease,
    transform 240ms ease;
}

/* Body (numéro + texte) */
.ab-steps__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}
.ab-steps__number {
  font-family: 'PP Fragment Glare', 'PP Fragment', serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--ab-steps-number-inactive);
  transition: color 320ms ease;
  flex-shrink: 0;
}
/* Numéro généré automatiquement via CSS counter piloté par la position dans la liste */
.ab-steps__items {
  counter-reset: ab-steps-counter;
}
.ab-steps__item {
  counter-increment: ab-steps-counter;
}
.ab-steps__number::before {
  content: counter(ab-steps-counter) '.';
}

.ab-steps__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}
.ab-steps__title {
  font-family: 'PP Fragment Sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: #FCFBF7;
  margin: 0;
  padding: 0;
}
.ab-steps__description {
  font-family: 'PP Fragment Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #FCFBF7;
  margin: 0;
}

/* Image column */
.ab-steps__image {
  width: 100%;
  aspect-ratio: var(--ab-steps-image-ratio);
  overflow: hidden;
  border-radius: 0;
  background-color: transparent;
}
.ab-steps__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-steps__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #d0d0d0;
}

/* ===== Etats actifs (data-active="1" mis par le JS quand la ligne dépasse la bullet) ===== */
.ab-steps__item[data-active="1"] .ab-steps__bullet {
  background-color: var(--ab-steps-bullet-active);
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .ab-steps__item {
    grid-template-columns:
      calc(var(--ab-steps-endpoint-size)) 1fr;
    gap: 24px;
  }
  .ab-steps__image {
    grid-column: 2 / -1;
    margin-top: 16px;
  }
  .ab-steps__number {
    font-size: 72px;
  }
}

@media (max-width: 640px) {
  /* Mobile : on garde le rail complet (cercles A/B, ligne verticale, bullets)
     mais on rétrécit les endpoints pour libérer de l'espace horizontal, et on
     empile body puis image dans la colonne de droite. */
  /* !important + cible .ab-steps__wrapper : le PHP émet un style scopé
     .ab-steps--i<hash> sur ce même wrapper avec les valeurs desktop des vars.
     Cibler l'ancêtre .ab-steps ne fonctionne pas car les custom properties se
     résolvent par proximité dans l'arbre.
     On surcharge track-left explicitement aussi, sinon il reste à 40px hérité
     du calc() défini sur .ab-steps avec la valeur desktop de endpoint-size. */
  .ab-steps__wrapper {
    --ab-steps-endpoint-size: 48px !important;
    --ab-steps-bullet-size:   14px !important;
    --ab-steps-track-left:    24px !important;
  }

  .ab-steps__items {
    gap: 40px;
    padding: 40px 0;
  }
  .ab-steps__item {
    grid-template-columns: var(--ab-steps-endpoint-size) 1fr;
    grid-template-areas:
      'bullet body'
      '.      image';
    gap: 16px;
    min-height: 0;
  }
  .ab-steps__bullet {
    grid-area: bullet;
    align-self: start;
    margin-top: calc(var(--ab-steps-endpoint-size) / 2 - var(--ab-steps-bullet-size) / 2);
  }
  .ab-steps__body {
    grid-area: body;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .ab-steps__image {
    grid-area: image;
    margin-top: 0;
  }
  .ab-steps__number {
    font-size: 56px;
    margin-top: 13px;
  }
  .ab-steps__title {
    font-size: 20px;
  }
}