/* Quiz pédagogique des commerces — fenêtre crème, titres à empattements, réponses larges et faciles à toucher.
   Le visuel flotte et suit légèrement le pointeur ; textes et boutons ne bougent jamais. */
.sq-modal { width: min(640px, 100%) !important; }
.sq-modal .modal-body { gap: 14px; padding-bottom: 18px; }
.sq-modal[aria-busy="true"] .sq-choice, .sq-modal[aria-busy="true"] .sq-actions .btn { cursor: progress; }

.sq-lead { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 0; }
.sq-points { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }
.sq-review { margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: #fbefdf; color: #6e4210; border: 1px solid rgba(164,102,28,.35); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; }
.sq-review::before { content: "✎"; }
.sq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-actions .btn { min-height: 46px; }
.sq-error { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: #fff2ee; color: var(--err); border: 1px solid rgba(155,58,46,.35); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.sq-foot { display: flex; justify-content: flex-end; }

/* progression */
.sq-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.sq-count { font-family: var(--serif); font-size: 17px; color: var(--bordeaux); font-weight: 600; }
.sq-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sq-chip { display: inline-block; background: rgba(67,87,71,.12); color: var(--sage); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sq-chip.soft { background: var(--cream-2); color: var(--ink-2); }
.sq-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.sq-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--gold)); border-radius: inherit; transition: width .35s ease; }

/* visuel du fruit : scène de hauteur fixe (aucun décalage de mise en page) */
.sq-stage { position: relative; margin: 0; height: 210px; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 38%, #fffaf2 0%, var(--cream-2) 72%, #ead8bf 100%); border: 1px solid var(--panel-line); --px: 0; --py: 0; }
.sq-stage::after { content: ""; position: absolute; left: 50%; bottom: 16px; width: 42%; height: 16px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46,38,32,.22), rgba(46,38,32,0) 70%); pointer-events: none; }
.sq-float { position: absolute; inset: 8% 8% 15%; animation: sq-float 5.5s ease-in-out infinite; will-change: transform; }
.sq-par { position: absolute; inset: 0; transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px), 0); transition: transform .25s ease-out; }
.sq-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(46,38,32,.24)); user-select: none; }
.sq-zoom { position: absolute; right: 8px; top: 8px; background: rgba(255,250,242,.9); font-size: 18px; z-index: 1; }
@keyframes sq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sq-still .sq-float { animation: none; }
.sq-still .sq-par { transform: none; transition: none; }
.sq-zoom-modal { width: min(760px, 100%) !important; }
.sq-big { width: 100%; max-height: 70vh; object-fit: contain; background: radial-gradient(ellipse at 50% 40%, #fffaf2, var(--cream-2)); border-radius: 14px; }

/* question et réponses */
.sq-question { font-size: 21px; line-height: 1.3; color: var(--ink); margin: 0; }
.sq-choices { display: grid; gap: 10px; }
.sq-choice { display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left;
  background: #fffaf2; border: 1.5px solid var(--panel-line); border-radius: 14px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s; }
.sq-choice:hover:not([disabled]) { background: #fff; border-color: var(--gold); }
.sq-choice[disabled] { cursor: default; }
.sq-key { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cream-2); color: var(--ink-2); font-size: 14px; font-weight: 700; }
.sq-mark { font-size: 20px; text-align: center; font-weight: 700; }
.sq-choice.is-picked { border-color: var(--stone); background: #fff; }
.sq-choice.is-correct { border-color: var(--ok); background: #e9f3eb; }
.sq-choice.is-correct .sq-key { background: var(--ok); color: #fff; }
.sq-choice.is-correct .sq-mark { color: var(--ok); }
.sq-choice.is-wrong { border-color: rgba(119,61,53,.55); background: #fbf0ea; }
.sq-choice.is-wrong .sq-key { background: var(--bordeaux); color: var(--cream); }
.sq-choice[disabled]:not(.is-correct):not(.is-wrong) { opacity: .7; }

/* correction */
.sq-feedback { display: grid; gap: 8px; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--panel-line); background: #fffdf8; }
.sq-feedback p { margin: 0; }
.sq-feedback.ok { border-left: 4px solid var(--ok); }
.sq-feedback.learn { border-left: 4px solid var(--gold); }
.sq-verdict { font-family: var(--serif); font-size: 18px; color: var(--sage); }
.sq-feedback.learn .sq-verdict { color: var(--bordeaux); }
.sq-source { font-size: 13px; color: var(--ink-2); margin: 0; overflow-wrap: anywhere; }
.sq-source a { color: var(--sage); }

/* résultat */
.sq-score { text-align: center; display: grid; gap: 2px; padding: 8px 0 4px; }
.sq-score span { color: var(--ink-2); font-size: 14px; }
.sq-score b { font-family: var(--serif); font-size: 44px; line-height: 1.1; color: var(--sage); }
.sq-score p { margin: 0; font-family: var(--serif); font-size: 17px; }
.sq-pts { margin: 0; text-align: center; color: var(--ok); font-weight: 600; }
.sq-notions { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.sq-notions li p { margin: 4px 0 2px; }
.sq-discover p { margin: 0 0 10px; font-size: 16px; }
.sq-discover p:first-child { font-family: var(--serif); font-size: 18px; }

@media (max-width: 760px) {
  .sq-stage { height: 160px; }
  .sq-question { font-size: 19px; }
  .sq-actions .btn { flex: 1 1 100%; }
  .sq-progress { grid-template-columns: 1fr; }
  .sq-chips { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sq-float { animation: none; }
  .sq-par { transform: none; transition: none; }
  .sq-bar i { transition: none; }
}