/* sweep - socle commun aux pages d'envoi (tokens, rond, feuilles, boutons).
   Le rond est le meme objet que sur la page client (destinataire.py) : zone de
   depot, jauge, verdict. Les essais de mise en page ne le redefinissent pas,
   ils l'entourent. Contrat DOM : accueil.js (ids ring, arc, head, icon, pct,
   eta, sub, hint, overlay, sheet-*). */
:root{
  --bg:#000;--panel:#1d1d1f;--panel-2:#141416;--text:#f5f5f7;--muted:#86868b;--faint:rgba(245,245,247,.38);
  --line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.07);--track:rgba(255,255,255,.1);
  --ko:#ff453a;
  /* Aurore : memes teintes que la page de reception (destinataire.py). Le vert
     a ete retire des deux cotes. Ce qui est prouve se dit en BLANC lumineux ;
     les couleurs servent aux phases et aux accents. */
  --au1:#fb923c;--au2:#f472b6;--au3:#a78bfa;--au4:#60a5fa;
  --dl:#9ad9f5;--vf:#f0a8c8;
  --ok:rgba(255,255,255,.98);--halo:0 0 14px rgba(255,255,255,.55);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Typo retenue (banc de variantes, option "Graphik + SF Pro") : Graphik Medium porte les
     mots qui comptent, en medium ; les chiffres la portent aussi, en fin. Choix Thierry du
     21/09/2026 sur /typos.html : "AsaPro fin + AsaPro medium". */
  --display:"AsaPro",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --chiffres:"AsaPro",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.28,.11,.32,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 17px/1.47 var(--sans);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
button:disabled{opacity:.36;cursor:not-allowed}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
[hidden]{display:none!important}

