/* ToneRecord — Connexion / inscription. Préfixe .au- ; rien de global. Requêtes de conteneur : s'adapte à sa largeur réelle. */
.au{
  --au-cream:#F6F6F0;--au-paper:#FBFBF8;--au-ink:#0B0B0C;--au-ink2:rgba(11,11,12,.64);--au-line:rgba(11,11,12,.16);
  --au-red:#900011;--au-led:#FF4A4A;--au-blue:#0A84FF;--au-ok:#1F5A3C;
  --au-top:5rem;--au-bottom:7rem;--au-bottom-m:5rem;--au-kb:0px;--au-min:100svh;--au-soft:cubic-bezier(.2,.8,.2,1);
  container:au/inline-size;position:relative;box-sizing:border-box;min-height:var(--au-min);background:var(--au-cream);color:var(--au-ink);
  font-family:"Archivo Sillon",Archivo,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.45;text-align:left;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%
}
.au *,.au *::before,.au *::after{box-sizing:border-box}
.au h1,.au p,.au ul,.au ol,.au li,.au form{margin:0;padding:0}
.au ul,.au ol{list-style:none;counter-reset:none}
.au ol>li,.au ul>li{counter-increment:none}
.au ol>li::before,.au ol>li::marker,.au ul>li::marker{content:none}
.au button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.au a{color:inherit}
.au :focus-visible{outline:2px solid var(--au-blue);outline-offset:3px}
.au-mono{font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em}
.au-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── mise en page ── */
.au-in{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-content:start;max-width:1240px;min-height:var(--au-min);margin:0 auto;padding:calc(var(--au-top) + 12px) 16px calc(var(--au-bottom-m) + 28px)}
.au-main{display:grid;justify-items:center;min-width:0}
.au-card{width:100%;max-width:460px;background:var(--au-paper);border-radius:32px;padding:28px 32px 32px;box-shadow:0 0 0 1px var(--au-line),0 40px 80px -52px rgba(11,11,12,.5)}
@container au (min-width:900px){
  .au-in{grid-template-columns:minmax(0,1fr) minmax(420px,460px);gap:clamp(48px,6cqw,112px);align-items:center;align-content:center;padding:calc(var(--au-top) + 20px) clamp(28px,4cqw,64px) calc(var(--au-bottom) + 20px)}
  .au-side{order:-1}
}
@container au (max-width:560px){
  .au-card{background:none;box-shadow:none;border-radius:0;padding:0 2px}
}

/* ── panneau ── */
.au-panel{display:grid;gap:22px}
.au-panel.is-in{animation:au-in .26s var(--au-soft) both}
@keyframes au-in{from{opacity:0;transform:translateY(8px)}}
.au-head{display:grid;gap:12px}
.au .au-h{font-family:"Archivo Sillon",Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;font-stretch:62%;font-style:normal;text-transform:uppercase;font-size:64px;line-height:.86;letter-spacing:-.005em;color:var(--au-ink);text-wrap:balance;hyphens:manual;outline:none}
.au-sub{font-size:17px;line-height:1.4;color:var(--au-ink2);text-wrap:pretty}
.au-sub b{color:var(--au-ink)}
@container au (max-width:560px){.au .au-h{font-size:54px}}

