/* World models · Toulouse IA
   Couleurs du kit (encre, papier, sombre, brique). Échelle de gris proposée ici,
   dérivée du blanc et de l'encre par opacité : 100 %, 74 %, 50 %. */
:root{
  --ink:#14120F; --paper:#FFFFFF; --dark:#14161A; --brick:#A8442A;
  --bg:var(--dark); --fg:#FFFFFF; --fg2:rgba(255,255,255,.74); --fg3:rgba(255,255,255,.5); --line:rgba(255,255,255,.22);
  --u:min(1vw,1.85vh);
  --t-title:4.6; --t-big:3.3; --t-line:1.9; --t-by:1.35; --t-note:1.25;
  --side:calc(5.4*var(--u));
}
body[data-theme="light"]{ --bg:#FFFFFF; --fg:var(--ink); --fg2:rgba(20,18,15,.74); --fg3:rgba(20,18,15,.52); --line:rgba(20,18,15,.2) }

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Archivo',system-ui,sans-serif; font-weight:400; font-stretch:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .7s ease, color .7s ease;
  cursor:default; user-select:none; -webkit-user-select:none; touch-action:none;
}
#world{position:fixed;inset:0;width:100vw;height:100vh;display:block}

/* ---------- HUD */
.hud{position:fixed;left:0;right:0;z-index:3;pointer-events:none}
.hud.top{top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(3.4*var(--u)) var(--side) 0}
#date{
  font-size:calc(1.55*var(--u)); font-weight:560; font-stretch:82%; letter-spacing:.04em; text-transform:uppercase;
  color:var(--fg); display:flex; align-items:center; gap:.8em; min-height:1.2em;
  transition:opacity .4s;
}
#date::before{content:"";display:block;width:calc(2.6*var(--u));height:2px;background:var(--brick)}
#date:empty{opacity:0}
#date .roll{display:inline-block;animation:roll .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes roll{from{opacity:0;transform:translateY(-.5em);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
#count{font-size:calc(1.05*var(--u)); font-weight:500; font-stretch:80%; letter-spacing:.12em; color:var(--fg3); font-variant-numeric:tabular-nums}
#count b{color:var(--fg);font-weight:600}

.hud.bottom{bottom:0;height:calc(6.6*var(--u));padding:0 var(--side)}
#ruler{position:absolute;left:var(--side);right:var(--side);bottom:calc(2.6*var(--u));width:calc(100% - 2*var(--side));height:calc(1.7*var(--u));opacity:0;transition:opacity .5s}
body.ruler #ruler{opacity:1}
#rulerLabel{position:absolute;right:var(--side);bottom:calc(4.6*var(--u));font-size:calc(1.05*var(--u));font-weight:500;font-stretch:84%;letter-spacing:.06em;color:var(--fg2);opacity:0;transition:opacity .5s;font-variant-numeric:tabular-nums;text-align:right}
body.ruler #rulerLabel{opacity:1}
#hint{
  position:absolute; left:var(--side); bottom:calc(2.2*var(--u)); pointer-events:auto;
  background:none; border:0; padding:.3em 0; color:var(--fg3); font:inherit; font-size:calc(.95*var(--u)); font-stretch:84%; letter-spacing:.06em;
  cursor:pointer; opacity:.55; transition:opacity .3s;
}
#hint:hover,#hint:focus-visible{opacity:1}
body.ruler #hint{opacity:0;pointer-events:none}

kbd{
  font:inherit; font-weight:600; font-stretch:88%; font-size:.86em; letter-spacing:.02em;
  display:inline-block; min-width:1.7em; text-align:center; padding:.14em .45em .1em;
  border:1.5px solid currentColor; border-radius:.28em; line-height:1.15;
}

/* ---------- étapes */
#steps{position:fixed;inset:0;z-index:2;pointer-events:none}
.step{
  position:absolute; left:var(--side); top:0; bottom:0; width:calc(36*var(--u));
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(10*var(--u)) 0 calc(9*var(--u));
  visibility:hidden; opacity:0; transition:opacity .3s ease, visibility 0s linear .3s;
}
.step.on{visibility:visible;opacity:1;transition:opacity .2s ease}
.step .l{opacity:0;transform:translateY(.5em);transition:opacity .25s ease, transform .25s ease}
.step.on .l{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(.32s + var(--i,0)*.12s), transform 1s cubic-bezier(.2,.7,.2,1) calc(.32s + var(--i,0)*.12s);
}
.step a,.step button{pointer-events:auto}
.step p{margin:0}

