@media screen and (max-width: 390px) {

     body {
               background-color: rgb(4, 4, 4);
               color: #ffffff;
               margin: 0px;
               font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          }
     
     input {
                    background-color: rgb(4, 4, 4);
                    color: #ffffff;
                    margin: 0px;
                    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
               }
     
          hr {
               border: 0;
               height: 1px;
               width: 50%;
               background-color: #ffffff;
               margin-top: 10px;
               margin-bottom: 10px;
               margin-left: 100px;
          }
     
          label {
               color: rgb(179, 179, 17);
               font-size: 1.5em;
               margin-left: 10px;
               margin-right: 10px;
          }
     
     legend {
               color: rgb(179, 179, 17);
               font-size: 1.5em;
               margin-left: 10px;
               margin-right: 10px;
          }
     
          .underline {
               text-decoration: underline 1px solid whitesmoke;    }

/* * En-tête */

.formtitle {
     text-align: center;
     font-size: 2em;
     margin-top: 10px;
     margin-bottom: -20px;
     margin-left: 5px;
     color: rgb(209, 209, 18);
}

.formremi {
     text-align: center;
     font-size: 1.5em;
     color: #ffffff;
     margin-left: 5px;
}

/* * Formulaire de contact, infos perso */

.infosperso {
     display: flex;
     flex-wrap: wrap;
     margin-right: 190px;
     margin-left: 0px;
}

.boxname,
.boxsurname {
     flex: 1 1 50%;
}

.name {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-left: 10px;
     margin-top: 10px;
     padding: 10px;
     width: 300px;
}

.surname {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-left: 10px;
     margin-top: 10px;
     padding: 10px;
     width: 300px;
}

.boxage,
.boxphone {
     flex: 1 1 50%;
}

.age {
     border: #ffffff 1px solid;
     background-color: rgb(4, 4, 4);
     border-radius: 10px;
     margin-top: 10px;
     margin-left: 10px;
     padding: 10px;
     color: #ffffff;
     width: 300px;
}

.phone {
     border: #ffffff 1px solid;
     border-radius: 10px;
     padding: 10px;
     margin-left: 10px;
     margin-top: 10px;
     width: 300px;
}

.boxemail {
     flex: 1 1 100%;
}

.email {
     border: #ffffff 1px solid;
     border-radius: 10px;
     padding: 9px;
     margin-top: 10px;
     margin-left: 10px;
     width: 300px;
}

.boxsports {
     flex: 2 1 100%;
}

.sport {
     border: #ffffff 1px solid;
     border-radius: 10px;
     padding: 10px;
     margin-top: 10px;
     margin-left: 10px;
     width: 300px;
}

.sportlab {
     color: rgb(179, 179, 17);
     margin-left: 10px;
     display: block; /* Add this line to make all lines move */
     /* Or use: white-space: pre-line; if you want to preserve line breaks */
}
/* * Formulaire d'infos sur la musculation */

.infomuscu {
     display: flex;
     flex-wrap: wrap;
}

.lvlmusc {
     flex: 1 1 100%;
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}

.lvlmusc label {
     color: whitesmoke;
}

.boxgoal {
     flex: 1 1 100%;
}

.goal {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 350px;
     margin-bottom: 10px;
     margin-left: 10px;
     padding: 10px;
}

.sessions {
     flex: 1 1 100%;
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}

.sessions label {
     color: whitesmoke;
}

.boxseance {
     flex: 1 1 100%;
}
.tpsseance2 {
     display: block;
     margin-left: 10px;
}

.tpsseance {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 300px;
     margin-bottom: 10px;
     margin-left: 10px;
     padding: 10px;
}


.injury {
     flex: 1 1 100%;
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-bottom: 20px;
     margin-left: 10px;
}

.injury label {
     color: whitesmoke;
}

.injury_details {
     border: #ffffff 1px solid;
     border-radius: 10px;
     padding: 5px;
}

.boxmouvs {
     flex: 1 1 100%;
}

.mouvements {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 350px;
     height: 40px;
     padding: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}
.mouvdet {
     display: block;
     margin-left: 10px;
}


.aisance {
     flex: 1 1 100%;
     border: #ffffff 1px solid;
     border-radius: 10px;
     width: 350px;
     padding: 10px;
     margin-left: 10px;
     margin-bottom: 10px;
}
.aisance_details2 {
     display: block;
     margin-left: 10px;
}

.aisance label {
     color: whitesmoke;
}

.boxdetails {
     flex: 1 1 100%;
}

.aisance_details {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 350px;
     height: 40px;
     padding: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}

/* * Formulaire de nutrition/info */

.infodiet {
     display: flex;
     flex-wrap: wrap;
}

.boxallergies {
     flex: 1 1 100%;
}

.allergies {

     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 350px;
     padding: 10px;
     height: 40px;
     margin-bottom: 10px;
     margin-left: 10px;
}
.allergieslab {
     display: block;
     margin-left: 10px;
}

.boxactivity {
     flex: 1 1 100%;
}

.activity_level label {
     color: whitesmoke;
}

.activity_level {
     flex: 1 1 100%;
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}
.activity_details {
     border: #ffffff 1px solid;
     border-radius: 10px;
     padding: 5px;
}

.boxmensurations {
     flex: 1 1 100%;
}

.mensurations {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 300px;
     padding: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}
.mensulab {
     display: block;
     margin-left: 10px;
}

.mensurations label {
     color: whitesmoke;
}

.morale {
     color: rgb(179, 179, 17);
     font-size: 1.5em;
     display: block;
     margin-left: 10px;
}

/* * Section est-tu sur ? */

.infocommitment {
     display: flex;
     flex-wrap: wrap;
     margin-top: 20px;
}

.boxcommitment {
     flex: 1 1 100%;
}
.boxcommitment fieldset {
     margin-left: 10px;
}

.boxcommitment label {
     color: whitesmoke;
}
.sourcedet {
     border: #ffffff 1px solid;
     border-radius: 10px;
     padding: 5px;
}

/* * Informations sur le service */

.infoservice {
     display: flex;
     flex-wrap: wrap;
     margin-top: 20px;
}

.boxservice {
     flex: 1 1 100%;
}
.boxservice fieldset {
     margin-left: 10px;
}

.boxservice label {
     color: whitesmoke;
}

.boxentretien {
     flex: 1 1 100%;
     margin-top: 40px;
}

.entretien {
     border: #ffffff 1px solid;
     border-radius: 10px;
     margin-top: 10px;
     width: 300px;
     padding: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}
.entretienlab {
     display: block;
     margin-left: 10px;
}

.boxretours {
     flex: 1 1 100%;
}

.retours {
     background-color: rgb(4, 4, 4);
     border: #ffffff 1px solid;
     color: whitesmoke;
     font: 1em sans-serif;
     border-radius: 10px;
     margin-top: 10px;
     width: 350px;
     height: 40px;
     padding: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
}
.messlab {
     display: block;
     margin-left: 10px;
}

.submitbutton {
     font-size: 2em;
     background-color: rgb(4, 4, 4);
     color: rgb(179, 179, 17);
     border: #ffffff 1px solid;
     border-radius: 7px;
     margin-left: 10px;
     margin-right: 10px;
     margin-top: 20px;
}

}



