/* Widgets interactifs du TP3 — styles volontairement autonomes. */
.tp3-interactif { margin: 1.25rem 0 2rem; }
.tp3-interactif .tp3-widget-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.tp3-interactif .tp3-widget-heading strong { font-size:1.05rem; }
.tp3-interactif .tp3-widget-heading p { margin:.25rem 0 0; color:var(--md-default-fg-color--light); }
.tp3-interactif .tp3-widget-tag { flex:0 0 auto; border:1px solid var(--md-default-fg-color--lightest); border-radius:999px; padding:.15rem .6rem; font-size:.75rem; }
.tp3-interactif .tp3-table-scroll { overflow-x:auto; border:1px solid var(--md-default-fg-color--lightest); border-radius:.55rem; }
.tp3-interactif .tp3-answer-table { width:100%; border-collapse:collapse; font-size:.82rem; margin:0; }
.tp3-interactif .tp3-answer-table th, .tp3-interactif .tp3-answer-table td { padding:.55rem .6rem; border-bottom:1px solid var(--md-default-fg-color--lightest); vertical-align:middle; text-align:left; }
.tp3-interactif .tp3-answer-table thead th { background:var(--md-code-bg-color); font-weight:650; }
.tp3-interactif .tp3-answer-table tbody tr:last-child th, .tp3-interactif .tp3-answer-table tbody tr:last-child td { border-bottom:0; }
.tp3-interactif .tp3-answer-table select { min-width:8.2rem; max-width:100%; padding:.35rem; border:1px solid var(--md-default-fg-color--lightest); border-radius:.35rem; background:var(--md-default-bg-color); color:var(--md-default-fg-color); }
.tp3-interactif select.is-correct { border:2px solid #2e7d32; background:color-mix(in srgb, #2e7d32 9%, var(--md-default-bg-color)); }
.tp3-interactif select.is-wrong { border:2px solid #c62828; background:color-mix(in srgb, #c62828 7%, var(--md-default-bg-color)); }
.tp3-interactif .tp3-widget-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 .75rem; }
.tp3-interactif .tp3-button { appearance:none; border:1px solid var(--md-default-fg-color--lightest); border-radius:.45rem; padding:.48rem .8rem; background:var(--md-default-bg-color); color:var(--md-default-fg-color); cursor:pointer; font:inherit; }
.tp3-interactif .tp3-button:hover { border-color:var(--md-accent-fg-color); }
.tp3-interactif .tp3-button:disabled { opacity:.45; cursor:not-allowed; }
.tp3-interactif .tp3-button.tp3-primary { background:var(--md-primary-fg-color); border-color:var(--md-primary-fg-color); color:var(--md-primary-bg-color); }
.tp3-interactif .tp3-feedback { padding:.7rem .85rem; border-radius:.4rem; background:var(--md-code-bg-color); margin:.75rem 0; }
.tp3-interactif .tp3-feedback.is-success { border-left:4px solid #2e7d32; }
.tp3-interactif .tp3-feedback.is-error { border-left:4px solid #c62828; }
.tp3-interactif .tp3-reasons { margin-top:.75rem; }
.tp3-interactif .tp3-reasons li { margin:.35rem 0; }
.tp3-interactif .tp3-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tp3-interactif [data-tp3-list-simulator] { margin:1rem 0 2rem; }
.tp3-interactif .tp3-mode-switch { display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0; }
.tp3-interactif .tp3-mode-button { border:1px solid var(--md-default-fg-color--lightest); border-radius:.5rem; padding:.5rem .85rem; color:var(--md-default-fg-color); background:var(--md-default-bg-color); cursor:pointer; font:inherit; }
.tp3-interactif .tp3-mode-button.is-active { border-color:var(--md-primary-fg-color); box-shadow:inset 0 0 0 1px var(--md-primary-fg-color); }
.tp3-interactif .tp3-sim-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.tp3-interactif .tp3-sim-summary > div { border:1px solid var(--md-default-fg-color--lightest); border-radius:.55rem; padding:.65rem .75rem; display:flex; flex-direction:column; gap:.25rem; }
.tp3-interactif .tp3-sim-summary span { color:var(--md-default-fg-color--light); font-size:.78rem; }
.tp3-interactif .tp3-sim-summary strong { font-size:1rem; overflow-wrap:anywhere; }
.tp3-interactif .tp3-structure-visual { min-height:7rem; padding:1rem .5rem; border:1px solid var(--md-default-fg-color--lightest); border-radius:.55rem; overflow-x:auto; }
.tp3-interactif .tp3-node-row, .tp3-interactif .tp3-array-row { display:flex; align-items:center; justify-content:center; gap:.3rem; min-width:max-content; padding:.6rem .3rem; }
.tp3-interactif .tp3-node-wrap { display:flex; align-items:center; gap:.3rem; }
.tp3-interactif .tp3-node { min-width:4.4rem; min-height:4.6rem; border:1px solid var(--md-default-fg-color--light); border-radius:.45rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.15rem; padding:.35rem; background:var(--md-default-bg-color); }
.tp3-interactif .tp3-node small, .tp3-interactif .tp3-array-cell small { color:var(--md-default-fg-color--light); font-size:.68rem; }
.tp3-interactif .tp3-node strong, .tp3-interactif .tp3-array-cell strong { font-size:1.05rem; }
.tp3-interactif .tp3-node span { font-size:.7rem; color:var(--md-default-fg-color--light); }
.tp3-interactif .tp3-node.is-current, .tp3-interactif .tp3-array-cell.is-current { outline:3px solid var(--md-accent-fg-color); outline-offset:2px; }
.tp3-interactif .tp3-arrow { font-size:1.2rem; color:var(--md-default-fg-color--light); }
.tp3-interactif .tp3-null { font-size:.78rem; font-family:var(--md-code-font-family); }
.tp3-interactif .tp3-array-cell { min-width:4.25rem; border:1px solid var(--md-default-fg-color--light); border-radius:.4rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.7rem .5rem; }
.tp3-interactif .tp3-pointer-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; margin-top:.7rem; color:var(--md-default-fg-color--light); font-size:.78rem; }
.tp3-interactif .tp3-empty-structure { padding:2rem; text-align:center; color:var(--md-default-fg-color--light); }
.tp3-interactif .tp3-sim-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:.55rem; margin:1rem 0; }
.tp3-interactif .tp3-sim-controls label { display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; }
.tp3-interactif .tp3-sim-controls input { width:7.2rem; border:1px solid var(--md-default-fg-color--lightest); border-radius:.35rem; padding:.4rem; background:var(--md-default-bg-color); color:var(--md-default-fg-color); font:inherit; }
.tp3-interactif .tp3-small-note { font-size:.8rem; color:var(--md-default-fg-color--light); }
@media (max-width: 700px) {
  .tp3-interactif .tp3-sim-summary { grid-template-columns:1fr; }
  .tp3-interactif .tp3-answer-table { min-width:780px; }
  .tp3-interactif .tp3-widget-heading { flex-direction:column; }
}

/* Simulateur animé : état indépendant par représentation, parcours et décalages visibles. */
.tp3-interactif .tp3-mode-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:.75rem 0 1rem; }
.tp3-interactif .tp3-mode-stat { display:flex; flex-direction:column; gap:.25rem; padding:.65rem .75rem; border:1px solid var(--md-default-fg-color--lightest); border-radius:.5rem; font-size:.78rem; }
.tp3-interactif .tp3-mode-stat strong { font-size:.86rem; }
.tp3-interactif .tp3-mode-stat.is-active { border-color:var(--md-primary-fg-color); box-shadow:inset 0 0 0 1px var(--md-primary-fg-color); }
.tp3-interactif .tp3-mode-stat span { color:var(--md-default-fg-color--light); }
.tp3-interactif .tp3-mode-stat b { color:var(--md-default-fg-color); font-variant-numeric:tabular-nums; }
.tp3-interactif .tp3-node.is-visiting, .tp3-interactif .tp3-array-cell.is-visiting { border-color:var(--md-accent-fg-color); background:color-mix(in srgb, var(--md-accent-fg-color) 14%, var(--md-default-bg-color)); animation:tp3-visit-pulse .55s ease-in-out; }
.tp3-interactif .tp3-node.is-new { border-color:#2e7d32; background:color-mix(in srgb, #2e7d32 13%, var(--md-default-bg-color)); animation:tp3-node-appear .35s ease-out; }
.tp3-interactif .tp3-array-cell.is-shift-source { border-color:var(--md-accent-fg-color); opacity:.78; transform:translateX(3px); }
.tp3-interactif .tp3-array-cell.is-shift-target { outline:2px dashed var(--md-accent-fg-color); outline-offset:2px; animation:tp3-shift-target .55s ease-in-out; }
.tp3-interactif .tp3-array-cell.is-removing { border-color:#c62828; background:color-mix(in srgb, #c62828 13%, var(--md-default-bg-color)); animation:tp3-removing .62s ease-in-out; }
.tp3-interactif .tp3-array-cell.is-temporary { border-style:dashed; }
.tp3-interactif .tp3-moving-label { display:block; margin-top:.15rem; font-size:.65rem; color:var(--md-accent-fg-color); font-weight:650; }
.tp3-interactif .tp3-animation-detail { margin:.9rem .15rem .15rem; padding:.8rem .9rem; border-left:4px solid var(--md-accent-fg-color); border-radius:.25rem; background:var(--md-code-bg-color); animation:tp3-detail-appear .2s ease-out; }
.tp3-interactif .tp3-animation-detail p { margin:.35rem 0 0; }
.tp3-interactif .tp3-animation-detail.is-warning { border-left-color:#c62828; }
.tp3-interactif .tp3-detached-node { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-top:.65rem; padding:.5rem .65rem; border:1px dashed var(--md-default-fg-color--light); border-radius:.4rem; width:fit-content; }
.tp3-interactif .tp3-detached-node span, .tp3-interactif .tp3-detached-node small { color:var(--md-default-fg-color--light); font-size:.76rem; }
.tp3-interactif .tp3-detached-node b { padding:.2rem .55rem; border:1px solid var(--md-default-fg-color--light); border-radius:.3rem; }
.tp3-interactif .tp3-shift-equation { display:flex; align-items:center; gap:.8rem; margin-top:.6rem; font-family:var(--md-code-font-family); font-size:.86rem; }
.tp3-interactif .tp3-shift-arrow { display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; font-size:1.3rem; color:var(--md-accent-fg-color); animation:tp3-arrow-slide .55s ease-in-out; }
.tp3-interactif .tp3-sim-controls button:disabled, .tp3-interactif .tp3-sim-controls input:disabled { opacity:.55; cursor:wait; }
@keyframes tp3-visit-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--md-accent-fg-color) 0%, transparent); } 50% { box-shadow:0 0 0 5px color-mix(in srgb, var(--md-accent-fg-color) 23%, transparent); } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes tp3-node-appear { from { transform:scale(.88); opacity:.45; } to { transform:scale(1); opacity:1; } }
@keyframes tp3-shift-target { 0% { background:var(--md-default-bg-color); } 50% { background:color-mix(in srgb, var(--md-accent-fg-color) 20%, var(--md-default-bg-color)); } 100% { background:var(--md-default-bg-color); } }
@keyframes tp3-removing { 0%, 45% { transform:scale(1); opacity:1; } 100% { transform:scale(.92); opacity:.58; } }
@keyframes tp3-detail-appear { from { opacity:.55; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes tp3-arrow-slide { 0% { transform:translateX(0); opacity:.6; } 50% { transform:translateX(5px); opacity:1; } 100% { transform:translateX(0); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .tp3-interactif .tp3-node.is-visiting, .tp3-interactif .tp3-array-cell.is-visiting,
  .tp3-interactif .tp3-node.is-new, .tp3-interactif .tp3-array-cell.is-shift-target,
  .tp3-interactif .tp3-array-cell.is-removing, .tp3-interactif .tp3-animation-detail,
  .tp3-interactif .tp3-shift-arrow { animation:none; }
}
@media (max-width: 700px) {
  .tp3-interactif .tp3-mode-stats { grid-template-columns:1fr; }
}