/**
 * MNIST – Override visuel piloté par Astra (palette --ast-global-color-0 à 8).
 * Réglages Astra (En-tête > Arrière-plan, Couleurs globales, etc.) = source de vérité ; pas d’override CSS sur l’en-tête.
 * Alias ci-dessous : tous reliés à la palette Astra pour que les changements dans le Customizer soient réels.
 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600;700&display=swap');

:root {
  /* Palette Astra : chaque variable a un rôle distinct (pas de copie entre titre du site et fond d’en-tête).
   * --ast-global-color-0 = accent / liens / boutons ; fond en-tête = réglage « En-tête > Arrière-plan » (utilise la palette).
   * Titre du site (header) = réglage Astra « Identité du site » / couleurs header, pas --ast-global-color-0 ici. */
  --couleur-primaire: var(--ast-global-color-0);
  --couleur-violet: var(--ast-global-color-1);
  --couleur-texte: var(--ast-global-color-2);
  --couleur-texte-clair: var(--ast-global-color-3);
  --couleur-fond: var(--ast-global-color-4);
  --couleur-carte: var(--ast-global-color-5);
  --couleur-secondaire: var(--ast-global-color-1);
  --couleur-accent: #f59e0b;
  --couleur-rose: #ec4899;
  --ombre-carte: 0 4px 14px rgba(99, 102, 241, 0.15);
  --rayon: 16px;
  --police-titre: var(--mnist-headings-font-family, "Fredoka", sans-serif);
  --police-texte: var(--mnist-body-font-family, "Nunito", sans-serif);
  --couleur-entree: #3b82f6;
  --couleur-cachee: #22c55e;
  --couleur-sortie: #f97316;
  --couleur-erreur: #ef4444;
}

body,
.site {
  font-family: var(--police-texte) !important;
  background: var(--couleur-fond) !important;
  color: var(--couleur-texte) !important;
  line-height: 1.6 !important;
}

/* Titre du site dans l’en-tête : réglage Astra (Identité du site / couleurs header), pas --couleur-primaire. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a {
  font-family: var(--police-titre) !important;
  color: var(--couleur-primaire) !important;
}

a {
  color: var(--couleur-primaire);
}

/* En-tête : fond uni (--ast-global-color-0), pas de dégradé. */

/* Annule le "background: none" de l’addon Transparent Header (dynamic.css.php) pour que la couleur du réglage soit bien utilisée. */
/* Force couleur unie sur l’en-tête principal (pas de dégradé). */
.ast-primary-header-bar,
.ast-desktop .ast-primary-header-bar.main-header-bar,
.ast-header-break-point .ast-primary-header-bar.main-header-bar {
  background: var(--ast-global-color-0) !important;
  background-color: var(--ast-global-color-0) !important;
  background-image: none !important;
}

.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header.ast-header-break-point .main-header-bar {
  background: var(--ast-global-color-0) !important;
  background-color: var(--ast-global-color-0) !important;
  background-image: none !important;
}
@media (min-width: 921px) {
  .ast-theme-transparent-header .main-header-bar,
  .ast-theme-transparent-header.ast-header-break-point .main-header-bar {
    background: var(--ast-global-color-0) !important;
    background-color: var(--ast-global-color-0) !important;
    background-image: none !important;
  }
}

.site-header a:hover,
.ast-header-wrap a:hover,
#masthead a:hover,
.ast-primary-header-bar a:hover,
.ast-main-header-menu a:hover,
.ast-header-navigation a:hover {
  /*color: #fff !important;*/
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px;
}

/* Contenu principal : cartes blanches comme le site HTML */
.ast-single-content,
.ast-archive-description,
.site-content,
.entry-content-wrap,
article,
.ast-post-format-,
main {
  /*background: var(--couleur-carte) !important;*/
  border-radius: var(--rayon);
 /* box-shadow: var(--ombre-carte);*/
  padding: clamp(1rem, 3vw, 1.5rem) !important;
}

/* Pages avec shortcode [chapitre] : fond jaune/crème (style guide) et pas de double cadre */
body.has-mnist-embed,
.ast-single-content:has(.mnist-ia-embed),
.site-content:has(.mnist-ia-embed),
article:has(.mnist-ia-embed),
main:has(.mnist-ia-embed),
.entry-content-wrap:has(.mnist-ia-embed),
.entry-content:has(.mnist-ia-embed) {
  background: var(--couleur-fond) !important;
}
.ast-single-content:has(.mnist-ia-embed),
.site-content:has(.mnist-ia-embed),
article:has(.mnist-ia-embed),
main:has(.mnist-ia-embed),
.entry-content-wrap:has(.mnist-ia-embed) {
  box-shadow: var(--ombre-carte);
  border-radius: 0 !important;
  padding: 0 !important;
}
.entry-content:has(.mnist-ia-embed) {
  padding: 0 !important;
}

/* Boutons style MNIST */
.ast-button,
.button,
input[type="submit"],
.wp-block-button__link,
.ast-menu-toggle {
  font-family: var(--police-texte) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--couleur-primaire) !important;
  /*color: #fff !important;*/
  border: none !important;
}

.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--couleur-violet) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Footer discret */
.ast-footer-overlay,
.site-footer,
.ast-small-footer {
  background: var(--couleur-carte) !important;
  color: var(--couleur-texte-clair) !important;
  box-shadow: var(--ombre-carte);
}

/* Sidebar / widgets */
.widget,
.ast-sidebar-main .widget {
  background: var(--couleur-carte) !important;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1rem 1.25rem !important;
}

.widget-title {
  font-family: var(--police-titre) !important;
  color: var(--couleur-primaire) !important;
}

/* Formulaires */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
  border-radius: 12px !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

