/*
 * ═══════════════════════════════════════════════════════════════
 *   CTI-CI - section-valeurs.css
 *   Timeline des valeurs avec canvas réseau + points orange
 *   Switch Maker SARL - enqueuer après main.css
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Conteneur ── */
#valeurs {
  position: relative;
  padding: 5rem 6% 6rem;
  overflow: hidden;
  min-height: 520px;
}

/* ── Canvas réseau (fond) ── */
.val-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── Photo fond + overlay ── */
.val-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.08) saturate(1.2);
  z-index: 0;
}
.val-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg,
    rgba(6,16,40,.96) 0%,
    rgba(4,24,14,.93) 60%,
    rgba(6,16,40,.97) 100%);
  z-index: 0;
}

/* ── Contenu au-dessus du canvas ── */
.val-inner {
  position: relative;
  z-index: 3;
}

/* ── En-tête ── */
.val-head {
  margin-bottom: 4rem;
}
.val-headline {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--e1), transform .7s var(--e1);
}
.val-head.vis .val-headline {
  opacity: 1;
  transform: translateY(0);
}

/* ── Wrapper timeline ── */
.val-timeline-wrap {
  position: relative;
}

/* ────────────────────────────────────────────────────────────
   BARRE TIMELINE avec points orange
   ─────────────────────────────────────────────────────────── */
.val-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 56px;
  margin-bottom: 0;
}

/* Ligne de fond */
.val-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* Ligne orange animée */
.val-track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange2));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: width 1.4s var(--e1);
  box-shadow: 0 0 12px rgba(255,107,26,.5);
}
#valeurs.val-anim .val-track::after { width: 100% }

/* Wrapper du point */
.val-dot-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Point orange */
.val-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FF9A4A, var(--orange));
  box-shadow:
    0 0 0 3px rgba(255,107,26,.25),
    0 0 16px rgba(255,107,26,.55),
    inset 0 1px 2px rgba(255,255,255,.3);
  position: relative;
  cursor: pointer;
  transform: scale(0);
  transition: transform .5s var(--e3), box-shadow .3s;
}
.val-dot:hover {
  box-shadow:
    0 0 0 5px rgba(255,107,26,.35),
    0 0 28px rgba(255,107,26,.7),
    inset 0 1px 2px rgba(255,255,255,.3);
  transform: scale(1.25) !important;
}

/* Pulse autour du point */
.val-dot-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,107,26,.4);
  animation: valPulse 2.2s ease-out infinite;
  opacity: 0;
}
.val-dot:hover .val-dot-pulse { animation-play-state: paused }

@keyframes valPulse {
  0%   { transform: scale(1);   opacity: .7 }
  70%  { transform: scale(1.9); opacity: 0  }
  100% { transform: scale(1.9); opacity: 0  }
}

/* Stagger apparition des points */
#valeurs.val-anim .val-dot { transform: scale(1) }
#valeurs.val-anim .val-dot-wrap:nth-child(1) .val-dot { transition-delay: .3s  }
#valeurs.val-anim .val-dot-wrap:nth-child(2) .val-dot { transition-delay: .52s }
#valeurs.val-anim .val-dot-wrap:nth-child(3) .val-dot { transition-delay: .74s }
#valeurs.val-anim .val-dot-wrap:nth-child(4) .val-dot { transition-delay: .96s }
#valeurs.val-anim .val-dot-wrap:nth-child(5) .val-dot { transition-delay: 1.18s}
#valeurs.val-anim .val-dot-wrap:nth-child(6) .val-dot { transition-delay: 1.40s}

/* ────────────────────────────────────────────────────────────
   CONNECTEURS SVG courbes (entre barre et cartes)
   ─────────────────────────────────────────────────────────── */
.val-connectors {
  position: absolute;
  top: 28px; /* centre de la barre */
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 11px; /* aligner sur les dots */
  pointer-events: none;
  height: 50px;
  z-index: 1;
}
.val-connector {
  width: 20px;
  height: 50px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .4s;
}
#valeurs.val-anim .val-connector { opacity: 1 }
#valeurs.val-anim .val-connector:nth-child(1) { transition-delay: .45s  }
#valeurs.val-anim .val-connector:nth-child(2) { transition-delay: .67s  }
#valeurs.val-anim .val-connector:nth-child(3) { transition-delay: .89s  }
#valeurs.val-anim .val-connector:nth-child(4) { transition-delay: 1.11s }
#valeurs.val-anim .val-connector:nth-child(5) { transition-delay: 1.33s }
#valeurs.val-anim .val-connector:nth-child(6) { transition-delay: 1.55s }

/* ────────────────────────────────────────────────────────────
   CARTES VALEUR sous la timeline
   ─────────────────────────────────────────────────────────── */
.val-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 1.5rem;
  margin-top: 4rem;
}

