/*
 * Pont Gutenberg / Contact Form 7.
 *
 * site.css est le CSS de la maquette et ne se modifie jamais à la main :
 * tout ajustement lié à WordPress vit ici.
 *
 * Le nettoyage du rendu (inc/blocks.php) restitue le markup exact de la
 * maquette : ce fichier ne contient donc que l'habillage du formulaire CF7
 * (dont le markup diffère du <form> statique de la maquette) et deux
 * commodités d'administration.
 */

/* ---------------------------------------------------------------- CF7 --- */

/* Wrapper .wpcf7 transparent : le <form> reste l'enfant du panneau. */
.wpcf7 {
	display: contents;
}

/* Les spans d'enveloppe CF7 disparaissent du flux : les champs redeviennent
   les enfants directs des labels, comme dans la maquette. */
.contact-form .wpcf7-form-control-wrap,
.contact-form .wpcf7-acceptance,
.contact-form .wpcf7-acceptance .wpcf7-list-item {
	display: contents;
}

/* Consentement : reproduction de .form-consent sur le markup acceptance. */
.contact-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #3e4756;
	font-family: Aptos Light, Aptos, sans-serif;
	font-weight: 300;
	line-height: 1.45;
}

.contact-form .wpcf7-acceptance input {
	width: 18px;
	height: 18px;
	accent-color: var(--teal);
	flex: 0 0 18px;
	margin-top: 1px;
}

.contact-form .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: var(--type-small) !important;
}

/* Bouton d'envoi : conteneur neutre (le spinner CF7 se place à côté). */
.contact-form .form-submit {
	display: flex;
	align-items: center;
}

/* Messages de validation et de confirmation, dans la charte. */
.contact-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-family: Aptos Light, Aptos, sans-serif;
	font-size: 13px;
	font-weight: 300;
}

.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--teal);
	color: var(--navy);
	font-size: 14px;
	line-height: 1.5;
}

.contact-form.invalid .wpcf7-response-output,
.contact-form.unaccepted .wpcf7-response-output,
.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output {
	border-color: #b3261e;
}

/* ------------------------------------------------------- Administration --- */

/* Barre d'admin WordPress : le menu sticky se cale dessous. */
.admin-bar .site-menu-bar {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-menu-bar {
		top: 46px;
	}
}

/* ---------------------------------------------------------------- 404 --- */

.pe-404 {
	width: min(calc(100% - 72px), var(--content-width));
	margin: 0 auto;
	padding: 90px 0 120px;
}