/*
 * Styles par défaut, volontairement simples. Le thème les ajuste par les
 * propriétés personnalisées ci-dessous, ou les désactive (Réglages →
 * Newsletter → Affichage) pour les écrire lui-même.
 */
.nhf {
	--nhf-bg: #fff;
	--nhf-text: #1f2328;
	--nhf-accent: #1f2328;
	--nhf-accent-text: #fff;
	--nhf-border: #d0d7de;
	--nhf-radius: 6px;
	--nhf-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
	--nhf-z: 9990;
	box-sizing: border-box;
}

.nhf *,
.nhf *::before,
.nhf *::after {
	box-sizing: inherit;
}

/* Contenu. Les règles du formulaire ne visent que le balisage par défaut du
   plugin (.nhf-field) : un formulaire mis en forme par le thème n'est pas touché. */
.nhf-title {
	margin: 0 0 0.25em;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
}

.nhf-intro {
	margin: 0 0 0.75em;
}

.nhf-consent {
	margin: 0.75em 0 0;
	opacity: 0.8;
	font-size: 0.8125em;
	line-height: 1.4;
}

.nhf-field {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
}

.nhf-field label {
	display: flex;
	flex: 1 1 14em;
	flex-direction: column;
	gap: 0.25em;
}

.nhf-field .nhf-label {
	font-size: 0.875em;
}

.nhf-field input[type='email'] {
	width: 100%;
	min-height: 2.75em;
	padding: 0.5em 0.75em;
	border: 1px solid var(--nhf-border);
	border-radius: var(--nhf-radius);
	font: inherit;
}

.nhf-field button[type='submit'] {
	align-self: flex-end;
	min-height: 2.75em;
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: var(--nhf-radius);
	background: var(--nhf-accent);
	color: var(--nhf-accent-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nhf-form .hf-message {
	margin: 0.75em 0 0;
}

/* Bouton de fermeture */
.nhf-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.nhf-close:hover,
.nhf-close:focus-visible {
	background: rgb(0 0 0 / 0.06);
}

/* Tiroir */
.nhf-drawer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--nhf-z);
	padding: 1.5rem 1.25rem 1.25rem;
	background: var(--nhf-bg);
	color: var(--nhf-text);
	box-shadow: var(--nhf-shadow);
	/* Sur un petit écran, le contenu défile plutôt que de sortir de l'écran. */
	max-height: 85vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(110%);
	transition: transform 0.4s ease;
}

.nhf-drawer--open {
	transform: none;
}

@media (min-width: 640px) {
	.nhf-drawer {
		right: 1.5rem;
		bottom: 1.5rem;
		left: auto;
		width: 26rem;
		border-radius: var(--nhf-radius);
		transform: translateY(calc(100% + 2rem));
	}

	.nhf-drawer--open {
		transform: none;
	}
}

/* Modale */
.nhf-modal {
	width: min(32rem, calc(100% - 2rem));
	padding: 2rem 1.5rem 1.5rem;
	border: 0;
	border-radius: var(--nhf-radius);
	background: var(--nhf-bg);
	color: var(--nhf-text);
	box-shadow: var(--nhf-shadow);
}

.nhf-modal::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.nhf-modal[open] {
	animation: nhf-in 0.25s ease;
}

@keyframes nhf-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

/* Bouton flottant */
.nhf-floating {
	position: fixed;
	bottom: 1rem;
	z-index: calc(var(--nhf-z) - 1);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75rem;
	padding: 0.5em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--nhf-accent);
	color: var(--nhf-accent-text);
	box-shadow: var(--nhf-shadow);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nhf-floating--right {
	right: 1rem;
}

.nhf-floating--left {
	left: 1rem;
}

.nhf-floating[hidden],
.nhf-drawer[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.nhf-drawer,
	.nhf-modal[open] {
		transition: none;
		animation: none;
	}
}