/* ============================================================
   JEUX ÉDUCATIFS — socle commun + moteurs quiz / tri
   ============================================================ */

/* ---- Hub matière / niveau ----
   En-tête sur toute la largeur du container (plutôt qu'une colonne
   centrée à 760px) : le texte SEO/éditorial dispose ainsi de bien plus
   de largeur pour se déplier, ce qui réduit fortement le nombre de
   lignes — donc la hauteur — sans retirer un mot de contenu indexable. */
.activite-hub__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.activite-hub__mascot {
  flex: none;
  width: 64px;
}
.activite-hub__mascot svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .activite-hub__mascot svg {
    animation: activite-mascot-bob 2.4s ease-in-out infinite;
  }
}
.activite-hub__header-text {
  flex: 1;
  min-width: 0;
}
.activite-hub__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--sp-2);
  color: var(--matiere-color, var(--color-text));
}
.activite-hub__intro {
  color: var(--color-text-2);
  /* Encadré « feuille » sur fond blanc, contours sobres (simple filet +
     ombre légère) plutôt qu'un cadre chargé — juste de quoi détacher le
     texte éditorial du fond à motif de la zone enfants. */
  background: #fffdf8;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 2px 8px rgba(43, 38, 64, 0.06);
  /* Colonnes fluides : sur les écrans larges, un texte SEO un peu long se
     répartit sur 2 colonnes au lieu d'une seule très étroite — même
     contenu, moitié moins de hauteur. Repasse naturellement à 1 colonne
     dès que la largeur disponible ne permet plus 2 colonnes de 280px. */
  column-width: 280px;
  column-gap: var(--sp-8);
}
[data-theme="dark"] .activite-hub__intro {
  background: var(--color-bg-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.activite-hub__intro p {
  margin-bottom: var(--sp-3);
}
.activite-hub__intro p:last-child {
  margin-bottom: 0;
}
/* Le reset global (base.css) neutralise list-style/liens/citations : on les
   rétablit ici pour le texte enrichi saisi via TinyMCE (gras, italique,
   listes, liens, citation). */
.activite-hub__intro ul,
.activite-hub__intro ol {
  margin: 0 0 var(--sp-3);
  padding-left: 1.4em;
}
.activite-hub__intro ul {
  list-style: disc;
}
.activite-hub__intro ol {
  list-style: decimal;
}
.activite-hub__intro li {
  margin-bottom: var(--sp-1);
  break-inside: avoid;
}
.activite-hub__intro a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.activite-hub__intro a:hover {
  color: var(--color-accent-hover);
}
.activite-hub__intro blockquote {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-2);
  font-style: italic;
  break-inside: avoid;
}
@media (max-width: 640px) {
  .activite-hub__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .activite-hub__mascot {
    width: 52px;
  }
  .activite-hub__intro {
    column-width: auto;
  }
}
.activite-hub__filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.activite-hub__filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.activite-hub__filter-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-2);
  margin-right: var(--sp-1);
}
.activite-hub__empty-filtered {
  text-align: center;
  color: var(--color-text-2);
  padding: var(--sp-8) 0;
}
.activite-card.is-hidden {
  display: none;
}
.activite-card__difficulty {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
}

/* ---- Portail d'accueil (archive-activite.php) : héros + tuiles ---- */
.activite-portal-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-10);
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
}
.activite-portal-hero__mascot {
  width: 150px;
  margin: 0 auto var(--sp-2);
}
.activite-portal-hero__mascot svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .activite-portal-hero__mascot svg {
    animation: activite-mascot-bob 2.4s ease-in-out infinite;
  }
}
.activite-portal-hero__title {
  font-size: var(--font-size-3xl);
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}
.activite-portal-hero__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-2);
}

.activite-portal-section {
  margin-bottom: var(--sp-10);
}
.activite-portal-section__title {
  font-size: var(--font-size-2xl);
  text-align: center;
  margin-bottom: var(--sp-6);
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}
.activite-portal-section__title::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  margin: var(--sp-2) auto 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-accent), var(--color-border-strong));
}

