/*
 * modale-mdt.css — PsyRisso Desktop
 * Infographie de la modale "mémoire de travail" (modèle Baddeley & Hitch).
 * Utilisée sur plusieurs pages (ravens2.php, wais-iv.php) — CSS à part de
 * modale.css (générique) et des CSS propres à chaque page.
 */
.mdt-title { background: var(--bleu); color: #fff; text-align: center; border-radius: 10px; padding: 14px 18px; max-width: 560px; margin: 0 auto 8px; }
.mdt-title b { font-size: 1.25rem; display: block; }
.mdt-title span { font-size: 0.9rem; opacity: .9; }
.mdt-grid { position: relative; display: grid; grid-template-columns: 1fr 200px 1fr; grid-template-rows: auto 200px auto; gap: 80px; align-items: center; margin-top: 14px; }
.mdt-comp { position: relative; z-index: 2; border-radius: 12px; padding: 14px 16px; }
.mdt-comp h3 { margin: 0 0 6px; font-size: 1rem; color: var(--bleu); }
.mdt-comp p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.mdt-c-adm { background: #DCE6F2; }
.mdt-c-bou { background: #F5E7CE; }
.mdt-c-cal { background: #D3ECEA; }
.mdt-c-tam { background: #E7DEF0; }
.mdt-pos-top { grid-column: 2; grid-row: 1; }
.mdt-pos-left { grid-column: 1; grid-row: 2; }
.mdt-pos-center { grid-column: 2; grid-row: 2; display: flex; justify-content: center; }
.mdt-pos-right { grid-column: 3; grid-row: 2; }
.mdt-pos-bottom { grid-column: 2; grid-row: 3; }
.mdt-brain-wrap { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border-radius: 50%; background: #fff; }
.mdt-brain-wrap svg { display: block; width: 165px; height: auto; position: relative; z-index: 3; }
.mdt-conn { position: absolute; background: var(--bleu); z-index: 2; }
.mdt-conn-t { left: 50%; transform: translateX(-50%); bottom: 100%; width: 6px; height: 80px; }
.mdt-conn-b { left: 50%; transform: translateX(-50%); top: 100%; width: 6px; height: 80px; }
.mdt-conn-l { top: 50%; transform: translateY(-50%); right: 100%; height: 6px; width: 80px; }
.mdt-conn-r { top: 50%; transform: translateY(-50%); left: 100%; height: 6px; width: 80px; }

@media (max-width: 720px) {
  .mdt-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .mdt-pos-top, .mdt-pos-left, .mdt-pos-center, .mdt-pos-right, .mdt-pos-bottom { grid-column: 1; grid-row: auto; }
  .mdt-conn { display: none; }
}