/**
 * @file
 * Form component's rules.
 *
 * Defines rules for form components : input, label, etc.
 *
 */

/**
 * Forms bases
 */
input,
textarea {
	max-width: 100%;
}

/**
 * User Log Block
 */

 .user-login-form,
 .user-pass {
   padding: 3rem 1rem;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: -o-flex;
   display: flex;
   -webkit-flex-direction: column;
   -moz-flex-direction: column;
   -ms-flex-direction: column;
   -o-flex-direction: column;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 .user-login-form .form-item,
 .user-pass .form-item {
   width: 100%;
   display: flex;
   flex-direction: column;
 }
 .user-login-form .form-item .form-text,
 .user-pass .form-item .form-text {
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
 }
 .user-login-form .form-submit,
 .user-pass .form-submit {
   background: #000;
   color: #FFF;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 10px;
   cursor: pointer;
 }
 .user-login-form .form-submit:hover,
 .user-pass .form-submit:hover {
   background: #c4c4c4;
   color: #000;
 }
 @media screen and (min-width: 700px) {
   .user-login-form .form-item,
   .user-pass .form-item {
	 width: 50%;
	 max-width: 745px;
   }
 }
 @media screen and (min-width: 1200px) {
   .user-login-form .form-item,
   .user-pass .form-item {
	 width: 33.333%;
	 max-width: 438px;
   }
 }


.webform-submission-contact-form input[type="text"],
.webform-submission-contact-form input[type="email"],
.webform-submission-contact-form textarea {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.webform-submission-contact-form input[type="text"]:focus,
.webform-submission-contact-form input[type="email"]:focus,
.webform-submission-contact-form textarea:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
}

#edit-colonne-gauche,
#edit-colonne-droite {
 width: 100%;
 margin-bottom: 1rem;
}

.webform-submission-contact-form .form-submit {
  color: var(--color-neutral--6);
  background: var(--secondary);
  font-size: var(--content-size);
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
  width: fit-content;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.5rem;
  min-height: 2.5rem;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  transition: filter 0.3s ease;
  display: flex;
  gap: 0.3rem;
  border: none;
}

.webform-submission-contact-form .form-submit:hover {
  filter: brightness(0.75);
  cursor: pointer;
}


@media (min-width: 768px) {
 .webform-submission-contact-form {
   flex-wrap: wrap;
   gap: 20px;
 }

 #edit-colonne-gauche,
 #edit-colonne-droite {
   flex: 1;
   min-width: 0;
   margin-bottom: 0;
 }

 .webform-submission-contact-form .form-actions {
   flex-basis: 100%;
   text-align: left;
 }

 .webform-submission-contact-form .form-actions input[type="submit"] {
   width: auto;
   min-width: 120px;
 }
}

@media (min-width: 1024px) {
 .webform-submission-contact-form {
   gap: 30px;
 }
}

@media (min-width: 768px) {
 .webform-submission-contact-form .form-actions {
   flex-basis: 100%;
 }
}