Impossible to enter values via an input - html

Question

I would like to enter a value into the input, but nothing happens. However, after 2 clicks the image is selected automatically.
I don't understand why I can't enter values in the input? I think it's an HTML/CSS problem?
Here is a screenshot
Thank you very much for your help and your time.
ol.wrapper_digipass {
margin: 0 0 0 15px;
padding: 0;
}
.title_digipass {
font-weight: 700;
padding-bottom: 5px;
}
.information_digipass {
padding-top: 5px;
}
.instruction_digipass {
list-style: circle;
padding-bottom: 10px;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.logoDigipass {
position: relative;
height: 110px;
width: 130px;
}
.logoDigipass img {
position: absolute;
top: -31px;
left: -12px;
}
.logoDigipass1 {
position: relative;
padding: 0;
}
.logoDigipass1 img {
height: 125px;
margin-left: -25px;
}
.wrapper_digipass {
position: relative;
}
.section_instruction {
margin-top: -60px;
padding-bottom: 35px;
}
.width30 {
width: 30%;
}
.width42 {
width: 42%;
}
.width434 {
width: 434px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="section_digipass">
<ol class="wrapper_digipass">
<li class="title_digipass">Utilisez votre digipass.</li>
<p class="information_digipass">Après avoir réactivé votre digipass et introduit votre code PIN, celui-ci demande quelle application vous souhaitez utiliser.</p>
<ul class="instruction_digipass">
<li>Appuyez sur le chiffre "2"</li>
<li>Introduisez d'abord les 6 <u>chiffres</u> soulignés extraits du code SVM du titre <u>000347075</u> , qui sont <strong>007075</strong></li>
<li>Introduisez le nombre de titres de l'opération, donc 10, suivant le format : <strong>000010</strong></li>
<li>Le digipass vous fournit un code de 6 chiffres à introduire dans la zone de confirmation</li>
</ul>
<li class="title_digipass">Introduisez le code de 6 chiffres affichés par le digipass.</li>
<div class="wrapper_digipass">
<div class="logoDigipass1">
<img src="https://via.placeholder.com/150">
</div>
<div class="section_instruction">
<div class="row">
<div class="col-6 col-form-label text-end width42">
<label for="code">Code de confirmation</label>
</div>
<div class="col-4 width434">
<input type="text " id="code" name="code" class="form-control d-inline width30 "> et cliquez ensuite sur <strong>"Confirmer ".</strong>
</div>
</div>
</div>
</div>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 1

As others suggested in the comments above, logoDigipass1 is overlapping section_instruction.
To solve this problem add this to your CSS:
.section_instruction {
position: relative; /* Add this */
z-index: 1; /* Add this */
}
See the snippet below.
ol.wrapper_digipass {
margin: 0 0 0 15px;
padding: 0;
}
.title_digipass {
font-weight: 700;
padding-bottom: 5px;
}
.information_digipass {
padding-top: 5px;
}
.instruction_digipass {
list-style: circle;
padding-bottom: 10px;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.logoDigipass {
position: relative;
height: 110px;
width: 130px;
}
.logoDigipass img {
position: absolute;
top: -31px;
left: -12px;
}
.logoDigipass1 {
position: relative;
padding: 0;
}
.logoDigipass1 img {
height: 125px;
margin-left: -25px;
}
.wrapper_digipass {
position: relative;
}
.section_instruction {
margin-top: -60px;
padding-bottom: 35px;
position: relative; /* Add this */
z-index: 1; /* Add this */
}
.width30 {
width: 30%;
}
.width42 {
width: 42%;
}
.width434 {
width: 434px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="section_digipass">
<ol class="wrapper_digipass">
<li class="title_digipass">Utilisez votre digipass.</li>
<p class="information_digipass">Après avoir réactivé votre digipass et introduit votre code PIN, celui-ci demande quelle application vous souhaitez utiliser.</p>
<ul class="instruction_digipass">
<li>Appuyez sur le chiffre "2"</li>
<li>Introduisez d'abord les 6 <u>chiffres</u> soulignés extraits du code SVM du titre <u>000347075</u> , qui sont <strong>007075</strong></li>
<li>Introduisez le nombre de titres de l'opération, donc 10, suivant le format : <strong>000010</strong></li>
<li>Le digipass vous fournit un code de 6 chiffres à introduire dans la zone de confirmation</li>
</ul>
<li class="title_digipass">Introduisez le code de 6 chiffres affichés par le digipass.</li>
<div class="wrapper_digipass">
<div class="logoDigipass1">
<img src="https://via.placeholder.com/150">
</div>
<div class="section_instruction">
<div class="row">
<div class="col-6 col-form-label text-end width42">
<label for="code">Code de confirmation</label>
</div>
<div class="col-4 width434">
<input type="text " id="code" name="code" class="form-control d-inline width30 "> et cliquez ensuite sur <strong>"Confirmer ".</strong>
</div>
</div>
</div>
</div>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>