/* Mascotte Atom, écran de chargement, barre de progression (voir aussi les autres fichiers du dossier css/) */
/* ===== mascotte Atom ===== */
.bot { display: block; width: 100%; height: 100%; overflow: visible; }
.bot .b-head { fill: var(--gold); } .bot .b-body { fill: color-mix(in srgb, var(--gold) 82%, #000); }
.bot .b-face { fill: #15171a; } .bot .b-eye { fill: var(--blue); } .bot .b-ant { fill: var(--blue); }
.bot .b-line { stroke: color-mix(in srgb, var(--gold) 70%, #000); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.bot .b-mouth { stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.bot .b-eyes { transition: transform .12s linear; }
.bot .b-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bot .b-ant { animation: glow 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glow { 50% { opacity: .45; transform: scale(.8); } }
.bot .b-leg, .bot .b-arm { transform-box: fill-box; transform-origin: 50% 0; }
.walk .b-leg.l { animation: legA .42s ease-in-out infinite alternate; } .walk .b-leg.r { animation: legA .42s ease-in-out infinite alternate-reverse; }
@keyframes legA { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
.walk .b-arm.l { animation: legA .42s ease-in-out infinite alternate-reverse; } .walk .b-arm.r { animation: legA .42s ease-in-out infinite alternate; }
.wave .b-arm.r { animation: wv .5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes wv { from { transform: rotate(-150deg); } to { transform: rotate(-95deg); } }
.hop { animation: hop .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(6px) scale(1.08, .88); } 55% { transform: translateY(-34px) scale(.94, 1.1); } 100% { transform: translateY(0) scale(1, 1); } }

/* ===== preloader ===== */
.pre-boot { position: fixed; inset: 0; z-index: 199; background: var(--ground); animation: bootout .01s 6s forwards; }  /* écran uni affiché avant que le JS démarre ; disparaît seul au bout de 6 s si le JS ne répond pas */
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
.pre { position: fixed; inset: 0; z-index: 200; background: var(--ground); display: grid; place-items: center; overflow: hidden; }
.pre::before { content: ""; position: absolute; width: 120vmax; height: 120vmax; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--halo), transparent 70%); pointer-events: none; }
.pre canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pre-c { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; padding: 24px; width: min(440px, 100%); text-align: center; }
.pre-bot { width: 116px; height: 116px; cursor: pointer; animation: bob 2.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
@keyframes bob { 50% { transform: translateY(-9px); } }
.pre-bot:active { transform: scale(.94); }
.pre-n { font-family: var(--display); font-weight: 300; font-size: clamp(72px, 14vw, 118px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pre-n small { font-size: .32em; margin-left: 4px; color: var(--accent-ink); font-style: italic; }
.pre-lab { font-size: 14.5px; color: var(--ink-muted); min-height: 22px; display: flex; align-items: center; gap: 8px; font-feature-settings: "tnum"; }
.pre-lab b { color: var(--gold); font-weight: 500; }
.pre-lab .caret { width: 7px; height: 15px; background: var(--gold); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.pre-lab.ok { color: var(--ok); } .pre-lab.ok .caret { display: none; }
.pre-bar { position: relative; width: min(320px, 78vw); height: 5px; border-radius: 5px; background: var(--hair); margin-top: 4px; }
.pre-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold), var(--sand)); }
.pre-bar span { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--line-art); transition: background .3s, border-color .3s; }
.pre-bar span.on { background: var(--gold); border-color: var(--gold); }
.pre-hint { font-size: 12.5px; color: var(--ink-muted); opacity: .85; }
.pre-skip { position: absolute; z-index: 3; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.fly { position: fixed; z-index: 210; pointer-events: none; transform-origin: 0 0; }

/* ===== rail de progression + mascotte ===== */
.rail { position: fixed; z-index: 85; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 52px; pointer-events: none; padding: 0 clamp(16px, 3vw, 40px); opacity: 0; transition: opacity .5s; }
.rail.show { opacity: 1; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 74px; background: linear-gradient(var(--ground) 30%, transparent); opacity: .85; pointer-events: none; }
.rail-in { position: relative; height: 100%; }
.rail-track { position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--sand)); transform-origin: 0 50%; transform: scaleX(0); }
.rail.done .rail-fill { background: linear-gradient(90deg, var(--gold), var(--ok)); }
.rail-mk { position: absolute; top: 40px; width: 28px; height: 28px; margin: -12px 0 0 -14px; pointer-events: auto; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.rail-mk b { width: 9px; height: 9px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--line-art); transition: all .3s var(--ease); }
.rail-mk.on b { background: var(--gold); border-color: var(--gold); }
.rail-mk em { position: absolute; top: 24px; left: 50%; transform: translateX(-50%) translateY(-4px); font-style: normal; font-size: 11.5px; letter-spacing: .04em; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--ground); opacity: 0; transition: all .25s; pointer-events: none; }
.rail-mk:hover em, .rail-mk:focus-visible em { opacity: 1; transform: translateX(-50%); }
.rail-mk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
.rail-bot { position: absolute; left: 0; top: 0; width: 40px; height: 42px; margin-left: -20px; will-change: transform; visibility: hidden; }
.rail.show .rail-bot { visibility: visible; }
.rail-bot .flip { width: 100%; height: 100%; transition: transform .3s var(--ease); }
.rail-bot .bob { width: 100%; height: 100%; }
.rail-bot.walk .bob { animation: stepb .42s ease-in-out infinite alternate; }
@keyframes stepb { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-2.5px) rotate(3deg); } }
.rail-say { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 6px) scale(.9); margin-bottom: 4px; padding: 5px 11px; border-radius: 12px; background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; transition: all .3s var(--ease); pointer-events: none; }
.rail-say::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.rail-say.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.rail-now { position: absolute; right: clamp(16px, 3vw, 40px); top: 50px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; }
@media (min-width: 701px) { .rail-now { opacity: 1; } }
@media (max-width: 700px) { .rail { height: 46px; } .rail-track { top: 36px; } .rail-mk { top: 36px; } .rail-bot { width: 32px; height: 34px; margin-left: -16px; } }
@media (prefers-reduced-motion: reduce) { .bot .b-eye, .bot .b-ant, .pre-bot, .rail-bot.walk .bob { animation: none; } }