/* ============ Classofus — page d'affinités ============ */

.quiz-main{padding-bottom:40px}
.quiz-main h2{margin:32px 0 4px;font-size:1.35rem}

/* ---------- Formulaire ---------- */

.quiz-form form{
  margin-top:18px;padding:22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}

.q-grid{display:grid;gap:14px}

.q-row{display:flex;align-items:center;gap:14px}

.q-icon{flex:none;width:32px;height:32px}
.q-icon img{width:32px;height:32px;border-radius:7px;object-fit:cover;display:block}
.q-icon .ph{
  display:grid;place-items:center;width:32px;height:32px;border-radius:7px;
  background:var(--accent-soft);color:#9dc0ff;font-size:.72rem;font-weight:700;
}

.q-label{flex:none;width:130px;font-size:.92rem;font-weight:600}

.q-row input[type=range]{
  flex:1;min-width:120px;accent-color:var(--accent);cursor:pointer;
}
.q-row input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.q-val{
  flex:none;width:34px;text-align:right;
  color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;
}

.q-diff{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.q-diff-lbl{
  display:block;margin-bottom:10px;color:var(--muted);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.q-diff-opts{display:flex;gap:18px;flex-wrap:wrap}
.q-diff-opts label{display:flex;align-items:center;gap:7px;font-size:.92rem;cursor:pointer}
.q-diff-opts input{accent-color:var(--accent)}

.q-actions{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.q-btn{
  padding:10px 20px;border:0;border-radius:8px;
  background:var(--accent);color:#fff;
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
}
.q-btn:hover{background:#3d7ce6}
.q-reset{color:var(--muted);font-size:.85rem;text-decoration:none}
.q-reset:hover{color:var(--text)}

/* ---------- Résultats ---------- */

.reco{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}

.reco-item{
  display:flex;gap:18px;padding:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.reco-item.is-top{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}

.reco-thumb{
  width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--surface-2);
}
.reco-thumb.ph{
  display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:1rem;
}

/* Vignette cliquable : ouvre la fiche modale de la classe. */
.reco-thumb-btn{
  padding:0;border:0;background:none;flex:none;cursor:pointer;line-height:0;
  border-radius:10px;transition:transform .12s ease, box-shadow .12s ease;
}
.reco-thumb-btn:hover .reco-thumb,
.reco-thumb-btn:focus-visible .reco-thumb{
  border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);
}
.reco-thumb-btn:hover{transform:translateY(-1px)}
.reco-thumb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Nom cliquable : même action que la vignette. */
.reco-name-btn{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  border-bottom:1px dashed transparent;transition:color .12s ease, border-color .12s ease;
}
.reco-name-btn:hover,
.reco-name-btn:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.reco-name-btn:focus-visible{outline:none}

.reco-body{flex:1;min-width:0}
.reco-body h3{margin:0 0 10px;font-size:1.15rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.reco-bar{
  height:6px;border-radius:99px;background:var(--star-off);overflow:hidden;max-width:340px;
}
.reco-bar span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7db2ff,#c9a6ff);
}
.reco-score{margin:6px 0 10px;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}

.reco-why{margin:0 0 6px;font-size:.9rem}
.reco-why.muted{color:var(--muted);font-style:italic}
.reco-modes{color:#7fd6a4}
.reco-modes strong{color:#9fe0bd}
.reco-desc{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}

.quiz-nav{margin-top:20px;color:var(--muted);font-size:.88rem}

#resultats{scroll-margin-top:20px}

@media(max-width:640px){
  .q-row{flex-wrap:wrap}
  .q-label{width:auto;flex:1}
  .q-row input[type=range]{flex-basis:100%;order:3}
  .reco-item{flex-direction:column}
}