body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }

        .exercice {
            margin-bottom: 40px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background: #fff;
        }

        .code-flex {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 1em;
        }
        .code-block {
  font-family: monospace;   /* police de code */
  white-space: pre;         /* respecte les espaces ET les retours à la ligne */
  background: #2d2d2d;      /* fond type "éditeur" */
  color: #f8f8f2;           /* couleur du texte */
  padding: 10px;
  border-radius: 6px;
}

        .code-block {
            flex: 1;
            min-width: 0;
            white-space: pre;         /* respecte les espaces ET les retours à la ligne */
            margin : 0;
        }

        .code-block h4 {
            margin: 0 0 0.5em 0;
            font-size: 1em;
            color: #444;
        }

        .code-container {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 10px;
            border-radius: 6px;
            overflow-x: auto;
            font-family: monospace;
            font-size: 14px;
        }

        .line {
            display: block;
        }

        .line-number {
            display: inline-block;
            width: 2em;
            color: #999;
            text-align: right;
            margin-right: 1em;
            user-select: none;
        }

        .show-answer, .show-indice {
            margin: 0.3em 0.5em 0.3em 0;
            padding: 0.3em 0.8em;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .show-answer {
            background: #007acc;
            color: white;
        }

        .show-answer:hover {
            background: #005f99;
        }

        .show-indice {
            background: #ffa500;
            color: #fff;
        }

        .show-indice:hover {
            background: #cc8400;
        }

        .indice {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
            border-radius: 4px;
            padding: 6px 10px;
            font-style: italic;
            margin: 5px 0 10px 0;
        }
        .screen-container {
            background: #f4f4f4;
            color: #000000;
            padding: 10px;
            border-radius: 8px;
            font-family: monospace;
            white-space: pre; /* respecter indentation */
        }
        .blank {
  font-family: monospace;       /* même police que le code */
  font-size: 14px;              /* même taille que le code */
  line-height: 1.4;             /* alignement vertical identique */
  padding: 0;                   /* supprime le padding par défaut */
  margin: 0;                    /* pas d’espace autour */
  border: none;                 /* pas de bordure visible */
  border-bottom: 1px solid #aaa;/* petit trait bas comme repère */
  background: transparent;      /* fond transparent comme le code */
  color: #f8f8f2;               /* couleur du texte identique au code */
  height: 1em;                  /* même hauteur que le texte */
  vertical-align: middle;       /* alignement vertical */
}