/* ============================================================ */
/* ======================== FORMULAIRES ======================= */
/* ============================================================ */

/* --------------------- BRICKS FORM STYLES ------------------- */

/* Champs classiques : input, select */
form[class*="brxe-form"] input[type="text"],
form[class*="brxe-form"] input[type="email"],
form[class*="brxe-form"] input[type="tel"],
form[class*="brxe-form"] input[type="url"],
form[class*="brxe-form"] input[type="password"],
form[class*="brxe-form"] input[type="number"],
form[class*="brxe-form"] input[type="date"],
form[class*="brxe-form"] input[type="time"],
form[class*="brxe-form"] select {
  width: 100%;
  padding-inline: var(--space-xs);
  font-size: var(--text-s);
  border-radius: var(--radius-full);
  border: 1px solid var(--bricks-border-color);
  background-color: var(--base-l-4);
  color: var(--text-body);
  transition: var(--bricks-transition);
  outline: none;
  box-shadow: none;
}

/* Textarea uniquement */
form[class*="brxe-form"] textarea {
  width: 100%;
  padding-inline: var(--space-xs);
  font-size: var(--text-s);
  border-radius: var(--radius-m);
  border: 1px solid var(--bricks-border-color);
  background-color: var(--base-l-4);
  color: var(--text-body);
  transition: var(--bricks-transition);
  outline: none;
  box-shadow: none;
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

/* Placeholder */
form[class*="brxe-form"] input::placeholder,
form[class*="brxe-form"] textarea::placeholder {
  color: var(--text-placeholder);
}

/* Focus */
form[class*="brxe-form"] input:focus,
form[class*="brxe-form"] textarea:focus,
form[class*="brxe-form"] select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-20);
}

/* Boutons */
form[class*="brxe-form"] input[type="submit"],
form[class*="brxe-form"] button[type="submit"],
form[class*="brxe-form"] button {
  cursor: pointer;
  font-size: var(--text-s);
  border-radius: var(--radius-m);
  padding: var(--space-xs) var(--space-s);
  background-color: var(--primary);
  color: white;
  border: none;
  transition: var(--bricks-transition);
}
form[class*="brxe-form"] input[type="submit"]:hover,
form[class*="brxe-form"] button[type="submit"]:hover,
form[class*="brxe-form"] button:hover {
  background-color: var(--primary-d-1);
}

/* Checkbox & radio */
form[class*="brxe-form"] input[type="checkbox"],
form[class*="brxe-form"] input[type="radio"] {
  accent-color: var(--primary);
  width: 1.2em;
  height: 1.2em;
}

/* Labels */
form[class*="brxe-form"] label {
  font-size: var(--text-s);
  color: var(--text-body);
  margin-bottom: 0.4em;
  display: inline-block;
}

/* Messages */
form[class*="brxe-form"] .bricks-form-message.error {
  color: var(--error);
  background-color: var(--error-10);
  padding: var(--space-2xs);
  border-radius: var(--radius-s);
}
form[class*="brxe-form"] .bricks-form-message.success {
  color: var(--success);
  background-color: var(--success-10);
  padding: var(--space-2xs);
  border-radius: var(--radius-s);
}

/* ------------------- GRILLE DE FORMULAIRE ------------------- */

/*
.bricks-form .bricks-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-s);
}
*/

/* Champ sur 2 colonnes */
.bricks-form .form-col-span-2 {
  grid-column: span 2;
}

/* Champ sur 1 colonne même en grand écran */
.bricks-form .form-col-span-1 {
  grid-column: span 1;
}