/* ============================================================
   THÈME « JEUX ÉDUCATIFS » — identité visuelle à part, pensée pour les
   enfants (contrairement au reste du site, plutôt parents/enseignants).

   Principe : on surcharge les tokens CSS globaux (couleurs, rayons,
   police) uniquement dans le scope .soutien-scolaire-theme, posé sur la
   zone <main> des pages soutien-scolaire (voir header.php). Tous les
   composants existants d'activite.css et components.css (boutons, cartes,
   badges…) consomment déjà ces mêmes variables : ils héritent donc du
   nouveau look sans qu'on ait à les réécrire un par un. Header et footer
   reçoivent en plus un léger accent contextuel (.site-header--activite-zone
   et .site-footer--activite-zone, ci-dessous) pour que le changement
   d'univers soit perçu dès la nav et jusqu'en bas de page, sans jamais
   reprendre toute l'identité visuelle du reste du site.
   ============================================================ */

/* Accent contextuel du header et du footer : posés respectivement par
   header.php et footer.php sur les mêmes pages que .soutien-scolaire-theme.
   Volontairement discrets (pas de refonte du chrome) — servent juste de
   repère "on est dans Jeux éducatifs", sans donner à cette zone le même
   poids visuel que le reste du site. */
.site-header--activite-zone {
  border-bottom-color: #2EC4B6;
  background: linear-gradient(180deg, rgba(46, 196, 182, 0.08), var(--color-bg) 140%);
}

.site-footer--activite-zone {
  border-top-color: #2EC4B6;
}

.soutien-scolaire-theme {
  /* Couleurs — palette vive dédiée, distincte du orange/crème du reste du site */
  --color-bg:           #FFFCF5;
  --color-bg-2:         #F3F0FF;
  --color-bg-3:         #E9E1FF;
  --color-text:         #2B2640;
  --color-text-2:       #635C7A;
  --color-text-3:       #9089A8;
  --color-accent:       #0E877D;
  --color-accent-hover: #0A6D64;
  --color-accent-light: rgba(46, 196, 182, 0.18);
  --color-accent-text:  #ffffff;
  --color-border:       #E8E1FA;
  --color-border-strong:#C9BFF0;
  --color-overlay:      rgba(43, 38, 64, 0.75);

  /* Rayons — plus arrondis, effet "jouet" */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   26px;
  --radius-full: 9999px;

  /* Typographie — même paire que le thème principal Croc'Color, pas de
     nouvel asset à produire : Baloo 2 (titres/gros boutons) + Nunito
     (texte courant), à la place d'Inter dans cette zone uniquement. */
  --font:         'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Baloo 2', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;

  /* Ombre "autocollant" — plate et colorée plutôt que floutée, pour un
     rendu plus jouet/tactile sur les boutons et cartes de jeu. */
  --fun-shadow: 0 4px 0 rgba(43, 38, 64, 0.15);
  --fun-shadow-active: 0 1px 0 rgba(43, 38, 64, 0.15);

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);

  /* Fond à motif discret (pois), pour signaler d'un coup d'œil qu'on a
     changé d'univers — généré en CSS, aucune image à héberger. */
  background-image: radial-gradient(rgba(14, 135, 125, 0.08) 2px, transparent 2px);
  background-size: 28px 28px;
}

[data-theme="dark"] .soutien-scolaire-theme {
  --color-bg:           #211D33;
  --color-bg-2:         #2B2645;
  --color-bg-3:         #362F58;
  --color-text:         #F5F2FF;
  --color-text-2:       #C4BCE0;
  --color-text-3:       #948BB8;
  --color-border:       #3D3560;
  --color-border-strong:#4E4478;
  --color-accent:       #4ED8C7;
  --color-accent-hover: #6EE3D5;
  --color-accent-text:  #1A2E2B;
  background-image: radial-gradient(rgba(78, 216, 199, 0.10) 2px, transparent 2px);
}

.soutien-scolaire-theme h1,
.soutien-scolaire-theme h2,
.soutien-scolaire-theme h3,
.soutien-scolaire-theme .btn,
.soutien-scolaire-theme .activite-question__instruction,
.soutien-scolaire-theme .activite-results__stat-value,
.soutien-scolaire-theme .activite-order-item,
.soutien-scolaire-theme .activite-pair-item,
.soutien-scolaire-theme .activite-card-piece,
.soutien-scolaire-theme .activite-answer,
.soutien-scolaire-theme .activite-fillblank__choice {
  font-family: var(--font-display);
}

/* Boutons et cartes de jeu : ombre "autocollant" + petit effet
   d'appui/survol tactile. */
.soutien-scolaire-theme .btn,
.soutien-scolaire-theme .activite-card,
.soutien-scolaire-theme .activite-answer,
.soutien-scolaire-theme .activite-card-piece,
.soutien-scolaire-theme .activite-order-item,
.soutien-scolaire-theme .activite-pair-item,
.soutien-scolaire-theme .activite-portal-tile,
.soutien-scolaire-theme .activite-progress-stat,
.soutien-scolaire-theme .activite-progress-item {
  box-shadow: var(--fun-shadow);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.soutien-scolaire-theme .btn:not(:disabled):hover,
.soutien-scolaire-theme .activite-answer:not(.is-disabled):hover,
.soutien-scolaire-theme .activite-card-piece:hover,
.soutien-scolaire-theme .activite-order-item:hover,
.soutien-scolaire-theme .activite-pair-item:hover {
  transform: translateY(-2px);
}
.soutien-scolaire-theme a.activite-progress-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--fun-shadow);
}
.soutien-scolaire-theme .btn:not(:disabled):active,
.soutien-scolaire-theme .activite-answer:not(.is-disabled):active {
  transform: translateY(3px);
  box-shadow: var(--fun-shadow-active);
}

/* Légère rotation alternée des cartes d'activité, pour casser l'alignement
   trop sage — désactivée si l'utilisateur préfère moins d'animation/effets. */
@media (prefers-reduced-motion: no-preference) {
  .soutien-scolaire-theme .activite-card:nth-child(3n+1) { transform: rotate(-1deg); }
  .soutien-scolaire-theme .activite-card:nth-child(3n+2) { transform: rotate(0.6deg); }
  .soutien-scolaire-theme .activite-card:nth-child(3n+3) { transform: rotate(-0.6deg); }
  .soutien-scolaire-theme .activite-card:hover {
    transform: rotate(0deg) translateY(-3px) !important;
  }

  .soutien-scolaire-theme .activite-portal-tile:nth-child(4n+1) { transform: rotate(-1.2deg); }
  .soutien-scolaire-theme .activite-portal-tile:nth-child(4n+2) { transform: rotate(0.8deg); }
  .soutien-scolaire-theme .activite-portal-tile:nth-child(4n+3) { transform: rotate(-0.6deg); }
  .soutien-scolaire-theme .activite-portal-tile:nth-child(4n+4) { transform: rotate(1deg); }
  .soutien-scolaire-theme .activite-portal-tile:hover {
    transform: translateY(-4px) rotate(-1deg) scale(1.03) !important;
  }
}