/* Lagrange · Au long cours (V14)
   Une nuit de 46 heures qu'on fait défiler de gauche à droite. Le ciel, la grange et la foule
   sont dessinés dans un seul canvas (app.js) ; le texte reste du HTML, par-dessus. */

:root{
  --display:'Archivo',sans-serif; --body:'Instrument Sans',sans-serif; --mono:'DM Mono',monospace;
  --h:220px;            /* largeur d'une heure */
  --halo:rgba(7,6,13,.9);
  --ink:#EDEAF6; --dim:#8D86A8; --beam:#6B5CFF; --oak:#8A6A45;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#07060D;color:var(--ink);
  font-family:var(--body);-webkit-font-smoothing:antialiased}

/* ---------- le monde : ciel, paysage, grange, foule ---------- */
.monde{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* la boîte de la grange : invisible, elle sert de gabarit au dessin */
.barn{position:fixed;left:50%;bottom:19%;transform:translateX(-50%);z-index:-1;
  width:min(1200px,92vw);height:min(46vh,470px);visibility:hidden;pointer-events:none}

/* ---------- barre ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:30;min-height:64px;display:flex;align-items:flex-start;
  gap:1rem;padding:.9rem clamp(1rem,4vw,3rem) 0;
  background:linear-gradient(to bottom,var(--voile,rgba(0,0,0,.5)),transparent);pointer-events:none}
.bar__g{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.mark{margin:0;text-shadow:0 1px 14px var(--halo);font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 700;font-weight:700;
  font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.2}
.ciel{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim);
  text-shadow:0 1px 12px var(--halo)}
.ciel button{pointer-events:auto;font:inherit;letter-spacing:inherit;color:var(--dim);background:none;
  border:0;padding:.1rem 0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:.3em;text-shadow:inherit}
.ciel button:hover{color:var(--ink)}
.ciel button[aria-pressed=true]{color:var(--ink);text-decoration-color:var(--beam)}
.ciel button:focus-visible,.canal:focus-visible,.end a:focus-visible,.track:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.canal{pointer-events:auto;margin-left:auto;align-self:center;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:.42rem .8rem;border:1px solid var(--beam);border-radius:999px;
  background:rgba(107,92,255,.14);text-shadow:0 1px 12px var(--halo)}
.canal:hover{background:rgba(107,92,255,.32)}
.readout{text-shadow:0 1px 14px var(--halo);font-family:var(--mono);font-size:.78rem;color:var(--ink);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;text-align:right;line-height:1.35}
.readout b{display:block;font-weight:500;font-size:.95rem}
.readout span{color:var(--dim)}

/* ---------- la piste ---------- */
.track{position:absolute;inset:0;z-index:5;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}
.track::-webkit-scrollbar{display:none}
.strip{position:relative;height:100%;width:calc(var(--h) * 47.5 + 90vw)}

/* ---------- graduations ---------- */
.ticks{position:absolute;left:0;right:0;bottom:19%;height:1px;background:rgba(255,255,255,.14)}
.tick{position:absolute;bottom:19%;width:1px;height:10px;background:rgba(255,255,255,.18)}
.tick.maj{height:26px;background:rgba(255,255,255,.4)}
.tick .lab{position:absolute;left:0;bottom:-2.1rem;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--dim);text-shadow:0 1px 10px var(--halo)}

/* ---------- les phases ---------- */
.phase{position:absolute;top:17%;width:calc(var(--h) * 3.5);padding-right:1.5rem}
.phase .hh{text-shadow:0 1px 16px var(--halo);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase;margin:0 0 .5rem}
.phase h2{text-shadow:0 2px 26px var(--halo),0 1px 8px var(--halo);font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(1.6rem,3.2vw,2.9rem);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 .8rem}
.phase p{text-shadow:0 1px 16px var(--halo);margin:0;max-width:30ch;font-size:clamp(.9rem,1vw,1.02rem);line-height:1.55;
  color:var(--ink);opacity:.86}
.phase .hh{opacity:1;color:var(--dim)}

/* ---------- le ruban des créneaux DJ ---------- */
.slots{position:absolute;bottom:9.2%;left:0;height:48px}
.slot{position:absolute;top:0;height:46px;border-left:1px solid var(--beam);
  padding:.35rem 0 0 .5rem;transition:opacity .3s}
.slot b{display:block;font-family:var(--display);font-variation-settings:'wdth' 104,'wght' 640;
  font-size:clamp(.82rem,1.25vw,1.18rem);text-transform:uppercase;letter-spacing:-.01em;
  text-shadow:0 1px 14px var(--halo);white-space:nowrap}
