/*
======================================================================
Much Ado
Forms
======================================================================
*/

form{
	width:100%;
}

fieldset{
	margin:0;
	padding:0;
	border:0;
}

label{
	display:block;
	margin-bottom:var(--space-6);
	font-weight:600;
}

/*
| Traitement unique pour tous les champs de saisie du site : cartes
| claires sur fond sombre, pour un contraste maximal. Avant ce passage,
| trois styles différents coexistaient (gris foncé ici, noir avec bordure
| dorée ailleurs, blanc avec un bleu importé nulle part appartenant au
| plugin) — un seul, maintenant, décliné via --color-surface-light.
*/
input,
textarea,
select{
	padding:.9rem 1rem;
	border:1px solid var(--color-surface-light-border);
	border-radius:var(--radius-small);
	background:var(--color-surface-light);
	color:var(--color-surface-light-text);
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

/*
| Boutons d'envoi natifs (formulaire de commentaires, recherche...) :
| même traitement que .button--primary, pour qu'un <input type="submit">
| sans classe se fonde avec le reste du site plutôt que de retomber sur
| une couleur qui lui est propre.
*/
input[type=submit]{
	border:2px solid var(--color-primary);
	border-radius:var(--radius-round);
	background:var(--color-primary);
	color:var(--color-primary-text);
	padding:.9rem 1.8rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	cursor:pointer;
	transition:var(--transition);
}

input[type=submit]:hover{
	background:color-mix(in srgb,var(--color-primary) 85%,black);
	border-color:color-mix(in srgb,var(--color-primary) 85%,black);
}

textarea{
	min-height:180px;
	resize:vertical;
}

/*
| Le doré (--color-primary) est trop clair pour servir d'indicateur de
| focus sur un champ déjà clair : le rouge de la marque tranche
| nettement mieux sur l'ivoire.
*/
input:focus,
textarea:focus,
select:focus{
	outline:none;
	border-color:var(--color-redlogo);
	box-shadow:0 0 0 4px rgba(166,23,26,.15);
}

input::placeholder,
textarea::placeholder{
	color:var(--color-surface-light-placeholder);
	opacity:1;
}

/*
| Cases à cocher et boutons radio.
|
| La règle générale ci-dessus habille TOUS les <input> en carte claire :
| .9rem de rembourrage, une bordure, un fond. Sur un champ de saisie c'est
| ce qu'on veut ; sur une case à cocher, ce rembourrage repousse le contrôle
| natif vers le bas de sa boîte, et la case se retrouve décalée d'une ligne
| sous son libellé.
|
| Il faut donc défaire ici ce que la règle générale a posé : ne pas se
| contenter de « width:auto », mais remettre à zéro le rembourrage, la
| bordure et le fond.
*/
input[type="checkbox"],
input[type="radio"]{
	width:auto;
	padding:0;
	border:0;
	border-radius:0;
	background:none;
	box-shadow:none;
	margin-right:.5rem;
	accent-color:var(--color-redlogo);
}

/*
| Le halo de focus des champs de saisie est calibré pour une carte claire
| de plusieurs centimètres ; sur une case de 16 px il la noie complètement.
*/
input[type="checkbox"]:focus,
input[type="radio"]:focus{
	border:0;
	box-shadow:none;
	outline:2px solid var(--color-redlogo);
	outline-offset:2px;
}

.form-row{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:var(--space-24);
}

.form-group{
	margin-bottom:var(--space-24);
}

.form-actions{
	display:flex;
	align-items:center;
	gap:var(--space-16);
	margin-top:var(--space-32);
}

input:disabled,
textarea:disabled,
select:disabled{
	cursor:not-allowed;
	opacity:.6;
	background:var(--color-surface-light);
}

.required{
	color:var(--color-redlogo);
}

/* =====================================================
   Footer Newsletter
===================================================== */

.footer-newsletter__form{
	display:flex;
	gap:1rem;
	width:100%;
	max-width:520px;
}

.newsletter__legal,
.newsletter__error{
	width:100%;
	max-width:520px;
	margin:0;
	color:var(--color-textdarker);
	font-size:var(--fs-sm);
	text-align:right;
}

.newsletter__error{
	color:var(--color-danger);
}

/*
| Confirmation d'inscription : elle prend la place de la mention légale,
| d'où la reprise de sa classe. Seule la couleur change, pour que le
| visiteur voie que quelque chose s'est passé.
*/
.newsletter__success{
	color:var(--color-primary);
}

.footer-newsletter__form input{
	flex:1;
	height:56px;
	padding:0 1.5rem;
	border:1px solid var(--color-surface-light-border);
	background:var(--color-surface-light);
	color:var(--color-surface-light-text);
}

.footer-newsletter__form input::placeholder{
	color:var(--color-surface-light-placeholder);
}

.footer-newsletter__form button{
	padding:0 2rem;
	border:2px solid var(--color-primary);
	background:var(--color-primary);
	border-radius:var(--radius-small);
	color:var(--color-primary-text);
	font-family:var(--font-heading);
	font-weight:600;
	cursor:pointer;
	transition:var(--transition);
}

.footer-newsletter__form button:hover{
	background:color-mix(in srgb,var(--color-primary) 85%,black);
	border-color:color-mix(in srgb,var(--color-primary) 85%,black);
}

/* =====================================================
   Blog Sidebar
===================================================== */

.blog-sidebar .wp-block-search__input{
	flex:1;
	height:50px;
	padding:0 1rem;
	border:1px solid var(--color-surface-light-border);
	border-radius:var(--radius-small);
	background:var(--color-surface-light);
	color:var(--color-surface-light-text);
}

.blog-sidebar .wp-block-search__button{
	padding:0 1.8rem;
	border:0;
	border-radius:var(--radius-small);
	background:var(--color-redlogo);
	color:var(--color-crown);
	cursor:pointer;
	transition:var(--transition);
}

.blog-sidebar .wp-block-search__button:hover{
	opacity:.9;
}
/* =====================================================
   Tablet
===================================================== */

@media (max-width:1024px){

	.form-row{
		gap:var(--space-16);
	}

	.footer-newsletter__form{
		max-width:100%;
	}

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

	input,
	textarea,
	select{
		width:100%;
		box-sizing:border-box;
		min-height:54px;
		padding:0 1.2rem;
	}

	textarea{
		min-height:180px;
		padding:1rem 1.2rem;
	}

	.form-row{
		grid-template-columns:1fr;
	}

	.form-actions{
		flex-direction:column;
		align-items:stretch;
		gap:1rem;
	}

	.form-actions>*{
		width:100%;
	}

	.wp-block-search,
	.footer-newsletter__form{
		flex-direction:column;
		max-width:none;
		gap:1rem;
	}

	.newsletter__legal,
	.newsletter__error{
		max-width:none;
		text-align:left;
	}

	.footer-newsletter__form input,
	.footer-newsletter__form button{
		width:100%;
		height:56px;
	}

	.blog-sidebar .wp-block-search__button{
		margin:0;
		padding:1rem;
	}

	.wp-block-search__label{
		display:none;
	}

}