/* public/assets/css/quizz-widgets.css */
/* Widgets Quizz pour l'accueil (question du jour + classement). */
/* Alignes sur le gabarit du site (main.css) : variables reelles, largeur 1400px, */
/* contenu en largeur de lecture centree. */

/* ===== Conteneur au gabarit du site (memes marges que header/galerie/footer) ===== */
.wquizz-outer, .wclass-outer {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* La carte elle-meme : largeur de lecture confortable, centree dans le gabarit */
.wquizz, .wclass {
  max-width: 720px;
  margin: 20px auto;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e0e0e0);
  border-radius: var(--radius-lg, 12px);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12));
  font-family: var(--font-primary, sans-serif);
}

/* ===== Question du jour ===== */
.wquizz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wquizz-tag {
  background: var(--primary-red, #E30713); color: var(--white, #fff);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px;
}
.wquizz-cat { font-size: 13px; color: var(--gray-600, #666); text-transform: uppercase; letter-spacing: .03em; }

.wquizz-question { font-size: 1.25rem; line-height: 1.4; margin: 0 0 16px; color: var(--gray-800, #333); }

.wquizz-choices { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wquizz-choice {
  border: 2px solid var(--gray-200, #e0e0e0); border-radius: var(--radius-md, 8px);
  padding: 11px 14px; font-size: 15px; background: var(--white, #fff);
}
.wquizz-choice-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color var(--transition-fast, 150ms ease); }
.wquizz-choice-radio:hover { border-color: var(--primary-red, #E30713); }
.wquizz-choice-radio input { accent-color: var(--primary-red, #E30713); }
.wquizz-choices-preview .wquizz-choice { opacity: .85; }

.wquizz-btn {
  display: inline-block; background: var(--primary-red, #E30713); color: var(--white, #fff);
  border: none; border-radius: var(--radius-md, 8px); padding: 11px 20px;
  font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: background var(--transition-fast, 150ms ease);
}
.wquizz-btn:hover { background: var(--primary-red-dark, #b3050f); }

.wquizz-cta { text-align: center; padding: 4px 0; }
.wquizz-cta p { margin: 0 0 10px; color: var(--gray-600, #666); font-size: 15px; }

.wquizz-streak { margin: 10px 0 0; font-size: 14px; color: var(--gray-600, #666); }

.wquizz-done-head { font-size: 16px; margin: 0 0 12px; color: var(--gray-800, #333); }
.wquizz-scores { display: flex; gap: 16px; margin-bottom: 12px; }
.wquizz-score-item {
  flex: 1; text-align: center; background: var(--gray-50, #f9f9f9);
  border-radius: var(--radius-md, 8px); padding: 10px 8px;
}
.wquizz-score-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--primary-red, #E30713); }
.wquizz-score-lbl { display: block; font-size: 12px; color: var(--gray-600, #666); }

.wquizz-links { display: flex; gap: 16px; }
.wquizz-links a { color: var(--primary-red, #E30713); font-weight: 600; text-decoration: none; font-size: 14px; }
.wquizz-links a:hover { text-decoration: underline; }

/* ===== Classement ===== */
.wclass-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wclass-tag { font-weight: 800; font-size: 15px; color: var(--gray-800, #333); }
.wclass-all { color: var(--primary-red, #E30713); font-weight: 600; text-decoration: none; font-size: 14px; }
.wclass-all:hover { text-decoration: underline; }

.wclass-list { list-style: none; margin: 0; padding: 0; }
.wclass-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--gray-100, #f0f0f0);
}
.wclass-item:last-child { border-bottom: none; }
.wclass-pos {
  width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gray-100, #f0f0f0); font-weight: 700; font-size: 14px;
}
.wclass-rank-1 .wclass-pos { background: var(--primary-red, #E30713); color: var(--white, #fff); }
.wclass-rank-2 .wclass-pos { background: #f0656b; color: var(--white, #fff); }
.wclass-rank-3 .wclass-pos { background: #f79aa0; color: var(--white, #fff); }
.wclass-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-800, #333); }
.wclass-pts { font-weight: 700; font-size: 15px; color: var(--gray-800, #333); }

.wclass-empty { color: var(--gray-600, #666); font-size: 15px; margin: 4px 0; }
.wclass-me {
  margin-top: 12px; padding: 9px 14px; background: var(--gray-50, #f9f9f9);
  border-radius: var(--radius-md, 8px); font-size: 14px; text-align: center; color: var(--gray-800, #333);
}
.wclass-me a { color: var(--primary-red, #E30713); font-weight: 600; text-decoration: none; }

/* ===== Responsive (breakpoint principal du site : 768px) ===== */
@media (max-width: 768px) {
  .wquizz-outer, .wclass-outer { padding: 0 16px; }
  .wquizz, .wclass { padding: 16px; margin: 16px auto; }
  .wquizz-question { font-size: 1.1rem; }
  .wquizz-scores { flex-direction: column; gap: 8px; }
}