input:focus,
textarea:focus {
  border-color: var(--couleur-primaire) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* ============================================
   Contenu embed shortcode [chapitre] dans WordPress :
   pas de duplication avec style.css, tout fourni par le thème.
   ============================================ */
.mnist-ia-embed {
  --sidebar-width: clamp(280px, 18vw, 350px);
  font-family: var(--police-texte);
  color: var(--couleur-texte);
  background: var(--couleur-fond) !important;
  min-height: 50vh;
}

.mnist-ia-embed .layout-chapitre {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
  padding-left: var(--sidebar-width);
}

.mnist-ia-embed .layout-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  background: var(--couleur-carte);
  box-shadow: var(--ombre-carte);
  border-radius: 0 0 var(--rayon) 0;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(0.5rem, 1.5vw, 0.75rem) 1.5rem;
}

.mnist-ia-embed .layout-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0 clamp(0.5rem, 2vw, 1rem) 1.5rem;
}
.mnist-ia-embed .layout-main .niveau-toggle-wrap {
  display: none;
}

.mnist-ia-embed .layout-sidebar .menu-scolaire {
  position: static;
  padding: 0 0 1rem 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.mnist-ia-embed .menu-scolaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mnist-ia-embed .menu-title {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
  color: var(--couleur-primaire);
}

.mnist-ia-embed .menu-scolaire a {
  display: block;
  color: var(--couleur-texte);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #f3f4f6;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.mnist-ia-embed .menu-scolaire a:hover,
.mnist-ia-embed .menu-scolaire a.active {
  background: var(--couleur-primaire);
  color: white;
}

.mnist-ia-embed .parcours-guide {
  margin: 0 0 1rem 0;
  flex-direction: column;
  align-items: stretch;
}

.mnist-ia-embed .niveau-toggle-wrap {
  margin: 0;
  padding: 0;
  flex-direction: column;
}

.mnist-ia-embed .contenu {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  width: 100%;
}

.mnist-ia-embed .section {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--couleur-carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  overflow-wrap: break-word;
  animation: mnist-apparition 0.4s ease-out;
}
@keyframes mnist-apparition {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mnist-ia-embed .section h2 {
  font-family: var(--police-titre);
  color: var(--couleur-primaire);
  margin-top: 0;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.mnist-ia-embed .section img,
.mnist-ia-embed .contenu img {
  max-width: 100%;
  height: auto;
}

.mnist-ia-embed .section canvas,
.mnist-ia-embed .contenu canvas {
  max-width: 100%;
}

.mnist-ia-embed .encadre {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  border-left: 4px solid;
}

.mnist-ia-embed .encadre.info {
  background: #eef2ff;
  border-left-color: var(--couleur-primaire);
}

.mnist-ia-embed .encadre.objectif,
.mnist-ia-embed .encadre.resume {
  background: #ecfdf5;
  border-left-color: var(--couleur-secondaire);
}

.mnist-ia-embed .encadre.sais-tu {
  background: #fdf4ff;
  border-left-color: var(--couleur-violet);
}

.mnist-ia-embed .encadre.objectif {
  border-left-color: var(--couleur-secondaire);
  background: #ecfdf5;
}

.mnist-ia-embed .encadre.resume {
  border-left-color: var(--couleur-accent);
  background: #fffbeb;
}

.mnist-ia-embed .encadre p {
  margin: 0;
  color: var(--couleur-texte);
}

.mnist-ia-embed .coche-compris { display: inline-block; margin-top: 0.5rem; cursor: pointer; font-size: 0.95rem; }
.mnist-ia-embed .coche-compris input { margin-right: 0.35rem; }

.mnist-ia-embed .bouton {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  background: var(--couleur-primaire);
  color: white;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.mnist-ia-embed .bouton:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.mnist-ia-embed .bouton.secondaire {
  background: var(--couleur-texte-clair);
}

.mnist-ia-embed .liens-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Grilles, schémas, composants pédagogiques (embed) */
.mnist-ia-embed .grille-28 {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(28, 1fr);
  width: min(280px, 90vw);
  height: min(280px, 90vw);
  border: 2px solid var(--couleur-primaire);
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

.mnist-ia-embed .pixels-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.mnist-ia-embed .objectif-section,
.mnist-ia-embed .resume-visuel,
.mnist-ia-embed .resume-fin-section {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}

/* ---------- Visualisation des poids : grilles 28×28, poids neurone, pedago ---------- */
.mnist-ia-embed .grille-28 .pixel {
  width: 100%;
  height: 100%;
  min-width: 4px;
  min-height: 4px;
  transition: box-shadow 0.2s, filter 0.2s;
}
.mnist-ia-embed .grille-28 .pixel.highlight {
  box-shadow: inset 0 0 0 2px var(--couleur-accent);
  filter: brightness(1.2);
}
.mnist-ia-embed .poids-neurone-grille {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(28, 1fr);
  width: min(112px, 25vw);
  height: min(112px, 25vw);
  border: 1px solid var(--couleur-primaire);
  border-radius: 4px;
  overflow: hidden;
  background: #f9fafb;
}
.mnist-ia-embed .poids-neurone-grille .pixel {
  width: 100%;
  height: 100%;
  min-width: 2px;
  min-height: 2px;
}
.mnist-ia-embed .pedago-couches-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
}
.mnist-ia-embed .pedago-couches-grille {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(28, 1fr);
  width: min(112px, 25vw);
  height: min(112px, 25vw);
  border: 1px solid var(--couleur-primaire);
  border-radius: 4px;
  overflow: hidden;
  background: #f9fafb;
}
.mnist-ia-embed .pedago-couches-grille .pixel {
  width: 100%;
  height: 100%;
  min-width: 2px;
  min-height: 2px;
}
.mnist-ia-embed .pedago-limites-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
}
.mnist-ia-embed .pedago-limites-vignette { text-align: center; }
.mnist-ia-embed .pedago-limites-mini {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(28, 1fr);
  width: min(84px, 20vw);
  height: min(84px, 20vw);
  border: 1px solid var(--couleur-primaire);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem auto;
  background: #f9fafb;
}
.mnist-ia-embed .pedago-limites-mini .pixel {
  width: 100%;
  height: 100%;
  min-width: 1px;
  min-height: 1px;
}
.mnist-ia-embed .pedago-bruit-grille.grille-28 {
  width: min(112px, 25vw);
  height: min(112px, 25vw);
}
.mnist-ia-embed .pixels-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.mnist-ia-embed .valeur-pixel-courant,
.mnist-ia-embed .valeur-pixel {
  font-weight: 700;
  color: var(--couleur-primaire);
}

/* ---------- Visu grille pixels (visualisation des poids : 784 entrées, overlay rouge) ---------- */
.mnist-ia-embed .visu-grille-pixels-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.mnist-ia-embed .visu-grille-zoom {
  position: relative;
  width: 112px;
  height: 112px;
  transform-origin: top left;
  z-index: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.mnist-ia-embed .visu-grille-zoom.visu-image-cachee .visu-grille-pixels .visu-entree-pixel {
  background: #fff !important;
}
.mnist-ia-embed .visu-grille-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  position: relative;
  z-index: 2;
}
.mnist-ia-embed .visu-overlay-toggle { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.mnist-ia-embed .visu-overlay-explication {
  display: block;
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--couleur-texte-clair);
  font-style: italic;
  max-width: 420px;
  margin-top: 0.15rem;
  line-height: 1.35;
}
.mnist-ia-embed .visu-btn-masquer-image {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--couleur-primaire);
  background: #fff;
  cursor: pointer;
  color: var(--couleur-primaire);
}
.mnist-ia-embed .visu-btn-masquer-image:hover { background: #f3f4f6; }
.mnist-ia-embed .visu-zoom-label { display: flex; align-items: center; gap: 0.35rem; }
.mnist-ia-embed .visu-zoom-label input[type="range"] { width: 80px; }

.mnist-ia-embed .visu-grille-pixels {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(28, 1fr);
  gap: 0;
  width: 112px;
  height: 112px;
  border: 2px solid var(--couleur-primaire);
  border-radius: 6px;
  overflow: hidden;
  background: #1f2937;
}
.mnist-ia-embed .visu-grille-pixels .visu-entree-pixel {
  width: 100%;
  height: 100%;
  min-width: 2px;
  min-height: 2px;
  border-radius: 0;
  transition: background 0.15s;
  cursor: help;
  background: #374151;
}
.mnist-ia-embed .visu-overlay-pixels {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 112px;
  height: 112px;
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(28, 1fr);
  gap: 0;
  pointer-events: none;
  border-radius: 4px;
  overflow: hidden;
}
.mnist-ia-embed .visu-overlay-pixels.visu-overlay-cache { display: none; }
.mnist-ia-embed .visu-overlay-pixels .visu-overlay-cell {
  width: 100%;
  height: 100%;
  min-width: 2px;
  min-height: 2px;
  transition: background 0.2s;
  pointer-events: none;
}

/* Conteneur « Activations des neurones en temps réel » : alignement horizontal */
.mnist-ia-embed .visu-neurones-temps-reel {
  margin: 1rem 0;
  padding: 1rem;
  background: #f0f9ff;
  border-radius: var(--rayon);
  border: 2px solid var(--couleur-primaire);
  overflow: visible;
}
.mnist-ia-embed .visu-neurones-temps-reel .visu-label,
.mnist-ia-embed .visu-neurones-temps-reel .visu-titre,
.mnist-ia-embed .visu-neurones-temps-reel .visu-sous-titre {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.mnist-ia-embed .visu-titre {
  font-weight: 700;
  color: var(--couleur-primaire);
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}
.mnist-ia-embed .visu-sous-titre {
  font-size: 0.85rem;
  color: var(--couleur-texte-clair);
  margin: 0 0 0.75rem 0;
}
.mnist-ia-embed .visu-reseau-wrapper {
  min-height: 0;
  padding: 0.5rem 1rem;
}

.mnist-ia-embed .visu-reseau {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  min-height: 180px;
}
.mnist-ia-embed .visu-couche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.mnist-ia-embed .visu-couche.visu-entree {
  justify-content: center;
  margin-top: 32px;
  margin-right: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}
.mnist-ia-embed .visu-couche.visu-cachee {
  justify-content: center;
  margin-right: 0.5rem;
}
.mnist-ia-embed .visu-couche.visu-sortie {
  justify-content: center;
  margin-left: 0.25rem;
}
.mnist-ia-embed .visu-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--couleur-texte-clair);
  text-align: center;
}
.mnist-ia-embed .visu-label-small {
  font-size: 0.65rem;
  color: var(--couleur-texte-clair);
  text-align: center;
  display: block;
  margin-bottom: 0.25rem;
}
.mnist-ia-embed .visu-legend {
  font-size: 0.65rem;
  color: var(--couleur-texte-clair);
  max-width: 140px;
  text-align: center;
}

.mnist-ia-embed .visu-connexions {
  width: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}
.mnist-ia-embed .visu-connexions-entree .visu-svg,
.mnist-ia-embed .visu-connexions-64 .visu-svg {
  height: 512px;
  min-height: 512px;
  align-self: center;
}
.mnist-ia-embed .visu-svg {
  width: 100%;
  height: 100%;
  min-height: 80px;
}
.mnist-ia-embed .visu-svg.poids-modifies line {
  stroke: var(--couleur-erreur);
  opacity: 0.8;
  animation: mnist-poids-flash 0.5s ease;
}
@keyframes mnist-poids-flash {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

.mnist-ia-embed .visu-grille-cachee {
  display: grid;
  gap: 0;
  width: 28px;
  height: 512px;
}
.mnist-ia-embed .visu-grille-cachee-colonne {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(64, 8px);
}
.mnist-ia-embed .visu-neurone-cell {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: background 0.15s;
  justify-self: center;
  align-self: center;
  box-shadow: inset -1px -1px 1px rgba(0,0,0,0.2), 0 0 1px rgba(255,255,255,0.4);
}
.mnist-ia-embed .visu-grille-cachee-colonne .visu-neurone-cell {
  width: 8px;
  height: 8px;
}
.mnist-ia-embed .visu-neurone-cell.neurone-allume {
  box-shadow: 0 0 8px var(--couleur-accent);
}
.mnist-ia-embed .visu-couche.masquee,
.mnist-ia-embed .visu-connexions.masquee {
  opacity: 0.25;
  pointer-events: none;
}

.mnist-ia-embed .visu-barres-sortie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
  height: 512px;
  justify-content: space-evenly;
}
.mnist-ia-embed .visu-barre-sortie {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
}
.mnist-ia-embed .visu-barre-sortie .barre-chiffre { width: 1rem; font-weight: 700; }
.mnist-ia-embed .visu-barre-sortie .barre-container {
  flex: 1;
  min-width: 50px;
  height: 14px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.mnist-ia-embed .visu-barre-sortie .barre-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--couleur-primaire);
  transition: width 0.2s;
  min-width: 2px;
}
.mnist-ia-embed .visu-barre-sortie.max .barre-fill {
  background: var(--couleur-secondaire);
}
.mnist-ia-embed .visu-fleche {
  font-size: 1.25rem;
  color: var(--couleur-texte-clair);
}

.mnist-ia-embed .visu-couches-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.mnist-ia-embed .visu-couches-toggle label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

/* ---------- Schéma neurone, réseau, formules, rétro ---------- */
.mnist-ia-embed .schema-neurone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}
.mnist-ia-embed .neurone-entrees,
.mnist-ia-embed .neurone-sortie {
  min-width: 80px;
  min-height: 2.5rem;
  padding: 0.5rem;
  background: #e0e7ff;
  border-radius: 8px;
  font-size: 0.9rem;
}
.mnist-ia-embed .neurone-entrees .entree-val.entree-active {
  background: var(--couleur-accent);
  color: white;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transform: scale(1.08);
}
.mnist-ia-embed .neurone-cellule {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--couleur-secondaire), #16a34a);
  color: white;
  border-radius: var(--rayon);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}
