/* =====================================================================
   pavapi — l'exécution d'une bascule, vue par celui qui signe.

   Aucune couleur n'est posée ici : tout vient des jetons d'app.css. Une
   interface qui déplace de l'argent doit ressembler au reste du site, pas
   à un widget importé — sans quoi le visiteur ne sait plus à qui il parle
   au moment précis où il faudrait qu'il le sache.

   Le préfixe `xq-` isole ces règles : elles ne peuvent rien casser
   ailleurs, et ce qui appartient au site (`.btn`, `.modal`, `.pill`,
   `.tag`, `.mono`) est réutilisé tel quel plutôt que redéfini.
   ===================================================================== */

/* ---------- la bannière : une proposition, pas une alerte ---------- */
.xq-banner-host{
  position:fixed; z-index:90; right:20px; bottom:20px;
  max-width:min(475px, calc(100vw - 40px));
  /* Le conteneur vide ne doit intercepter aucun clic. */
  pointer-events:none;
}
.xq-banner{
  pointer-events:auto;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-left:3px solid var(--asset);
  border-radius:0; padding:13px 14px;
  box-shadow:0 18px 40px rgba(10,8,7,.55);
  animation:xq-rise .32s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes xq-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
@media(prefers-reduced-motion:reduce){ .xq-banner{animation:none;} }

.xq-banner-body{display:flex; align-items:flex-start; gap:11px; min-width:0;}
.xq-banner-body b{display:block; font-size:.88rem; margin-bottom:3px; text-wrap:balance;}
.xq-banner-body .dim{font-size:.79rem; line-height:1.5;}
/* Le chiffre qui justifie la proposition ne doit jamais casser en deux lignes. */
.xq-gain{white-space:nowrap;}
.xq-spark{
  flex:0 0 auto; width:9px; height:9px; margin-top:5px; border-radius:50%;
  background:var(--asset); box-shadow:0 0 0 4px color-mix(in srgb, var(--asset) 18%, transparent);
  animation:pulse 2.4s infinite;
}
.xq-banner-acts{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.xq-sm{padding:9px 14px; font-size:.82rem;}
.xq-x{background:none; border:none; color:var(--paper-faint); cursor:pointer; font-size:.9rem; padding:6px;}
.xq-x:hover{color:var(--paper);}

@media(max-width:640px){
  .xq-banner-host{right:10px; left:10px; bottom:10px; max-width:none;}
  .xq-banner{flex-direction:column; align-items:stretch; gap:10px;}
  .xq-banner-acts{justify-content:space-between;}
  .xq-sm{flex:1;}
}

/* ---------- la modale : celle du site, un peu plus large ---------- */
.xq-overlay{z-index:120;}
.xq-modal{max-width:520px;}
.xq-modal .modal-status{justify-content:center;}

/* ---------- d'où l'on part, où l'on va ---------- */
.xq-route{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:0; padding:14px; margin-bottom:12px;
}
.xq-node{display:flex; flex-direction:column; gap:2px; min-width:0;}
.xq-node > span:first-child{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;}
.xq-node b{font-size:.95rem; overflow-wrap:anywhere;}
.xq-node span:last-child{font-size:.78rem;}
.xq-node.is-target b{color:var(--paper);}
.xq-arrow{color:var(--asset); font-size:1.1rem;}

/* ---------- les quatre chiffres qui décident ---------- */
.xq-figures{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:0; overflow:hidden; margin-bottom:12px;
}
.xq-figures > div{
  background:var(--surface-2); padding:11px 13px;
  display:flex; flex-direction:column; gap:3px;
}
.xq-figures .dim{font-size:.72rem;}
.xq-figures b{font-size:1.02rem;}

/* ---------- le verdict : la phrase qui compte ---------- */
.xq-verdict{
  border:1px solid var(--line-strong); border-left-width:3px;
  border-radius:0; padding:13px 14px; margin-bottom:12px;
  background:var(--surface-2);
}
.xq-verdict b{display:block; font-size:.95rem; margin-bottom:4px;}
.xq-verdict p{margin:0; font-size:.85rem; color:var(--paper-dim); line-height:1.6;}
.xq-verdict.is-go{border-left-color:var(--ok);}
.xq-verdict.is-go b{color:var(--ok);}
.xq-verdict.is-warn{border-left-color:var(--warn);}
.xq-verdict.is-warn b{color:var(--warn);}
.xq-verdict.is-stop{border-left-color:var(--danger);}
.xq-verdict.is-stop b{color:var(--danger);}

/* ---------- le détail des frais, replié par défaut ---------- */
.xq-details{
  border:1px solid var(--line); border-radius:0;
  padding:10px 13px; margin-bottom:12px; background:var(--surface-2);
}
.xq-details summary{cursor:pointer; font-size:.83rem; color:var(--paper-dim); list-style:none;}
.xq-details summary::-webkit-details-marker{display:none;}
.xq-details summary::before{content:'▸ '; color:var(--paper-faint);}
.xq-details[open] summary::before{content:'▾ ';}
.xq-details summary:hover{color:var(--paper);}
.xq-fees{margin-top:10px;}
.xq-fee{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:6px 0; font-size:.82rem; border-top:1px solid var(--line);
}
.xq-fee:first-child{border-top:none;}
.xq-fee > span{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.xq-note{font-size:.74rem; line-height:1.55; margin:8px 0 0;}
.xq-center{text-align:center;}

/* ---------- l'aperçu des étapes ---------- */
.xq-steps-preview{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:14px;}
.xq-steps-preview .dim{font-size:.78rem; width:100%;}
.xq-steps-preview .pill{font-size:.7rem; color:var(--paper-dim);}

/* ---------- l'exécution, étape par étape ---------- */
.xq-steps{list-style:none; margin:0 0 14px; padding:0;}
.xq-step{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  padding:12px 0; border-top:1px solid var(--line);
}
.xq-step:first-child{border-top:none;}
.xq-step b{font-size:.92rem;}
.xq-step p{margin:3px 0 0; font-size:.8rem; line-height:1.55;}
.xq-state{font-size:.75rem; color:var(--paper-faint);}
.xq-state a{color:var(--asset);}

/* La pastille dit l'état sans qu'on ait à lire — et le texte le redit
   quand même, pour qui ne distingue pas ces couleurs. */
.xq-dot{
  width:10px; height:10px; border-radius:50%; margin-top:6px;
  background:var(--surface-3); border:1px solid var(--line-strong);
}
.xq-step.is-now  .xq-dot{background:var(--asset); border-color:var(--asset); animation:pulse 1.6s infinite;}
.xq-step.is-done .xq-dot{background:var(--ok); border-color:var(--ok);}
.xq-step.is-skip .xq-dot{background:var(--paper-faint); border-color:var(--paper-faint);}
.xq-step.is-fail .xq-dot{background:var(--danger); border-color:var(--danger);}
.xq-step.is-done b, .xq-step.is-skip b{color:var(--paper-dim);}
.xq-step.is-fail .xq-state{color:var(--danger);}

/* ---------- le rappel du contrat moral, toujours visible ---------- */
.xq-oath{
  display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--paper-faint);
}
.xq-oath span{display:inline-flex; align-items:center; gap:5px;}
.xq-oath span::before{content:'✓'; color:var(--ok);}

@media(max-width:520px){
  .xq-route{grid-template-columns:1fr; gap:8px;}
  .xq-arrow{transform:rotate(90deg); justify-self:start;}
  .xq-figures{grid-template-columns:1fr;}
}