/* ============================================================
   MON PARCOURS : frise horizontale à règle (inspirée de la chronologie d'ElevenLabs). Voir js/parcours.js.
   Une règle graduée défile derrière un repère fixe au centre ; l'étape active affiche titre, texte et date.
   ============================================================ */
.parcours{max-width:var(--max);margin-inline:auto;padding:var(--sy) var(--page-x)}
.parcours-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--head-gap)}
.parcours-head h2{margin:0;font-weight:600;font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head)}

.tl{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 136px auto;align-items:center;gap:0 var(--sp-4);
  padding:var(--card-pad-lg) var(--card-pad);border-radius:var(--r-card);background:var(--panel);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);user-select:none;-webkit-user-select:none}
.tl-title{grid-column:2;grid-row:1;margin:0 0 var(--sp-3);text-align:center;font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em;color:var(--foreground)}
.tl-arrow{grid-row:2;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--foreground);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.06);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.tl-arrow:hover:not(:disabled){transform:scale(1.06)}
.tl-arrow:disabled{opacity:.35;cursor:default}
.tl-arrow:focus-visible{outline:2px solid #000;outline-offset:3px}
.tl-arrow svg{width:7px;height:13px}
.tl-prev{grid-column:1}.tl-next{grid-column:3}

/* la règle : un rail qui défile ; ses extrémités s'effacent */
.tl-rule{grid-column:2;grid-row:2;position:relative;height:100%;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.tl-rule:active{cursor:grabbing}
.tl-rule:focus-visible .tl-mark{box-shadow:0 0 0 2px #000}
.tl-track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;will-change:transform;transition:transform .6s var(--ease)}
.tl-tick{flex:none;width:2px;margin-inline:3px;height:var(--h,10px);border-radius:1px;background:#d8d7d3;transition:height .5s var(--ease),background-color .3s var(--ease)}
.tl-tick.major{background:#2b2b2a}
.tl-rule.dragging .tl-track,.tl-rule.dragging .tl-tick{transition:none}
/* repère central, fixe : une capsule claire avec un trait noir */
.tl-mark{position:absolute;left:50%;top:50%;width:20px;height:128px;transform:translate(-50%,-50%);border-radius:10px;pointer-events:none;
  background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tl-mark::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;border-radius:1px;background:#000}

.tl-copy{grid-column:2;grid-row:3;margin-top:var(--sp-3);text-align:center;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.tl-copy.swap{opacity:0;transform:translateY(4px)}
.tl-text{margin:0 auto;max-width:34ch;font-size:var(--fs-small);line-height:1.4;letter-spacing:-.005em;color:var(--foreground);text-wrap:balance}
.tl-date{margin:var(--sp-2) 0 0;font-size:var(--fs-small);color:var(--muted-foreground);min-height:1.4em}
.tl-count{position:absolute;left:var(--card-pad);top:var(--sp-4);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted-foreground)}

@media (max-width:640px){
  .tl{gap:0 var(--sp-2);padding-inline:var(--sp-3)}
  .tl-arrow{width:36px;height:36px}
  .tl-mark{height:112px}
}
@media (prefers-reduced-motion:reduce){.tl-track,.tl-tick,.tl-copy,.tl-arrow{transition:none}}

/* interrupteur Frise / Liste (boutons noir et blanc comme le reste du site) */
.tl[hidden],.tl-list[hidden]{display:none}
.tl-switch{flex:none;display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--panel);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.tl-switch button{height:36px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted-foreground);font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.tl-switch button:hover{color:var(--foreground)}
.tl-switch button[aria-pressed="true"]{background:#000;color:#fff}
.tl-switch button:focus-visible{outline:2px solid #000;outline-offset:2px}

/* affichage liste : toutes les étapes, même style de filets que les coordonnées */
.tl-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--muted)}
.tl-list li{display:grid;grid-template-columns:minmax(96px,160px) minmax(0,1fr);gap:var(--sp-3) var(--col-gap);padding:var(--sp-5) 0;border-bottom:1px solid var(--muted)}
.tl-li-date{padding-top:4px;font-size:var(--fs-small);color:var(--muted-foreground)}
.tl-list h3{margin:0 0 var(--sp-2);font-weight:600;font-size:var(--fs-card);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
.tl-list p{margin:0;max-width:60ch;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--muted-foreground)}
@media (max-width:640px){.tl-list li{grid-template-columns:1fr;gap:var(--sp-1)}.tl-li-date{order:-1;padding-top:0}}

/* arrivée par une ancre (#parcours, #competences) : la barre fixe ne cache pas le titre */
.parcours,.skills{scroll-margin-top:84px}

/* dans le panneau « À propos » de la barre du haut */
.pbar-content .tl{margin:0 0 var(--sp-5)}

/* toute la carte grise se saisit : le doigt ou la souris peut la faire glisser n'importe où (sauf sur les flèches) */
.tl{cursor:grab;touch-action:pan-y}
.tl.grabbing,.tl.grabbing *{cursor:grabbing}
.tl-arrow{cursor:pointer}
.tl-arrow:disabled{cursor:default}

/* outils de l'en-tête : bouton CV (si un CV est renseigné dans CONTACT) + interrupteur Frise / Liste */
.parcours-tools{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end}
.tl-cv{display:inline-flex;align-items:center;height:44px;padding:0 var(--sp-5);border-radius:var(--r-pill);background:#000;color:#fff;font-size:var(--fs-small);font-weight:600;text-decoration:none;transition:background-color .2s var(--ease)}
.tl-cv:hover{background:#333}
.tl-cv:focus-visible{outline:2px solid #000;outline-offset:3px}
@media (max-width:640px){.parcours-head{flex-wrap:wrap}.parcours-tools{justify-content:flex-start}}

/* version compacte dans le panneau de la barre du haut : moins haute (règle de 88 px au lieu de 136, marges réduites, texte sur une ligne) */
.pbar-content .tl{grid-template-rows:auto 88px auto;padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.pbar-content .tl-title{margin-bottom:var(--sp-2)}
.pbar-content .tl-mark{height:80px}
.pbar-content .tl-copy{margin-top:var(--sp-2)}
.pbar-content .tl-text{max-width:72ch}
.pbar-content .tl-date{margin-top:var(--sp-1)}
@media (max-width:640px){.pbar-content .tl{padding-inline:var(--sp-3)}.pbar-content .tl-mark{height:76px}}