@media screen and (max-width: 709px) and (min-width: 391px) {

     body {
          background-color: rgb(4, 4, 4);
          color: #ffffff;
          margin: 0px;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }

     input {
          background-color: rgb(4, 4, 4);
          color: #ffffff;
          margin: 0px;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }

     hr {
          border: 0;
          height: 1px;
          width: 50%;
          background-color: #ffffff;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 100px;
     }

     label {
          color: rgb(179, 179, 17);
          font-size: 1.5em;
          margin-left: 10px;
          margin-right: 10px;
     }

     legend {
          color: rgb(179, 179, 17);
          font-size: 1.5em;
          margin-left: 10px;
          margin-right: 10px;
     }

     .underline {
          text-decoration: underline 1px solid whitesmoke;
     }

     /* * En-tête */

     .formtitle {
          text-align: center;
          font-size: 2em;
          margin-top: 10px;
          margin-bottom: -20px;
          margin-left: 5px;
          color: rgb(209, 209, 18);
     }

     .formremi {
          text-align: center;
          font-size: 1.5em;
          color: #ffffff;
          margin-left: 5px;
     }

     /* * Formulaire de contact, infos perso */

     .infosperso {
          display: flex;
          flex-wrap: wrap;
          margin-right: 190px;
          margin-left: 0px;
     }

     .boxname,
     .boxsurname {
          flex: 1 1 50%;
     }

     .name {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-left: 10px;
          margin-top: 10px;
          padding: 10px;
          width: 300px;
     }

     .surname {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-left: 10px;
          margin-top: 10px;
          padding: 10px;
          width: 300px;
     }

     .boxage,
     .boxphone {
          flex: 1 1 50%;
     }

     .age {
          border: #ffffff 1px solid;
          background-color: rgb(4, 4, 4);
          border-radius: 10px;
          margin-top: 10px;
          margin-left: 10px;
          padding: 10px;
          color: #ffffff;
          width: 300px;
     }

     .phone {
          border: #ffffff 1px solid;
          border-radius: 10px;
          padding: 10px;
          margin-left: 10px;
          margin-top: 10px;
          width: 300px;
     }

     .boxemail {
          flex: 1 1 100%;
     }

     .email {
          border: #ffffff 1px solid;
          border-radius: 10px;
          padding: 9px;
          margin-top: 10px;
          margin-left: 10px;
          width: 300px;
     }

     .boxsports {
          flex: 2 1 100%;
     }

     .sport {
          border: #ffffff 1px solid;
          border-radius: 10px;
          padding: 10px;
          margin-top: 10px;
          margin-left: 10px;
          width: 300px;
     }

     .sportlab {
          color: rgb(179, 179, 17);
          margin-left: 10px;
          display: block;
          /* Add this line to make all lines move */
          /* Or use: white-space: pre-line; if you want to preserve line breaks */
     }

     /* * Formulaire d'infos sur la musculation */

     .infomuscu {
          display: flex;
          flex-wrap: wrap;
     }

     .lvlmusc {
          flex: 1 1 100%;
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .lvlmusc label {
          color: whitesmoke;
     }

     .boxgoal {
          flex: 1 1 100%;
     }

     .goal {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 350px;
          margin-bottom: 10px;
          margin-left: 10px;
          padding: 10px;
     }

     .sessions {
          flex: 1 1 100%;
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .sessions label {
          color: whitesmoke;
     }

     .boxseance {
          flex: 1 1 100%;
     }

     .tpsseance2 {
          display: block;
          margin-left: 10px;
     }

     .tpsseance {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 300px;
          margin-bottom: 10px;
          margin-left: 10px;
          padding: 10px;
     }


     .injury {
          flex: 1 1 100%;
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-bottom: 20px;
          margin-left: 10px;
     }

     .injury label {
          color: whitesmoke;
     }

     .injury_details {
          border: #ffffff 1px solid;
          border-radius: 10px;
          padding: 5px;
     }

     .boxmouvs {
          flex: 1 1 100%;
     }

     .mouvements {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 350px;
          height: 40px;
          padding: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .mouvdet {
          display: block;
          margin-left: 10px;
     }


     .aisance {
          flex: 1 1 100%;
          border: #ffffff 1px solid;
          border-radius: 10px;
          width: 350px;
          padding: 10px;
          margin-left: 10px;
          margin-bottom: 10px;
     }

     .aisance_details2 {
          display: block;
          margin-left: 10px;
     }

     .aisance label {
          color: whitesmoke;
     }

     .boxdetails {
          flex: 1 1 100%;
     }

     .aisance_details {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 350px;
          height: 40px;
          padding: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     /* * Formulaire de nutrition/info */

     .infodiet {
          display: flex;
          flex-wrap: wrap;
     }

     .boxallergies {
          flex: 1 1 100%;
     }

     .allergies {

          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 350px;
          padding: 10px;
          height: 40px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .allergieslab {
          display: block;
          margin-left: 10px;
     }

     .boxactivity {
          flex: 1 1 100%;
     }

     .activity_level label {
          color: whitesmoke;
     }

     .activity_level {
          flex: 1 1 100%;
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .activity_details {
          border: #ffffff 1px solid;
          border-radius: 10px;
          padding: 5px;
     }

     .boxmensurations {
          flex: 1 1 100%;
     }

     .mensurations {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 300px;
          padding: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .mensulab {
          display: block;
          margin-left: 10px;
     }

     .mensurations label {
          color: whitesmoke;
     }

     .morale {
          color: rgb(179, 179, 17);
          font-size: 1.5em;
          display: block;
          margin-left: 10px;
     }

     /* * Section est-tu sur ? */

     .infocommitment {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px;
     }

     .boxcommitment {
          flex: 1 1 100%;
     }

     .boxcommitment fieldset {
          margin-left: 10px;
     }

     .boxcommitment label {
          color: whitesmoke;
     }

     .sourcedet {
          border: #ffffff 1px solid;
          border-radius: 10px;
          padding: 5px;
     }

     /* * Informations sur le service */

     .infoservice {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px;
     }

     .boxservice {
          flex: 1 1 100%;
     }

     .boxservice fieldset {
          margin-left: 10px;
     }

     .boxservice label {
          color: whitesmoke;
     }

     .boxentretien {
          flex: 1 1 100%;
          margin-top: 40px;
     }

     .entretien {
          border: #ffffff 1px solid;
          border-radius: 10px;
          margin-top: 10px;
          width: 300px;
          padding: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
     }

     .entretienlab {
          display: block;
          margin-left: 10px;
     }

     .boxretours {
          flex: 1 1 100%;
     }

     .retours {
          background-color: rgb(4, 4, 4);
          border: #ffffff 1px solid;
          color: whitesmoke;
          font: 1em sans-serif;
          border-radius: 10px;
          margin-top: 10px;
          height: 40px;
          padding: 10px;
          margin-bottom: 10px;
          margin-left: auto;
          margin-right: auto;
     }

     .messlab {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: fit-content;
     }

     .submitbutton {
          font-size: 2em;
          background-color: rgb(4, 4, 4);
          color: rgb(179, 179, 17);
          border: #ffffff 1px solid;
          border-radius: 7px;
          margin-top: 20px;
          margin-left: auto;
          margin-right: auto;
          width: fit-content;
     }

}