.slot i{font-family:var(--mono);font-size:.62rem;font-style:normal;letter-spacing:.08em;
  color:var(--dim);text-shadow:0 1px 12px var(--halo);white-space:nowrap}
.slot::after{content:'';position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(to right,rgba(107,92,255,.18),transparent);pointer-events:none}
.slots__tag{position:absolute;bottom:calc(9.2% + 16px);left:calc(var(--h) * 12.9);margin:0;max-width:calc(var(--h) * 3.2);line-height:1.5;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-shadow:0 1px 12px var(--halo)}

/* ---------- la bande d'artistes ---------- */
.names{position:absolute;bottom:3%;left:0;margin:0;display:flex;align-items:baseline;gap:0 1.1rem;
  white-space:nowrap;padding-left:calc(var(--h) * 1.2)}
.names li{text-shadow:0 1px 16px var(--halo);list-style:none;font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 620;font-size:clamp(.95rem,1.45vw,1.4rem);
  text-transform:uppercase;letter-spacing:-.01em;opacity:.5;transition:opacity .3s,color .3s}
.names li:hover,.names li.vu{opacity:1}
.names li:hover{color:var(--beam)}
.names li+li::before{content:'·';color:var(--beam);margin-right:1.1rem;opacity:.7;font-family:var(--body)}
.names__tag{text-shadow:0 1px 14px var(--halo);position:absolute;bottom:calc(3% + 2rem);left:calc(var(--h) * 1.2);margin:0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ---------- fin ---------- */
.end{position:absolute;top:47%;transform:translateY(-50%);
  left:calc(var(--h) * 47.5);width:46ch;max-width:84vw}
.end h2{font-family:var(--display);font-variation-settings:'wdth' 114,'wght' 740;
  font-size:clamp(1.7rem,3.4vw,3rem);line-height:1;margin:0 0 1rem;letter-spacing:-.02em;
  text-shadow:0 2px 26px var(--halo)}
.end p{opacity:.86;margin:0 0 1.6rem;text-shadow:0 1px 16px var(--halo)}
.end__btn{display:inline-block;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.8rem 1.4rem;border-radius:999px;text-decoration:none;
  background:var(--beam);color:#fff}
.end__btn:hover{filter:brightness(1.15)}
.end__k{margin:2.2rem 0 .5rem!important;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.cols{margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .9rem;list-style:none;
  font-family:var(--display);font-variation-settings:'wdth' 104,'wght' 600;font-size:.95rem;text-transform:uppercase}
.cols li{text-shadow:0 1px 14px var(--halo)}
.end__pied{font-family:var(--mono);font-size:.66rem!important;letter-spacing:.06em;color:var(--dim);line-height:1.7}
.end__pied a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--beam);text-underline-offset:.25em}

/* ---------- aide ---------- */
.hint{position:fixed;left:50%;bottom:calc(19% - 2.35rem);transform:translateX(-50%);z-index:30;margin:0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);pointer-events:none;transition:opacity .6s;text-shadow:0 1px 12px var(--halo)}
.hint.gone{opacity:0}

@media (max-width:720px){
  :root{--h:132px}
  .bar{padding-top:.7rem;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'g canal' 'g lecture';gap:.35rem .6rem}
  .bar__g{grid-area:g}
  .canal{grid-area:canal;margin-left:0;justify-self:end}
  .readout{grid-area:lecture}
  .ciel{font-size:.58rem;gap:.1rem .45rem}
  .ciel__k{flex-basis:100%}
  .canal{font-size:.62rem;padding:.34rem .6rem}
  .readout{font-size:.64rem;max-width:44vw}
  .hint{bottom:calc(9% + 52px);font-size:.58rem;white-space:nowrap}
  .readout b{font-size:.82rem}
  .phase{width:min(calc(var(--h) * 5), 72vw);top:16%}
  .phase h2{font-size:1.65rem}
  .phase p{font-size:.88rem;line-height:1.5;max-width:100%}
  .barn{height:30vh;bottom:25%}
  .ticks{bottom:22%}
  .tick{bottom:22%}
  .tick .lab{font-size:.58rem;bottom:-1.8rem}
  .slots{bottom:9%;height:52px}
  .slot{height:46px}
  .slots__tag{display:none}
  .names{bottom:2%}
  .names__tag{display:none}
  .end{width:min(40ch,84vw)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }