/****************** NEWSLETTER (pages/newsletter.php) ******************/
/* Chargée par header2.php via $cssPage et versionnée par versionCss() : un envoi se voit tout de suite.
   Sous le titre : chapô, carte blanche du formulaire (remplacée par un message après l'envoi), puis le sommaire
   d'une édition en 4 cartes, le carnet de bord dans l'écrin crème bordé d'or des pièces du jour.
   Ids et classes « nl » propres à la page : le bandeau #homeNewsletterContainer des autres pages n'est pas touché.
   Mobile d'abord, puis ordinateur à partir de 500 px (styleDesktop2.css) et de 1280 px (styleWide2.css). */


/* Chapô */

#nlChapo {
	max-width: 30em;
	margin: 0 auto;
	font-size: 19px;
	line-height: 1.45;
	color: #3a3a42;
	text-align: center;
	text-wrap: balance;
}


/* Carte du formulaire */

#nlCarte {
	margin-top: 22px;
	padding: 20px;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 1px 2px rgba(30, 30, 37, .05), 0 10px 30px rgba(30, 30, 37, .07);
}
#nlCarte [hidden] {
	display: none; /* sinon le display des blocs ci-dessous l'emporte sur l'attribut hidden */
}
.nlCache { /* 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;
}
#nlChamp {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#nlEmail {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 22px;
	background: #fff;
	border: 1.5px solid #d3d3da;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px; /* 16 px au moins, sinon l'iPhone zoome quand on touche le champ */
	color: #222;
	transition: border-color .2s, box-shadow .2s;
}
#nlEmail::placeholder {
	color: #93939c;
	opacity: 1;
}
#nlEmail:focus {
	outline: none;
	border-color: #c99a12;
	box-shadow: 0 0 0 4px rgba(238, 179, 21, .25);
}
#nlBouton {
	-webkit-appearance: none;
	appearance: none;
	height: 54px;
	margin: 0;
	padding: 0 26px;
	background: #1e1e25;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}
#nlBouton:focus-visible {
	outline: 3px solid #eeb315; /* styleMobile2.css retire le contour de tous les boutons */
	outline-offset: 2px;
}
#nlBouton:disabled {
	opacity: .6;
	cursor: wait;
}


/* Erreur sous le champ */

.nlEnErreur #nlEmail {
	border-color: #c2382a;
}
.nlEnErreur #nlEmail:focus {
	box-shadow: 0 0 0 4px rgba(194, 56, 42, .15);
}
#nlErreur {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: #a3271b;
}
#nlErreur svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	fill: none;
	stroke: #c2382a;
	stroke-width: 2;
	stroke-linecap: round;
}


/* Gratuit, un e-mail par semaine, désinscription */

#nlRassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	color: #66666f;
}
#nlRassure li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
#nlRassure svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #8f6200;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}


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

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


/* Sommaire d'une édition */

#nlSommaireTitre {
	margin: 46px 0 18px;
	padding: 0;
	font-weight: 700;
	font-size: 32px;
	line-height: 34px;
	letter-spacing: -1px;
	color: #222;
	text-align: center;
}
#nlSommaire {
	display: grid;
	gap: 10px;
	padding-bottom: 56px;
}
.nlItem {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px;
	background: #fff;
	border: 1.5px solid transparent; /* même taille que l'écrin du carnet */
	border-radius: 18px;
}
.nlIco {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f6efdf;
}
.nlIco svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #8f6200;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.nlItem h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	color: #1e1e25;
}
.nlItem p {
	margin: 3px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: #5f5f69;
}
.nlCarnet {
	background: linear-gradient(#fbebc5, #fbebc5) padding-box, linear-gradient(135deg, #d9a20f, #f6dc8c 48%, #c08a10) border-box;
}
.nlCarnet .nlIco {
	background: #fff;
}
.nlBadge {
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #fff;
	color: #8f6200;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}


/* Ordinateur */

@media screen and (min-width: 500px) {
	#nlChapo {
		margin-top: -20px; /* le h1 a 53 px de marge dessous */
		max-width: 28em;
		font-size: 24px;
		line-height: 1.4;
	}
	#nlCarte {
		max-width: 640px;
		margin: 34px auto 0;
		padding: 26px 30px 22px;
	}
	#nlChamp { /* le bouton passe dans le champ */
		flex-direction: row;
		gap: 0;
		height: 62px;
		padding: 5px;
		background: #fff;
		border: 1.5px solid #d3d3da;
		border-radius: 999px;
		transition: border-color .2s, box-shadow .2s;
	}
	#nlEmail {
		flex: 1;
		min-width: 0;
		height: auto;
		padding: 0 18px;
		border: 0;
		font-size: 18px;
	}
	#nlEmail:focus,
	.nlEnErreur #nlEmail:focus {
		box-shadow: none;
	}
	#nlChamp:focus-within {
		border-color: #c99a12;
		box-shadow: 0 0 0 4px rgba(238, 179, 21, .25);
	}
	.nlEnErreur #nlChamp {
		border-color: #c2382a;
	}
	.nlEnErreur #nlChamp:focus-within {
		border-color: #c2382a;
		box-shadow: 0 0 0 4px rgba(194, 56, 42, .15);
	}
	#nlBouton {
		height: auto;
		padding: 0 30px;
	}
	#nlSommaireTitre {
		margin: 76px 0 30px;
		font-size: 42px;
		line-height: 44px;
		letter-spacing: -1.5px;
	}
	#nlSommaire {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
		padding-bottom: 96px;
	}
	.nlItem {
		grid-template-columns: minmax(0, 1fr);
		align-content: start; /* titres des 4 cartes à la même hauteur */
		padding: 22px 22px 24px;
	}
	.nlItem h3 {
		font-size: 19px;
	}
	.nlItem p {
		margin-top: 5px;
		font-size: 16px;
	}
	.nlBadge { /* à droite de l'icône, pour garder les titres alignés */
		position: absolute;
		top: 35px;
		right: 16px;
		margin: 0;
		padding: 3px 8px;
		font-size: 10.5px;
	}
}
@media (hover: hover) and (pointer: fine) {
	#nlBouton:hover {
		background: #35353e;
	}
}
@media screen and (min-width: 1280px) {
	#nlChapo {
		margin-top: -34px; /* le h1 a 70 px de marge dessous */
	}
	.nlBadge {
		top: 34px;
		right: 20px;
		padding: 3px 9px;
		font-size: 11.5px;
	}
}