
/* ===== Atelier d'impression : fichiers d'une impression en ligne (#atelier-<jeton>) ===== */
.atl-hero .trk-no{font-size:clamp(2.6rem,12vw,4rem)}
.atl-printer{position:relative;width:132px;height:112px;margin:4px 0 10px}
.atl-printer .pb{position:absolute;left:6px;right:6px;top:34px;height:52px;border-radius:14px;background:linear-gradient(#3a3d46,#23252c);box-shadow:inset 0 2px 0 #ffffff22}
.atl-printer .pt{position:absolute;left:28px;right:28px;top:14px;height:26px;border-radius:6px 6px 0 0;background:#f4f5f7}
.atl-printer .ps{position:absolute;left:22px;right:22px;top:72px;height:6px;border-radius:3px;background:#0b0c10}
.atl-printer .pp{position:absolute;left:30px;right:30px;top:74px;height:0;background:#fff;border-radius:0 0 4px 4px;overflow:hidden;animation:atlPaper 2.6s cubic-bezier(.5,0,.3,1) infinite}
.atl-printer .pp i{display:block;height:4px;margin:7px 8px 0;border-radius:2px;background:linear-gradient(90deg,#1fa6dc,#e0137a,#ffd400)}
.atl-printer .pp i:nth-child(2){width:60%}.atl-printer .pp i:nth-child(3){width:75%}
.atl-printer .pl{position:absolute;right:16px;top:46px;width:8px;height:8px;border-radius:50%;background:#1fe08a;box-shadow:0 0 10px #1fe08a;animation:trkPulse 1.6s ease-out infinite}
@keyframes atlPaper{0%{height:0;opacity:1}55%{height:38px;opacity:1}80%{height:38px;opacity:1}100%{height:38px;opacity:0}}
.atl-lock{display:grid;gap:14px;text-align:center;justify-items:center}
.atl-lock p{margin:0;color:var(--muted);max-width:44ch;line-height:1.5}
.atl-pin{display:flex;gap:8px;justify-content:center}
.atl-pin input{width:46px;height:58px;text-align:center;font:inherit;font-family:var(--f-display);font-weight:900;font-size:1.6rem;border-radius:14px;border:2px solid var(--line,#e3e4e8);background:var(--bg);color:var(--ink);transition:border-color .2s,transform .2s}
.atl-pin input:focus{outline:none;border-color:#7a4bc4;transform:translateY(-2px)}
.atl-pin input.f{border-color:#7a4bc4}
.atl-pin.bad input{border-color:#c8102e;animation:atlShake .4s}
@keyframes atlShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.atl-pin span{align-self:center;color:var(--muted);font-weight:900}
.atl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:800;font-size:1rem;padding:14px 22px;border-radius:14px;border:0;background:#7a4bc4;color:#fff;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,opacity .2s}
.atl-btn:hover{box-shadow:0 10px 24px -10px #7a4bc4}.atl-btn:active{transform:scale(.97)}.atl-btn:disabled{opacity:.55;cursor:default}
.atl-btn.g{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line,#d9dbe0)}
.atl-btn.ok{background:#178a4c}.atl-btn.ok:hover{box-shadow:0 10px 24px -10px #178a4c}
.atl-err{color:#c8102e;font-weight:700;min-height:1.2em;margin:0;font-size:.9rem}
.atl-sent{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:rgba(122,75,196,0.120);background:color-mix(in srgb,#7a4bc4 12%,var(--bg));color:#5b33a0;font-weight:700;font-size:.9rem;animation:atlIn .5s cubic-bezier(.2,.8,.3,1.3)}
@keyframes atlIn{from{opacity:0;transform:translateY(8px) scale(.96)}}
.atl-set{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.atl-set span{display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border-radius:99px;background:#ffffff1a;font-weight:700;font-size:.88rem}
.atl-set b{color:#ffd400}
.atl-who{margin:12px 0 0;color:#d9dce3;font-weight:600}
.atl-msg{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#ffffff14;color:#eef0f4;font-style:italic;white-space:pre-wrap}
.atl-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
.atl-bar h2{margin:0}
.atl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.atl-f{position:relative;display:flex;flex-direction:column;border-radius:16px;background:var(--bg);overflow:hidden;box-shadow:0 0 0 1px var(--line,#e3e4e8);animation:atlCard .5s cubic-bezier(.2,.8,.3,1.2) backwards;transition:transform .2s,box-shadow .2s}
.atl-f:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line,#e3e4e8),0 14px 28px -16px #0006}
@keyframes atlCard{from{opacity:0;transform:translateY(16px) scale(.94)}}
.atl-th{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:repeating-conic-gradient(#0000000a 0 25%,transparent 0 50%) 50%/18px 18px;overflow:hidden;cursor:zoom-in}
.atl-th img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.atl-f:hover .atl-th img{transform:scale(1.04)}
.atl-ic{width:62px;height:76px;border-radius:8px 18px 8px 8px;display:grid;place-items:end center;padding-bottom:10px;color:#fff;font-weight:900;font-size:.8rem;letter-spacing:.05em;box-shadow:0 8px 18px -8px #0007}
.atl-ic.pdf{background:linear-gradient(160deg,#e5334f,#b00d2b)}.atl-ic.doc{background:linear-gradient(160deg,#3a7ee0,#1f5fbf)}.atl-ic.txt{background:linear-gradient(160deg,#7d828d,#555a64)}.atl-ic.dl{background:linear-gradient(160deg,#a067e0,#7a4bc4)}
.atl-fi{padding:10px 12px 12px;display:grid;gap:8px}
.atl-fi b{font-size:.86rem;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.atl-fi small{color:var(--muted);font-weight:600;font-size:.76rem}
.atl-fa{display:flex;gap:6px}
.atl-fa a{flex:1;text-align:center;font-weight:800;font-size:.8rem;padding:8px 6px;border-radius:10px;text-decoration:none;color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line,#e3e4e8)}
.atl-fa a:first-child{background:#14151a;color:#fff;box-shadow:none}
.atl-n{position:absolute;left:8px;top:8px;z-index:1;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:#14151acc;color:#fff;font-size:.74rem;font-weight:800;display:grid;place-items:center}
.atl-done{display:grid;gap:12px;justify-items:center;text-align:center;padding:22px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,#178a4c 12%,var(--surface)),var(--surface));border:2px dashed color-mix(in srgb,#178a4c 45%,transparent)}
.atl-done p{margin:0;color:var(--muted);max-width:48ch;line-height:1.5}
.atl-hold{position:relative;overflow:hidden;min-width:260px}
.atl-hold::before{content:"";position:absolute;inset:0;background:#ffffff38;transform-origin:left;transform:scaleX(var(--p,0))}
.atl-hold span{position:relative}
/* effacement : les fichiers filent dans la corbeille */
.atl-grid.go .atl-f{animation:atlGone .7s cubic-bezier(.6,-.3,.7,.4) forwards}
@keyframes atlGone{to{opacity:0;transform:translateY(60px) rotate(-8deg) scale(.3);filter:blur(2px)}}
.atl-bin{width:110px;height:110px;margin:0 auto;position:relative}
.atl-bin svg{width:100%;height:100%;overflow:visible}
.atl-bin .lid{transform-origin:20% 30%;animation:atlLid 1.4s ease-in-out}
@keyframes atlLid{20%,60%{transform:rotate(-24deg)}}
.atl-fin{display:grid;gap:12px;justify-items:center;text-align:center;padding:10px 0}
.atl-fin h2{margin:0;font-size:1.6rem}
.atl-fin p{margin:0;color:var(--muted);max-width:44ch;line-height:1.5}
.atl-check{width:84px;height:84px}
.atl-check circle{fill:none;stroke:#178a4c;stroke-width:4;stroke-dasharray:240;stroke-dashoffset:240;animation:atlDraw .7s ease-out forwards}
.atl-check path{fill:none;stroke:#178a4c;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:atlDraw .45s .55s ease-out forwards}
@keyframes atlDraw{to{stroke-dashoffset:0}}
.atl-zoom{position:fixed;inset:0;z-index:5;background:#0b0c10e6;display:grid;place-items:center;padding:20px;cursor:zoom-out;animation:atlFade .2s}
.atl-zoom img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px #000a;animation:atlIn .3s}
@keyframes atlFade{from{opacity:0}}
@media (max-width:520px){.atl-grid{grid-template-columns:1fr 1fr}.atl-pin input{width:40px;height:52px}.atl-hold{min-width:0;width:100%}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.atl-printer .pp,.atl-f,.atl-grid.go .atl-f,.atl-bin .lid{animation:none}}