.activite-portal-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

.activite-portal-tile {
  --tile-color: var(--color-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  text-align: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: color-mix(in srgb, var(--tile-color) 14%, var(--color-bg));
  border: 2px solid color-mix(in srgb, var(--tile-color) 35%, var(--color-bg));
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.activite-portal-tile:hover,
.activite-portal-tile:focus-visible {
  transform: translateY(-4px) rotate(-1deg) scale(1.03);
  box-shadow: var(--shadow-md);
  border-color: var(--tile-color);
}
.activite-portal-tile:active {
  transform: translateY(0) scale(0.98);
}
.activite-portal-tile__icon {
  font-size: 2.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tile-color) 22%, var(--color-bg));
  transition: transform var(--t-fast);
}
.activite-portal-tile:hover .activite-portal-tile__icon {
  transform: scale(1.12) rotate(6deg);
}
.activite-portal-tile__label {
  font-family: var(--font-display, var(--font));
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-text);
  overflow-wrap: break-word;
  hyphens: auto;
}
.activite-portal-tile__label--big {
  font-size: var(--font-size-2xl);
  color: var(--tile-color);
}
.activite-portal-tile__count {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-2);
  background: var(--color-bg);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-full);
}
.activite-portal-tile--niveau {
  justify-content: center;
}
.activite-portal-tile__steps {
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .activite-portal-hero__title,
  .activite-portal-hero__lead {
    animation: activite-portal-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  }
  .activite-portal-hero__lead {
    animation-delay: 0.08s;
  }
  .activite-portal-tile {
    animation: activite-portal-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--tile-i, 0) * 70ms);
  }
}
@keyframes activite-portal-pop-in {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* Tuiles niveau : pas de --tile-color fourni en PHP (pas de couleur matière
   associée), on dérive une teinte propre à chaque niveau via --tile-i,
   pour garder un rendu coloré sans configuration admin supplémentaire. */
.activite-portal-tile--niveau {
  --tile-color: hsl(calc(165 + var(--tile-i, 0) * 45), 60%, 42%);
}
[data-theme="dark"] .activite-portal-tile--niveau {
  --tile-color: hsl(calc(165 + var(--tile-i, 0) * 45), 55%, 62%);
}

/* ---- Récompenses / progression (accueil, hubs, page "Mes progrès") ---- */

/* Encart accueil : même carte "sobre sur les contours" que l'intro des
   pages hub, pour rester cohérent avec le reste du parcours. */
.activite-progress-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  background: #fffdf8;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(43, 38, 64, 0.06);
}
[data-theme="dark"] .activite-progress-widget {
  background: var(--color-bg-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.activite-progress-widget__default {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--color-text-2);
}
.activite-progress-widget__icon {
  font-size: 1.75rem;
}
.activite-progress-widget__stats {
  display: flex;
  gap: var(--sp-6);
}
/* `display: flex` ci-dessus l'emporterait sinon sur la règle native
   [hidden] { display: none } du navigateur (spécificité plus faible) et
   laisserait les deux blocs visibles en même temps. */
.activite-progress-widget__default[hidden],
.activite-progress-widget__stats[hidden] {
  display: none;
}
.activite-progress-widget__link {
  font-family: var(--font-display, var(--font));
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}
.activite-progress-widget__link:hover {
  color: var(--color-accent-hover);
}

/* Trio de stats — réutilisé tel quel sur la page "Mes progrès". */
.activite-progress-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.activite-progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-width: 96px;
  padding: var(--sp-4) var(--sp-3);
  background: var(--color-bg-2);
  border-radius: var(--radius-lg);
}
.activite-progress-stat__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.activite-progress-stat__value {
  font-family: var(--font-display, var(--font));
  font-weight: 800;
  font-size: var(--font-size-2xl);
  color: var(--color-accent);
}
.activite-progress-stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
}

