/* ma-quiz.css — Muslim Alim
   Bloc quiz de fin de page. Ne lit que les variables --ma-* de ma-ds.css
   (themes clair et sombre, arabe / RTL via proprietes logiques).
   Appele par ma-quiz.php ; tout est prefixe .ma-quiz. */
.ma-quiz{
  position:relative; margin-block:var(--ma-s-section) 0;
  padding:clamp(1.25rem,1rem + 1.6vw,2.25rem);
  background:var(--ma-surface); border:1px solid var(--ma-line);
  border-radius:var(--ma-r-lg); box-shadow:var(--ma-sh-1);
  color:var(--ma-text); overflow:hidden; box-sizing:border-box;
}
/* filet dore discret en haut, comme les autres cartes du site */
.ma-quiz::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--ma-gilt),transparent); opacity:.8;
}
.ma-quiz *{ box-sizing:border-box; }
.ma-quiz__head{ margin-block-end:var(--ma-s-6); }
.ma-quiz__kicker{
  display:inline-block; padding:.2rem .7rem; border-radius:var(--ma-r-pill);
  background:var(--ma-tint-2); color:var(--ma-accent-strong);
  font-size:var(--ma-fs-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.ma-quiz .ma-quiz__title{
  font-family:var(--ma-font-display); font-size:var(--ma-fs-xl); font-weight:600;
  letter-spacing:-.015em; line-height:var(--ma-lh-snug); color:var(--ma-text);
  margin:var(--ma-s-3) 0 var(--ma-s-2); padding:0; border:0; background:none;
}
.ma-quiz .ma-quiz__intro{ margin:0; font-size:var(--ma-fs-sm); color:var(--ma-text-2); }
.ma-quiz__body{ min-height:12rem; }
.ma-quiz .ma-quiz__status{ margin:0; color:var(--ma-text-3); font-size:var(--ma-fs-sm); }

.ma-quiz__steps{ display:flex; gap:var(--ma-s-2); list-style:none; margin:0 0 var(--ma-s-3); padding:0; }
.ma-quiz__step{ flex:1 1 0; max-width:4rem; height:5px; border-radius:var(--ma-r-pill); background:var(--ma-line-2); transition:background var(--ma-mid); }
.ma-quiz__step.is-done{ background:var(--ma-accent); }
.ma-quiz__step.is-now{ background:var(--ma-accent-strong); opacity:.55; }
.ma-quiz .ma-quiz__count{ margin:0 0 var(--ma-s-2); font-size:var(--ma-fs-xs); font-weight:700; color:var(--ma-text-3); letter-spacing:.04em; }
.ma-quiz .ma-quiz__q{
  margin:0 0 var(--ma-s-5); font-family:var(--ma-font-display); font-weight:600;
  font-size:var(--ma-fs-lg); line-height:var(--ma-lh-snug); color:var(--ma-text); outline:none;
}

.ma-quiz__opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ma-s-3); }
.ma-quiz .ma-quiz__opt{
  display:flex; align-items:center; gap:var(--ma-s-3); width:100%; min-height:3.25rem;
  margin:0; padding:.75rem 1rem; text-align:start; cursor:pointer;
  font:inherit; font-size:var(--ma-fs-base); font-weight:600; line-height:1.35;
  color:var(--ma-text); background:var(--ma-surface-2);
  border:1px solid var(--ma-line-2); border-radius:var(--ma-r);
  box-shadow:none; transition:border-color var(--ma-fast), background var(--ma-fast), transform var(--ma-fast);
}
.ma-quiz .ma-quiz__opt:hover{ border-color:var(--ma-ring); background:var(--ma-tint); transform:translateY(-1px); }
.ma-quiz .ma-quiz__opt:focus-visible,
.ma-quiz .ma-quiz__go:focus-visible{ outline:2px solid var(--ma-ring); outline-offset:2px; }
.ma-quiz__mark{
  flex:0 0 1.6rem; width:1.6rem; height:1.6rem; border-radius:50%;
  border:2px solid var(--ma-line-2); display:grid; place-items:center;
  font-size:.85rem; font-weight:800; line-height:1;
}
.ma-quiz__opts.is-locked .ma-quiz__opt{ cursor:default; transform:none; }
.ma-quiz__opts.is-locked .ma-quiz__opt:not(.is-right):not(.is-wrong){ opacity:.55; }
.ma-quiz .ma-quiz__opt.is-right{
  border-color:var(--ma-accent); background:var(--ma-tint-2);
}
.ma-quiz .ma-quiz__opt.is-right .ma-quiz__mark{ background:var(--ma-accent); border-color:var(--ma-accent); color:var(--ma-on-accent); }
.ma-quiz .ma-quiz__opt.is-wrong{
  border-color:oklch(0.64 0.16 27);
  background:color-mix(in oklch, oklch(0.64 0.16 27) 16%, transparent);
}
.ma-quiz .ma-quiz__opt.is-wrong .ma-quiz__mark{ background:oklch(0.64 0.16 27); border-color:oklch(0.64 0.16 27); color:#fff; }

.ma-quiz .ma-quiz__fb{
  margin:var(--ma-s-4) 0 0; padding:var(--ma-s-3) var(--ma-s-4);
  border-radius:var(--ma-r); font-size:var(--ma-fs-sm); line-height:var(--ma-lh-body);
  color:var(--ma-text-2); background:var(--ma-surface-2); border-inline-start:4px solid var(--ma-line-2);
}
.ma-quiz .ma-quiz__fb.is-right{ border-inline-start-color:var(--ma-accent); }
.ma-quiz .ma-quiz__fb.is-wrong{ border-inline-start-color:oklch(0.64 0.16 27); }
.ma-quiz .ma-quiz__fb-t{ color:var(--ma-text); }

.ma-quiz .ma-quiz__go{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ma-s-2);
  margin:var(--ma-s-4) 0 0; padding:.8rem 1.5rem; cursor:pointer;
  font:inherit; font-size:var(--ma-fs-base); font-weight:700; line-height:1.2;
  color:var(--ma-on-accent); background:var(--ma-accent);
  border:1px solid transparent; border-radius:var(--ma-r-pill);
  transition:transform var(--ma-fast), box-shadow var(--ma-fast);
}
.ma-quiz .ma-quiz__go:hover{ transform:translateY(-2px); box-shadow:var(--ma-sh-accent); }

.ma-quiz__result{ text-align:center; padding-block:var(--ma-s-4); }
.ma-quiz .ma-quiz__score{
  margin:0; font-family:var(--ma-font-display); font-weight:600;
  font-size:var(--ma-fs-3xl); line-height:1; color:var(--ma-accent-strong);
}
.ma-quiz .ma-quiz__msg{ margin:var(--ma-s-3) 0 var(--ma-s-2); font-size:var(--ma-fs-md); color:var(--ma-text); }

@media (max-width:640px){
  .ma-quiz__opts{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .ma-quiz *{ transition:none !important; }
}