/* FlexBox Page Contacts */

* {
  box-sizing: border-box;
}

/* --- CONTENEUR D'INTRODUCTION --- */
.descontact {
  width: 100%;
  max-width: 1000px; /* Augmenté pour prendre plus de place sur PC */
  margin: 30px auto;
  padding: 0 15px;
  color: #171d49;
  line-height: 1.6;
}

.descontact p {
  font-size: 1.25rem; /* Un peu plus grand */
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
}

/* --- LISTE DES POINTS --- */
.information {
  display: block;
  width: 100%;    /* Prend toute la largeur de .descontact */
  max-width: 850px; /* Plus large pour étaler le texte */
  margin: 0 auto;
  padding: 20px;
  background: #fdfdfd; /* Très léger fond pour la structure */
  border-radius: 12px;
}

.info-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
  font-size: 1.1rem; /* Lecture confortable */
}

.info-line span {
  margin-right: 15px;
  font-weight: bold;
  color: #e67e22; /* Rappel de votre couleur orange de barre pro */
  font-size: 1.2rem;
}

/* --- FORMULAIRE DE CONNEXION --- */
.formTaille {
  width: 100%;
  max-width: 850px; /* Augmenté pour un formulaire plus large et aéré */
  margin: 0 auto 50px auto;
  padding: 10px;
}

.formulaire {
  padding: 30px; /* Plus d'espace interne */
  border: 2px #171d49 solid;
  border-radius: 18px;
}


.contour-tableau {
  margin: 20px auto;
  border: 5px #171d49 solid;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  background-color: white;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}



.col-10 {
  float: left;
  width: 30%;
  margin-top: 6px;

}

.col-90 {
  float: left;
  width: 70%;
  margin-top: 6px;

}

.formulaire input[type=text],input[type=password], select, textarea {
  width: 90%;
  padding: 10px;
  border: 1px  #171d49 solid;
  border-radius: 10px;
  resize: vertical;
}

.formulaire input[type=text]:focus, select:focus, textarea:focus{

  background-color: #97c6f2;
}

.formulaire label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Clear floats after the columns */
.rowform:after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
   MEDIA QUERIES (ADAPTATION MOBILE)
   ============================================================ */

  /* Pour les tablettes et écrans moyens */
  @media (max-width: 768px) {

    .descontact {
      margin: 15px auto;
      padding: 0 10px; /* On réduit les marges pour utiliser l'écran */
  }

  .descontact p {
      font-size: 1.1rem;
  }

  .information {
      padding: 10px;
      max-width: 100%;
  }

  .info-line {
      font-size: 1rem;
      margin-bottom: 15px;
  }

  .formulaire {
      padding: 15px; /* Plus compact pour le mobile */
      margin: 0;
  }


  /* On empile les colonnes : les labels au dessus des inputs */
  .col-10, .col-90 {
    width: 100%;
    margin-top: 5px;
  }

  .col-10 {
      margin-top: 15px;
  }

  .formulaire label {
    padding: 0;
  }


  .formTaille {
      padding: 5px;
  }

}