/* =====================================================
   WAVEST — EXERCICES AVANT / APRÈS
   Scopé sous .ex-app / .ex-hero
===================================================== */
.ex-app{
  --ex-good:#4f9a7d; --ex-good-soft:rgba(124,195,154,.16);
  --ex-bad:#c85b62;  --ex-bad-soft:rgba(228,148,154,.18);
  margin:8px 0 40px;
}
.ex-hero p{max-width:720px}

.ex-picker{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.ex-pick{
  padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
}
.ex-pick.is-active{border-color:var(--link); color:var(--link)}
.ex-pick-score{margin-left:4px; font-size:11.5px; color:var(--muted)}

.ex-card{
  padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow);
}
.ex-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ex-head h2{margin:0; font-size:20px}
.ex-score{font-size:13px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}

/* Étapes */
.ex-stepper{display:flex; gap:6px; list-style:none; margin:18px 0 20px; padding:0; counter-reset:none}
.ex-stepper li{
  flex:1 1 0; display:flex; align-items:center; gap:8px; min-width:0;
  padding:8px 10px; border-radius:12px; background:var(--glass-soft); border:1px solid var(--line);
  font-size:12.5px; color:var(--muted); transition:all .3s ease;
}
.ex-stepper li.is-current{border-color:var(--link); color:var(--text); background:rgba(0,144,245,.06)}
.ex-stepper li.is-done{color:var(--text)}
.ex-dot{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:7px; font-size:11px; font-weight:800;
  background:rgba(0,144,245,.1); color:var(--link);
}
.ex-stepper li.is-current .ex-dot{background:var(--link); color:#fff}
.ex-stepper li.is-done .ex-dot{background:var(--ex-good); color:#fff}
.ex-st-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ex-st-txt b{color:inherit}

/* Corps : image + questions */
.ex-body{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:22px; align-items:start}
.ex-figure{margin:0}
.ex-fig-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.ex-tf{
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800;
  background:rgba(0,144,245,.1); color:var(--link);
}
.ex-view{display:inline-flex; padding:3px; border-radius:999px; background:var(--glass-soft); border:1px solid var(--line)}
.ex-view button{
  padding:5px 12px; border:0; border-radius:999px; background:transparent;
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
.ex-view button.is-on{background:var(--link); color:#fff}
.ex-img-link{
  position:relative; display:block; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--glass-soft);
}
.ex-img{display:block; width:100%; height:auto; animation:ex-fade .35s ease}
@keyframes ex-fade{from{opacity:0} to{opacity:1}}
.ex-img-fallback{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  padding:20px; text-align:center; font-weight:700; color:var(--link);
}
.ex-img-link.is-broken{min-height:220px}
.ex-img-link.is-broken .ex-img{display:none}
.ex-img-link.is-broken .ex-img-fallback{display:flex}
.ex-figure figcaption{margin-top:6px; font-size:11.5px; color:var(--muted)}

.ex-side{display:flex; flex-direction:column; gap:16px}
.ex-q-title{margin:0 0 10px; font-weight:700; font-size:15px; color:var(--text)}
.ex-chips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.ex-chips.is-many{grid-template-columns:repeat(3,minmax(0,1fr))}
.ex-chip{
  padding:10px 8px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.ex-chip:hover:not(:disabled){border-color:var(--link); transform:translateY(-1px)}
.ex-chip.is-picked{border-color:var(--link); background:rgba(0,144,245,.08); color:var(--link)}
.ex-chip:disabled{cursor:default}
.ex-chip.is-right{border-color:var(--ex-good); background:var(--ex-good-soft); color:var(--ex-good)}
.ex-chip.is-wrong{border-color:var(--ex-bad); background:var(--ex-bad-soft); color:var(--ex-bad); text-decoration:line-through}
.ex-chip:disabled:not(.is-right):not(.is-wrong){opacity:.45}

.ex-feedback{padding:14px 16px; border-radius:14px; border:1px solid transparent; animation:ex-fade .35s ease}
.ex-feedback strong{display:block; margin-bottom:4px}
.ex-feedback p{margin:0; font-size:14px; line-height:1.55; color:var(--text)}
.ex-feedback.is-good{background:var(--ex-good-soft); border-color:rgba(124,195,154,.5)}
.ex-feedback.is-good strong{color:var(--ex-good)}
.ex-feedback.is-bad{background:var(--ex-bad-soft); border-color:rgba(228,148,154,.5)}
.ex-feedback.is-bad strong{color:var(--ex-bad)}

.ex-btn{
  padding:13px 18px; border:0; border-radius:12px;
  background:var(--link); color:#fff; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.ex-btn:hover:not(:disabled){transform:translateY(-1px)}
.ex-btn:disabled{opacity:.4; cursor:not-allowed}
.ex-btn--ghost{background:transparent; color:var(--text); border:1px solid var(--line)}

/* Fin */
.ex-end{text-align:center}
.ex-end-score{margin:10px 0 18px}
.ex-big{display:block; font-size:44px; font-weight:800; color:var(--link); font-variant-numeric:tabular-nums}
.ex-end-score p{margin:6px auto 0; max-width:460px; color:var(--muted)}
.ex-result{
  max-width:420px; margin:0 auto 20px; padding:16px; border-radius:16px; border:1px solid var(--line);
}
.ex-result span{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.ex-result strong{display:block; margin:4px 0; font-size:22px}
.ex-result p{margin:0; font-size:13.5px; color:var(--muted)}
.ex-result--good{background:var(--ex-good-soft); border-color:rgba(124,195,154,.5)}
.ex-result--good strong{color:var(--ex-good)}
.ex-result--bad{background:var(--ex-bad-soft); border-color:rgba(228,148,154,.5)}
.ex-result--bad strong{color:var(--ex-bad)}
.ex-end-actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.ex-disclaimer{margin:20px auto 0; max-width:560px; font-size:12px; color:var(--muted)}

@media (max-width:860px){
  .ex-body{grid-template-columns:1fr}
  .ex-stepper li{padding:7px}
  .ex-st-txt{display:none}
  .ex-stepper li.is-current{flex:3}
  .ex-stepper li.is-current .ex-st-txt{display:inline}
  .ex-card{padding:18px}
}
@media (max-width:420px){ .ex-chips.is-many{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .ex-img, .ex-feedback{animation:none} }

.ex-result-fig{max-width:720px; margin:0 auto 20px; text-align:left}

/* Pont vers le programme */
.ex-cta{
  max-width:620px; margin:6px auto 22px; padding:22px 22px 24px; border-radius:18px; text-align:center;
  border:1px solid rgba(0,144,245,.35);
  background:linear-gradient(135deg, rgba(0,144,245,.09), rgba(79,195,161,.09));
}
.ex-cta-tag{margin:0 0 6px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--link)}
.ex-cta h3{margin:0 0 8px; font-size:20px; color:var(--text)}
.ex-cta p{margin:0 auto 16px; max-width:500px; font-size:14px; line-height:1.6; color:var(--muted)}
.ex-cta-btn{
  display:inline-block; padding:13px 22px; border-radius:12px; background:var(--link); color:#fff;
  font-weight:700; font-size:15px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.ex-cta-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,144,245,.6)}

/* Partage du score */
.ex-share{margin:0 auto 22px; max-width:520px}
.ex-share-title{margin:0 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.ex-share-btns{display:flex; justify-content:center; gap:8px; flex-wrap:wrap}
.ex-share-btn{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease}
.ex-share-btn svg{width:16px; height:16px; flex:none}
.ex-share-btn:hover{transform:translateY(-1px); border-color:var(--link)}
.ex-share-btn--main{background:var(--link); border-color:var(--link); color:#fff}
.ex-share-btn--wa svg{color:#25d366}
.ex-share-btn.is-done{border-color:var(--ex-good); color:var(--ex-good)}

/* Loupe + pop-up des graphiques */
.ex-img-link{position:relative; cursor:zoom-in}
.ex-zoomhint{position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:18px; color:#fff; background:rgba(0,0,0,.55); opacity:.85; transition:opacity .2s, transform .2s; pointer-events:none}
.ex-img-link:hover .ex-zoomhint{opacity:1; transform:scale(1.08)}
.ex-img-link.is-broken{cursor:pointer}
.ex-img-link.is-broken .ex-zoomhint{display:none}