/* ---------- boutons ---------- */
.btn{font-family:var(--display);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:980px;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease),opacity .25s}
.btn:active{transform:scale(.97)}
.btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--s{height:32px;padding:0 14px;font-size:12px}
.btn--m{height:46px;padding:0 24px;font-size:17px}
.btn--fill{background:var(--text);color:#000}
.btn--fill:hover{background:#fff}
.btn--line{border:1px solid var(--line);color:var(--text)}
.btn--line:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.btn--ghost{color:var(--muted)}
.btn--ghost:hover{color:var(--text)}
.btn--icon{width:32px;height:32px;padding:0;border-radius:50%}
.btn--icon svg{width:17px;height:17px}
.btn--s svg{width:15px;height:15px}
.btn--m svg{width:18px;height:18px}

/* ---------- marque ---------- */
@font-face{font-family:"AsaPro";src:url("fonts/asa_font_pro_thin.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"AsaPro";src:url("fonts/asa_font_pro_light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"AsaPro";src:url("fonts/asa_font_pro_regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"AsaPro";src:url("fonts/asa_font_pro_medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"AsaPro";src:url("fonts/asa_font_pro_semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Graphik";src:url("fonts/GraphikMedium-d3633406.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- barre ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:72px;display:flex;align-items:center;padding:0 var(--gutter);gap:20px;transition:background .4s var(--ease),border-color .4s var(--ease)}
.nav.stuck{background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
/* Piste 9 : l'arc du rond de progression sert d'initiale. Meme trace que
   #arc dans le rond, a l'echelle du texte. */
.wordmark{font:600 34px/1 "AsaPro",var(--sans);letter-spacing:-.04em;display:flex;align-items:center;gap:11px;white-space:nowrap}
.wordmark .mark{display:inline-flex;align-items:center;gap:.2em}
.wordmark .mark svg{width:.78em;height:.78em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.wordmark small{font:400 13px/1 var(--sans);color:var(--muted);letter-spacing:0;display:inline-flex;align-items:center;gap:5px;opacity:.75}
/* Le logo asa remplace le mot dans la signature : hauteur calee sur la
   minuscule du mot-marque, legerement en retrait pour rester second. */
.wordmark small img{height:9px;width:auto;display:block}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
#acc-label{overflow:hidden;text-overflow:ellipsis;max-width:22ch}

/* ---------- le rond, porte tel quel depuis la page de reception ----------
   Source : destinataire.py (branche sprint/acces-client). Memes tracks,
   memes degrades par phase, meme flux en pointilles, meme aurore, meme
   lueur coloree. Les classes dl / vf / live / ok sont posees par accueil.js
   comme destinataire.js les pose de son cote. Seule adaptation : la taille
   du rond suit --ring au lieu d'etre figee a 380 px. */
@font-face{font-family:"Circular";src:url("fonts/asa_circular_xx_light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Circular";src:url("fonts/asa_circular_xx_book.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Circular";src:url("fonts/asa_circular_xx_medium.woff2") format("woff2");font-weight:500;font-display:swap}

.ring{position:relative;width:var(--ring,340px);aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ring::before{content:"";position:absolute;inset:-11%;border-radius:50%;will-change:transform,opacity;background:radial-gradient(circle in oklab,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 45%,transparent 70%);opacity:0;transition:opacity .8s;pointer-events:none}
body[data-state=idle] .ring::before,body[data-state=selected] .ring::before{opacity:1;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.04);opacity:1}}
body[data-state=idle] #icon{animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.head{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.9),0 0 4px #fff;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;pointer-events:none}
body[data-state=hashing] .head,body[data-state=uploading] .head,body[data-state=verifying] .head{opacity:1}
body[data-state=idle] .head,body[data-state=selected] .head{opacity:0!important}
/* A 0 %, le bout rond de l'arc dessine un point : on cache l'arc tant qu'il est vide. */
body[data-state=idle] .ring .arc,body[data-state=selected] .ring .arc{visibility:hidden}
.ring.dl .head{background:#c9eeff;box-shadow:0 0 18px rgba(100,210,255,.95),0 0 4px #fff}
.ring.vf .head{background:#ffd58a;box-shadow:0 0 18px rgba(255,159,10,.95),0 0 4px #fff}
.ring.ok .head{background:#fff;box-shadow:0 0 18px rgba(244,114,182,.9)}
.ring .aurora{position:absolute;inset:-32%;border-radius:50%;opacity:0;transition:opacity 1.2s;pointer-events:none;will-change:transform;/* Aucun filtre : une couche floutee est re-floutee a CHAQUE image, ce qui saturait le navigateur du client pendant un transfert (34 ms par image au lieu de 16). Le fondu du bord vient donc d'un MASQUE : compose une seule fois sur une couche statique, il ne coute rien par image. Sans lui, les degrades sont encore colores quand ils atteignent le bord de la boite, que border-radius coupe net : on voyait un disque a bord franc. Verifie a l'ecran, luminosite x3. */background:radial-gradient(circle at 33% 29% in oklab,rgba(251,146,60,.72) 0%,rgba(251,146,60,.24) 38%,rgba(251,146,60,0) 70%),radial-gradient(circle at 69% 31% in oklab,rgba(244,114,182,.72) 0%,rgba(244,114,182,.24) 38%,rgba(244,114,182,0) 70%),radial-gradient(circle at 67% 71% in oklab,rgba(167,139,250,.72) 0%,rgba(167,139,250,.24) 38%,rgba(167,139,250,0) 70%),radial-gradient(circle at 31% 69% in oklab,rgba(96,165,250,.72) 0%,rgba(96,165,250,.10) 38%,rgba(96,165,250,0) 70%);-webkit-mask-image:radial-gradient(circle closest-side,#000 38%,rgba(0,0,0,.52) 62%,transparent 88%);mask-image:radial-gradient(circle closest-side,#000 38%,rgba(0,0,0,.52) 62%,transparent 88%)}
@keyframes auspin{to{transform:rotate(360deg)}}
/* L'aurore ne tourne QUE dans l'etat final : faire tourner cette couche coute 6 ms par
   image (23 au lieu de 16), or pendant un transfert le navigateur a autre chose a faire. */
.ring.ok .aurora{opacity:.42;animation:auspin 30s linear infinite}
/* Au repos l'aurore respire deja derriere le rond : c'est ce qui donne envie
   d'y poser quelque chose. Elle monte au survol et au depot. */
body[data-state=idle] .ring .aurora,body[data-state=selected] .ring .aurora{opacity:.26}
body[data-state=idle] .ring:hover .aurora{opacity:.32}
.ring.over .aurora{opacity:.42}
.ring:active{transform:scale(.97)}
.ring.over{transform:scale(1.03)}
body[data-state=hashing] .ring,body[data-state=uploading] .ring,body[data-state=verifying] .ring{cursor:default}
.ring svg.r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--track);stroke-width:14}
.ring .arc{fill:none;stroke:url(#gArc);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .45s linear,stroke .4s;filter:url(#fGlow)}
.ring.dl #fGlow feDropShadow{flood-color:#64d2ff;flood-opacity:.55}
.ring.vf #fGlow feDropShadow{flood-color:#ff9f0a;flood-opacity:.55}
.ring.ok #fGlow feDropShadow{flood-color:#f472b6;flood-opacity:.6}
.ring.ko #fGlow feDropShadow{flood-color:#ff453a;flood-opacity:.5}
.ring.dl .arc{stroke:url(#gDl)}
.ring.vf .arc{stroke:url(#gVf)}
.ring .flow{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:3 13;opacity:0;transition:opacity .5s;pointer-events:none}
.ring.live .flow{opacity:.85;animation:dashFlow 1.6s linear infinite}
.ring.vf .flow{animation-direction:reverse;animation-duration:1.1s}
@keyframes dashFlow{to{stroke-dashoffset:-64}}
.ring.live .arc{transition:stroke .4s,filter .4s}
.ring.ok .arc{stroke:url(#gAu)!important}
.ring.ko .arc{stroke:var(--ko)!important}
.ring.live::after{content:"";position:absolute;inset:-29%;border-radius:50%;pointer-events:none;transition:background .6s;background:radial-gradient(circle closest-side in oklab,transparent 58%,rgba(255,255,255,.07) 70%,transparent 96%)}
.ring.dl::after{background:radial-gradient(circle closest-side in oklab,transparent 56%,rgba(100,210,255,.16) 70%,transparent 96%)}
.ring.vf::after{background:radial-gradient(circle closest-side in oklab,transparent 56%,rgba(255,159,10,.16) 70%,transparent 96%)}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;padding:0 14%}
#icon{width:30%;height:30%;fill:none;stroke:var(--text);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
#icon.fade{opacity:0;transform:scale(.8)}
#icon:empty{display:none}
.ring.ok #icon{stroke:#fff}.ring.ko #icon{stroke:var(--ko)}
#icon[data-icon=spin]{animation:spin 1.1s linear infinite;stroke-width:5}
@keyframes spin{to{transform:rotate(360deg)}}
.ring.done #icon{animation:pop .7s cubic-bezier(.34,1.56,.64,1)}
.ring.done{animation:settle 1.1s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes settle{0%{transform:scale(1)}30%{transform:scale(1.04)}100%{transform:scale(.88)}}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
#pct{font:200 clamp(46px,12vw,88px)/1 var(--chiffres);letter-spacing:-.035em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));-webkit-background-clip:text;background-clip:text;color:transparent}
.ring.dl #pct{background-image:linear-gradient(180deg,#fff,#a6e4ff)}
.ring.vf #pct{background-image:linear-gradient(180deg,#fff,#ffcf7a)}
/* Decimales du pourcentage a 62 % (variante B). Le volume en Go n'est pas concerne. */
#pct small{font-size:.62em;font-weight:inherit;letter-spacing:-.02em}
#pct:empty,#eta:empty{display:none}
#phase{font:500 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);min-height:16px;transition:color .4s,opacity .4s}
#phase:empty{display:none}
.ring.dl #phase{color:#9ad9f5}.ring.vf #phase{color:#f0a8c8}.ring.ok #phase{color:var(--text)}
#eta{font:300 17px/1.2 var(--chiffres);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.01em;min-height:22px}
#sub{font:300 15px/1.3 var(--chiffres);color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em;min-height:20px;text-align:center}
#hint{font-size:14px;color:var(--muted);text-align:center}
#hint button{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(245,245,247,.4)}
#hint button:hover{text-decoration-color:#fff}
/* Certificat de fin, repris mot pour mot de la page de reception. */
.cert{text-align:center;animation:rise .8s .5s cubic-bezier(.2,.8,.2,1) both}
.cert[hidden]{display:none}
.cert .c1{font:500 22px/1.2 var(--display);letter-spacing:-.01em;color:var(--text)}
.cert .c2{margin-top:6px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,var(--au1),var(--au2),var(--au3),var(--au4));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- recu (objet de preuve, montre tel qu'il est remis) ---------- */
.receipt{border:1px solid var(--line-soft);border-radius:20px;overflow:hidden;background:var(--panel-2);font-family:var(--mono);font-size:12.5px;letter-spacing:0}
.receipt-h{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line-soft);font-family:var(--sans);font-size:14px;letter-spacing:-.01em}
.receipt-h b{font-weight:600}
.receipt-h .v{color:var(--text);text-shadow:var(--halo);font-weight:600;font-size:12px;white-space:nowrap}
.receipt-row{display:flex;justify-content:space-between;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.receipt-row:last-child{border-bottom:0}
.receipt-row .p{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt-row .h{color:var(--faint);white-space:nowrap}
.receipt-row .k{color:var(--dl);white-space:nowrap}

/* ---------- feuilles ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,.72) 46%);animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{width:min(680px,100%);max-height:78svh;overflow-y:auto;background:rgba(29,29,31,.94);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line-soft);border-bottom:0;border-radius:26px 26px 0 0;padding:26px 26px 22px;box-shadow:0 -20px 80px rgba(0,0,0,.6);animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
.sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.sheet-h .t{font-size:21px;font-weight:600;letter-spacing:-.022em;overflow-wrap:anywhere}
.sheet-h .t small{display:block;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:4px;letter-spacing:-.01em}
.sheet-h .v{font-size:12.5px;color:var(--muted);white-space:nowrap;font-weight:500;padding-top:5px}
.sheet-h .v.ok{color:var(--ok)}.sheet-h .v.ko{color:var(--ko)}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.field small{color:var(--faint)}
.field input,.field textarea{width:100%;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:inherit;font-size:16px;padding:12px 14px;outline:none;resize:vertical;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.07)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.rows{list-style:none;border-top:1px solid var(--line-soft)}
.rows li{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line-soft)}
.rows .st{width:20px;flex:0 0 20px;display:grid;place-items:center}
.rows .st svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rows .st.ok svg{stroke:var(--ok)}.rows .st.ko svg{stroke:var(--ko)}
.rows .st svg[data-icon=spin]{animation:spin 1.15s linear infinite}
.rows .f{flex:1;min-width:0;font-size:14.5px;overflow-wrap:anywhere}
.rows .f small{display:block;font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.rows .f code{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:0}
.rows .num{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rows .num.ok{color:var(--ok)}.rows .num.ko{color:var(--ko)}
.rows .act{display:flex;gap:6px;flex:0 0 auto}
.sheet-f{display:flex;align-items:center;gap:10px;padding-top:18px;flex-wrap:wrap}
.sheet-f .spacer{flex:1}
.note{font-size:13px;color:var(--muted)}
.err{font-size:13.5px;color:var(--ko);margin-bottom:12px}
.msg{font-size:15.5px;line-height:1.5;color:var(--muted);margin-bottom:16px}
.msg b{color:var(--text);font-weight:500}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:560px){
  #acc-label{display:none}
  .nav-actions{gap:6px}
  .btn--s{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- signature de pied de page ---------- */
.signature{display:flex;align-items:center;justify-content:center;gap:20px;padding:30px 22px 12px}
.signature .mark{display:inline-flex;align-items:center;gap:.22em;font:600 26px/1 "AsaPro",var(--sans);letter-spacing:-.04em;color:var(--text)}
.signature .mark svg{width:.78em;height:.78em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.signature .sep{width:1px;height:24px;background:var(--line)}
.signature a{display:block;line-height:0;transition:opacity .2s var(--ease)}
.signature a:hover img{opacity:1}
.signature img{height:18px;width:auto;opacity:.85;display:block;transition:opacity .2s var(--ease)}
/* Ligne technique anglaise : "bit-for-bit" est le terme consacre en
   informatique legale, il ancre la marque du cote de l'instrument. */
.baseline{text-align:center;font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted);padding:0 22px 30px}
@media(max-width:560px){.signature{gap:14px;padding-top:40px}.signature .mark{font-size:21px}.signature img{height:15px}.baseline{padding-bottom:38px}}

/* ---------- pastille aurore (early access, exclusivite) ---------- */
.pastille-au{font:600 9.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  border-radius:999px;padding:6px 11px 5px;position:relative;
  background:linear-gradient(100deg,rgba(251,146,60,.16),rgba(244,114,182,.16),rgba(167,139,250,.16),rgba(96,165,250,.16));
  border:1px solid transparent;
  background-clip:padding-box}
.pastille-au::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;
  background:linear-gradient(100deg,var(--au1),var(--au2),var(--au3),var(--au4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;pointer-events:none}
.pastille-au span{background:linear-gradient(100deg,var(--au1),var(--au2),var(--au3),var(--au4));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Grain, comme sur la page de reception : casse les bandes des degrades. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

/* ---------- le balayage au repos ----------
   Un segment iridescent fait le tour, lentement. Le nom de la marque rendu
   visible, et la seule chose qui bouge tant que rien n'est depose. */
.sweeper{opacity:0;transition:opacity .6s var(--ease);transform-origin:50% 50%}
/* pas de filtre SVG sur le segment : il tourne, le filtre serait recalcule a chaque image */
.sweeper circle{fill:none;stroke:url(#gAu);stroke-width:14;stroke-linecap:round}
body[data-state=idle] .sweeper,body[data-state=selected] .sweeper{opacity:.9;animation:sweepTurn 5.5s linear infinite}
/* Quand la page pilote le segment elle-meme (sweeper.js), l'animation CSS doit se taire :
   changer sa duree au survol faisait sauter le segment. */
body.js-sweep .sweeper{animation:none!important;transform-origin:50% 50%;will-change:transform}
/* pendant le transfert, l'arc change de longueur a chaque image : pas de filtre dessus */
body[data-state=downloading] .ring .arc,body[data-state=verifying] .ring .arc,
body[data-state=uploading] .ring .arc,body[data-state=hashing] .ring .arc{filter:none}
body.js-sweep .ring:hover .sweeper{animation:none!important}
.ring .sweeper circle{transition:stroke-width .35s var(--ease)}
/* Le coeur du rond, zone qui declenche : il se signale au survol. */
body.centre .ring #icon{transform:scale(1.12)}
body.centre .ring .aurora{opacity:.42}
body.centre .ring .sweeper circle{stroke-width:16}
body.centre .ring::before{opacity:1}
body[data-state=idle] .ring:hover .sweeper{animation-duration:3.2s}
.ring.over .sweeper{animation-duration:2.2s;opacity:1}
@keyframes sweepTurn{to{transform:rotate(360deg)}}
body[data-state=idle] #fGlow feDropShadow,body[data-state=selected] #fGlow feDropShadow{flood-color:#f472b6;flood-opacity:.45}
/* Le centre respire au lieu d'afficher une icone. */
body[data-state=idle] #sub,body[data-state=selected] #sub{font-size:16px;color:rgba(245,245,247,.72);letter-spacing:.01em;max-width:17ch;line-height:1.35}
body[data-state=idle] .ring:hover #sub{color:var(--text)}