/* Page "Mes progrès" : les 3 stats en avant, largement espacées. */
.activite-hub .activite-progress-stats {
  justify-content: center;
  margin: 0 0 var(--sp-10);
}
.activite-hub .activite-progress-stat {
  min-width: 140px;
  padding: var(--sp-5) var(--sp-4);
}

/* Indicateur de progression sur une page hub matière/niveau — jamais
   affiché à "0", voir activite-progress.js. */
.activite-hub__progress {
  margin-top: var(--sp-3);
  font-family: var(--font-display, var(--font));
  font-weight: 700;
  color: var(--color-accent);
}

/* Historique complet (page "Mes progrès") */
.activite-progress-list {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}
.activite-progress-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
a.activite-progress-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.activite-progress-item__medal {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-size: 1.25rem;
}
.activite-progress-item__stars {
  color: #FFC93C;
  letter-spacing: 1px;
}
.activite-progress-item__title {
  font-size: var(--font-size-lg);
  padding-right: var(--sp-6);
}
.activite-progress-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---- Grille d'archive ---- */
.activite-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
  margin-top: var(--sp-6);
}

.activite-card {
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--matiere-color, var(--color-accent));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.activite-card__badge--matiere {
  background: var(--matiere-color, var(--color-accent));
  border-color: var(--matiere-color, var(--color-accent));
  color: #fff;
}
.activite-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.activite-card__link {
  display: block;
}

.activite-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-2);
}
.activite-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activite-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2.5rem;
}
.activite-card__placeholder--illustrated {
  width: 100%;
}
.activite-card__placeholder--illustrated svg {
  display: block;
  width: 100%;
  height: 100%;
}

.activite-card__record {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--color-overlay);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.activite-card__record:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.activite-card__body {
  padding: var(--sp-4);
}
.activite-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.tag-pill--muted {
  opacity: 0.7;
}
.activite-card__title {
  font-size: var(--font-size-lg);
}

/* ---- Écran d'intro ---- */
.activite-shell {
  max-width: 720px;
  margin: 0 auto;
}

.activite-intro {
  text-align: center;
  padding: var(--sp-8) 0;
}
.activite-intro__badges {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.activite-intro__mascot {
  margin: 0 auto var(--sp-4);
  width: 96px;
}
.activite-intro__mascot svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .activite-intro__mascot svg {
    animation: activite-mascot-bob 2.4s ease-in-out infinite;
  }
}
@keyframes activite-mascot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.activite-results__mascot {
  margin: 0 auto var(--sp-4);
  width: 110px;
}
.activite-results__mascot svg {
  display: block;
  width: 100%;
  height: auto;
}
.activite-intro__illustration {
  margin: 0 auto var(--sp-6);
  max-width: 320px;
}
.activite-intro__image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.activite-intro__title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--sp-4);
}
.activite-intro__instruction {
  font-size: var(--font-size-lg);
  color: var(--color-text-2);
  margin-bottom: var(--sp-3);
}
.activite-intro__listen {
  margin-bottom: var(--sp-4);
}
.activite-intro__example {
  text-align: left;
  max-width: 480px;
  margin: 0 auto var(--sp-6);
  background: var(--color-bg-2);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
}
.activite-intro__example summary {
  cursor: pointer;
  font-weight: 600;
}
.activite-intro__start {
  min-width: 220px;
}
.activite-intro__record {
  margin-top: var(--sp-4);
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}

.activite-shell__print {
  text-align: center;
  margin-top: var(--sp-6);
}

/* ---- Écran de jeu (partagé quiz + tri) ---- */
.activite-root {
  padding: var(--sp-4) 0 var(--sp-16);
}

.activite-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
}
.activite-progress__bar {
  flex: 1;
  height: 8px;
  margin: 0 var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-3);
  overflow: hidden;
}
.activite-progress__fill {
  height: 100%;
  background: var(--color-accent);
  transition: width var(--t-slow);
  border-radius: var(--radius-full);
}

