Better this code:" <!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Exemple Flex</title>

  <!-- Pico CSS pour un style de base -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.10/css/pico.min.css">

  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ─────  Bannière  ───── */
    #banniere{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      gap: 1rem;
      padding: 0.5rem;
      border: 1px solid black;
    }
    #version{
      margin:0;
      position:absolute;
      left:1rem;
      top:50%;
      transform:translateY(-50%);
    }
    #banniere > div:last-child{
      display:flex;
      align-items:center;
      gap:1rem;
    }

    #popup{
        display:none ;
				position:absolute;
				background-color:rgb(203, 221, 245);
        border-radius: 3px;
        padding:20px;
		}

    /* ─────  Contenu principal ───── */
    #contenu{
      flex:1;
      display:flex;
      gap:4px;
      padding:4px;
    }
    .cadre{
      flex:1;
      border:1px solid black;
      padding:4px;
      display:flex;
      flex-direction:column;
    }
    textarea{
      flex:1;
      width:100%;
      resize:none;
    }
  </style>
</head>

<body onload="init()">

  <div id="popup">popup</div>

  <div id="banniere" onmouseover="popin(event);" onmouseout="popout(event);">
    <div id="version">Version <span></span></div>

    <div>
      <input type="button" value="actualiser" onclick="actualiser()" />
      <input type="checkbox" id="CbAuto" />
      <label for="CbAuto" id="CbAuto">automatiquement</label>
    </div>
  </div>

  <div id="contenu">
    <div id="cadre_saisie" class="cadre">
      <textarea id="taSaisie" placeholder="Code ici"></textarea>
    </div>

    <div id="previz" class="cadre">
      Visuel ici
    </div>
  </div>

  <script>
    let refTaSaisie, refVisuel, cbAuto;

    function init() {
      refTaSaisie = document.getElementById("taSaisie");
      refVisuel   = document.getElementById("previz");
      cbAuto      = document.getElementById("CbAuto");
      popup       = document.getElementById("popup");

      // mise à jour « live » si la case est cochée
      refTaSaisie.addEventListener("input", () => {
        if (cbAuto.checked) actualiser();
      });
    }

    function actualiser() {
      refVisuel.innerHTML = refTaSaisie.value;
    }

    //clientX , clientY
    // afficher un message qui dépend de l'élement survolé : "cliquer pour actuaiser, coché pour actiualiser autom..."

    function popin(event) {
      const target = event.target;
      const id = target.id || "(aucun id)";

      // Mettre à jour le texte
      if (id === "CbAuto") {
        popup.innerHTML = "Cochez pour activer l’actualisation auto.";
      } else if (target.tagName === "INPUT") {
        popup.innerHTML = "Cliquez pour actualiser.";
      } else {
        popup.innerHTML = `Survol : ${id}`;
      }
      // Mieux : pop.textcontent

      // Positionner le popup à côté de la souris
      popup.style.display = "block";
      popup.style.left = event.clientX + "px"; 
      popup.style.top = event.clientY + "px";
    }

    function popout(event) {
      popup.style.display = "none";
    }

    // keyup : on relache la touche, le caractère est apparu.
    // keydone : on veut réagir avant de modifier le contenu du champs. 
    // keypress : appuie long. 
  </script>
</body>
</html>
"