/* ═════════════════════════════════════════════
   LES PIÈCES DE L'ATELIER (depuis pieces-islands.html)
   Encre chaude + aura qui suit la main, onglets « CL · 01 », CL Face, un seul accent.
   Toutes les classes sont préfixées « ap- » pour ne rien toucher au reste du site.
   ═════════════════════════════════════════════ */
.ap-board{--isl:#171514;--on:#f4f1ec;--mut:rgba(244,241,236,.55);--hair:rgba(244,241,236,.09);
  --voisin:var(--violet);--voisin:oklch(from var(--accent) 62% .15 calc(h + 45));
  --sh:0 30px 50px -28px rgba(26,24,23,.55),0 2px 4px rgba(26,24,23,.06)}
:where(.ap-board button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* sélecteur de langue du site, posé sur une pièce sombre */
.ap-board .lang{background:rgba(244,241,236,.1);box-shadow:inset 0 0 0 1px var(--hair)}
.ap-board .lang__btn{color:var(--mut)}
.ap-board .lang__btn.is-active{color:var(--ink)}
.ap-board .lang__pill{background:var(--on)}
@media(prefers-reduced-motion:reduce){.ap-board *{animation:none!important}}
.ap-board{max-width:1240px;margin:0 auto;padding:18px 24px 90px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:50px;gap:26px 14px}
.ap-isl{position:relative;height:100%;display:flex;align-items:center;gap:12px;padding:0 20px;border-radius:999px;color:var(--on);font:500 15px/1.2 var(--font);letter-spacing:-.01em;
  background:
    radial-gradient(240px circle at var(--mx,88%) var(--my,0%),color-mix(in oklch,var(--accent) 55%,transparent),transparent 65%),
    radial-gradient(70% 90% at 0% 100%,color-mix(in oklch,var(--voisin) 22%,transparent),transparent 70%),
    var(--isl);
  box-shadow:var(--sh),inset 0 0 0 1px var(--hair),inset 0 1px 0 rgba(244,241,236,.08);
  transition:transform .6s var(--spring)}
.ap-isl:hover{transform:translateY(-2px)}
.ap-isl.ap-blk{border-radius:28px;flex-direction:column;align-items:stretch;justify-content:center;padding:22px 24px}
.ap-tab{position:absolute;left:22px;top:-11px;height:20px;padding:0 9px;border-radius:999px;background:var(--craie);color:var(--ink);font:600 10px/20px var(--font);letter-spacing:.08em;box-shadow:0 0 0 1px rgba(26,24,23,.08);white-space:nowrap}
.ap-tab b{color:var(--accent);font-weight:600}
.ap-mut{color:var(--mut);font-weight:400}
.ap-r{margin-left:auto}
.ap-row{display:flex;align-items:center;gap:12px}
.ap-num{font-variant-numeric:tabular-nums}
.ap-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 14px;border-radius:999px;background:var(--on);color:var(--ink);font:500 14px var(--font);transition:transform .4s var(--spring);white-space:nowrap}
.ap-btn i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-size:13px}
.ap-btn:hover{transform:scale(1.04)}
.ap-btn.ap-ghost{background:transparent;color:var(--on);box-shadow:inset 0 0 0 1.5px var(--hair);padding:0 14px}
.ap-mono{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--on);color:var(--ink);font:600 12px var(--font);letter-spacing:-.06em;position:relative;flex-shrink:0}
.ap-mono::after{content:"";position:absolute;inset:3px;border:1px solid rgba(26,24,23,.35);border-radius:6px}
.ap-big48{font-size:64px;color:var(--on)}
.ap-aa{font-size:70px;color:var(--on);align-self:center}
.ap-cuts{display:flex;justify-content:center;gap:6px;margin-top:12px}
.ap-cuts i{width:6px;height:6px;border-radius:50%;background:var(--hair);transition:background .3s,width .4s var(--spring)}
.ap-cuts i.ap-on{background:var(--accent-2);width:18px;border-radius:3px}
.ap-hues{display:flex;gap:8px}
.ap-hues button{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .4s var(--spring)}
.ap-hues button.ap-on{box-shadow:0 0 0 2px var(--isl),0 0 0 4px var(--c)}
.ap-hues button:hover{transform:scale(1.2)}
.ap-clock{font-size:30px;color:var(--on)}
.ap-steps{display:flex;gap:6px}
.ap-steps button{flex:1;display:flex;flex-direction:column;gap:7px;text-align:left;font:500 12px var(--font);color:var(--mut);transition:color .3s}
.ap-steps button::before{content:"";height:4px;border-radius:2px;background:var(--hair);transition:background .4s}
.ap-steps button.ap-done{color:var(--on)}
.ap-steps button.ap-done::before{background:var(--accent-2)}
.ap-steps button.ap-now{color:var(--on)}
.ap-steps button.ap-now::before{background:linear-gradient(90deg,var(--accent-2) var(--p,40%),var(--hair) 0)}
.ap-isl.ap-ticket{flex-direction:row;align-items:stretch;padding:0}
.ap-ticket .ap-stub{width:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1.5px dashed var(--hair);gap:6px;flex-shrink:0}
.ap-ticket .ap-stub span{font-size:40px;color:var(--on)}
.ap-ticket .ap-stub small{font:600 10px var(--font);letter-spacing:.14em;color:var(--accent-2)}
.ap-ticket .ap-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 22px}
.ap-words{font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.ap-words span{opacity:.18;transition:opacity .4s,color .4s}
.ap-words span.ap-on{opacity:1}
.ap-words span.ap-now{color:var(--accent-2);opacity:1}
.ap-live{width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 0 var(--accent-2);animation:ap-lp 2s infinite;flex-shrink:0}
@keyframes ap-lp{70%{box-shadow:0 0 0 8px transparent}
100%{box-shadow:0 0 0 0 transparent}
}
.ap-url{font:500 14px var(--text);color:var(--on)}
.ap-url b{color:var(--accent-2);font-weight:500}
.ap-ring{width:34px;height:34px;transform:rotate(-90deg);flex-shrink:0}
.ap-ring circle{fill:none;stroke-width:3.5}
.ap-ring .ap-bg{stroke:var(--hair)}
.ap-ring .ap-fg{stroke:var(--accent-2);stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88;transition:stroke-dashoffset .5s var(--ease)}
.ap-hand svg{width:26px;height:26px;fill:var(--on);stroke:var(--isl);stroke-width:1.5;stroke-linejoin:round;animation:ap-tap 2.4s var(--ease) infinite}
@keyframes ap-tap{0%,60%,100%{transform:none}
70%{transform:scale(.8)}
}
.ap-film .ap-title{font-size:30px;color:var(--on)}
.ap-scrub{position:relative;height:4px;border-radius:2px;background:var(--hair);cursor:pointer;flex:1}
.ap-scrub i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent-2)}
.ap-scrub b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--on);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ap-play{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--on);color:var(--ink);flex-shrink:0;transition:transform .4s var(--spring)}
.ap-play:hover{transform:scale(1.08)}
.ap-play svg{width:18px;height:18px;fill:currentColor}
.ap-ctl input{width:100%;accent-color:var(--accent-2)}
.ap-ctl .ap-word{font-size:38px;color:var(--on);display:flex;align-items:center;padding:6px 0}
.ap-ctl label{display:flex;justify-content:space-between;font:500 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.lang{position:relative;display:flex;padding:3px;border-radius:999px;background:rgba(244,241,236,.08);box-shadow:inset 0 0 0 1px var(--hair)}
.lang button{position:relative;z-index:1;padding:6px 12px;border-radius:999px;font:600 12px var(--font);letter-spacing:.02em;color:var(--mut);transition:color .3s}
.lang button.ap-on{color:var(--ink)}
.lang .ap-pill{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:999px;background:var(--on);transition:transform .5s var(--spring),width .3s}
.ap-sig{justify-content:center;gap:10px}
.ap-sig small{font:500 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
@media(max-width:900px){
  .ap-board{display:flex;flex-wrap:wrap;gap:30px 12px}
  .ap-board>*{flex:1 1 100%;min-height:62px;height:auto}
  .ap-board>.ap-blk{min-height:170px}
.ap-board>.ap-film{min-height:190px}
  .ap-board>.ap-sm{flex:1 1 40%}
  .ap-isl{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
}
.ap-board>*{min-width:0}
@media(max-width:900px){
  .ap-isl.ap-ticket{flex-direction:column}
  .ap-ticket .ap-stub{width:auto;flex-direction:row;gap:12px;padding:18px 22px 0;border-right:0;justify-content:flex-start}
  .ap-ticket .ap-stub span{font-size:30px}
  .ap-hues{gap:6px}.ap-hues button{width:20px;height:20px}
  .ap-ticket .ap-body .ap-row{flex-wrap:wrap}
}
/* 01 et 02 en Inter Tight, la typo des titres du site */
.ap-big48{font:600 72px/.9 var(--font);letter-spacing:-.06em}
.ap-big48 small{font-size:.5em;font-weight:500;letter-spacing:-.03em;color:var(--mut)}
.ap-aa{font:400 78px/1 var(--font);letter-spacing:-.05em;transition:font-weight .4s}