/* asa transfer : charte validee le 24/10 (manche 5, tiree de la charte ditflow).
   Feuille posee APRES app.css et le style propre a la page : elle ne change que
   l'apparence. Aucun id, aucune classe lue par les scripts n'est renomme.
   Regles : tout en SF Pro (jamais de police a chasse fixe), jamais de vert,
   jamais de coche sur le rond, logo asa sans couleur, pas de capitales espacees,
   cadran facon instrument (lunette, fond, graduations centrees), aurore faible. */
:root{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:var(--sans);--display:var(--sans);--chiffres:var(--sans);
  --bg:#000;--panel:#141416;--panel-2:#1a1a1e;--text:#f2f2f4;--muted:rgba(255,255,255,.46);--faint:rgba(255,255,255,.32);
  --line:rgba(255,255,255,.11);--line-soft:rgba(255,255,255,.06);--track:rgba(255,255,255,.07);
}
html{background:#000}
body{background:transparent}
body{font-family:var(--sans)}
/* le grain d'app.css ternit le noir de la charte */
body::after{display:none}

/* ---------- aurore de fond (34B) : degrades seuls, aucun filtre ---------- */
.fond{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fond i{position:absolute;width:64vmax;height:64vmax;border-radius:50%;will-change:transform}
.fond .a1{left:-20vmax;top:-24vmax;background:radial-gradient(circle,rgba(167,139,250,.16),transparent 62%);animation:fd1 46s ease-in-out infinite alternate}
.fond .a2{right:-22vmax;top:-16vmax;background:radial-gradient(circle,rgba(100,210,255,.12),transparent 62%);animation:fd2 54s ease-in-out infinite alternate}
.fond .a3{left:22vw;bottom:-34vmax;background:radial-gradient(circle,rgba(191,90,242,.11),transparent 62%);animation:fd3 60s ease-in-out infinite alternate}
.fond .a4{right:2vw;bottom:-28vmax;background:radial-gradient(circle,rgba(255,55,95,.09),transparent 62%);animation:fd4 50s ease-in-out infinite alternate}
@keyframes fd1{to{transform:translate3d(9vw,6vh,0) scale(1.12)}}
@keyframes fd2{to{transform:translate3d(-8vw,8vh,0) scale(.95)}}
@keyframes fd3{to{transform:translate3d(10vw,-6vh,0) scale(1.15)}}
@keyframes fd4{to{transform:translate3d(-7vw,-8vh,0) scale(.92)}}
/* pendant un transfert le navigateur a mieux a faire : le fond s'arrete */
body[data-state=downloading] .fond i,body[data-state=verifying] .fond i,
body[data-state=uploading] .fond i,body[data-state=hashing] .fond i{animation-play-state:paused}


/* ---------- barre : logo asa (sans couleur), "asa transfer", "by asa cinema" ---------- */
.nav,.nav.stuck{background:rgba(0,0,0,.55);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;min-width:0}
.brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(160deg,#1b1b1f,#0a0a0c);border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px -10px rgba(0,0,0,.85)}
.brand-mark img{width:30px;height:30px;display:block}
.brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
/* maquette v5 (ui.css, asa.css) : "asa" gras et blanc, "transfer" fin et grise */
.brand-name{font:750 19px/1.15 var(--sans);letter-spacing:-.4px;color:var(--text);white-space:nowrap}
.brand-name b{font-weight:400;color:var(--muted)}
.brand-sub{font:400 12px/1.2 var(--sans);letter-spacing:.01em;color:var(--muted);white-space:nowrap}
.nav .btn--line{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11);font-family:var(--sans)}

/* ---------- titre du lot ---------- */
.lot-title{font:650 19px/1.25 var(--sans);letter-spacing:-.2px;color:var(--text);text-align:center;overflow-wrap:anywhere;max-width:min(680px,100%)}
/* le titre tient en haut : au centre, le mot de passe seul, puis le cadran seul */
.stage{min-height:100svh}
.stage>.lot-title{position:absolute;top:clamp(92px,13svh,118px);left:var(--gutter);right:var(--gutter);margin:0 auto}
.lot-title span{color:var(--muted);font-weight:500}

/* ---------- le cadran : lunette, fond, graduations, autour du rond existant ---------- */
.dial-bezel{position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#232327,var(--panel) 52%,#060607 100%);
  box-shadow:0 26px 55px -22px rgba(0,0,0,.95),inset 0 2px 3px rgba(255,255,255,.12),inset 0 -8px 18px rgba(0,0,0,.8)}
.dial-bezel::before{content:"";position:absolute;inset:2.4%;border-radius:50%;border:1px solid rgba(255,255,255,.07)}
.dial-face{position:absolute;inset:.6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#151517,#0a0a0b 70%);box-shadow:inset 0 4px 14px rgba(0,0,0,.85)}
svg.dial-ticks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
svg.dial-ticks line{stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:butt}
.ring .aurora{z-index:0}
.ring svg.r,.ring .center,.ring .head{z-index:1}
.ring .track{stroke:var(--track);stroke-width:15}
.ring .arc{stroke-width:15}
.ring::before{inset:-16%}
/* au survol, le rond pret est le bouton */
body[data-state=idle] .ring:hover .dial-bezel,body[data-state=resume] .ring:hover .dial-bezel{
  box-shadow:0 26px 55px -22px rgba(0,0,0,.95),0 0 60px rgba(255,255,255,.08),inset 0 2px 3px rgba(255,255,255,.14)}

/* ---------- texte du rond : SF Pro fin, groupe centre ---------- */
/* jamais de coche sur le rond : a la fin, un mot (maquette : "Verified") */
.ring #icon[data-icon=check]{display:none}
#pct .mot{font:500 clamp(32px,8vw,42px)/1 var(--sans);letter-spacing:-.02em}
#pct{font:300 clamp(46px,11vw,72px)/1 var(--sans);letter-spacing:-.04em}
#pct small{color:var(--muted);-webkit-text-fill-color:var(--muted)}
#phase{font:500 13px/1 var(--sans);letter-spacing:.01em;text-transform:none}
#eta,#sub{font-family:var(--sans)}
#sub{font-weight:300}
body[data-state=idle] #sub,body[data-state=resume] #sub{font:300 clamp(28px,6vw,40px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--text);max-width:none}

/* ---------- certificat, conseils, detail ---------- */
.cert .c1{font:600 22px/1.2 var(--sans)}
.cert .c2{text-transform:none;letter-spacing:.01em;font-size:15px}
.cert .c4{font-family:var(--sans);font-variant-numeric:tabular-nums}
.tips{font-family:var(--sans)}
#details{background:rgba(20,20,22,.82);border-color:var(--line-soft);border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 44px -20px rgba(0,0,0,.95)}
#details .name{font-family:var(--sans);font-weight:600}
#details .f small{font-family:var(--sans);font-variant-numeric:tabular-nums}
.sheet{background:rgba(24,25,28,.9);border-color:rgba(255,255,255,.08)}
.under .btn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11)}
#btn-zip{font:500 13px/1 var(--sans);letter-spacing:.02em}

/* ---------- porte d'acces : le mot de passe seul, au centre ---------- */
.unlock{gap:16px}
.unlock .lock,.lock{width:auto;height:auto;border:0;border-radius:0}
.unlock .lock svg{width:34px;height:34px;stroke:rgba(255,255,255,.75);stroke-width:3.4}
.unlock .lock.err svg{stroke:var(--ko)}
.unlock .pw{width:min(320px,100%);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.11);padding:4px 4px 4px 14px}
.unlock .pw input{font:400 15px/1 var(--sans);letter-spacing:.1em;text-align:left;padding-left:4px;height:38px}
.unlock .pw input::placeholder{letter-spacing:.02em}
.unlock .pw button{width:38px;height:38px;background:#f2f2f4}
.unlock .taille{font:400 15px/1 var(--sans);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.unlock .err{font-family:var(--sans)}

@media(max-width:560px){
  .brand-mark{width:36px;height:36px;flex-basis:36px}.brand-mark img{width:26px;height:26px}
  .brand-name{font-size:17px}.brand-sub{font-size:11px}
  .lot-title{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.fond i{animation:none}}

/* ---------- page d'envoi ---------- */
.nav .brand+.beta{margin-left:4px}
/* pastille sans capitales espacees */
.pastille-au{text-transform:none;letter-spacing:.02em;font-size:11.5px;font-weight:600;padding:6px 11px}
/* en-tete mobile : la marque, le compte (libelle court) ; la pastille et le bouton
   du haut se retirent (le meme bouton est dans la page, juste dessous) */
@media(max-width:560px){
  .nav .beta{display:none}
  .nav #acc-label{display:inline;max-width:10ch}
  .nav #btn-top-wait,.nav #btn-top-send{display:none}
  .nav .nav-actions{flex:0 1 auto}
}
.eyebrow{font-family:var(--sans)}
.foot .signature{gap:12px}
.foot .signature .brand-name{font-size:17px}