.au-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(11,11,12,.06)}
.au-tabs button{display:flex;align-items:center;justify-content:center;text-align:center;height:44px;padding:0 10px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:15px;color:var(--au-ink2);transition:background .2s,color .2s,box-shadow .2s}
.au-tabs button:hover{color:var(--au-ink)}
.au-tabs button[aria-pressed="true"]{background:#fff;color:var(--au-ink);box-shadow:0 1px 2px rgba(11,11,12,.14),0 0 0 1px rgba(11,11,12,.06);cursor:default}

/* ── champs ── */
.au-form{display:grid;gap:18px}
.au-f{display:grid;gap:8px}
.au-l{font-weight:600;font-size:15px;line-height:1.2}
.au-iw{position:relative}
.au-i{display:block;width:100%;height:56px;margin:0;padding:0 18px;border:0;border-radius:16px;background:#fff;color:var(--au-ink);font:inherit;font-size:17px;box-shadow:inset 0 0 0 1px rgba(11,11,12,.26);transition:box-shadow .15s;-webkit-appearance:none;appearance:none;scroll-margin:110px 0 150px}
.au-i::placeholder{color:rgba(11,11,12,.4)}
.au-i:hover{box-shadow:inset 0 0 0 1px rgba(11,11,12,.5)}
.au-i:focus{outline:none;box-shadow:inset 0 0 0 2px var(--au-ink)}
.au-i:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--au-ink),0 0 0 4px rgba(10,132,255,.32)}
.au-i[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--au-red)}
.au-iw.is-pw .au-i{padding-right:100px}
.au-eye{position:absolute;right:6px;top:6px;height:44px;min-width:88px;padding:0 12px;border:0;border-radius:12px;background:transparent;font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--au-ink2)}
.au-eye:hover{background:rgba(11,11,12,.06);color:var(--au-ink)}
.au-err{font-size:14px;line-height:1.35;font-weight:600;color:var(--au-red);text-wrap:pretty}
.au-err:empty{display:none}
.au-caps{display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.au-caps::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--au-led);box-shadow:0 0 9px 2px rgba(255,74,74,.5)}
.au-caps[hidden],.au-warn[hidden]{display:none}
.au-aside{display:flex;justify-content:flex-end;margin-top:-2px}
@container au (max-width:560px){.au-i{height:58px}}

/* ── force du mot de passe ── */
.au-meter{display:grid;gap:8px;margin-top:4px}
.au-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.au-bars i{height:6px;border-radius:3px;background:rgba(11,11,12,.1);transition:background-color .25s}
.au-lvl{display:flex;justify-content:space-between;gap:12px;font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--au-ink2)}
.au-lvl b{font-weight:500;color:var(--au-ink)}
.au-crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin-top:2px;font-size:14px;line-height:1.25;color:var(--au-ink2)}
.au-crit li{display:flex;align-items:center;gap:9px;min-width:0}
.au-ck{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.3);display:grid;place-items:center;transition:background .2s}
.au-crit li.is-ok{color:var(--au-ink)}
.au-crit li.is-ok .au-ck{background:var(--au-ink);box-shadow:none}
.au-crit li.is-ok .au-ck::after{content:"";width:7px;height:4px;border-left:1.6px solid var(--au-cream);border-bottom:1.6px solid var(--au-cream);transform:translateY(-1px) rotate(-45deg)}
.au-crit em{font-style:normal;font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,11,12,.5)}
.au-warn{font-size:14px;line-height:1.35;font-weight:500;color:var(--au-ink2);text-wrap:pretty}
.au-match{font-size:14px;color:var(--au-ink2)}
.au-match:empty{display:none}
.au-match.is-ok{color:var(--au-ok);font-weight:600}

/* ── case artiste ── */
.au-chk{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--au-line);cursor:pointer;transition:box-shadow .2s,background .2s}
.au-chk:hover{box-shadow:inset 0 0 0 1px rgba(11,11,12,.42)}
.au-chk input{position:absolute;left:18px;top:16px;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.au-box{width:24px;height:24px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.45);display:grid;place-items:center;transition:background .15s}
.au-chk input:checked+.au-box{background:var(--au-ink);box-shadow:none}
.au-chk input:checked+.au-box::after{content:"";width:10px;height:5px;border-left:2px solid var(--au-cream);border-bottom:2px solid var(--au-cream);transform:translateY(-1px) rotate(-45deg)}
.au-chk input:focus-visible+.au-box{outline:2px solid var(--au-blue);outline-offset:3px}
.au-chk:has(input:checked){background:#fff;box-shadow:inset 0 0 0 1.5px var(--au-ink)}
.au-chk b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.au-chk small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--au-ink2);text-wrap:pretty}
.au-legal{font-size:13px;line-height:1.45;color:var(--au-ink2);text-wrap:pretty}

