/* ==========================================================================
   Timeline "déroulé de séance" — cartes en zigzag reliées par une courbe
   dégradée, dessinée progressivement au scroll.

   Inspiré de la section "So einfach geht's, in 4 Schritten" observée sur
   amphora-it.com (référence apportée par Rom, 2026-08-19), adapté à la
   palette claire d'AlyCare (fond du site conservé, pas de section sombre).

   Deux tracés (2026-08-19, à la demande de Rom) : une 2e courbe, de couleur
   différente, passe par les mêmes pastilles que la 1re mais avec des points
   de contrôle décalés (voir js/timeline.js, controlPoints2) — les deux se
   croisent donc entre chaque paire de cartes au lieu d'être parallèles,
   pour un effet "entrelacé". Les deux se dessinent en même temps au scroll.

   Composant autonome (CSS + js/timeline.js), pensé pour être repris plus
   tard sur les pages Soins INDIBA et Beauté du regard — pour l'instant
   chargé uniquement sur epilation-laser.html.
   ========================================================================== */

.timeline {
  --timeline-accent-a: var(--color-secondary);
  --timeline-accent-b: var(--color-primary);
  --timeline-accent-c: var(--color-secondary);
  --timeline-accent-d: var(--color-primary-dark);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-md) 0;
}

.timeline__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.timeline__path {
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  /* stroke-dasharray/dashoffset posés dynamiquement par js/timeline.js
     (longueur réelle du tracé calculée via getTotalLength()) — le tracé
     est invisible tant que le JS n'a pas mesuré la courbe, pour éviter un
     flash d'une ligne non animée avant l'initialisation. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.timeline__path--1 {
  stroke: url(#timelineGradient);
}

.timeline__path--2 {
  stroke: url(#timelineGradient2);
}

.timeline__item {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}

.timeline__item[data-align="right"] {
  justify-content: flex-end;
}

.timeline__item[data-align="left"] {
  justify-content: flex-start;
}

.timeline__card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
  padding: var(--space-md) var(--space-lg);
  transition: border-color 0.6s ease, box-shadow 0.6s ease, transform 0.25s ease-out;
  transform: perspective(700px) rotateX(0deg) rotateY(0deg);
  will-change: transform;
}

/* Tilt 3D léger au survol (souris uniquement — voir js/timeline.js, qui ne
   pose les écouteurs mousemove que sous (hover: hover) et (pointer: fine),
   donc aucun état "collé" sur tactile où il n'y a pas de mouseleave fiable).
   rotateX/rotateY sont posés en inline-style par le JS (suivi précis du
   curseur) ; cette transition ne s'applique qu'à l'entrée/sortie, la classe
   is-tilting désactive la transition pendant le suivi pour rester réactive. */
.timeline__card.is-tilting {
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

/* Lueur "d'arrivée" — inspirée du hover de la section "Was soll deine
   Traumwebsite können?" sur amphora-it.com (glow radial en coin + bordure
   qui se révèle), mais déclenchée en continu par js/timeline.js quand le
   tracé de la courbe atteint la pastille numérotée de la carte, plutôt
   qu'au survol : voir .timeline__card.is-active plus bas. Réversible (la
   classe est retirée si on remonte), en cohérence avec le tracé qui se
   rétracte au scroll arrière. */
.timeline__card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Même nettoyage que dans benefits.css : le magenta placeholder
     #F400A1 laisse place au rose de la charte, renforcé pour le fond
     sombre. (2026-08-21) */
  background: radial-gradient(90% 100% at 100% 0%, color-mix(in srgb, var(--color-primary) 34%, transparent), transparent 75%);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.timeline__card.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow:
    0 12px 40px -6px color-mix(in srgb, var(--color-primary) 32%, transparent),
    var(--shadow-soft);
}

.timeline__card.is-active::before {
  opacity: 1;
}

.timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--timeline-accent-a), var(--timeline-accent-b));
  /* Encre sombre (2026-08-21) : le dégradé part du rose PÂLE, du blanc y
     serait illisible. */
  color: var(--color-text-on-secondary);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
  transition: transform 0.5s ease;
}

.timeline__card.is-active .timeline__num {
  transform: scale(1.08);
}

.timeline__title {
  margin-bottom: 0.3em;
}

.timeline__card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .timeline__svg {
    display: none;
  }

  .timeline {
    gap: var(--space-lg);
  }

  .timeline__item[data-align="right"],
  .timeline__item[data-align="left"] {
    justify-content: flex-start;
  }

  .timeline__card {
    max-width: none;
  }
}