/* ══════════════════════════════════════════════════════════
   lsf-games.css — Original Permis
   Mini-jeux interactifs sous la section LSF
   (Quiz code de la route + Memory des panneaux)
   ──────────────────────────────────────────────────────────
   COMPOSANT ADDITIF — n'écrase aucune règle existante.
   Pour supprimer : retirer ce fichier + lsf-games.js,
   les <link>/<script> correspondants, et le bloc
   .lsf-games dans index.html.
══════════════════════════════════════════════════════════ */

.lsf-games {
  max-width: 900px;
  margin: 2.5rem auto 0;
  position: relative;
  z-index: 1;
}

/* ── Variante : jeu placé directement sous la vidéo LSF ──
   Prend toute la largeur de sa colonne (.lsf-visual),
   donc la même largeur que la carte vidéo au-dessus. */
.lsf-games--under-video {
  max-width: none;
  width: 100%;
  margin: 1.4rem 0 0;
}
.lsf-games--under-video .lsf-games-intro {
  text-align: left;
  margin-bottom: .8rem;
}
.lsf-games--under-video .lsf-games-subtitle {
  margin: 0;
  max-width: none;
}

.lsf-games-intro {
  text-align: center;
  margin-bottom: 1.2rem;
}
.lsf-games-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 800;
  color: #fff;
  margin: .5rem 0 .3rem;
}
.lsf-games-subtitle {
  font-size: .82rem;
  color: rgba(255,255,255,.62);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}

.lsf-game-card {
  background: var(--surface-dark2);
  border: 1px solid rgba(45,106,79,.25);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(45,106,79,.08);
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
}

.lsf-game-header {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(45,106,79,.22);
}
.lsf-game-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.lsf-game-header h4 {
  font-family: 'Outfit', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .15rem;
}
.lsf-game-header p {
  font-size: .74rem;
  color: rgba(255,255,255,.55);
  margin: 0;
  line-height: 1.4;
}

.lsf-game-body { flex: 1; display: flex; flex-direction: column; }

/* ── Bouton secondaire "rejouer" ── */
.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--green-lighter, #95D5B2);
  background: rgba(45,106,79,.14);
  border: 1px solid rgba(82,183,136,.32);
  border-radius: 999px;
  padding: .55em 1.3em;
  margin-top: .4rem;
  align-self: center;
  transition: background .2s var(--ease, ease), color .2s var(--ease, ease);
}
.btn-ghost-sm:hover {
  background: rgba(45,106,79,.26);
  color: #fff;
}

/* ══════════════════════
   QUIZ
══════════════════════ */
.quiz-progress {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .8rem;
}
#quiz-progress-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.5);
}
.quiz-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  width: 20%;
  background: var(--green-light, #52B788);
  border-radius: 999px;
  transition: width .35s var(--ease, ease);
}

.quiz-question {
  font-size: .87rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 .8rem;
  min-height: 2.4em;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.quiz-option {
  text-align: left;
  font-family: inherit;
  font-size: .8rem;
  color: rgba(255,255,255,.82);
  background: rgba(45,106,79,.1);
  border: 1px solid rgba(45,106,79,.28);
  border-radius: 8px;
  padding: .55rem .8rem;
  transition: background .2s var(--ease, ease), border-color .2s var(--ease, ease), transform .15s var(--ease, ease);
}
.quiz-option:hover:not(:disabled) {
  background: rgba(45,106,79,.2);
  border-color: rgba(82,183,136,.45);
  transform: translateX(2px);
}
.quiz-option:disabled { cursor: not-allowed; }
.quiz-option.is-correct {
  background: rgba(82,183,136,.28);
  border-color: var(--green-light, #52B788);
  color: #fff;
}
.quiz-option.is-wrong {
  background: rgba(214,69,69,.18);
  border-color: rgba(214,69,69,.55);
  color: #fff;
}

.quiz-feedback {
  min-height: 1.2em;
  font-size: .75rem;
  font-weight: 700;
  margin-top: .6rem;
}
.quiz-feedback.is-correct { color: var(--green-light, #52B788); }
.quiz-feedback.is-wrong   { color: #e07070; }

.lsf-game-result {
  text-align: center;
  padding: .6rem 0 .1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.lsf-game-result-score {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  margin: 0;
}
.lsf-game-result-score strong { color: #fff; font-size: 1rem; }
.lsf-game-result-msg {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 .3rem;
}