.clq-voile{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;
  justify-content:center;padding:4vh 16px;overflow-y:auto;
  background:rgba(11,15,34,.45);
  -webkit-backdrop-filter:blur(7px) saturate(120%);backdrop-filter:blur(7px) saturate(120%);
  animation:clq-p .22s ease both}
.clq-voile[hidden]{display:none}
@keyframes clq-p{from{opacity:0}}

.clq{width:min(1100px,100%);margin:auto 0;border-radius:var(--r-lg,20px);
  background:var(--bg,#F2F4FA);border:1px solid var(--line,rgba(11,15,34,.1));
  box-shadow:0 0 0 1px var(--edge,rgba(255,255,255,.75)) inset,0 40px 90px -30px rgba(11,15,34,.5);
  animation:clq-m .28s cubic-bezier(.2,1,.3,1) both}
@keyframes clq-m{from{opacity:0;transform:translateY(16px) scale(.985)}}

.clq-tete{display:flex;align-items:flex-start;gap:16px;padding:24px 26px 0}
.clq-tete h2{font-family:var(--f-display,sans-serif);color:var(--ink,#0B0F22);font-weight:700;
  font-size:clamp(20px,2.6vw,26px);letter-spacing:-.03em;line-height:1.1;text-wrap:balance;margin:0}
.clq-tete p{margin:8px 0 0;color:var(--ink-3,#4E577D);font-size:14px;line-height:1.5}


.clq-picto{position:relative;flex:none;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:var(--v-soft,#EEE9FF);color:var(--v-ink,#5A2BDA);
  box-shadow:0 0 0 1px var(--edge,rgba(255,255,255,.75)) inset;transform:rotate(-6deg)}
.clq-picto svg{width:26px;height:26px;display:block}
.clq-picto i{position:absolute;left:calc(50% - 2.5px);top:32px;width:5px;height:5px;border-radius:50%;
  background:var(--v,#6D3BF5);animation:clq-goutte 1.8s ease-in infinite}
@keyframes clq-goutte{0%{transform:translateY(0);opacity:0}25%{opacity:1}
  85%{transform:translateY(13px);opacity:1}100%{transform:translateY(16px);opacity:0}}
.clq-x{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line,rgba(11,15,34,.1));background:var(--glass-2,rgba(255,255,255,.86));
  color:var(--ink-2,#252C4A);display:grid;place-items:center;transition:transform .2s,border-color .2s}
.clq-x:hover{transform:scale(1.07);border-color:rgba(109,59,245,.4)}
.clq-x svg{width:18px;height:18px}

.clq-corps{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;padding:18px 26px 20px}


.clq-in{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;align-content:start}
.clq-champ{background:var(--glass-2,rgba(255,255,255,.86));border:1px solid var(--line,rgba(11,15,34,.1));
  border-radius:var(--r-md,14px);padding:11px 14px 12px;
  box-shadow:0 0 0 1px var(--edge,rgba(255,255,255,.75)) inset}
.clq-champ label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13.5px;color:var(--ink-2,#252C4A);font-weight:600;letter-spacing:-.01em}
.clq-val{font-family:var(--f-mono,monospace);font-size:13px;color:var(--v-ink,#5A2BDA);
  white-space:nowrap;font-weight:500}
.clq-champ input[type=range]{width:100%;margin:10px 0 2px;accent-color:var(--v,#6D3BF5);height:22px}
.clq-champ input[type=range]:focus-visible{outline:2px solid var(--v,#6D3BF5);outline-offset:3px;border-radius:4px}
.clq-aide{margin-top:4px;font-size:11.5px;color:var(--ink-4,#606A90);line-height:1.45}


.clq-out{display:grid;gap:12px;align-content:start}
.clq-res{background:var(--solid,#fff);border:1px solid var(--line-2,rgba(11,15,34,.055));
  border-radius:var(--r-md,14px);padding:12px 16px 11px;
  box-shadow:0 0 0 1px var(--edge,rgba(255,255,255,.75)) inset}
.clq-res{position:relative;overflow:hidden}
.clq-res em{display:block;font-style:normal;font-family:var(--f-mono,monospace);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4,#606A90);margin-bottom:5px}
.clq-res b{display:block;font-family:var(--f-mono,monospace);font-weight:600;
  font-size:clamp(22px,2.8vw,28px);letter-spacing:-.03em;line-height:1.05;color:var(--v-ink,#5A2BDA)}
.clq-res span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3,#4E577D);line-height:1.45}

.clq-res.perte{background:#FDF0F0;border-color:rgba(163,32,32,.18)}
.clq-res.perte em{color:#A32020}
.clq-res.perte b{color:#A32020}
.clq-res.gain{background:#EAF7F1;border-color:rgba(10,143,107,.22)}
.clq-res.gain em{color:var(--ok,#0A8F6B)}
.clq-res.gain b{color:#06614A}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .clq-res.roi b{background:linear-gradient(100deg,var(--v,#6D3BF5) 10%,var(--b-ink,#0E63D6) 90%);
    -webkit-background-clip:text;background-clip:text;color:transparent}}

.clq-res.roi[hidden]{display:none}


.clq-part{padding:1px 2px}
.clq-part-bar{height:13px;border-radius:999px;background:#F6DCDC;overflow:hidden;
  border:1px solid rgba(163,32,32,.16);
  box-shadow:0 1px 3px rgba(11,15,34,.06) inset}
.clq-part-bar i{display:block;height:100%;width:70%;border-radius:999px;
  background:linear-gradient(90deg,#0A8F6B,#3FAE8B);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;
  transition:width .28s cubic-bezier(.2,1,.3,1)}
.clq-part p{margin:6px 0 0;font-family:var(--f-mono,monospace);font-size:11px;
  color:var(--ink-4,#606A90);line-height:1.5}
.clq-part b{color:#06614A;font-weight:600}

.clq-formule{border-top:1px dashed var(--line,rgba(11,15,34,.1));padding-top:11px;
  font-family:var(--f-mono,monospace);font-size:11px;color:var(--ink-4,#606A90);line-height:1.7}
.clq-formule b{color:var(--ink-3,#4E577D);font-weight:600}


.clq-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 26px 22px;border-top:1px solid var(--line-2,rgba(11,15,34,.055))}
.clq-note{font-size:12px;color:var(--ink-4,#606A90);line-height:1.5;max-width:38ch;margin-right:auto}
.clq-pied .btn{text-decoration:none}

@media(max-width:960px){
  .clq-corps{grid-template-columns:1fr;padding:16px 18px 18px}
}
@media(max-width:760px){
  .clq-in{grid-template-columns:1fr}
  .clq-tete{padding:20px 18px 0}
  .clq-pied{padding:14px 18px 18px}
  .clq-note{max-width:none;margin-right:0}
  .clq-pied .btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .clq-voile,.clq{animation:none}
  .clq-x{transition:none}
  .clq-picto i{animation:none;opacity:.5}
  .clq-part-bar i{transition:none}
}