/* =========================================================================
   TIMELINE.CSS — Constellation temporelle (section Parcours)
   -------------------------------------------------------------------------
   Ce fichier ne stylise QUE la section #parcours / #constellation.
   Il réutilise les tokens (couleurs, polices) déjà définis dans le <style>
   de index.html : --bg, --gold, --gold-dim, --gold-faint, --marble,
   --marble-dim, --marble-faint, --blue, --serif, --body, --mono.
   ========================================================================= */

/* ---------- bande de domaines (au-dessus de la frise) ----------
   Remplace l'énumération textuelle des terrains traversés. Chaque puce
   dérive lentement (transform posé par timeline.js) ; au survol de la
   bande, toutes reviennent à l'alignement — la transition fait le travail,
   le JS ne calcule rien de plus. */
.domain-band {
  display: flex;
  flex-wrap: nowrap;          /* la bande tient sur une seule ligne */
  justify-content: space-between;
  align-items: flex-start;
  gap: 0 clamp(6px, 2vw, 30px);
  margin: 30px 0 34px;
}
/* Repli de sécurité : en deçà d'une taille de libellé encore lisible,
   timeline.js rend la main et laisse la bande passer à la ligne. */
.domain-band.is-wrapped { flex-wrap: wrap; row-gap: 18px; justify-content: flex-start; }
.domain-band.is-wrapped { gap: 18px clamp(18px, 3vw, 34px); }

.domain-chip {
  all: unset;
  box-sizing: border-box;
  /* libellé sous l'icône : la puce est deux fois plus étroite qu'en ligne,
     ce qui permet de tenir les cinq domaines sur un seul rang. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 2px;
  transform: var(--drift, none);
  transition: transform .5s cubic-bezier(.22,.9,.28,1), color .25s ease;
}
/* survol de la BANDE, pas de la puce : c'est l'ensemble qui se range */
.domain-band:hover .domain-chip,
.domain-band:focus-within .domain-chip { transform: none; }

.domain-icon {
  flex: none;
  width: 33px;   /* +50 % */
  height: 33px;
  color: var(--gold);
  opacity: 0.7;
  transition: opacity .25s ease, color .25s ease;
}
.domain-icon svg {
  width: 100%; height: 100%; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Taille unique pour tous les libellés, calculée par timeline.js d'après la
   place réellement disponible : la valeur ci-dessous n'est que le plafond,
   utilisé tel quel tant que la bande n'est pas à l'étroit. */
.domain-label {
  font-family: var(--mono);
  font-size: var(--chip-fs, 16.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marble-dim);
  white-space: nowrap;
  text-align: center;
  transition: color .25s ease;
}
.domain-chip:hover .domain-icon,
.domain-chip:focus-visible .domain-icon { opacity: 1; }
.domain-chip:hover .domain-label,
.domain-chip:focus-visible .domain-label { color: var(--marble); }
.domain-chip:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.domain-chip[disabled] { cursor: default; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .domain-chip { transform: none; transition: none; }
}

/* ---------- conteneur principal : sort du .wrap pour respirer ---------- */
.constellation-stage {
  position: relative;
  margin-top: 34px;
}
.constellation {
  position: relative;
  width: 100%;
  /* Hauteur de repli seulement : timeline.js la recalcule au chargement à
     partir du nombre de couloirs réellement occupés, pour qu'aucun libellé
     ne puisse sortir du cadre. */
  height: 440px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* le pan horizontal est géré à la main, le vertical reste natif */
  -webkit-user-select: none;
  user-select: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,175,55,0.05), transparent 70%);
}
.constellation.is-dragging { cursor: grabbing; }
.constellation:focus-within { outline: none; }

/* petit champ d'étoiles discret en fond, purement décoratif */
.constellation::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(236,233,226,0.25), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(236,233,226,0.18), transparent),
    radial-gradient(1px 1px at 50% 15%, rgba(212,175,55,0.25), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(236,233,226,0.2), transparent),
    radial-gradient(1px 1px at 85% 35%, rgba(212,175,55,0.2), transparent),
    radial-gradient(1px 1px at 95% 60%, rgba(236,233,226,0.15), transparent);
  z-index: 0;
}

