/* =========================================================
   COMPOSANTS — timeline / calendrier, vote
   ========================================================= */

/* Timeline (calendrier) */
.timeline{
  position:relative;
  margin-left:1.2rem;
  padding-left:1.6rem;
  border-left:3px solid var(--border);
}
.timeline-step{ position:relative; padding-bottom:2.2rem; }
.timeline-step:last-child{ padding-bottom:0; }
.timeline-step::before{
  content:"";
  position:absolute; left:-2.05rem; top:.2rem;
  width:1.1rem; height:1.1rem; border-radius:50%;
  background:#fff; border:3px solid var(--border);
}
.timeline-step.done::before{ background:var(--accent); border-color:var(--accent); }
.timeline-step.active::before{
  background:var(--primary); border-color:var(--primary);
  box-shadow:0 0 0 4px var(--info-bg);
}
.timeline-step h3{ font-size:1.05rem; margin-bottom:.15rem; }
.timeline-dates{ color:var(--text-secondary); font-size:.85rem; }

/* Vote */
.vote-counter{
  position:sticky; top:76px; z-index:900;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:.9rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem;
}
.vote-counter.complete{ border-color:var(--accent); background:#F1FAF5; }
.project-vote-card{
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.project-vote-card.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 3px #D3F0DF;
}
.project-vote-card input[type="checkbox"]{ width:1.3rem; height:1.3rem; }
/* Focus clavier visible sur toute la carte, pas seulement sur la
   petite case à cocher — repose sur :focus-within, largement
   supporté (contrairement à :has(), en repli plus fragile). */
.project-vote-card:focus-within{
  outline:3px solid var(--focus-color);
  outline-offset:2px;
  border-color:var(--primary);
}

@media (max-width:767px){
  .vote-counter{ top:64px; }
}

/* =========================================================
   STEPPER HORIZONTAL — vue d'ensemble du calendrier
   ========================================================= */
.stepper-scroll{ overflow-x:auto; padding-bottom:.5rem; margin-bottom:.5rem; }
.stepper-horizontal{
  display:flex;
  min-width:640px;
  list-style:none;
  padding:1rem 0 0;
  margin:0;
}
.stepper-item{
  flex:1;
  min-width:70px;
  text-align:center;
  position:relative;
  padding:0 .35rem;
}
.stepper-item::before{
  content:"";
  position:absolute;
  top:1.1rem;
  left:-50%;
  width:100%;
  height:3px;
  background:var(--border);
  z-index:0;
}
.stepper-item:first-child::before{ content:none; }
.stepper-item.done::before{ background:var(--accent); }
.stepper-circle{
  position:relative; z-index:1;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:#fff; border:3px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto .5rem;
  font-weight:700; font-size:.85rem; color:var(--text-secondary);
}
.stepper-item.done .stepper-circle{ background:var(--accent); border-color:var(--accent); color:#fff; }
.stepper-item.active .stepper-circle{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px var(--info-bg); }
.stepper-label{ font-size:.72rem; font-weight:700; line-height:1.25; display:block; }
.stepper-item.active .stepper-label{ color:var(--primary); }

/* Cartes détaillées des étapes */
.etape-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem;
  height:100%;
}
.etape-card.active-card{ border-color:var(--primary); box-shadow:0 0 0 3px var(--info-bg); }
.etape-card .etape-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--bg); color:var(--primary);
  font-size:1.1rem; margin-bottom:.75rem;
}
.etape-card.done-card .etape-icon{ background:var(--success-bg); color:var(--accent-dark); }
.etape-card.active-card .etape-icon{ background:var(--primary); color:#fff; }
.etape-card h3{ font-size:1rem; margin-bottom:.25rem; }

/* =========================================================
   ACCORDÉON (FAQ) — remplace le bleu Bootstrap par défaut
   ========================================================= */
.accordion-button:not(.collapsed){
  color:var(--primary-dark);
  background-color:var(--info-bg);
  box-shadow:inset 0 -1px 0 var(--border);
}
.accordion-button:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(0,60,121,.15);
}
.accordion-button:not(.collapsed)::after{
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003C79'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-item{ border-color:var(--border); }