/* ── boutons ── */
.au-act{display:grid;gap:10px;padding-top:4px}
.au-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;padding:0 24px;border:0;border-radius:999px;background:var(--au-ink);color:var(--au-cream)!important;font-weight:700;font-size:16px;letter-spacing:.01em;transition:background .2s,transform .12s;font-variant-numeric:tabular-nums}
.au-btn:hover{background:#27272B}
.au-btn:active{transform:scale(.99)}
.au-btn:disabled{cursor:default;background:#8A8A8C;transform:none}
.au-btn[aria-busy="true"]{background:var(--au-ink);cursor:progress}
.au-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--au-led);box-shadow:0 0 10px 2px rgba(255,74,74,.6);}
@keyframes au-blink{50%{opacity:.2}}
.au-btn2{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--au-ink);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;transition:background .2s}
.au-btn2:hover{background:rgba(11,11,12,.05)}
.au-btn2:disabled{cursor:default;background:none;box-shadow:inset 0 0 0 1px var(--au-line);color:var(--au-ink2)}
.au-lk{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;font-weight:600;font-size:15px;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--au-ink)}
.au-lk:hover{color:var(--au-red)}
.au-lk.is-sm{font-size:14px;font-weight:500}
.au-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.au-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;padding-top:2px}
.au-foot .au-lk{min-height:44px}
@container au (max-width:560px){
  .au-act{position:sticky;bottom:var(--au-bottom-m);z-index:3;margin:0 -8px;padding:12px 8px;background:linear-gradient(rgba(246,246,240,0),var(--au-cream) 14px)}
  .au.is-kb .au-act{bottom:var(--au-kb)}
  .au-btn{height:58px;font-size:17px}
}

/* ── messages ── */
.au-msg:empty{display:none}
.au-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(144,0,17,.07);box-shadow:inset 0 0 0 1px rgba(144,0,17,.2);font-size:15px;font-weight:500;line-height:1.4;text-wrap:pretty}
.au-alert::before{content:"";flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--au-led);box-shadow:0 0 10px 2px rgba(255,74,74,.5)}
.au-alert.is-info{background:rgba(31,90,60,.07);box-shadow:inset 0 0 0 1px rgba(31,90,60,.22)}
.au-alert.is-info::before{background:#3F9A67;box-shadow:0 0 9px 2px rgba(63,154,103,.45)}
.au-blk{display:grid;gap:8px}
.au-small{font-size:15px;line-height:1.45;color:var(--au-ink2);text-wrap:pretty}
.au-addr{font-weight:700;font-size:19px;line-height:1.3;overflow-wrap:anywhere;padding:14px 18px;border-radius:16px;background:rgba(11,11,12,.05)}

/* ── étapes artiste ── */
.au-steps{display:grid;padding:16px 18px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--au-line)}
.au-steps li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;padding-bottom:14px}
.au-steps li:last-child{padding-bottom:0}
.au-sd{position:relative;z-index:1;width:12px;height:12px;margin:4px 4px 0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.35)}
.au-sl{position:absolute;left:9.25px;top:20px;bottom:-2px;width:1.5px;background:rgba(11,11,12,.16)}
.au-steps li:last-child .au-sl{display:none}
.au-steps .is-done .au-sd{background:var(--au-ink);box-shadow:none}
.au-steps .is-now .au-sd{background:var(--au-led);box-shadow:0 0 0 4px rgba(255,74,74,.16),0 0 12px 2px rgba(255,74,74,.5)}
.au-steps b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.au-steps small{display:block;font-size:14px;color:var(--au-ink2)}
.au-steps .is-todo b{color:var(--au-ink2);font-weight:600}
.au-open{display:grid;gap:10px}
.au-prog{height:4px;border-radius:2px;background:rgba(11,11,12,.1);overflow:hidden}
.au-prog span{display:block;width:0;height:100%;background:var(--au-ink);transition:width 3.2s linear}