.constellation-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* la piste large qui se déplace via transform: translate3d() + scale() */
.constellation-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 0 50%;
}

/* fil continu (ex : activité longue comme l'Animation 2013–2026) */
.constellation-thread {
  position: absolute;
  height: 0;
  border-top: 1px dashed rgba(111,168,220,0.3);
  opacity: 0;
  transition: opacity .6s ease .3s;
}
.constellation.in-view .constellation-thread { opacity: 1; }
/* ---------- bande de durée (une par expérience) ----------
   Matérialise l'étalement réel d'une étape dans le temps. Deux bandes qui
   se chevauchent sont placées sur deux couloirs différents par le moteur :
   c'est ce qui rend lisibles les activités menées en parallèle. */
.node-span {
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: var(--gold-dim);
  transform: translateY(-50%);
  transform-origin: left center;
  opacity: 0;
  transition: opacity .6s ease .2s;
  pointer-events: none;
}
.node-span--formation { background: rgba(111,168,220,0.35); }
.constellation.in-view .node-span { opacity: 1; }

/* amorce reliant un libellé descendu d'une rangée à son marqueur */
.node-lead {
  position: absolute;
  width: 1px;
  background: var(--marble-faint);
  opacity: 0;
  transition: opacity .6s ease .3s;
  pointer-events: none;
  z-index: 1;
}
.constellation.in-view .node-lead { opacity: 1; }

/* connecteur entre deux postes successifs chez un même employeur */
.node-link {
  position: absolute;
  height: 0;
  border-top: 1px dashed var(--gold-dim);
  opacity: 0;
  transition: opacity .6s ease .3s;
  pointer-events: none;
}
.constellation.in-view .node-link { opacity: 1; }

/* ---------- nœuds ---------- */
.node {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: var(--mid, 50%);
  left: 0;
  /* Le marqueur est posé sur la date exacte, quel que soit le côté où part
     le libellé : --label-shift ramène le bloc vers la gauche de sa propre
     largeur quand le texte se lit vers la gauche, pour que le marqueur
     retombe sur --x. */
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translateX(var(--label-shift, 0)) scale(0.4);
  transform-origin: left center;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .5s ease, transform .35s cubic-bezier(.2,.9,.3,1.3);
  z-index: 2;
  /* La boîte du bouton est bien plus large que ce qu'on voit : elle englobe
     le libellé, la gouttière, et — quand le texte part à gauche ou descend
     d'une rangée — des zones entièrement vides. Laissée sensible, elle
     recouvrait ses voisins et confisquait leurs clics (BAFA devenait
     inatteignable derrière Bac STI2D). On neutralise donc le conteneur et
     on ne rend cliquable que ce qui est réellement dessiné : deux étapes ne
     peuvent plus se voler un clic sans se chevaucher visuellement. */
  pointer-events: none;
}
.node-marker,
.node-dot,
.node-title,
.node-date {
  pointer-events: auto;
  cursor: pointer;
}
.node.is-visible { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) translateX(var(--label-shift, 0)) scale(1); }

/* ---------- marqueur ----------
   L'icône du type d'étape EST le repère posé sur la frise : un point
   générique en plus n'aurait rien ajouté qu'elle ne dise déjà. */
.node-marker {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--gold);
  transition: color .3s ease, transform .3s ease, filter .3s ease;
}
.node--formation .node-marker { color: var(--blue); }
.node-marker svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node:hover .node-marker,
.node:focus-visible .node-marker,
.node.is-open .node-marker {
  transform: scale(1.18);
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.45));
}
.node--formation:hover .node-marker,
.node--formation:focus-visible .node-marker,
.node--formation.is-open .node-marker {
  filter: drop-shadow(0 0 8px rgba(111,168,220,0.45));
}
.node--today .node-marker { width: 28px; height: 28px; }

