/**
 * Case Study single - chrome styles (progress bar + top summary).
 * Design tokens AB Marketing : orange F62E02, blanc FCFBF7, gris DAD6C8, noir 222.
 */

:root {
  --cs-active:    #F62E02;
  --cs-inactive:  #DAD6C8;
  --cs-white:     #FCFBF7;
  --cs-dark:      #222222;

  --cs-dot-size:  26px;   /* diamètre des bullets */
  --cs-line-w:    4px;    /* épaisseur de la ligne */
  --cs-line-offset: 11px; /* (dot-size - line-w) / 2 = 11px pour centrer la ligne sous les dots */
}

/* ==============================================================
   Summary (dans le hero)
   Tout en blanc cassé #FCFBF7 : ligne, dots, texte. Ligne continue.
   Items répartis en space-between sur toute la hauteur du container.
   Aucun effet actif/passé : tous les items visuellement identiques.
   ============================================================== */
#cs-summary.cs-summary {
  display: block;
  height: 100%;
}

.cs-summary__list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 240px; /* pour éviter que la liste ait 0 de hauteur si le parent ne contraint pas */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Ligne verticale continue : va du CENTRE du 1er dot au CENTRE du dernier dot. */
.cs-summary__list::before {
  content: '';
  position: absolute;
  left: var(--cs-line-offset);
  top: calc(var(--cs-dot-size) / 2);
  bottom: calc(var(--cs-dot-size) / 2);
  width: var(--cs-line-w);
  background-color: var(--cs-white);
}

.cs-summary__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 1;
}

.cs-summary__dot {
  width: var(--cs-dot-size);
  height: var(--cs-dot-size);
  border-radius: 50%;
  background-color: var(--cs-white);
  flex-shrink: 0;
}

.cs-summary__link {
  color: var(--cs-white);
  text-decoration: none;
  font-family: 'PP Fragment Sans', 'PP Fragment', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
}

.cs-summary__link:focus-visible {
  outline: 2px solid var(--cs-white);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .cs-summary__link { font-size: 18px; }
}

@media (max-width: 767px) {
  .cs-summary__link { font-size: 16px; }
}

/* ==============================================================
   Progress bar (col gauche narrow) - centrée horizontalement dans sa col
   Chaque dot est positionné en absolu à la hauteur du CENTRE du h2/heading de sa section.
   La ligne (track) va du 1er au dernier dot exactement.
   Le fill anime en % du track selon la progression scroll.
   Tout en couleur active/inactive (rouge / gris).
   ============================================================== */
#cs-progress.cs-progress {
  padding: 0;
  /* La wrap fait la largeur du dot ; on la centre horizontalement dans la col Divi. */
  display: flex;
  justify-content: center;
}

.cs-progress__wrap {
  position: relative;
  width: var(--cs-dot-size);
  /* Prend toute la hauteur de la col Divi (parent flex align-items:stretch). */
  height: 100%;
  min-height: 100%;
}

/* Ligne verticale : positionnée en absolu, top + height set par le JS
   pour matcher exactement le 1er au dernier dot. Centrée horizontalement sous les dots. */
.cs-progress__track {
  position: absolute;
  left: var(--cs-line-offset);
  width: var(--cs-line-w);
  top: 0;
  height: 0;
  background-color: var(--cs-inactive);
  border-radius: 999px;
}

.cs-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: var(--cs-active);
  border-radius: 999px;
  transition: height 120ms linear;
}

/* Wrapper du dot (lien clickable) : positionné en absolu, top set par le JS
   pour matcher le CENTRE du h2 de sa section. translateY(-50%) pour centrer le dot sur cette Y. */
.cs-progress__dot-wrap {
  position: absolute;
  left: 0;
  width: var(--cs-dot-size);
  height: var(--cs-dot-size);
  display: inline-block;
  text-decoration: none;
  transform: translateY(-50%);
  z-index: 1;
}

.cs-progress__dot {
  display: block;
  width: var(--cs-dot-size);
  height: var(--cs-dot-size);
  border-radius: 50%;
  background-color: var(--cs-inactive);
  transition: background-color 220ms ease, transform 220ms ease;
  position: relative;
}

.cs-progress__dot-wrap.is-passed .cs-progress__dot,
.cs-progress__dot-wrap.is-active .cs-progress__dot {
  background-color: var(--cs-active);
}

.cs-progress__dot-wrap.is-active .cs-progress__dot {
  transform: scale(1.1);
}

.cs-progress__dot-wrap:focus-visible {
  outline: 2px solid var(--cs-active);
  outline-offset: 4px;
  border-radius: 50%;
}

/* ==============================================================
   Heading "passed" : la couleur rouge AB est appliquée en style inline via JS
   (setProperty avec !important, imbattable côté specificity vs Divi).
   Ici on ajoute juste la transition douce sur color.
   ============================================================== */
.cs-heading-passed,
.cs-section h1, .cs-section h2, .cs-section h3, .cs-section h4 {
  transition: color 220ms ease;
}

/* ==============================================================
   Mobile : masquer la progress bar (pas d'espace pour une col latérale)
   ============================================================== */
@media (max-width: 980px) {
  #cs-progress {
    display: none !important;
  }
}