/****************** BANDEAU NOIR DE LA NEWSLETTER (bandeauNewsletter.php) ******************/
/* Bas de l'accueil, des articles et des conseils. Chargée par bandeauNewsletter.php, versionnée par versionCss().
   À gauche ce que contient la newsletter, à droite le formulaire (dessous sur iPhone), remplacé après l'envoi
   par « Encore une étape ! » ou « Vous êtes déjà inscrit(e) ». Ids et classes « bnl » propres au bandeau.
   Mobile d'abord, deux colonnes à partir de 500 px (la page fait alors au moins 1024 px de large). */

#bnl {
	background: #1e1e25;
	color: #fff;
	padding: 34px 20px 38px;
}
#bnl [hidden] {
	display: none; /* sinon le display des blocs ci-dessous l'emporte sur l'attribut hidden */
}
.bnlCache { /* libellé lu par les lecteurs d'écran seulement */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* Colonne de gauche : ce qu'on reçoit */

.bnlSurtitre {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #eeb315;
}
.bnlTitre {
	font-size: 30px;
	line-height: 32px;
	letter-spacing: -1px;
	font-weight: 700;
}
.bnlTitre .italicLight {
	display: block;
}
.bnlPoints {
	display: grid;
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.bnlPoints li {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
	color: #c9c9d1;
}
.bnlPoints b {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
}
.bnlIco {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #2c2c35;
}
.bnlIco svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: #eeb315;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bnlBadge { /* sous le titre sur iPhone, à sa droite sur ordinateur */
	display: table;
	margin: 3px 0 2px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eeb315;
	color: #1e1e25;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	vertical-align: 2px;
	white-space: nowrap;
}


/* Colonne de droite : le formulaire */

.bnlCol {
	margin-top: 24px;
}
.bnlFormTitre {
	display: none; /* ordinateur seulement */
}
.bnlChamp {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#bnlEmail {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 22px;
	background: #2a2a32;
	border: 1.5px solid #4a4a55;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px; /* 16 px au moins, sinon l'iPhone zoome quand on touche le champ */
	color: #fff;
	transition: border-color .2s, box-shadow .2s;
}
#bnlEmail::placeholder {
	color: #9c9ca6;
	opacity: 1;
}
#bnlEmail:focus {
	outline: none;
	border-color: #eeb315;
	box-shadow: 0 0 0 4px rgba(238, 179, 21, .25);
}
.bnlEnErreur #bnlEmail {
	border-color: #ff7a6b;
}
#bnlBouton {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 26px;
	background: #eeb315;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #1e1e25;
	cursor: pointer;
	transition: background-color .2s;
}
#bnlBouton:focus-visible {
	outline: 3px solid #fff; /* styleMobile2.css retire le contour de tous les boutons */
	outline-offset: 2px;
}
#bnlBouton:disabled {
	opacity: .6;
	cursor: wait;
}
#bnlErreur {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: #ffb4aa;
}
#bnlErreur svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	fill: none;
	stroke: #ff8a7c;
	stroke-width: 2;
	stroke-linecap: round;
}
.bnlRassure {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	color: #9c9ca6;
}
.bnlRassure li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}
.bnlRassure svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #eeb315;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Messages après l'envoi (à la place du formulaire) */

.bnlReponse:focus {
	outline: none; /* reçoit le focus pour être annoncé, ce n'est pas une commande */
}
.bnlReponseIco {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 0 10px;
	border-radius: 50%;
	background: #eeb315;
}
.bnlReponseIco svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #1e1e25;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bnlReponse p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.45;
	color: #c9c9d1;
}
.bnlReponse .bnlReponseTitre {
	margin-bottom: 6px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.5px;
	color: #fff;
}
.bnlReponse .bnlReponsePetit {
	font-size: 14px;
	color: #9c9ca6;
}
.bnlReponse b {
	color: #fff;
	overflow-wrap: anywhere;
}
#bnlCorriger {
	-webkit-appearance: none;
	appearance: none;
	margin: 2px 0 0;
	padding: 4px 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #eeb315;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
#bnlCorriger:focus-visible {
	outline: 2px solid #eeb315;
	outline-offset: 2px;
	border-radius: 4px;
}


/* Ordinateur */

@media screen and (min-width: 500px) {
	#bnl {
		padding: 56px 27px 60px;
	}
	.bnlGrille {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 70px;
		align-items: center;
		max-width: 970px;
		margin: 0 auto;
	}
	.bnlTitre {
		font-size: 44px;
		line-height: 46px;
		letter-spacing: -2px;
	}
	.bnlPoints {
		margin-top: 22px;
	}
	.bnlBadge {
		display: inline-block;
		margin: 0 0 0 6px;
	}
	.bnlCol {
		margin-top: 0;
		padding: 30px;
		border-radius: 22px;
		background: #26262e;
	}
	.bnlFormTitre {
		display: block;
		margin: 0 0 14px;
		font-size: 20px;
		font-weight: 700;
	}
	#bnlEmail {
		height: 58px;
		font-size: 18px;
	}
	#bnlBouton {
		height: 56px;
	}
}
@media (hover: hover) and (pointer: fine) {
	#bnlBouton:hover {
		background: #f5c63a;
	}
}
@media screen and (min-width: 1280px) {
	.bnlGrille {
		max-width: 1100px;
		gap: 100px;
	}
}