.name{font-size:calc(var(--t-title)*var(--u));font-weight:260;font-stretch:112%;line-height:.98;letter-spacing:-.012em;margin:0;text-wrap:balance}
.name.hero{font-size:calc(8.4*var(--u));font-weight:220;letter-spacing:-.025em;line-height:.92;margin:.18em 0 .1em}
.by{font-size:calc(var(--t-by)*var(--u));font-weight:470;font-stretch:90%;color:var(--fg2);margin:.6em 0 1.5em!important;letter-spacing:.01em}
.say{font-size:calc(var(--t-line)*var(--u));font-weight:370;line-height:1.24;margin:0 0 .6em!important;text-wrap:pretty}
.say.strong{font-weight:560}
.name + .say{margin-top:.75em!important}
.name.long{white-space:nowrap;font-size:calc(var(--t-title)*.82*var(--u))}
.say b{font-weight:640;color:var(--fg);box-shadow:inset 0 -.14em 0 var(--brick)}
.note{font-size:calc(var(--t-note)*var(--u));font-weight:420;color:var(--fg3);line-height:1.35;margin-top:.5em!important;text-wrap:pretty}
.kicker{font-size:calc(1.3*var(--u));font-weight:560;font-stretch:84%;letter-spacing:.1em;text-transform:uppercase;color:var(--brick);margin-bottom:1em!important}
.big{font-size:calc(var(--t-big)*var(--u));font-weight:300;font-stretch:106%;line-height:1.12;letter-spacing:-.01em;margin:0 0 .45em!important;text-wrap:balance}
.big.soft{font-weight:560;font-stretch:100%}
.links{margin-top:1.3em!important;display:flex;flex-wrap:wrap;gap:.4em 1.6em}
.go{
  display:inline-flex; align-items:center; gap:.35em; color:var(--fg); text-decoration:none;
  font-size:calc(1.12*var(--u)); font-weight:520; font-stretch:90%; letter-spacing:.02em;
  padding:.25em 0; border-bottom:2px solid var(--brick);
}
.go:hover{color:var(--brick)}
.go.inline{font-size:1em;padding:0;margin-left:.3em}
.ar{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}

.lockup{height:calc(3.6*var(--u));width:auto;align-self:flex-start;margin-left:calc(-.62*var(--u))}

/* ouverture et définition, le texte vit dans le ciel */
.step[data-layout="sky"]{justify-content:flex-start;padding-top:calc(10.5*var(--u));width:calc(70*var(--u))}
.step[data-layout="sky"] .say{font-size:calc(2.4*var(--u));font-weight:330;color:var(--fg)}
.step[data-layout="sky"] .note{font-size:calc(1.35*var(--u))}
.step[data-layout="sky"] .lockup{margin-bottom:calc(1.2*var(--u))}

/* Oasis en direct, le texte passe à droite */
.step[data-layout="flip"]{left:auto;right:var(--side);width:calc(34*var(--u))}
.keys{list-style:none;padding:0;margin:.4em 0 0;display:flex;flex-wrap:wrap;gap:.6em 1.4em;font-size:calc(1.35*var(--u));color:var(--fg2)}
.keys kbd{color:var(--fg);margin-right:.35em}
.play{
  display:inline-flex; align-items:center; gap:.7em; text-decoration:none; color:var(--fg);
  font-size:calc(1.9*var(--u)); font-weight:560; font-stretch:96%;
  padding:.5em .9em .5em .55em; border:2px solid var(--brick); border-radius:.3em;
  transition:background-color .2s;
}
.play kbd{font-size:1.05em;min-width:1.8em;border-color:var(--brick);color:var(--fg)}
.play:hover{background:rgba(168,68,42,.16)}
.play .ar{width:.7em;height:.7em}
.step.on .play{animation:breathe 3.2s ease-in-out 2s infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(168,68,42,0)}50%{box-shadow:0 0 0 .35em rgba(168,68,42,.22)}}

/* 27 octobre 2026, deux moitiés */
.step[data-layout="split"]{left:0;right:0;width:auto;padding:0;display:block}
.step[data-layout="split"] .center{position:absolute;left:0;right:0;top:calc(4*var(--u));text-align:center;font-size:calc(1.2*var(--u))}
.center span{background:var(--bg);padding:.3em .9em}
.half{position:absolute;bottom:calc(7*var(--u));width:calc(38*var(--u))}
.half.left{left:var(--side)}
.half.right{right:var(--side);text-align:right}
.half.right .links{justify-content:flex-end}
.half .name{font-size:calc(3.8*var(--u))}
.half .by{margin:.45em 0 .9em!important}
.half .say{font-size:calc(2*var(--u))}
.half .note{font-size:calc(1.15*var(--u))}
.half .links{margin-top:.8em!important}