/* ---------- point (occurrences du fil Animation) ---------- */
.node-dot {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--gold);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.node:hover .node-dot,
.node:focus-visible .node-dot,
.node.is-open .node-dot {
  transform: scale(1.4);
  box-shadow: 0 0 18px 4px rgba(212,175,55,0.35);
}

.node:focus-visible { outline: none; }
.node:focus-visible .node-marker,
.node:focus-visible .node-dot { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- libellé (titre + date) ----------
   --label-dy décale verticalement le seul libellé, sans bouger le marqueur :
   c'est ce qui permet à deux dates très proches (juillet et août 2026) de
   rester chacune à sa place exacte sans que leurs textes se recouvrent. */
.node-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  transform: translateY(var(--label-dy, 0));
  pointer-events: none;
}

/* Libellé posé à GAUCHE du marqueur : on inverse l'ordre des éléments et
   l'alignement du texte, pour que le libellé se termine au marqueur au lieu
   d'en partir. Deux marqueurs très proches tiennent ainsi sur la même
   ligne, l'un lisant vers la gauche, l'autre vers la droite. */
.node--label-left {
  flex-direction: row-reverse;
  transform-origin: right center;
  --label-shift: calc(-100% + 24px); /* largeur du marqueur */
}
.node--label-left.node--mini { --label-shift: calc(-100% + 14px); } /* largeur du point */
.node--label-left .node-label { align-items: flex-end; }

/* titre compact du poste/de l'étape : c'est désormais le libellé principal
   sur la frise (la date passe en information secondaire, voir .node-date). */
.node-title {
  font-family: var(--body);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--marble-dim);
  white-space: nowrap;
  line-height: 1.15;
  transition: opacity .25s ease, color .25s ease;
}
.node:hover .node-title,
.node:focus-visible .node-title,
.node.is-open .node-title {
  color: var(--marble);
}

.node-date {
  font-family: var(--mono);
  font-size: 15.5px;
  letter-spacing: 0.04em;
  color: var(--marble-dim);
  white-space: nowrap;
  /* remontée d'opacité : à 0.7 sur fond presque noir, la date décrochait
     du titre au point de se lire difficilement */
  opacity: 0.85;
  line-height: 1.15;
  transition: opacity .25s ease, color .25s ease;
}
.node:hover .node-date,
.node:focus-visible .node-date,
.node.is-open .node-date {
  opacity: 1;
  color: var(--gold);
}
.node--formation:hover .node-date,
.node--formation:focus-visible .node-date,
.node--formation.is-open .node-date {
  color: var(--blue);
}

/* occurrences du fil Animation : plus discrètes que les étapes principales,
   mais assez grandes pour rester lisibles et cliquables. */
.node--mini .node-title { font-size: 15px; }
.node--mini .node-date { font-size: 13px; opacity: 0.6; }
.node--mini:hover .node-date,
.node--mini:focus-visible .node-date,
.node--mini.is-open .node-date { opacity: 1; }

/* cross-highlight quand une compétence est survolée dans la carte ouverte */
.node.tag-match .node-dot { border-color: var(--gold); transform: scale(1.35); }
.node.tag-match .node-marker { color: var(--gold); opacity: 1; transform: scale(1.2); }
.node.tag-dim { opacity: 0.25; }

