/**
 * Encart « Club Vallemont » — bandeau d'inscription en tête du footer.
 *
 * Fichier séparé (et non fusionné dans main-2.css) pour deux raisons : garder
 * une préoccupation isolée, et surtout éviter d'invalider le cache Varnish de
 * main-2.css à chaque retouche de l'encart (le cache indexe par chemin).
 *
 * S'appuie sur les tokens du thème (colors_and_type.css). Fond sombre du footer.
 */

.vm-club {
	max-width: 720px;
	margin: 0 auto 72px;
	padding: 0 22px 56px;
	text-align: center;
	border-bottom: 1px solid var(--vm-line-dark);
	/* Décalage lors d'un saut d'ancre (#club) : dégage la hauteur de la nav
	   collante (176px desktop) pour que le titre ne passe pas dessous. */
	scroll-margin-top: 200px;
}
@media (max-width: 1400px) {
	/* Nav fixe de 80px en mobile/tablette. */
	.vm-club { scroll-margin-top: 100px; }
}

.vm-club__eyebrow {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--vm-platinum);
	margin-bottom: 18px;
}

.vm-club__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp( 26px, 4vw, 40px );
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--vm-bone);
	margin: 0 0 18px;
}

.vm-club__text {
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--vm-platinum);
	max-width: 560px;
	margin: 0 auto 32px;
}

/* Ligne email + bouton. En flex, elle repasse en colonne sous 560px. */
.vm-club__row {
	display: flex;
	gap: 12px;
	max-width: 520px;
	margin: 0 auto;
}

.vm-club__input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 1px solid var(--vm-line-strong-dark);
	border-radius: 0;
	color: var(--vm-bone);
	font-family: var(--font-serif);
	font-size: 16px;
	padding: 14px 16px;
	transition: border-color 200ms var(--ease-mech);
}
.vm-club__input::placeholder { color: var(--vm-steel); }
.vm-club__input:focus {
	outline: none;
	border-color: var(--vm-bone);
}

.vm-club__submit {
	flex: 0 0 auto;
	background: var(--vm-bone);
	color: var(--vm-black);
	border: 1px solid var(--vm-bone);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 14px 26px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 200ms var(--ease-mech), color 200ms var(--ease-mech);
}
.vm-club__submit:hover {
	background: transparent;
	color: var(--vm-bone);
}
.vm-club__submit:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Message d'erreur sous la ligne. */
.vm-club__error {
	font-family: var(--font-serif);
	font-size: 15px;
	color: #E8A0A0; /* rouge doux lisible sur fond sombre */
	margin: 14px auto 0;
	max-width: 520px;
}

/* Mention de consentement RGPD. */
.vm-club__consent {
	font-family: var(--font-serif);
	font-size: 13px;
	line-height: 1.5;
	color: var(--vm-steel);
	max-width: 520px;
	margin: 16px auto 0;
}
.vm-club__consent a { color: var(--vm-platinum); text-decoration: underline; }

/* Écran de confirmation (remplace le formulaire après inscription). */
.vm-club__success {
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.5;
	color: var(--vm-bone);
	max-width: 520px;
	margin: 0 auto;
}
.vm-club__success strong { color: var(--vm-bone); font-weight: 600; }

@media (max-width: 560px) {
	.vm-club { margin-bottom: 56px; padding-bottom: 44px; }
	.vm-club__row { flex-direction: column; }
	.vm-club__submit { padding: 14px 20px; }
}

/* Lien-ancre vers l'encart Club (posé sur la page contact, note de clôture). */
.vm-club-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	/* Section « note » de la page contact : fond sombre → texte clair. */
	color: var(--vm-platinum);
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	transition: color 200ms var(--ease-mech), gap 200ms var(--ease-mech);
}
.vm-club-link:hover {
	color: var(--vm-bone);
	gap: 14px;
}