.activite-question__instruction {
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--sp-2);
}
.activite-question__listen {
  display: block;
  margin: 0 auto var(--sp-6);
}
.activite-question__media-wrap {
  text-align: center;
  margin: 0 auto var(--sp-6);
}
.activite-question__media {
  display: block;
  max-width: 280px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.activite-question__media-link {
  display: inline-block;
  border-radius: var(--radius-lg);
}
.activite-question__media-link:hover .activite-question__media,
.activite-question__media-link:focus-visible .activite-question__media {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}
.activite-question__media-caption {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
}

.activite-feedback {
  min-height: 1.5em;
  text-align: center;
  font-weight: 600;
  margin: var(--sp-4) 0;
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
}
.activite-feedback:empty {
  padding: 0;
}
.activite-feedback--correct {
  background: rgba(96, 176, 96, 0.15);
  color: #2f7a2f;
}
.activite-feedback--retry {
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
}
.activite-feedback--hint {
  background: var(--color-bg-2);
  color: var(--color-text-2);
}
.activite-feedback--reveal {
  background: rgba(220, 100, 100, 0.12);
  color: #a03a3a;
}

@keyframes activite-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.is-shaking {
  animation: activite-shake 0.4s ease;
}

@keyframes activite-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.is-correct-pop {
  animation: activite-pop 0.35s ease;
}

/* ---- Moteur quiz ---- */
.activite-quiz__answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  max-width: 560px;
  margin: 0 auto;
}
.activite-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  font-size: var(--font-size-base);
  font-weight: 600;
  min-height: 64px;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.activite-answer:hover,
.activite-answer:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}
.activite-answer.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.activite-answer.is-correct {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
}
.activite-answer.is-wrong {
  border-color: #e57373;
  background: rgba(229, 115, 115, 0.12);
}
.activite-answer.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.activite-answer__image {
  max-width: 100%;
  max-height: 96px;
  border-radius: var(--radius-md);
}