/* ── code à 6 chiffres ── */
.au-otp{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.au-otp input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;cursor:text}
.au-cell{height:66px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,11,12,.26);display:grid;place-items:center;font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:27px;font-weight:500;transition:box-shadow .15s}
.au-cell.is-gap{margin-left:10px}
.au-cell.is-cur{box-shadow:inset 0 0 0 2px var(--au-ink),0 0 0 4px rgba(10,132,255,.3)}
.au-cell.is-cur:empty::after{content:"";width:2px;height:28px;background:var(--au-ink);animation:au-blink 1s steps(1) infinite}
.au-otp.is-bad .au-cell{box-shadow:inset 0 0 0 2px var(--au-red)}
@container au (max-width:380px){.au-otp{gap:6px}.au-cell{height:58px;font-size:24px}.au-cell.is-gap{margin-left:6px}}

/* ── disques du catalogue ── */
.au-side{display:grid;gap:20px;align-content:center;min-width:0}
.au-kick{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--au-ink2)}
.au-kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--au-led);box-shadow:0 0 10px 2px rgba(255,74,74,.5)}
.au-pitch{font-weight:800;font-stretch:75%;font-size:clamp(30px,3.4cqw,46px);line-height:1;letter-spacing:-.005em;max-width:17ch;text-wrap:balance}
.au-crate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:560px;padding-top:10px}
.au-rec{display:grid;gap:10px;width:100%;padding:0;border:0;border-radius:6px;background:none;text-align:left}
.au-rec:disabled{cursor:default}
/* Pochettes seules, figées (demande de la cliente) : le pli et le vernis
   de la pochette des fiches ; au survol, un bouton d'écoute ; en lecture, un
   liseré et la LED du logo. */
.au-rec-o{position:relative;display:block;aspect-ratio:1}
.au-cov{position:absolute;inset:0;border-radius:3px;background:#D8C694 center/cover no-repeat;box-shadow:0 16px 26px -18px rgba(11,11,12,.7)}
.au-cov::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.35) 0,transparent 4%),linear-gradient(to right,transparent 92%,rgba(0,0,0,.35) 100%)}
.au-play{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--au-ink);color:var(--au-cream);opacity:0;box-shadow:0 8px 18px -10px rgba(0,0,0,.6);transition:opacity .2s ease}
.au-play svg{width:16px;height:16px}
.au-rec:not(:disabled):hover .au-play,.au-rec:focus-visible .au-play,.au-rec.is-playing .au-play{opacity:1}
.au-rec.is-playing .au-cov{box-shadow:0 0 0 3px var(--au-led),0 16px 26px -18px rgba(11,11,12,.7)}
.au-rec.is-playing .au-play{background:var(--au-led)}
@media (hover:none){.au-play{opacity:1}}
.au-rec-t{display:grid;gap:2px;min-width:0}
.au-rec-t b{font-weight:700;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-rec-t small{font-family:"JetBrains Mono Sillon","JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--au-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container au (max-width:899px){
  .au-side{justify-self:center;width:100%;max-width:460px;gap:14px}
  .au-pitch{font-size:26px}
  .au-crate{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:132px;gap:18px;margin:0 -16px;padding:6px 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .au-crate::-webkit-scrollbar{display:none}
  .au-crate li{scroll-snap-align:start}
}

@media (prefers-reduced-motion:reduce){
  .au *,.au *::before,.au *::after{animation:none!important;transition:none!important}
}

/* ── Intégration au site (2026-09-27) ── */
/* La page /login : le module occupe toute la place entre la barre du site et
   le lecteur ; le fond reste celui du site. */
.login-au{position:relative;min-height:100svh;background:#F6F6F0}
.login-au .au{background:transparent}
/* Sans pochettes (coupées dans l'admin) : le formulaire seul, centré. */
.au-in:not(:has(.au-side)){grid-template-columns:minmax(0,1fr)!important;justify-items:center}