/*
 * ECL-34 — l'écran de retour (dernier pas du lecteur) et l'onglet « Retours »
 * de l'Administration.
 *
 * Une feuille à part plutôt qu'un ajout à `learn.css` ou `admin.css` : ce
 * ticket vit à côté d'ECL-31 (qui refond la page Apprendre) et d'ECL-22 (le
 * lecteur) ; deux sessions n'ont pas à se marcher dessus dans le même fichier.
 *
 * Aucune couleur hors jetons, aucun `!important` : les états (bien noté / mal
 * noté) empruntent les couleurs sémantiques, la note choisie emprunte
 * `--primary`. Le jaune de la marque reste au [AI] du logo.
 */

/* ------------------------------------------------- l'écran de retour */

.screen-feedback .feedback-form { display: flex; flex-direction: column; gap: var(--space-5); }
.screen-feedback .feedback-block { display: flex; flex-direction: column; gap: var(--space-2); }

.feedback-label { margin: 0; font-weight: 600; }
.feedback-scale,
.feedback-counter { margin: 0; }

/* La note : cinq pastilles. Le contrôle est un vrai `input[type=radio]`
   (masqué par `.sr-only`), donc les flèches du clavier marchent seules et le
   focus se voit sur l'étiquette. */
.feedback-stars { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.feedback-star {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  color: var(--text-muted);
}

.feedback-star:hover { background: var(--surface-2); }
.feedback-star:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

.feedback-star.is-on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.feedback-star-mark { font-size: 1.15rem; line-height: 1; }
.feedback-star-num { font-size: 0.78rem; font-weight: 600; }

/* « Lundi, tu vas t'en servir ? » — trois réponses, même mécanique. */
.feedback-choices { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.feedback-choice {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

.feedback-choice:hover { background: var(--surface-2); }
.feedback-choice:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.feedback-choice.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.feedback-thanks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  background: var(--success-soft);
}

.feedback-thanks-title { margin: 0; }
.feedback-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.feedback-edit { align-self: flex-start; }

/* ------------------------------------------- l'onglet « Retours » */

.feedback-summary-head { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }

.feedback-average {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

/* La note moyenne d'un module : l'état se lit d'un coup d'œil, sans lire le
   chiffre. Les seuils sont dans le JS (`public/js/pages/admin-feedback.js`). */
.feedback-score { display: inline-flex; align-items: baseline; gap: var(--space-1); font-weight: 600; }
.feedback-score.is-low { color: var(--danger); }
.feedback-score.is-mid { color: var(--warning); }
.feedback-score.is-high { color: var(--success); }
.feedback-score-max { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }

.feedback-comments { margin: 0; }
.feedback-comments > summary { cursor: pointer; }

.feedback-comment-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feedback-comment {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.feedback-comment-who { display: block; font-size: 0.78rem; color: var(--text-muted); }
/* Les mots de l'apprenant, tels qu'il les a écrits : ses retours à la ligne
   comptent. `pre-wrap` les garde sans qu'aucun HTML ne soit interprété. */
.feedback-comment-text { display: block; margin: 0; white-space: pre-wrap; }

@media (max-width: 640px) {
  .feedback-star { min-width: 48px; }
  .feedback-links > .btn { flex: 1 1 100%; }
}