/* ═══════════════════════════════════════════════════════════════════
   PARCOURS — ligne qui se dessine au scroll  (section #parcours)
   Toutes les classes commencent par « pc- » : aucun risque de conflit avec
   Bootstrap, MDB ou tes autres feuilles de style.
   Les couleurs reprennent tes variables (--accent, --accent-soft, --muted, --pad)
   avec une valeur de secours si elles n'existent pas.
   ═══════════════════════════════════════════════════════════════════ */

.pc{
  --pc-blue:var(--accent,#0100f4);
  --pc-soft:var(--accent-soft,#0000ff);
  --pc-muted:var(--muted,#8b8b9e);
  --pc-line:rgba(255,255,255,.16);
  --pc-ease:cubic-bezier(.2,.8,.1,1);
  position:relative;overflow-x:clip;color:#fff;
  padding:2rem var(--pad,clamp(1.25rem,4vw,3.5rem)) 7rem;
}
.pc-track{position:relative;max-width:1400px;margin:0 auto}

/* ---- La ligne (SVG dessiné par le JS) ---- */
.pc-svg{
  position:absolute;
  left:0;top:0;
  pointer-events:none;
  overflow:visible;
  z-index:0
}
.pc-base{
  fill:none;
  stroke:rgba(255,255,255,.2);
  stroke-width:2;
  stroke-dasharray:2 10;
  stroke-linecap:round}   /* tracé pointillé, déjà là */

.pc-fill{
  fill:none;
  stroke:url(#pcg);
  stroke-width:5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(0, 0, 255, 0.85))
}  /* tracé qui se remplit au scroll */

.pc-head .halo{
  fill:rgba(0, 0, 255, 0.973);
  transform-box:fill-box;
  transform-origin:center;
  animation:pc-halo 1.8s ease-in-out infinite
}
.pc-head .core{
  fill:#fff
}
@keyframes pc-halo{50%{transform:scale(1.6);opacity:.25}}

/* ---- Une étape ---- */
.pc-stage{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(88svh,800px)
}
.pc-stage.end{min-height:min(60svh,520px)}
.pc-stage.L{--nx:18%}                      /* point à gauche, texte à droite */
.pc-stage.R{--nx:82%}                      /* point à droite, texte à gauche */

.pc-stage::before{                         /* lueur bleue qui s'allume derrière l'étape */
  content:"";
  position:absolute;
  left:var(--nx);
  top:50%;width:min(70vw,720px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0, 0, 255, 0.32),transparent 65%);
  opacity:0;transition:opacity 1.2s;
  pointer-events:none;
  z-index:0;
}
.pc-stage.on::before{
  opacity:1
}

/* Grande année en contour, en fond */
.pc-year{
  position:absolute;
  top:50%;
  margin-top:-.42em;
  z-index:0;
  pointer-events:none;
  user-select:none;
  font-size:clamp(8rem,24vw,24rem);
  font-weight:900;line-height:.8;
  letter-spacing:-.05em;
 
 /* -webkit-text-stroke:1.5px rgba(255,255,255,.1);*/
  transform:translate3d(0,var(--py,0px),0);
 /* transition:-webkit-text-stroke-color 1s;*/
 transition: all 1s;

}
.pc-stage.L .pc-year{right:2%}
.pc-stage.R .pc-year{
  left:2%
}
.pc-stage.on .pc-year{
  /*-webkit-text-stroke-color:rgba(255, 217, 92, 0.5)*/
   color: #0000fe34;

}

/* Le point (station) : plus il y a d'anneaux autour, plus on a avancé */
.pc-node{
  position:absolute;
  top:50%;
  left:var(--nx);
  width:64px;
  height:64px;
  margin:-32px 0 0 -32px;
  z-index:2;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--bg,#000);
  border:2px solid rgba(255,255,255,.35);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--pc-muted);
  transition:background .6s,border-color .6s,box-shadow .8s,color .4s;
}
.pc-stage.end .pc-node{
  width:44px;
  height:44px;
  margin:-22px 0 0 -22px}
.pc-node i{
  position:absolute;
  inset:calc(var(--r) * -11px);
  border-radius:50%;
  border:1px solid rgba(0, 0, 255, 0.55);
  opacity:0;transform:scale(.7);
  transition:opacity .6s,transform .9s var(--pc-ease);
  transition-delay:calc(var(--r) * .12s);
}
.pc-stage.done .pc-node{
  background:var(--pc-blue);
  border-color:var(--pc-soft);
  color:#fff;
  box-shadow:0 0 44px rgba(1,0,244,.75)
}

.pc-stage.done .pc-node i{
  opacity:1;
  transform:none
}
.pc-node::after{                            /* onde qui se répète sur l'étape en cours */
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid var(--pc-soft);
  opacity:0;pointer-events:none;
}
.pc-stage.cur .pc-node::after{animation:pc-ping 2.2s ease-out infinite}
@keyframes pc-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}