/* ---------- fondus de bord (indiquent qu'on peut naviguer) ---------- */
.constellation-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 3;
}
.constellation-fade--left  { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.constellation-fade--right { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

/* ---------- flèches de navigation ---------- */
.constellation-nav { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.constellation-arrow {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--marble-faint);
  border-radius: 50%;
  color: var(--marble-dim);
  font-size: 18px;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(11,11,11,0.5);
  backdrop-filter: blur(6px);
  transition: border-color .25s, color .25s, background .25s;
}
.constellation-arrow:hover,
.constellation-arrow:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  outline: none;
}
.constellation-arrow--left  { left: 14px; }
.constellation-arrow--right { right: 14px; }

/* ---------- carte détaillée ---------- */
.constellation-card {
  position: absolute;
  z-index: 10;
  width: min(340px, calc(100% - 32px));
  /* La carte s'ouvre toujours en haut de la frise (voir positionCard).
     Son plafond de hauteur est posé en JS — un pourcentage ne se résoudrait
     pas ici, le conteneur ayant une hauteur automatique — pour faire défiler
     l'intérieur plutôt que déborder sur la section suivante. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--gold-dim) transparent;
  background: #101010;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  padding: 22px 24px;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.constellation-card.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---- mode "panneau latéral" (pendant la mise en avant d'une compétence) ----
   La carte quitte sa position flottante près du point pour devenir un panneau
   fixe, ancré au bord droit de .constellation, sur toute sa hauteur. Comme
   c'est un changement de mise en page (position/largeur/hauteur), on ne
   l'anime pas directement : .is-docked bascule instantanément (saut sans
   transition), puis .is-docked-in est ajoutée une frame plus tard pour ne
   faire glisser/apparaître que l'opacité et le déplacement horizontal. */
.constellation-card.is-docked {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 42%);
  max-width: none;
  height: auto;
  overflow-y: auto;
  border-radius: 0;
  border-width: 0 0 0 1px;
  box-shadow: -20px 0 50px rgba(0,0,0,0.5);
  transform: translateX(24px);
  opacity: 0;
}
.constellation-card.is-open.is-docked.is-docked-in {
  transform: translateX(0);
  opacity: 1;
}

.constellation-card-close {
  all: unset;
  position: absolute;
  top: 12px; right: 14px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--marble-dim);
  cursor: pointer;
  border-radius: 50%;
  transition: color .2s, background .2s;
}
.constellation-card-close:hover,
.constellation-card-close:focus-visible {
  color: var(--gold);
  background: var(--gold-faint);
  outline: none;
}

.constellation-card-content .cc-place {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marble-dim);
  display: block;
  margin-bottom: 4px;
}
.constellation-card-content .cc-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  display: block;
  margin-bottom: 10px;
}
.constellation-card-content h3 {
  font-family: var(--title);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--marble);
  margin: 0 0 14px;
  padding-right: 20px;
}
.constellation-card-content .cc-block { margin-top: 14px; }
.constellation-card-content .cc-block:first-of-type { margin-top: 0; }
.constellation-card-content .cc-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 5px;
}
.constellation-card-content p {
  font-size: 0.92rem;
  color: var(--marble-dim);
  margin: 0;
  line-height: 1.6;
}
.cc-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-skill {
  all: unset;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--blue);
  border: 1px solid rgba(111,168,220,0.35);
  padding: 5px 9px;
  border-radius: 2px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.cc-skill:hover, .cc-skill:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-faint);
  outline: none;
}
.cc-skill[aria-pressed="true"] {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- fallback sans JS ---------- */
.constellation-noscript {
  position: relative;
  z-index: 5;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 28px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--marble-dim);
}

/* ---------- accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .constellation-track,
  .node,
  .node-span,
  .node-link,
  .constellation-thread,
  .constellation-card { transition: none !important; }
}

/* ---------- responsive ----------
   La hauteur n'est plus redéfinie ici : elle est calculée par timeline.js
   à partir du nombre de couloirs, et reste donc valable à toute largeur. */
@media (max-width: 720px) {
  .constellation-stage { margin-top: 40px; }
  .constellation-arrow { width: 34px; height: 34px; font-size: 16px; }
  .constellation-fade { width: 50px; }
  .constellation-card { padding: 18px 20px; }
  .node-title { font-size: 15px; }
  .node-date { font-size: 11px; }
  .node-marker { width: 19px; height: 19px; }
  .node-dot { width: 11px; height: 11px; }
}