.mnist-ia-embed .schema-reseau {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem;
}
.mnist-ia-embed .couche {
  padding: 1rem 1.5rem;
  border-radius: var(--rayon);
  font-weight: 700;
  color: white;
}
.mnist-ia-embed .couche-entree { background: linear-gradient(135deg, var(--couleur-primaire), #4f46e5); }
.mnist-ia-embed .couche-cachee { background: linear-gradient(135deg, var(--couleur-violet), #7c3aed); }
.mnist-ia-embed .couche-sortie { background: linear-gradient(135deg, var(--couleur-accent), #d97706); }
.mnist-ia-embed .fleche-reseau { font-size: 1.5rem; color: var(--couleur-texte-clair); }

.mnist-ia-embed .formules-container { display: flex; flex-direction: column; gap: 1rem; }
.mnist-ia-embed .formules-visu canvas {
  border: 2px solid var(--couleur-primaire);
  border-radius: 8px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mnist-ia-embed .formules-etapes {
  min-height: 80px;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed var(--couleur-primaire);
  font-size: 0.95rem;
}
.mnist-ia-embed .formules-image-select { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.mnist-ia-embed .formules-image-select label { font-weight: 600; }
.mnist-ia-embed .formules-image-select select { padding: 0.5rem; border-radius: 8px; border: 2px solid var(--couleur-primaire); font-family: var(--police-texte); }
.mnist-ia-embed .formules-resultat { padding: 1rem; background: #ecfdf5; border-radius: 8px; border-left: 4px solid var(--couleur-secondaire); font-weight: 700; }
.mnist-ia-embed .resume-visuel-titre { margin: 0 0 0.5rem 0; }
.mnist-ia-embed .retro-etape {
  padding: 1rem 1.5rem;
  background: #f3f4f6;
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}
.mnist-ia-embed .retro-etape.active {
  background: var(--couleur-accent);
  color: white;
  transform: scale(1.05);
}

/* ---------- Pedago : viz, coût, barres, poids partagés, feedback ---------- */
.mnist-ia-embed .pedago-viz { margin: 1rem 0; }
.mnist-ia-embed .pedago-viz-titre { margin-bottom: 0.75rem; }
.mnist-ia-embed .pedago-cout-chiffre { margin-bottom: 0.5rem; }
.mnist-ia-embed .pedago-cout-barres { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.75rem 0; }
.mnist-ia-embed .pedago-cout-groupe { flex: 1; min-width: 200px; }
.mnist-ia-embed .pedago-cout-label { display: block; font-size: 0.9rem; margin-bottom: 0.35rem; font-weight: 600; }
.mnist-ia-embed .pedago-cout-bar { height: 1.25rem; min-width: 2px; border-radius: 4px; transition: width 0.2s ease; }
.mnist-ia-embed .pedago-cout-bar-obtenues { background: #3b82f6; cursor: pointer; }
.mnist-ia-embed .pedago-cout-bar-cibles { background: #10b981; }
.mnist-ia-embed .pedago-cout-legend { margin-top: 0.5rem; font-size: 0.9rem; color: #4b5563; }
.mnist-ia-embed .pedago-cout-resultat { margin-top: 0.75rem; font-size: 1.05rem; }
.mnist-ia-embed .pedago-poids-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0; padding: 1rem; background: #f8fafc; border-radius: 8px; }
.mnist-ia-embed .pedago-poids-neurone { padding: 0.35rem 0.6rem; border-radius: 6px; background: #e5e7eb; transition: background 0.2s ease; }
.mnist-ia-embed .pedago-poids-neurone.pedago-poids-highlight { background: var(--couleur-primaire); color: #fff; }
.mnist-ia-embed .pedago-poids-sortie { padding: 0.35rem 0.6rem; border-radius: 6px; background: #dbeafe; font-weight: 600; }
.mnist-ia-embed .pedago-feedback-msg { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.95rem; min-height: 1.2em; }
.mnist-ia-embed .pedago-feedback-msg.feedback-ok { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.mnist-ia-embed .pedago-feedback-msg.feedback-warn { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.mnist-ia-embed .pedago-feedback-msg.feedback-info { background: #dbeafe; color: #1e40af; border: 1px solid #3b82f6; }
.mnist-ia-embed .pedago-defi { background: linear-gradient(135deg, #e0e7ff, #f0f9ff); border-left: 4px solid #6366f1; padding: 0.6rem 0.75rem; border-radius: 0 8px 8px 0; margin-bottom: 0.75rem; }
.mnist-ia-embed .pedago-cout-moyen-barres { margin: 0.75rem 0; }
.mnist-ia-embed .pedago-cout-moyen-bar-wrap { flex: 1; max-width: 200px; height: 1.2rem; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.mnist-ia-embed .pedago-cout-moyen-bar { height: 100%; background: var(--couleur-primaire); border-radius: 6px; transition: width 0.2s ease; }
.mnist-ia-embed .pedago-lr-slider-wrap input[type="range"] { width: 120px; accent-color: var(--couleur-primaire); }

/* ---------- Dessin, heatmap, galerie, parcours, animations ---------- */
.mnist-ia-embed .dessin-container { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.mnist-ia-embed .dessin-grille-zoom { position: relative; width: 112px; height: 112px; border-radius: 6px; overflow: hidden; background: #1f2937; border: 2px solid var(--couleur-primaire); box-sizing: border-box; }
.mnist-ia-embed .dessin-grille-pixels {
  position: absolute; top: 0; left: 0;
  display: grid; grid-template-columns: repeat(28, 1fr); grid-template-rows: repeat(28, 1fr); gap: 0;
  width: 112px; height: 112px; border-radius: 4px; overflow: hidden;
}
.mnist-ia-embed .dessin-grille-pixels .dessin-pixel-cell { width: 100%; height: 100%; min-width: 2px; min-height: 2px; background: #374151; }
.mnist-ia-embed .heatmap-zone { margin-top: 1rem; }
.mnist-ia-embed .heatmap-grille .pixel { transition: background-color 0.2s; }
.mnist-ia-embed .galerie-mnist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mnist-ia-embed .galerie-mnist .img-mnist {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  object-fit: cover;
}

.mnist-ia-embed .parcours-guide {
  background: var(--couleur-carte);
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.mnist-ia-embed .parcours-titre { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--couleur-primaire); }
.mnist-ia-embed .parcours-etapes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mnist-ia-embed .parcours-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #e5e7eb; color: var(--couleur-texte);
  text-decoration: none; font-size: 0.8rem; font-weight: 700;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.mnist-ia-embed .parcours-dot:hover { background: var(--couleur-primaire); color: white; transform: scale(1.05); }
.mnist-ia-embed .parcours-dot.current { background: var(--couleur-primaire); color: white; }

.mnist-ia-embed .resume-visuel-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.mnist-ia-embed .resume-visuel-etape { padding: 0.35rem 0.75rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; }
.mnist-ia-embed .resume-fleche { color: var(--couleur-texte-clair); font-weight: 700; }
.mnist-ia-embed .lexique-liste dt { margin-top: 1rem; font-weight: 700; color: var(--couleur-primaire); }
.mnist-ia-embed .lexique-liste dd { margin: 0.25rem 0 0 0; }

.mnist-ia-embed .pixel.active {
  animation: mnist-pulse-pixel 0.6s ease;
}
@keyframes mnist-pulse-pixel {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); box-shadow: inset 0 0 0 2px var(--couleur-accent); }
}

.mnist-ia-embed .video-top { max-width: min(1200px, 100%); margin: 0 auto 1rem; width: 100%; }
.mnist-ia-embed .video-top .video-analyse-reseau { width: 100%; max-width: 100%; display: block; border-radius: 12px; background: #000; height: auto; }
.mnist-ia-embed .video-top-credits { margin-top: 0.5rem; margin-bottom: 0; }
.mnist-ia-embed .pdf-lecture-lien { margin-top: 1rem; margin-bottom: 0.5rem; }
.mnist-ia-embed .pdf-lecture-lien a { font-weight: 600; }
.mnist-ia-embed .donnees-mnist-canvas { display: block; border: 2px solid #e5e7eb; border-radius: 8px; background: #fff; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- Quiz (complet + courts) ---------- */
.mnist-ia-embed .quiz-zone { margin: 1rem 0; padding: 1rem; background: #f9fafb; border-radius: 12px; }
.mnist-ia-embed .quiz-question-num { font-weight: 700; color: var(--couleur-primaire); margin: 0 0 0.25rem 0; }
.mnist-ia-embed .quiz-question-texte { font-size: 1.05rem; margin: 0 0 0.75rem 0; }
.mnist-ia-embed .quiz-reponses { display: flex; flex-direction: column; gap: 0.35rem; }
.mnist-ia-embed .quiz-reponses label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem; border-radius: 8px; background: #fff; border: 2px solid #e5e7eb; }
.mnist-ia-embed .quiz-reponses label:hover { border-color: var(--couleur-primaire); }
.mnist-ia-embed .quiz-feedback { margin: 0.75rem 0 0 0; padding: 0.5rem; border-radius: 8px; font-weight: 600; }
.mnist-ia-embed .quiz-feedback.correct { background: #dcfce7; color: #166534; }
.mnist-ia-embed .quiz-feedback.incorrect { background: #fee2e2; color: #991b1b; }
.mnist-ia-embed .quiz-court { margin-top: 1rem; }
.mnist-ia-embed .quiz-court-q { margin: 0 0 0.5rem 0; font-weight: 600; }
.mnist-ia-embed .quiz-court-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.mnist-ia-embed .quiz-court-feedback { margin: 0.5rem 0 0 0; font-weight: 600; }
.mnist-ia-embed .quiz-court-feedback.bravo { color: #166534; }
.mnist-ia-embed .quiz-court-feedback.retry { color: #991b1b; }
.mnist-ia-embed .btn-quiz-court-verif { margin-top: 0.25rem; }

/* ---------- Flashcards ---------- */
.mnist-ia-embed .flashcards-zone { margin-top: 1rem; }
.mnist-ia-embed .flashcards-compteur { font-weight: 600; margin-bottom: 0.5rem; }
.mnist-ia-embed .flashcards-carte { background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 12px; padding: 1.25rem; margin: 0.75rem 0; min-height: 80px; }
.mnist-ia-embed .flashcards-question { margin: 0 0 0.75rem 0; font-size: 1.05rem; line-height: 1.45; }
.mnist-ia-embed .flashcards-reponse { margin: 0; padding-top: 0.75rem; border-top: 1px dashed #d1d5db; color: var(--couleur-primaire); font-weight: 600; }
.mnist-ia-embed .flashcards-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* ---------- Jouer / confiance ---------- */
.mnist-ia-embed .jouer-confiance { margin: 0.5rem 0; }
.mnist-ia-embed .jouer-confiance-bar { height: 12px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-top: 0.25rem; }
.mnist-ia-embed .jouer-confiance-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
.mnist-ia-embed .jouer-confiance-fill.confiant { background: var(--couleur-cachee, #22c55e); }
.mnist-ia-embed .jouer-confiance-fill.hesitant { background: var(--couleur-accent); }
.mnist-ia-embed .jouer-confiance-fill.incertain { background: var(--couleur-erreur); }
.mnist-ia-embed .jouer-resultat { margin-top: 0.75rem; }
.mnist-ia-embed .jouer-sorties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mnist-ia-embed .jouer-sorties .sortie-chiffre.max { font-weight: 700; color: var(--couleur-secondaire); }

/* ---------- Menu sidebar : niveau, accessibilité, mini-réseau ---------- */
.mnist-ia-embed .menu-mini-reseau { font-size: 0.8rem; color: var(--couleur-texte-clair); margin-bottom: 0.5rem; }
.mnist-ia-embed .mini-reseau-arch { padding: 0.15rem 0.35rem; border-radius: 4px; margin: 0 0.1rem; }
.mnist-ia-embed .couche-entree-mini { background: var(--couleur-entree); color: white; }
.mnist-ia-embed .couche-cachee-mini { background: var(--couleur-cachee); color: white; }
.mnist-ia-embed .couche-sortie-mini { background: var(--couleur-sortie); color: white; }
.mnist-ia-embed .mini-fleche { margin: 0 0.1rem; }
.mnist-ia-embed .menu-accessibilite { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.mnist-ia-embed .bouton-ico { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; font-size: 1rem; }
.mnist-ia-embed .bouton-ico:hover { background: var(--couleur-primaire); color: white; border-color: var(--couleur-primaire); }
.mnist-ia-embed .niveau-toggle-wrap { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.mnist-ia-embed .niveau-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #f3f4f6; border-radius: 8px; }
.mnist-ia-embed .niveau-label { margin: 0; font-weight: 600; }
.mnist-ia-embed .bouton-niveau { padding: 0.35rem 0.75rem; border-radius: 8px; border: 2px solid #e5e7eb; background: #fff; cursor: pointer; font-size: 0.9rem; }
.mnist-ia-embed .bouton-niveau.active { background: var(--couleur-primaire); color: white; border-color: var(--couleur-primaire); }
.mnist-ia-embed .bouton-guide { flex-shrink: 0; }

/* ---------- Résumé visuel couleurs, lexique complet ---------- */
.mnist-ia-embed .resume-visuel-etape.couleur-entree { background: var(--couleur-entree, #3b82f6); color: white; }
.mnist-ia-embed .resume-visuel-etape.couleur-cachee { background: var(--couleur-cachee, #22c55e); color: white; }
.mnist-ia-embed .resume-visuel-etape.couleur-sortie { background: var(--couleur-sortie, #f97316); color: white; }
.mnist-ia-embed .resume-fin-section { margin-top: 1.25rem; }
.mnist-ia-embed .lexique-liste { margin: 0; }
.mnist-ia-embed .lexique-liste dt:first-child { margin-top: 0; }
.mnist-ia-embed .lexique-liste dt a { color: inherit; text-decoration: none; }
.mnist-ia-embed .lexique-liste dt a:hover { text-decoration: underline; }

/* ---------- Encadrés spéciaux, exo-verdict ---------- */
.mnist-ia-embed .encadre.credits-notebooklm { font-size: 0.9rem; color: #6b7280; background: #f8fafc; border-color: #e2e8f0; }
.mnist-ia-embed .encadre-pour-toi { border-left: 4px solid #f59e0b; background: #fffbeb; }
.mnist-ia-embed .encadre-leo { border-left: 4px solid #8b5cf6; background: #f5f3ff; }
.mnist-ia-embed .exo-verdict { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.95rem; min-height: 1.2em; }
.mnist-ia-embed .exo-verdict.feedback-ok { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.mnist-ia-embed .exo-verdict.feedback-warn { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }

/* ---------- Fiche enseignant, limites, tableaux ---------- */
.mnist-ia-embed .fiche-enseignant-section { max-width: min(1150px, 100%); width: 100%; }
.mnist-ia-embed .fiche-enseignant-section h3 { font-size: 1.2rem; color: var(--couleur-primaire); margin: 1.5rem 0 0.5rem 0; }
.mnist-ia-embed .fiche-enseignant-section h3:first-of-type { margin-top: 0; }
.mnist-ia-embed .fiche-enseignant-section ul, .mnist-ia-embed .fiche-enseignant-section ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.mnist-ia-embed .fiche-enseignant-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.mnist-ia-embed .fiche-enseignant-table th, .mnist-ia-embed .fiche-enseignant-table td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
.mnist-ia-embed .fiche-enseignant-table th { background: #eef2ff; font-weight: 700; color: var(--couleur-primaire); }
.mnist-ia-embed .fiche-table-wrapper { overflow-x: auto; margin: 0.75rem 0; }

/* ---------- Schema rappel, formules num, légende ---------- */
.mnist-ia-embed .schema-reseau-rappel { margin: 1rem 0; }
.mnist-ia-embed .schema-reseau-rappel .couche { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 1.25rem; }
.mnist-ia-embed .couche-sous-texte { font-size: 0.7rem; font-weight: 600; opacity: 0.95; text-transform: lowercase; }
.mnist-ia-embed .formules-etapes-num { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.mnist-ia-embed .formules-num { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.mnist-ia-embed .formules-num.active { background: var(--couleur-primaire); color: white; }
.mnist-ia-embed .neurone-legende { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.mnist-ia-embed .legende-item { padding: 0.2rem 0.5rem; border-radius: 6px; background: #f3f4f6; }
.mnist-ia-embed .legende-item.couleur-entree { background: var(--couleur-entree, #3b82f6); color: white; }
.mnist-ia-embed .legende-item.couleur-sortie { background: var(--couleur-sortie, #f97316); color: white; }

/* ---------- Dessin : wrapper, résultat, canvas ---------- */
.mnist-ia-embed .dessin-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.mnist-ia-embed #canvas-dessin { border: 2px solid var(--couleur-primaire); border-radius: 8px; cursor: crosshair; background: #fff; touch-action: none; }
.mnist-ia-embed .dessin-resultat { min-width: 180px; }
.mnist-ia-embed .dessin-prediction { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem 0; }
.mnist-ia-embed .dessin-pixels-rouge { margin-top: 1rem; }
.mnist-ia-embed .dessin-pixels-rouge-legend { font-size: 0.85rem; color: var(--couleur-texte-clair); margin: 0 0 0.35rem 0; }

/* ---------- Pedago ch.6–10 : LLM, transformer, attention, MLP, diffusion, CLIP ---------- */
.mnist-ia-embed .pedago-cout-barres-inner { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: flex-end; }
.mnist-ia-embed .pedago-cout-bar-wrap { display: flex; align-items: center; gap: 0.25rem; width: 100%; margin-bottom: 0.2rem; }
.mnist-ia-embed .pedago-cout-bar-num { flex: 0 0 1.2rem; font-size: 0.8rem; font-weight: 600; }
.mnist-ia-embed .pedago-transformer-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0; }
.mnist-ia-embed .pedago-transformer-etape { padding: 0.5rem 0.75rem; border-radius: 8px; border: 2px solid #e5e7eb; background: #f9fafb; font-size: 0.95rem; transition: border-color 0.3s ease, background 0.3s ease; }
.mnist-ia-embed .pedago-transformer-etape.pedago-transformer-active { border-color: #10b981; background: rgba(16, 185, 129, 0.12); }
.mnist-ia-embed .pedago-attention-table { border-collapse: collapse; font-size: 0.9rem; width: 100%; max-width: 420px; }
.mnist-ia-embed .pedago-attention-table th, .mnist-ia-embed .pedago-attention-table td { border: 1px solid #e5e7eb; padding: 0.35rem 0.5rem; text-align: center; }
.mnist-ia-embed .pedago-attention-table th { background: #f3f4f6; font-weight: 600; }
.mnist-ia-embed .pedago-mlp-parallel { padding: 0.75rem; border-radius: 8px; border: 2px solid #e5e7eb; background: #f9fafb; transition: background 0.3s ease, border-color 0.3s ease; }
.mnist-ia-embed .pedago-mlp-parallel.pedago-mlp-parallel-highlight { background: rgba(16, 185, 129, 0.12); border-color: #10b981; }
.mnist-ia-embed .pedago-neurones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.5rem; margin: 0.75rem 0; }
.mnist-ia-embed .pedago-neurone-cell { padding: 0.5rem; border-radius: 6px; text-align: center; font-size: 0.9rem; font-weight: 600; border: 2px solid #e5e7eb; transition: background 0.2s ease, border-color 0.2s ease; }
.mnist-ia-embed .pedago-neurone-cell.pedago-neurone-active { background: rgba(16, 185, 129, 0.2); border-color: #10b981; color: #047857; }
.mnist-ia-embed .pedago-diffusion-buttons { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
.mnist-ia-embed .pedago-etape-btn { transition: background 0.2s ease, border-color 0.2s ease; }
.mnist-ia-embed .pedago-etape-btn.pedago-etape-active { background: #10b981; color: #fff; border-color: #10b981; }
.mnist-ia-embed .pedago-clip-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0; }
.mnist-ia-embed .pedago-vecteur { padding: 0.4rem 0.6rem; border-radius: 6px; border: 2px solid #e5e7eb; background: #f9fafb; font-size: 0.9rem; transition: border-color 0.3s ease, background 0.3s ease; }
.mnist-ia-embed .pedago-vecteur.pedago-clip-highlight { border-color: #10b981; background: rgba(16, 185, 129, 0.12); }
.mnist-ia-embed .pedago-guidage-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0; }
.mnist-ia-embed .pedago-paradoxe-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 1rem 0; }
.mnist-ia-embed .pedago-ddim-schema { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 1rem 0; }

/* ---------- Jeux (intrus, chrono), comparer ---------- */
.mnist-ia-embed .jeu-intrus-zone { margin: 1rem 0; }
.mnist-ia-embed .jeu-intrus-images { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.mnist-ia-embed .jeu-intrus-images canvas { cursor: pointer; border: 3px solid transparent; border-radius: 8px; }
.mnist-ia-embed .jeu-intrus-images canvas:hover { border-color: var(--couleur-primaire); }
.mnist-ia-embed .jeu-chrono-zone { margin: 1rem 0; }
.mnist-ia-embed .jeu-chrono-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.mnist-ia-embed .comparer-deux-cerveaux { margin-top: 1rem; }
.mnist-ia-embed .comparer-selects { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.mnist-ia-embed .comparer-resultat { margin-top: 0.75rem; padding: 0.75rem; background: #f9fafb; border-radius: 8px; }

/* ---------- Cerveau architecture, rétro schéma ---------- */
.mnist-ia-embed .cerveau-architecture { margin-top: 1rem; }
.mnist-ia-embed .cerveau-architecture p + ul { margin-top: 0.5rem; }
.mnist-ia-embed .cerveau-architecture p { margin-top: 1rem; }
.mnist-ia-embed .cerveau-architecture p:first-of-type { margin-top: 0; }
.mnist-ia-embed .cerveau-liste-detail { margin: 0.5rem 0 0 0; padding-left: 1.25rem; }
.mnist-ia-embed .cerveau-liste-detail li { margin-bottom: 0.6rem; }
.mnist-ia-embed .cerveau-liste-detail li:last-child { margin-bottom: 0; }
.mnist-ia-embed .retro-etapes { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.mnist-ia-embed .retro-schema-remonte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mnist-ia-embed .retro-box { padding: 0.5rem 0.75rem; border-radius: 8px; font-weight: 600; }
.mnist-ia-embed .retro-fleche-haut { font-size: 1.25rem; color: var(--couleur-texte-clair); }
.mnist-ia-embed .anim-retro { padding: 1rem; }
.mnist-ia-embed .bouton-flux { margin-bottom: 0.5rem; }
.mnist-ia-embed .schema-reseau-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mnist-ia-embed .flux-couche.flux-active { animation: mnist-flux-pulse 0.6s ease; box-shadow: 0 0 0 3px var(--couleur-accent); }
.mnist-ia-embed .flux-fleche.flux-active { color: var(--couleur-erreur); font-weight: 700; animation: mnist-flux-pulse 0.6s ease; }
@keyframes mnist-flux-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ---------- Entraînement, sauvegardes ---------- */
.mnist-ia-embed .entrainement-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.mnist-ia-embed .entrainement-stats { display: flex; flex-wrap: wrap; gap: 1rem; font-weight: 700; color: var(--couleur-primaire); }
.mnist-ia-embed .entrainement-etape { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; background: #e5e7eb; border-radius: 999px; font-size: 0.9rem; font-weight: 600; transition: background 0.3s, transform 0.2s; }
.mnist-ia-embed .entrainement-etape.active { background: var(--couleur-primaire); color: white; transform: scale(1.05); }
.mnist-ia-embed .courbe-loss-precision { margin-top: 1rem; padding: 1rem; background: #f9fafb; border-radius: 12px; }
.mnist-ia-embed .courbe-canvas-wrapper canvas { max-width: 100%; height: auto; display: block; }

/* ---------- FAQ ---------- */
.mnist-ia-embed .faq-liste { margin: 0; }
.mnist-ia-embed .faq-liste dt { margin-top: 1rem; font-weight: 700; color: var(--couleur-primaire); }
.mnist-ia-embed .faq-liste dt:first-of-type { margin-top: 0; }
.mnist-ia-embed .faq-liste dd { margin: 0.25rem 0 0 0; padding-left: 0; }

/* ---------- Utilitaires généraux embed ---------- */
.mnist-ia-embed select, .mnist-ia-embed input[type="text"], .mnist-ia-embed input[type="number"] { max-width: 100%; }
.mnist-ia-embed .contenu-notebook { } /* réservé pour visibilité selon toggle */
.mnist-ia-embed .detail-only { } /* masqué en niveau simple côté HTML/JS */

@media (max-width: 900px) {
  .mnist-ia-embed .layout-chapitre {
    flex-direction: column;
    padding-left: 0.5rem;
  }
  .mnist-ia-embed .layout-sidebar {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0 0 var(--rayon) var(--rayon);
    margin-bottom: 0.5rem;
  }
  .mnist-ia-embed .layout-sidebar .menu-scolaire ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mnist-ia-embed .layout-main {
    padding: 0 0.5rem 1.5rem;
  }
  .mnist-ia-embed .layout-main .niveau-toggle-wrap {
    display: flex;
  }
}