/* Contenu */
.pc-body{position:relative;z-index:1;width:min(56%,44rem)}
.pc-stage.L .pc-body{margin-left:34%}
.pc-stage.R .pc-body{margin-left:4%}

.pc-body > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--pc-ease),transform .9s var(--pc-ease)
}
.pc-stage.on .pc-body > *{
  opacity:1;
  transform:none
}
.pc-stage.on .pc-meta{
  transition-delay:.05s
}
.pc-stage.on .pc-text{transition-delay:.35s}
.pc-stage.on .pc-cta{transition-delay:.55s}
.pc-body > .pc-title,.pc-body > .pc-tags{opacity:1;transform:none}          /* ces deux-là s'animent mot à mot / pastille par pastille */

.pc-meta{
  margin:0 0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.3rem 1.2rem;
  font-size:.85rem;
  font-weight:700
}
.pc-meta span:first-child{
  color:rgb(0, 0, 255) ;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size:.95rem;
}
.pc-meta span:last-child{
  color:rgba(255, 255, 255, 0.496) ;
}

.pc-title{ 
    
    font-weight: 800;
    margin:0;
    letter-spacing : -0.05em;
    line-height:1.02;
    font-size:clamp(2.2rem,5.2vw,4.8rem);
    color:#fff
}
.pc-title .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.12em;
  margin-bottom:-.12em}
  
.pc-title .w i{
  display:inline-block;
  font-style:normal;
  transform:translateY(112%);
  transition:transform .9s var(--pc-ease)}
.pc-stage.on .pc-title .w i{
  transform:none;
  transition-delay:calc(.1s + var(--k) * 80ms)
}

.pc-text{
  margin:1.2rem 0 0;
  max-width:40ch;
  line-height:1.6;
  font-size:clamp(.95rem,1.3vw,1.1rem);
  color:#fff
}

.pc-tags{display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:1.4rem 0 0;
  padding:0
}

.pc-tags li{
  font-size:.8rem;
  font-weight:600;
  padding:.4em .95em;
  border:1px solid var(--pc-line);
  border-radius:999px;
  opacity:0;
  transform:translateY(10px) scale(.95);
  transition:opacity .6s,transform .7s var(--pc-ease);
}
.pc-stage.on .pc-tags li{opacity:1;transform:none;transition-delay:calc(.45s + var(--k) * 70ms)}

.pc-cta{
  display:inline-block;margin-top:1.6rem;padding:.8em 1.6em;border:1px solid var(--pc-line);border-radius:999px;
  font-weight:700;font-size:.9rem;color:#fff;text-decoration:none;transition:background .3s,border-color .3s,opacity .7s var(--pc-ease),transform .9s var(--pc-ease);
}
.pc-cta:hover{background:var(--pc-blue);border-color:var(--pc-soft);color:#fff}

/* ---- Mobile : la ligne devient verticale à gauche, le texte à droite ---- */
@media (max-width:899px){
  .pc-stage{min-height:auto;padding:3.5rem 0}
  .pc-stage.end{min-height:auto}
  .pc-stage.L,.pc-stage.R{--nx:2.4rem}
  .pc-node{width:52px;height:52px;margin:-26px 0 0 -26px}
  .pc-stage.L .pc-body,.pc-stage.R .pc-body{width:auto;margin-left:5.4rem;max-width:34rem}
  .pc-stage.L .pc-year,.pc-stage.R .pc-year{left:auto;right:0;top:2rem;margin-top:0;font-size:clamp(5rem,30vw,9rem)}
  .pc-stage::before{width:120vw}
}

/* Mouvement réduit : tout apparaît sans animation */
@media (prefers-reduced-motion:reduce){
  .pc *{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}