/* =========================================
   TIMELINE.CSS — work/timeline.html uniquement
   Frise horizontale pilotée par la souris
   ========================================= */

/* Layout : piste horizontale plein écran, axe du temps au centre, présent à gauche, passé à droite */
/* Tokens propres à la timeline (le reste vient de global.css : --bg, --ink, --muted, --nav-h, --pad-x) */
:root{
  --tl-line:#dcdcdc; --tl-ghost:rgba(0,0,0,.05); --card-l:86%;
  --tl-font:'Inter',system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{ --tl-line:#3a3c40; --tl-ghost:rgba(255,255,255,.05); --card-l:24%; }

html,body{height:100%}
body.timeline-page{overflow:hidden}

#stage{position:fixed;inset:0;overflow:hidden;cursor:crosshair;touch-action:none}

/* Année géante en fond */
#bigYear{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);font-weight:700;
  font-size:clamp(140px,30vw,440px);letter-spacing:-.06em;line-height:1;color:var(--tl-ghost);
  font-variant-numeric:tabular-nums;pointer-events:none;user-select:none;white-space:nowrap}

/* Axe */
#axis{position:absolute;left:0;right:0;height:1px;background:var(--tl-line)}
.tick{position:absolute;top:0;width:1px;height:10px;background:var(--tl-line);will-change:transform}
.tick span{position:absolute;top:16px;left:0;transform:translateX(-50%);font:500 12px/1 var(--tl-font);color:var(--muted);font-variant-numeric:tabular-nums}
.tick.decade{height:22px;background:var(--ink)}
.tick.decade span{color:var(--ink);top:28px}

/* Curseur temporel central */
#needle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(to bottom,transparent,var(--ink) 30%,var(--ink) 70%,transparent);opacity:.25;pointer-events:none}

/* Cartes */
.card{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;display:flex;flex-direction:column;gap:8px}
.card .vis{position:relative;border-radius:2px;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px),
    linear-gradient(160deg,hsl(0 0% calc(var(--card-l) + var(--dl) + 3%)),hsl(0 0% calc(var(--card-l) + var(--dl) - 5%)));
  box-shadow:0 1px 0 rgba(0,0,0,.04);transition:box-shadow .25s,outline-color .25s;outline:1px solid transparent}
.card{text-decoration:none;color:inherit}
.card .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;filter:grayscale(1);transition:filter .35s}
.card:hover .vis img{filter:none}
.card:focus-visible .vis{outline:2px solid var(--ink)}
.card .vis b{position:absolute;left:12px;top:10px;font:500 11px/1 var(--tl-font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.55}
.card:hover .vis{outline-color:var(--ink);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.card .meta{display:flex;gap:10px;align-items:baseline;white-space:nowrap}
.card .date{font:500 12px/1 var(--tl-font);color:var(--muted);font-variant-numeric:tabular-nums}
.card .ttl{font:500 14px/1.2 var(--tl-font)}
.card .cat{font:400 12px/1 var(--tl-font);color:var(--muted)}
.card.up{flex-direction:column-reverse}
.card::before{content:"";position:absolute;left:0;width:1px;background:var(--tl-line)}
.card.up::before{top:100%;height:var(--stem)}
.card:not(.up)::before{bottom:100%;height:var(--stem)}

#stage.wide .card .cat{display:none}
#origin,.tl-note{position:absolute;left:0;top:0;margin:0;width:280px;font:400 15px/1.5 var(--tl-font);color:var(--muted);transform-origin:0 0;will-change:transform;text-wrap:balance}
.tl-note--now{width:280px}
.tl-note ul{margin:0 0 12px;padding:0;list-style:none;color:var(--ink)}
.tl-note li{padding:6px 0;border-top:1px solid var(--tl-line);font-size:14px;line-height:1.4}
.tl-note li:last-child{border-bottom:1px solid var(--tl-line)}
.tl-note p{margin:0}
#origin span,.tl-note span{display:block;font:500 12px/1 var(--tl-font);color:var(--ink);margin-bottom:10px}
.card .meta{transform:scale(var(--ms,1));transform-origin:0 0;overflow:hidden}
.card.up .meta{transform-origin:0 100%}
.card .ttl{overflow:hidden;text-overflow:ellipsis}
#stage.tiny .card .meta{visibility:hidden}
#stage.tiny .card .vis b{display:none}
.card .vis b{right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.noimg:hover .vis{outline-color:transparent;box-shadow:none}

/* HUD */
.hud{position:fixed;z-index:5;font-size:12px;color:var(--muted)}
#pagehead{top:calc(var(--nav-h) + 26px);left:24px;display:flex;gap:14px;align-items:baseline}
#pagehead h1{margin:0;font-size:15px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
#tools{top:calc(var(--nav-h) + 20px);right:24px;display:flex;gap:8px}
#tools button{height:32px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--tl-line);background:var(--bg);color:var(--ink);
  font:500 12px/1 var(--tl-font);border-radius:16px;cursor:pointer}
#tools button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
#tools button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}


/* Minimap */
#mini{left:24px;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));height:20px}
#mini .rail{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--tl-line)}
#mini .win{position:absolute;top:4px;height:11px;background:var(--ink);opacity:.15;border-radius:1px}
#mini .dot{position:absolute;top:7px;width:1px;height:5px;background:var(--muted)}
#mini .lab{position:absolute;top:-2px;font:500 11px/1 var(--tl-font);color:var(--muted);font-variant-numeric:tabular-nums}

/* Jauge de vitesse + zoom */
#speed{position:fixed;left:50%;top:calc(var(--nav-h) + 34px);transform:translateX(-50%);display:flex;gap:10px;align-items:center;font:500 11px/1 var(--tl-font);color:var(--muted);z-index:5}
#speed .bar{width:160px;height:3px;background:var(--tl-line);position:relative;border-radius:2px}
#speed .fill{position:absolute;top:0;height:3px;background:var(--ink);border-radius:2px}
#zoomg{right:24px;top:50%;transform:translateY(-50%);height:38vh;width:20px}
#zoomg .rail{position:absolute;left:9px;top:0;bottom:0;width:1px;background:var(--tl-line)}
#zoomg .knob{position:absolute;left:4px;width:11px;height:11px;border-radius:50%;background:var(--ink)}
#zoomg .t,#zoomg .b{position:absolute;right:20px;font:500 11px/1 var(--tl-font);white-space:nowrap}
#zoomg .t{top:-4px}#zoomg .b{bottom:-4px}


@media (max-width:760px){#zoomg,#speed{display:none}#pagehead span{display:none}}