.vc {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s var(--e1),
    transform .55s var(--e1);
}
.vc.vis {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger cartes */
.vc:nth-child(1) { transition-delay: .5s  }
.vc:nth-child(2) { transition-delay: .72s }
.vc:nth-child(3) { transition-delay: .94s }
.vc:nth-child(4) { transition-delay: 1.16s}
.vc:nth-child(5) { transition-delay: 1.38s}
.vc:nth-child(6) { transition-delay: 1.60s}

.vc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .6rem;
  line-height: 1.2;
}

.vc-desc {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

/* ── Tablette (769–1024px) : 3 colonnes ── */
@media (max-width: 1024px) and (min-width: 769px) {
  #valeurs { padding: 4rem 5% 5rem }

  .val-headline { font-size: clamp(1.8rem, 4vw, 2.4rem) }
  .val-head { margin-bottom: 3rem }

  /* Timeline : 6 points mais barre plus compacte */
  .val-dot { width: 18px; height: 18px }

  /* Cartes : 3 colonnes × 2 lignes */
  .val-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
    margin-top: 3rem;
  }
  .val-connectors { display: none }
  .vc-title { font-size: .85rem }
  .vc-desc  { font-size: .76rem }
}

/* ── Petite tablette (481–768px) : 2 colonnes + timeline verticale ── */
@media (max-width: 768px) and (min-width: 481px) {
  #valeurs { padding: 3.5rem 5% 4rem }

  .val-headline { font-size: clamp(1.6rem, 5.5vw, 2.2rem) }
  .val-head { margin-bottom: 2.5rem }

  /* Timeline masquée, grille 2 colonnes */
  .val-track, .val-connectors { display: none }
  .val-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 0;
  }

  /* Chaque carte : ligne orange à gauche */
  .vc {
    border-left: 2px solid var(--orange);
    padding-left: 1rem;
  }
  .vc:nth-child(3n+2) { border-left-color: var(--green2) }
  .vc:nth-child(3n+3) { border-left-color: var(--electric) }

  .vc-title { font-size: .88rem }
  .vc-desc  { font-size: .76rem }

  /* Reset stagger pour mobile */
  .vc:nth-child(n) { transition-delay: 0s }
  .vc:nth-child(2) { transition-delay: .1s }
  .vc:nth-child(3) { transition-delay: .1s }
  .vc:nth-child(4) { transition-delay: .2s }
  .vc:nth-child(5) { transition-delay: .2s }
  .vc:nth-child(6) { transition-delay: .3s }
}

/* ── Téléphone (≤ 480px) : 1 colonne avec points latéraux ── */
@media (max-width: 480px) {
  #valeurs { padding: 2.8rem 5% 3rem }

  .val-headline {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    line-height: 1.2;
  }
  .val-head { margin-bottom: 2rem }

  /* Timeline horizontale remplacée par indicateurs compacts */
  .val-track {
    height: 36px;
    margin-bottom: 2rem;
  }
  .val-dot { width: 14px; height: 14px }
  .val-dot-pulse { inset: -4px }
  .val-connectors { display: none }

  /* Cartes : 1 colonne, avec pastille orange numérotée */
  .val-cards {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }
  .vc {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .5s var(--e1), transform .5s var(--e1);
  }
  .vc:last-child { border-bottom: none }
  .vc.vis { opacity: 1; transform: translateX(0) }

  /* Pastille numéro */
  .vc::before {
    content: attr(data-idx);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FF9A4A, var(--orange));
    box-shadow: 0 0 10px rgba(255,107,26,.4);
    font-family: 'Montserrat', sans-serif;
    font-size: .55rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    margin-top: .1rem;
  }

  .vc-title { font-size: .88rem; margin-bottom: .35rem }
  .vc-desc  { font-size: .76rem; line-height: 1.68 }

  /* Stagger rapide mobile */
  .vc:nth-child(1) { transition-delay: .0s }
  .vc:nth-child(2) { transition-delay: .08s}
  .vc:nth-child(3) { transition-delay: .16s}
  .vc:nth-child(4) { transition-delay: .24s}
  .vc:nth-child(5) { transition-delay: .32s}
  .vc:nth-child(6) { transition-delay: .40s}
}

/* ── Petit téléphone (≤ 360px) ── */
@media (max-width: 360px) {
  #valeurs { padding: 2.2rem 4.5% 2.5rem }
  .val-headline { font-size: clamp(1.3rem, 8vw, 1.75rem) }
  .val-track { display: none }
  .vc-title { font-size: .82rem }
  .vc-desc  { font-size: .72rem }
}

/* ── Mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  .vc, .val-headline, .val-dot, .val-connector { transition: none !important; opacity: 1 !important; transform: none !important }
  .val-dot-pulse { animation: none }
  .val-track::after { width: 100% }
}