/* ============================================================
   SCHÉMAS PÉDAGOGIQUES (.dgm-*)
   Composant mutualisé pour les illustrations/diagrammes SVG des
   outils. Theme-aware (couleurs via currentColor + tokens), sobre,
   accessible. Le tracé (géométrie) reste inline dans chaque SVG ;
   ce fichier fournit la carte, la grille, les libellés et les
   animations communes.
   Contenu pédagogique → libellés en français (convention projet).
   ============================================================ */

.dgm {
  background: var(--glass-bg, rgba(20, 24, 33, 0.62));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px));
  backdrop-filter: blur(var(--glass-blur, 18px));
  border-radius: var(--radius-glass, 22px);
  padding: 1.8rem;
  margin-bottom: 3rem;
}
.dgm-sub { opacity: 0.85; margin: 0 0 1.4rem; line-height: 1.6; }

.dgm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}

.dgm-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 1rem 1.4rem;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}
.dgm-fig figcaption {
  order: -1;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: var(--accent-text, #37EFBA);
}
/* Une figure pleine largeur (pas de grille) */
.dgm-fig--wide { max-width: 760px; margin: 0 auto; }

.dgm-fig svg { width: 100%; height: auto; max-width: 460px; color: inherit; overflow: visible; }
.dgm-fig--wide svg { max-width: 720px; }
.dgm-fig svg text { fill: currentColor; }

/* Primitives partagées --------------------------------------- */

/* Boîte / nœud neutre */
.dgm-box { fill: rgba(127, 127, 127, 0.06); stroke: currentColor; stroke-opacity: 0.4; stroke-width: 1.4; }
.dgm-box-label { font-family: Lexend, sans-serif; font-size: 13px; font-weight: 600; }
.dgm-small { font-family: Lexend, sans-serif; font-size: 10.5px; opacity: 0.72; }

/* Boîtes colorées (bon / mauvais / accent) */
.dgm-box--good { fill: rgba(55, 239, 186, 0.12); stroke: var(--accent-text, #37EFBA); stroke-opacity: 0.7; }
.dgm-box--bad  { fill: rgba(255, 90, 90, 0.12); stroke: #ff6a6a; stroke-opacity: 0.7; }
.dgm-box--accent { fill: rgba(55, 239, 186, 0.10); stroke: var(--accent-text, #37EFBA); stroke-opacity: 0.55; }

/* Étiquette de zone (titre de colonne / section) */
.dgm-zone { font-family: Lexend, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; fill: var(--accent-text, #37EFBA); }
.dgm-ring-label { font-family: Lexend, sans-serif; font-weight: 700; }

/* Cœur (texte sombre sur dégradé d'accent vif) */
.dgm-core-txt { font-family: Lexend, sans-serif; fill: #08251d; }

/* Ports / pastilles */
.dgm-port { fill: #0c8a65; stroke: #37EFBA; stroke-width: 2; }
.dgm-port-txt { font-family: Lexend, sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; fill: var(--accent-text, #37EFBA); }

/* Texte d'accent / annotation */
.dgm-accent-txt { fill: var(--accent-text, #37EFBA); font-family: Lexend, sans-serif; font-weight: 700; }
.dgm-bad-txt { fill: #ff6a6a; font-family: Lexend, sans-serif; font-weight: 700; }
.dgm-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

/* Légende sous le schéma */
.dgm-legend {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.6rem 0 0;
  line-height: 1.6;
  font-size: 0.92rem;
  opacity: 0.92;
}
.dgm-legend i { color: var(--accent-text, #37EFBA); margin-top: 0.2rem; flex-shrink: 0; }
.dgm-legend + .dgm-legend { margin-top: 0.7rem; }

/* Animations (subtiles) -------------------------------------- */
.dgm-flow { stroke-dasharray: 6 8; animation: dgmFlow 1.4s linear infinite; }
.dgm-flow-slow { stroke-dasharray: 5 9; animation: dgmFlow 2.4s linear infinite; }
.dgm-halo { animation: dgmGlow 3.4s ease-in-out infinite; }
.dgm-chev { animation: dgmChev 2.2s ease-in-out infinite; }
.dgm-chev2 { animation-delay: 0.35s; }
.dgm-chev3 { animation-delay: 0.7s; }
.dgm-float { transform-box: fill-box; transform-origin: center; animation: dgmFloat 3.4s ease-in-out infinite; }
.dgm-pulse { animation: dgmPulse 2.4s ease-in-out infinite; }

@keyframes dgmFlow { to { stroke-dashoffset: -28; } }
@keyframes dgmGlow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.32; } }
@keyframes dgmChev { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes dgmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dgmPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .dgm-flow, .dgm-flow-slow, .dgm-halo, .dgm-chev, .dgm-float, .dgm-pulse { animation: none; }
  .dgm-flow, .dgm-flow-slow { stroke-dasharray: none; }
}

@media (max-width: 560px) {
  .dgm { padding: 1.3rem 1rem; }
}