.editor_ace {
    min-height: 300px;
    width: 100%;
    border-radius: 3px;

  }

  /* ------------------------------------------------------------------
     Bandeau sous l'éditeur (créé par moteur_ace_pyodide.js) :
     étiquette « xxx.py » à gauche, boutons Exécuter / Sauvegarder /
     Effacer à droite — stylé uniquement par les variables du contrat.
     ------------------------------------------------------------------ */
  .editor-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--editor-bar-bg);
    color: var(--editor-bar-text);
    border: 1px solid var(--editor-bar-border);
    border-top: none;
    border-radius: 0 0 var(--radius-bloc, 8px) var(--radius-bloc, 8px);
  }

  .editor-bar-titre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    opacity: 0.9;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-bar-boutons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
  }

  /* Dans le bandeau, les boutons deviennent compacts */
  .editor-bar .btn-valider {
    margin: 0;
    padding: 6px 14px;
    font-size: 0.9rem;
    float: none;
  }

  .editor-bar .btn-delete {
    float: none;
    margin-left: 0;
  }

  /* L'éditeur vient se poser au-dessus du bandeau */
  .exercice.pyodide .editor_ace {
    margin-top: 24px;
    border-radius: var(--radius-bloc, 3px) var(--radius-bloc, 3px) 0 0;
    border: 1px solid var(--editor-bar-border);
    border-bottom: none;
  }

  @media screen and (max-width: 600px) {
    .editor-bar-boutons {
      width: 100%;
      justify-content: flex-end;
    }
  }

  /* ------------------------------------------------------------------
     Panneaux de sortie Tests / Affichage / Console (enveloppe créée par
     moteur_ace_pyodide.js) : en-tête-bandeau + corps soudé, même
     vocabulaire que l'éditeur, uniquement des variables du contrat.
     ------------------------------------------------------------------ */
  .panneau-sortie {
    margin-top: 18px;
  }

  .panneau-sortie-titre {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    opacity: 0.9;
    background: var(--editor-bar-bg);
    color: var(--editor-bar-text);
    border: 1px solid var(--editor-bar-border);
    border-bottom: none;
    border-radius: var(--radius-bloc, 8px) var(--radius-bloc, 8px) 0 0;
  }

  .panneau-sortie > pre,
  .panneau-sortie > .repl {
    margin: 0;
    padding: 12px 14px;
    background: var(--code-bg-solid);
    color: var(--body-text);
    border: 1px solid var(--editor-bar-border);
    border-radius: 0 0 var(--radius-bloc, 8px) var(--radius-bloc, 8px);
    box-shadow: none;
    font-family: var(--font-mono, monospace);
  }

  /* ceinture : si highlight.js touchait encore ces blocs, pas de fond en dur */
  .panneau-sortie pre code {
    background: none;
    padding: 0;
  }

  /* Résultats des tests : vert/rouge sémantiques du thème */
  .ligne-test { display: block; }
  .ligne-test.test-ok { color: var(--reponse-juste); }
  .ligne-test.test-ko,
  .ligne-test.test-err { color: var(--reponse-fausse); }

  .clipboard_h2_pyodide {      /* ta classe sur le <svg> */
  background: none;          /* ou background-color: transparent; */
}

  .btn-valider {
    background: var(--btn-bg, linear-gradient(135deg, #4f6e86 0%, #3a5063 100%));
    color: var(--btn-text, white);
    border: none;
    padding: 11px 24px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-titres, 'Poppins', "Segoe UI", Roboto, sans-serif);
    border-radius: var(--radius-bouton, 10px);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: var(--btn-shadow, 0 4px 14px rgba(52, 73, 94, 0.30));
    margin-top: 30px;
    margin-right: 30px;
  }

  .btn-delete { float: right; margin-left: 1rem; }

  .btn-valider:hover {
    background: var(--btn-bg-hover, linear-gradient(135deg, #5a7c95 0%, #45607a 100%));
    transform: translateY(-1px);
  }

  .btn-valider:active {
    transform: scale(0.98);
  }

  .btn-valider:disabled {
    background: var(--muted-text);
    cursor: not-allowed;
    box-shadow: none;
  }

  .conteneur_ace {
    position: relative;
    width: 100%;
  }

  /* Surface, bordure et rayon viennent de .panneau-sortie > .repl */
  .repl {
    font-family: var(--font-mono, monospace);
  }

  .repl-log {
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin: 0 0 .25rem;
    border-radius: 0;

  }

  .repl-line {
    display: flex;
    align-items: center;

  }

  .prompt {
    margin-right: .4rem;
    user-select: none;

  }

  .repl-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;

  }

  .repl, .repl-input, .repl-line, .repl-log{
    font-size: 1.5rem;
  }