/* ---- Moteur tri ---- */
.activite-tri {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.activite-tri__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  min-height: 56px;
}
.activite-card-piece {
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-weight: 600;
  cursor: grab;
  transition: border-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.activite-card-piece:focus-visible {
  outline: 2px solid var(--color-accent);
}
.activite-card-piece.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.activite-card-piece.is-placed {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.activite-card-piece__image {
  display: block;
  max-width: 64px;
  max-height: 64px;
  margin: 0 auto var(--sp-1);
  border-radius: var(--radius-sm);
}

.activite-tri__categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.activite-category {
  min-height: 140px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.activite-category.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.activite-category__label {
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.activite-category__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  min-height: 32px;
}
.activite-category__cards .activite-card-piece {
  cursor: default;
}
.activite-category__cards .activite-card-piece.is-correct {
  border-color: #4caf50;
}
.activite-category__cards .activite-card-piece.is-wrong {
  border-color: #e57373;
}

/* ---- Résultats ---- */
.activite-results {
  text-align: center;
  padding: var(--sp-8) 0;
}
.activite-results__stars {
  font-size: 2.5rem;
  margin-bottom: var(--sp-4);
  letter-spacing: 0.25em;
}
.activite-results__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-6);
}
.activite-results__stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
}
.activite-results__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
}
.activite-results__review {
  text-align: left;
  max-width: 480px;
  margin: 0 auto var(--sp-6);
  background: var(--color-bg-2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.activite-results__review h2 {
  font-size: var(--font-size-base);
  margin-bottom: var(--sp-2);
}
.activite-results__review ul {
  list-style: disc;
  padding-left: var(--sp-5);
  color: var(--color-text-2);
}
.activite-results__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.activite-results__suggestions {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}
.activite-results__suggestions h2 {
  font-size: var(--font-size-base);
  color: var(--color-text-2);
  margin-bottom: var(--sp-3);
}
.activite-results__suggestions-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.activite-results__suggestion {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.activite-results__suggestion:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.activite-results__related-coloriage {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: var(--font-size-sm);
}
.activite-results__related-coloriage a {
  color: var(--color-accent);
  font-weight: 600;
}
.activite-results__related-coloriage a:hover {
  text-decoration: underline;
}

/* ---- Moteur appariement ---- */
.activite-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  max-width: 560px;
  margin: 0 auto;
}
.activite-pairs__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.activite-pair-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-weight: 600;
  text-align: center;
  min-height: 48px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.activite-pair-item:focus-visible {
  outline: 2px solid var(--color-accent);
}
.activite-pair-item.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.activite-pair-item.is-linked {
  border-color: var(--pair-color, var(--color-accent));
  background: color-mix(in srgb, var(--pair-color, var(--color-accent)) 14%, var(--color-bg));
}
.activite-pair-item.is-correct {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
}
.activite-pair-item.is-wrong {
  border-color: #e57373;
  background: rgba(229, 115, 115, 0.12);
}
.activite-pair-item.is-locked {
  cursor: default;
}
.activite-pair-item__image {
  max-width: 48px;
  max-height: 48px;
  border-radius: var(--radius-sm);
}

/* ---- Moteur ordre ---- */
.activite-order {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 640px;
  margin: 0 auto;
}
.activite-order__sequence,
.activite-order__pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
.activite-order-slot {
  min-width: 72px;
  min-height: 56px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.activite-order-slot.is-correct {
  border-style: solid;
  border-color: #4caf50;
}
.activite-order-slot.is-wrong {
  border-style: solid;
  border-color: #e57373;
}
.activite-order-item {
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-weight: 600;
  transition: border-color var(--t-fast), opacity var(--t-fast);
}
.activite-order-item:focus-visible {
  outline: 2px solid var(--color-accent);
}
.activite-order-item.is-disabled {
  opacity: 0.75;
  cursor: default;
}
.activite-order-item__image {
  display: block;
  max-width: 48px;
  max-height: 48px;
  margin: 0 auto var(--sp-1);
  border-radius: var(--radius-sm);
}

/* ---- Moteur mot à trous ---- */
.activite-fillblank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--font-size-lg);
  line-height: 2.4;
}
.activite-fillblank__text {
  white-space: pre-wrap;
}
.activite-fillblank__blank {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--radius-md);
  background: var(--color-bg-2);
}
.activite-fillblank__choice {
  padding: var(--sp-1) var(--sp-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-size: var(--font-size-base);
  font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.activite-fillblank__choice.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.activite-fillblank__choice.is-correct {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
}
.activite-fillblank__choice.is-wrong {
  border-color: #e57373;
  background: rgba(229, 115, 115, 0.12);
}

/* ---- Moteur saisie ---- */
.activite-typed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
}
.activite-typed__input {
  flex: 1;
  min-width: 200px;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  text-align: center;
  transition: border-color var(--t-fast);
}
.activite-typed__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}
.activite-typed__input.is-correct {
  border-color: #4caf50;
}
.activite-typed__input.is-wrong {
  border-color: #e57373;
}
.activite-typed__solution {
  flex-basis: 100%;
  text-align: center;
  color: var(--color-text-2);
  font-weight: 600;
}

@media (max-width: 640px) {
  .activite-tri__categories {
    grid-template-columns: 1fr;
  }

  .activite-pairs {
    grid-template-columns: 1fr;
  }
}

/* ---- Confettis (bonne réponse / médaille) ---- */
.activite-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.activite-confetti__piece {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: activite-confetti-fall 1.1s ease-in forwards;
}
@keyframes activite-confetti-fall {
  0% {
    transform: translateY(0) rotate(var(--piece-rotate-start, 0deg));
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(calc(var(--piece-rotate-start, 0deg) + 540deg));
    opacity: 0.4;
  }
}