/* fin */
.step[data-layout="end"]{left:0;right:0;width:auto;align-items:center;text-align:center;padding:calc(8*var(--u)) var(--side)}
.sign{height:calc(23*var(--u));width:auto;overflow:visible;margin-bottom:calc(3.4*var(--u))}
.sign path{fill:transparent;stroke:#fff;stroke-width:5;stroke-dasharray:1 1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.step.on .sign path{animation:draw 2.6s cubic-bezier(.6,.05,.3,1) .5s forwards, fillin 1.4s ease 2.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:#fff;stroke-width:0}}
.name.end{font-size:calc(5.2*var(--u));font-weight:280}
.mot{height:calc(1.5*var(--u));width:auto;margin-top:calc(4*var(--u));filter:brightness(0) invert(1);opacity:.9}

/* ---------- aide */
#help{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--side);pointer-events:auto}
#help[hidden]{display:none}
.help-box{
  background:var(--dark); color:#fff; border:1px solid rgba(255,255,255,.18); border-left:3px solid var(--brick);
  padding:calc(2*var(--u)) calc(2.4*var(--u)); font-size:calc(1.2*var(--u)); min-width:calc(30*var(--u));
  animation:pop .25s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.help-title{margin:0 0 1em;font-weight:600;font-stretch:84%;letter-spacing:.12em;text-transform:uppercase;font-size:.85em;color:var(--brick)}
.help-box dl{display:grid;grid-template-columns:auto 1fr;gap:.7em 1.6em;margin:0}
.help-box dt{white-space:nowrap}
.help-box dd{margin:0;color:rgba(255,255,255,.74)}
.help-more{margin:1.3em 0 0;color:rgba(255,255,255,.55);font-size:.9em;line-height:1.45}

/* ---------- téléphone et formats hauts */
@media (max-aspect-ratio: 1/1){
  :root{--u:3.6vw; --side:6vw; --t-title:2.75; --t-line:1.2; --t-by:1; --t-note:.92; --t-big:2.05}
  .hud.top{padding-top:calc(4.2*var(--u))}
  #date{font-size:calc(1.05*var(--u))}
  #count{font-size:calc(.85*var(--u))}
  .step{left:var(--side);right:var(--side);width:auto;top:54vh;bottom:0;justify-content:flex-start;padding:0 0 calc(7*var(--u))}
  .step .say{text-wrap:balance}
  .by{margin:.4em 0 .9em!important}
  .links{margin-top:.8em!important}
  .go{font-size:calc(.95*var(--u))}
  .step[data-layout="sky"]{top:0;width:auto;padding-top:calc(16*var(--u))}
  .step[data-layout="sky"] .say{font-size:calc(1.5*var(--u))}
  .step[data-layout="sky"] .note{font-size:calc(1*var(--u))}
  .name.hero{font-size:calc(4.6*var(--u))}
  .lockup{height:calc(2.6*var(--u))}
  .step[data-layout="flip"]{left:var(--side);right:var(--side);width:auto;top:56vh}
  .keys{font-size:calc(.95*var(--u))}
  .play{font-size:calc(1.25*var(--u))}
  .step[data-layout="split"]{top:0}
  .step[data-layout="split"] .center{top:calc(14*var(--u));font-size:calc(.85*var(--u));display:none}
  .half{width:auto;left:var(--side)!important;right:var(--side)!important;text-align:left!important}
  .half .links{justify-content:flex-start!important}
  .half.left{top:31vh;bottom:auto}
  .half.right{top:74vh;bottom:auto}
  .half .name{font-size:calc(2.3*var(--u))}
  .half .say{font-size:calc(1.2*var(--u))}
  .half .by{margin:.3em 0 .5em!important}
  .half .links{display:none}
  .step[data-layout="end"]{top:0;padding:0 var(--side);justify-content:center}
  .sign{height:calc(22*var(--u))}
  .name.end{font-size:calc(2.8*var(--u))}
  .mot{height:calc(1.4*var(--u))}
  #rulerLabel{font-size:calc(.85*var(--u))}
  #hint{font-size:calc(.85*var(--u))}
  .help-box{font-size:calc(1*var(--u));min-width:0;width:100%}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
  .sign path{stroke-dashoffset:0;fill:#fff}
}