/* ============================================================ */
/* ======================== 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;
}