/* Sport & MNT – ACT « Mon Pass Mouvement » : 3 étapes, semaine à composer, carte de sortie et défi éclair. */
.ligne-choix{display:grid;grid-template-columns:repeat(4,1fr)}
.reponses[data-groupe="q2"]{display:grid;grid-template-columns:repeat(3,1fr)}
.astuce{margin:6px 0 0;padding:14px 18px;border-radius:16px;font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.4;
  background:color-mix(in srgb,var(--st) 14%,var(--bg));border-left:6px solid var(--st)}

/* Bandeau des repères, toujours visible pendant l'étape 2 */
.bandeau{position:sticky;top:0;z-index:5;list-style:none;margin:0;padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;
  border-radius:14px;background:var(--st);color:#fff;font-weight:800;font-size:clamp(.85rem,1.5vw,1rem);box-shadow:0 10px 24px -12px var(--st)}
.bandeau li+li::before{content:"•";margin-right:18px;opacity:.7}
.q-consigne{margin:0;color:var(--muted)}

.vignettes{display:flex;flex-wrap:wrap;gap:10px}
.vignette{font:inherit;font-weight:800;font-size:1rem;padding:12px 16px;border-radius:999px;border:2px solid var(--st);background:var(--surface);color:var(--ink);cursor:grab;touch-action:none;user-select:none}
.vignette.choisi{background:var(--st);color:#fff;animation:rebond .3s cubic-bezier(.3,1.8,.5,1)}
.vignette.fantome{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);background:var(--st);color:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.jour{min-height:150px;border-radius:16px;padding:8px;background:color-mix(in srgb,var(--surface) 85%,transparent);border:2px dashed var(--line);display:grid;grid-template-rows:auto 1fr;gap:6px;transition:border-color .15s,background .15s}
.semaine.attend .jour{border-color:var(--st);cursor:pointer}
.jour.cible{border-style:solid;border-color:var(--st);background:color-mix(in srgb,var(--st) 18%,var(--surface))}
.jour.recu{animation:rebond .35s cubic-bezier(.3,1.8,.5,1)}
.jour-nom{margin:0;font-weight:800;text-align:center;font-size:.9rem}
.jour-contenu{display:flex;flex-direction:column;gap:6px}
.placee{font:inherit;font-weight:700;font-size:.82rem;padding:6px 8px;border-radius:10px;border:0;background:var(--st);color:#fff;text-align:left;cursor:pointer;line-height:1.2}

/* Étape 3 */
.exemple{margin:0;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--surface) 85%,transparent);border-left:6px solid var(--st);font-style:italic;line-height:1.45}
.engagement{display:grid;gap:12px}
.engagement label{display:grid;gap:6px;font-weight:800}
.engagement input{font:inherit;font-size:1.1rem;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink)}
.engagement input:focus{outline:none;border-color:var(--st)}

/* Carte « Mon Pass Mouvement » : recto / verso côte à côte */
.carte-pass{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.recto,.verso{border-radius:20px;padding:18px 20px;display:grid;gap:10px;align-content:start}
.recto{background:#fff;color:#14202B;box-shadow:0 0 0 4px var(--st)}
.verso{background:var(--st);color:#fff}
.pass-titre{margin:0;font-weight:800;letter-spacing:.04em}
.recto dl{margin:0;display:grid;gap:8px}
.recto dl div{display:grid;gap:2px;border-bottom:1px dashed #C9D3DC;padding-bottom:6px}
.recto dt{font-size:.8rem;font-weight:800;color:#5B6B7A}
.recto dd{margin:0;font-weight:700;min-height:1.3em}
.verso ul{margin:0;padding-left:18px;display:grid;gap:6px;font-weight:700}
.qr-oms{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.85rem}
.qr-oms img{width:84px;height:84px;background:#fff;border-radius:8px;padding:4px}

.defi{display:grid;gap:8px;padding:16px 20px;border-radius:20px;border:2px solid var(--st);background:color-mix(in srgb,var(--surface) 85%,transparent)}
.defi p,.defi ul{margin:0}
.defi-titre{font-weight:800}
.defi ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.defi li{padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--st) 18%,var(--bg));font-weight:700}
.defi .btn{justify-self:start}
.defi .btn:disabled{opacity:.5}
.defi-chrono{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:var(--st)}
@media (max-width:820px){
  .ligne-choix,.reponses[data-groupe="q2"]{grid-template-columns:1fr 1fr}
  .semaine{grid-template-columns:repeat(4,1fr)}
  .carte-pass{grid-template-columns:1fr}
}