body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-image: url("image de fond.png");
  background-repeat:no-repeat;
  background-size: 100%;
  }
 #ordinateur-mobil{
    display:none;
  }
/* debut du media queries*/
@media screen and (max-width:414px){
    
    body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-image:none;
  background-repeat:no-repeat;
  background-size: 100%;
  }

 #ordinateur{
  display:none;
 } 
 
#ordinateur-mobil{
  display:block;
  top:0%;
  left:0%;
  width:100%;
  height:850px;
  justify-items: center;
  text-align:center;
}
.baniere-mobil{
  display:block;
  position:fixed;
  top:0%;
  left:0%;
  width:100%;
  height:45px;
  background-color: blue;
  z-index:2;
}
.name-mobil{
  position:absolute;
  top:3%;
  left:2%;
  color:white;
  font-family:cursive;
  display: block;
  font-size:110%;
  font-weight:bold;

}
#ghost-mobil{
  width:35px;
  height: auto;
  position: absolute;
  top:2%;
  left:90%;
  border-radius:35px;

}
#user-mobil{
 margin-top:10%;
 width:80px;
 height: auto;
}
.info-personnelles-mobil{
  display:block;
  position: absolute;
  top:15%;
  left:0%;
  width:100%;
  height: 500px;
  padding-top:10%;
}
.infos-mobil{
  display: block;
  margin-bottom: 2%;
  
  width:100%;
}
label{
  font-size:110%;
  
}
.element-de-gauche-mobil{
  display: block;
  margin-bottom: 2%;
  text-align: left;
  padding-left:3%;
  margin-top:3%;
  padding-right: 2%;
  width:100%;

}

#element-input-mobil{
  display:block;
  width:93.5%;
  height: 35px;
  text-align: center;
  border:2px;
  border:2px solid blue;
  margin-bottom: 2%;
  font-size:110%;
}
.element-de-droite-mobil{
  display: block;
  margin-bottom: 2%;
  text-align: left;
  padding-left:3%;
  
  padding-right: 2%;
  width:100%;
  height: 300px;

}
#element-input-sel-mobil{
  display:block;
  display:block;
  width:94.5%;
  height: 35px;
  text-align: center;
  border:2px;
  border:2px solid blue;
  margin-bottom: 2%;
  font-size:110%;
}
#demander-mobil{
  display:block;
  margin-top:5%;
  border:1px solid blue;
  color:white;
  background-color:blue;
  text-align:center;
  width:93.5%;
  height: 35px;
  margin-bottom: 5%;
  font-weight:bold;
  font-size:110%;
}


}
/* fin du media queries*/

 form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .left-case{
  display:inline-block;
  vertical-align:top;
  width:35%;
  
  heigth:300px;
  margin-right:5%;

}
.right-case{
  display:inline-block;
  vertical-align:top;
  width:50%;
  
  heigth:300px;

}
#check{
  display:block;
  margin-top:5%;
  width:90%;
  color:white;
  background-color:red;
  text-align:justify;
  height: 35px;
  border:1px solid red;
  font-weight:bold;
}
  .file-container {
    width: 600px;
    height: 300px;
    background-color: gainsboro;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;

  }
  .soumettre{
    margin-left:84.2%;
    border:1px solid red;
    background-color:red;
    color:white;
    width:150px;
    height: 35px;
    font-weight: bold;
  }
  .title-h1{
    display:block;
    position:absolute;
    top:10%;
    left:40%;
    font-family:cursive;
    color:white;
    color:navy;
    font-style:italic;
  }

  /* Style pour les inputs de type file cachés mais fonctionnels */
  .file-input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
  }

  /* Style pour l'image une fois sélectionnée */
  .preview-img {
    width: 98%;
    height: 98%;
    object-fit: contain;
    display: none; /* caché par défaut */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Style pour le texte indicatif */
  .placeholder-text {
    color: navy3;
    text-align: center;
    z-index: 1;
  }



  
  .container {
    display: inline-block;
    vertical-align: top;
    gap: 20px;
   
    width:25%;
    height: 250px;
    padding: 3%;
  }
  .infos{
    display:inline-block;
    vertical-align:top;
    width:60%;
    
    height: 450px;
  margin-left:20%;
  margin-top:2%;
  }
  .element-de-gauche{
    width:45%;
    height:430px;
    display:inline-block;
    vertical-align:top;
  
    margin:2%;
  }
  #element-input{
   border:2px solid navy;
   width:100%; 
   margin:2%;
   height:35px;
   border-radius:3px;
  }
  #element-input-sel{
   border:2px solid navy;
   width:103%; 
   margin:2%;
   height:40px;
   border-radius:3px;
   text-align:left;
  }
  label{
    color:navy;
    font-weight:bold;
  }
  .element-de-droite{
      width:45%;
    height:430px;
    display:inline-block;
    vertical-align:top;
    
    margin:2%;
  }
  .file-button {
    width: 250px;
    height: 100px;
    border: 0.5px dashed #aaa;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin:5%;
    color:red;
  }
  /* Le vrai bouton (masqué) */
  .hidden-input {
    display: none;
  }
  /* Le contenu remplacé après chargement */
  .preview {
    width: 100%;
    height: 100%;
    object-fit:container;
  }
  /* Style quand un fichier est chargé */
  .loaded {
    border-color: #4CAF50;
  }
  #demander{
    diplay:block;
    width:100%;
    margin-left:4%;
    height:35px;
    border:1px solid navy;
    color:white;
    text-align: center;
    background-color:navy;
  
    font-weight:bold;
  margin-top:10%;
  }

  .info-personnelles{
    position:absolute;
    top:20%;
    left:10%;
    width:75%;
    height: 450px;
    border:1px solid white;
    background-color:white;
    opacity:0.9;
    padding-top:3%;


  }
  .info-personnelles-images{
    position:absolute;
    top:20%;
    left:10%;
    width:75%;
    height: 450px;
    border:1px solid white;
    background-color:white;
    opacity:0.9;
    padding-top:3%;
    padding-left:5%;


  }
  .la-facture{
    position:absolute;
    top:18%;
    left:25%;
    width:45%;
    height:300px;
    border:1px solid white;
    background-color:white;
    display:bloPck;
    padding: 5%;
  }

  #user{
    position:absolute;
    top:12%;
    left:12%;
    width:100px;
    height:auto;
    z-index:2;
    border-radius:100px;
    opacity:0.9;
  }
  .image-container{
    width:300px;
    height:200px;
    border:1px dashed #ccc;
    padding:2px;
    cursor:ponter;
  }
  #file-preview{
    width:100%;
    height: 100%;
    object-fit:cover;
  }
  #file-preview{
    display:none;
  }
  
  .baniere{
  display:block;
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height: 45px;
  background-color:blue;
  text-align: center;
  color:white;
}
.name{
  position:absolute;
  top:20%;
  left:2%;
  color:white;
  font-weight:bold;
  font-style:italic;
}
#ghost{
  diplay:block;
  position:absolute;
  top:10%;
  left:96%;
  width:30px;
  height: auto;
  border-radius: 40px;

}