/****************** CARNETS DE BORD (carnet-generator.php) ******************/
/* Chargée par header2.php via $cssPage et versionnée par versionCss() : un envoi se voit tout de suite.
   Même famille que /newsletter (css/newsletter.css) : chapô, carte blanche du formulaire, écrin crème bordé d'or.
   Sous le titre : chapô, formulaire, le carnet sur une feuille blanche (jours en intertitres), carnets précédent
   et suivant (après le dernier, le carnet réservé aux abonnés), second formulaire dans l'écrin, puis la liste de
   tous les carnets.
   Ids et classes « cb » propres à la page. Mobile d'abord, puis ordinateur à partir de 500 px (styleDesktop2.css)
   et de 1280 px (styleWide2.css). */


/* Chapô */

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


/* Cartes du formulaire (en haut, et dans l'écrin sous le carnet) */

.cbCarte {
	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);
}
.cbCarte [hidden] {
	display: none; /* sinon le display des blocs ci-dessous l'emporte sur l'attribut hidden */
}
.cbCache { /* 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;
}
.cbChamp {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cbEmail {
	-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;
}
.cbEmail::placeholder {
	color: #93939c;
	opacity: 1;
}
.cbEmail:focus {
	outline: none;
	border-color: #c99a12;
	box-shadow: 0 0 0 4px rgba(238, 179, 21, .25);
}
.cbBouton {
	-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;
}
.cbBouton:focus-visible {
	outline: 3px solid #eeb315; /* styleMobile2.css retire le contour de tous les boutons */
	outline-offset: 2px;
}
.cbBouton:disabled {
	opacity: .6;
	cursor: wait;
}


/* Erreur sous le champ */

.cbEnErreur .cbEmail {
	border-color: #c2382a;
}
.cbEnErreur .cbEmail:focus {
	box-shadow: 0 0 0 4px rgba(194, 56, 42, .15);
}
.cbErreur {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: #a3271b;
}
.cbErreur 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 */

.cbRassure {
	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;
}
.cbRassure li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.cbRassure 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) */

.cbReponse {
	padding: 6px 4px 2px;
	text-align: center;
}
.cbReponse:focus {
	outline: none; /* reçoit le focus pour être annoncé, ce n'est pas une commande */
}
.cbReponseIco {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: #fbebc5;
}
.cbEcrin .cbReponseIco {
	background: #fff;
}
.cbReponseIco svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #8f6200;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cbReponse p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.45;
	color: #3a3a42;
}
.cbReponse .cbReponseTitre {
	margin-bottom: 6px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.5px;
	color: #1e1e25;
}
.cbReponse .cbReponsePetit {
	font-size: 14px;
	color: #71717b;
}
.cbReponse b {
	color: #1e1e25;
	overflow-wrap: anywhere;
}
.cbCorriger {
	-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;
}
.cbCorriger:focus-visible {
	outline: 2px solid #eeb315;
	outline-offset: 2px;
	border-radius: 4px;
}


/* Le carnet : une feuille blanche, bord à bord sur iPhone */

#cbCarnet {
	margin: 30px -20px 0;
	padding: 30px 20px 14px;
	background: #fff;
}
#cbDate {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8f6200;
}
#cbTitre {
	margin: 0;
	font-size: 27px;
	line-height: 1.17;
	font-weight: 700;
	letter-spacing: -.6px;
	color: #1e1e25;
	text-wrap: balance;
}
.cbSep { /* les « / » du titre en triptyque */
	font-weight: 300;
	color: #c99a12;
}
.cbInsec { /* « tee-shirt », « chewing-gum » : pas de coupure au trait d'union */
	white-space: nowrap;
}
#cbTexte {
	margin-top: 8px;
	font-size: 17px;
	line-height: 1.7;
	color: #2a2a31;
	overflow-wrap: break-word;
}
#cbTexte p {
	margin: 0 0 1em;
}
#cbTexte b { /* les heures : « 7h », « 13h43 » */
	font-weight: 700;
	color: #8f6200;
}
#cbTexte a {
	color: #8f6200;
	text-decoration: underline;
	text-decoration-color: rgba(201, 154, 18, .5);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.cbJour { /* « Samedi », « Dimanche »… : un intertitre par jour */
	display: flex;
	flex-wrap: wrap; /* intertitre trop long (« Lundi (en vacances chez mes parents en Lozère) ») : le filet passe dessous */
	align-items: center;
	gap: 8px 14px;
	margin: 30px 0 12px;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 200;
	font-style: italic;
	letter-spacing: -.5px;
	color: #1e1e25;
}
.cbJour::after {
	content: "";
	flex: 1 1 48px;
	height: 1px;
	background: linear-gradient(90deg, #dcb54d, rgba(220, 181, 77, 0));
}


/* Carnets précédent et suivant */

#cbNav {
	display: grid;
	gap: 10px;
	margin-top: 24px;
}
.cbNavVide {
	display: none;
}
.cbNavLien {
	display: grid;
	align-content: start; /* cases étirées à la même hauteur : le contenu reste en haut */
	gap: 4px;
	padding: 16px 18px 17px;
	background: #fff;
	border: 1.5px solid transparent;
	border-radius: 18px;
	color: #1e1e25;
	transition: border-color .2s;
}
.cbNavSens {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8f6200;
}
.cbNavSens svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #8f6200;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cbNavTitre {
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	text-wrap: balance;
}
.cbNavDate {
	font-size: 14.5px;
	color: #66666f;
}
.cbNavLien:focus-visible {
	outline: 2px solid #eeb315;
	outline-offset: 2px;
}
.cbNavReserve { /* après le dernier carnet publié : le carnet déjà envoyé aux abonnés */
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	margin: 0;
	background: linear-gradient(#fbebc5, #fbebc5) padding-box, linear-gradient(135deg, #d9a20f, #f6dc8c 48%, #c08a10) border-box;
	font: inherit; /* un bouton ne reprend pas la police ni l'interligne de la page */
	text-align: left;
	cursor: pointer;
}
.cbNavReserve .cbNavDate {
	color: #5c5338;
	line-height: 1.4;
}
.cbNavAction {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 700;
	color: #8f6200;
}
.cbNavAction svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #8f6200;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Second formulaire, dans l'écrin crème bordé d'or des pièces du jour */

.cbEcrin {
	margin-top: 34px;
	padding: 24px 20px 20px;
	border: 1.5px solid transparent;
	background: linear-gradient(#fbebc5, #fbebc5) padding-box, linear-gradient(135deg, #d9a20f, #f6dc8c 48%, #c08a10) border-box;
	box-shadow: none;
	text-align: center;
}
.cbBadge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: #fff;
	color: #8f6200;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.cbCarteTitre {
	margin: 10px 0 0;
	font-size: 25px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.6px;
	color: #1e1e25;
	text-wrap: balance;
}
.cbCarteTexte {
	margin: 8px 0 16px;
	font-size: 16px;
	line-height: 1.45;
	color: #4a4a53;
	text-wrap: balance;
}
.cbEcrin .cbEmail {
	border-color: #e6cf93;
}
.cbEcrin .cbRassure {
	color: #5c5338;
}


/* Tous les carnets */

#cbTousTitre {
	margin: 46px 0 16px;
	padding: 0;
	font-weight: 700;
	font-size: 32px;
	line-height: 34px;
	letter-spacing: -1px;
	color: #222;
	text-align: center;
}
#cbListe {
	margin: 0;
	padding: 6px;
	background: #fff;
	border-radius: 22px;
	list-style: none;
}
#cbListe li + li {
	border-top: 1px solid #efeff2;
}
#cbListe a {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 3px 0; /* le fond crème du carnet affiché ne touche pas les filets */
	padding: 9px 12px;
	border-radius: 14px;
	color: #1e1e25;
}
.cbListeDate {
	display: grid;
	justify-items: center;
	line-height: 1;
}
.cbListeJour {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.5px;
}
.cbListeMois {
	margin-top: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8f6200;
}
.cbListeAn {
	margin-top: 2px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #8a8a93;
}
.cbListeTitre {
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
}
#cbListe .cbCourant a { /* le carnet affiché */
	background: #fbebc5;
}
#cbListe a:focus-visible {
	outline: 2px solid #eeb315;
	outline-offset: -2px;
}
#cbTous {
	padding-bottom: 56px;
}


/* Ordinateur */

@media screen and (min-width: 500px) {
	#cbChapo {
		margin-top: -20px; /* le h1 a 53 px de marge dessous */
		max-width: 28em;
		font-size: 24px;
		line-height: 1.4;
	}
	#cbCarteHaut {
		max-width: 700px;
		margin: 34px auto 0;
		padding: 26px 30px 22px;
	}
	.cbChamp { /* 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;
	}
	.cbEcrin .cbChamp {
		border-color: #e6cf93;
	}
	.cbEmail {
		flex: 1;
		min-width: 0;
		height: auto;
		padding: 0 18px;
		border: 0;
		font-size: 18px;
	}
	.cbEmail:focus,
	.cbEnErreur .cbEmail:focus {
		box-shadow: none;
	}
	.cbChamp:focus-within {
		border-color: #c99a12;
		box-shadow: 0 0 0 4px rgba(238, 179, 21, .25);
	}
	.cbEnErreur .cbChamp {
		border-color: #c2382a;
	}
	.cbEnErreur .cbChamp:focus-within {
		border-color: #c2382a;
		box-shadow: 0 0 0 4px rgba(194, 56, 42, .15);
	}
	.cbBouton {
		height: auto;
		padding: 0 30px;
	}
	#cbCarnet {
		max-width: 700px;
		margin: 46px auto 0;
		padding: 52px 56px 32px;
		border-radius: 22px;
		box-shadow: 0 1px 2px rgba(30, 30, 37, .05), 0 10px 30px rgba(30, 30, 37, .07);
	}
	#cbDate {
		font-size: 13.5px;
	}
	#cbTitre {
		font-size: 36px;
		line-height: 1.12;
		letter-spacing: -1px;
	}
	#cbTexte {
		margin-top: 14px;
		font-size: 18px;
		line-height: 1.72;
	}
	.cbJour {
		margin: 40px 0 14px;
		font-size: 32px;
	}
	#cbNav {
		max-width: 700px;
		margin: 18px auto 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
	.cbNavVide {
		display: block;
	}
	.cbNavLien {
		padding: 20px 24px 22px;
	}
	.cbNavTitre {
		font-size: 18px;
	}
	.cbNavSuiv {
		text-align: right;
	}
	.cbNavSuiv .cbNavSens,
	.cbNavSuiv .cbNavAction {
		justify-content: flex-end;
	}
	.cbEcrin {
		max-width: 700px;
		margin: 56px auto 0;
		padding: 34px 40px 28px;
	}
	.cbCarteTitre {
		font-size: 32px;
		letter-spacing: -1px;
	}
	.cbCarteTexte {
		margin: 10px 0 22px;
		font-size: 18px;
	}
	#cbTousTitre {
		margin: 76px 0 30px;
		font-size: 42px;
		line-height: 44px;
		letter-spacing: -1.5px;
	}
	#cbListe {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 18px;
		padding: 14px 18px;
	}
	#cbListe li {
		border-top: 1px solid #efeff2;
	}
	#cbListe li:nth-child(-n+3) { /* première rangée : pas de filet au-dessus */
		border-top: 0;
	}
	#cbListe a {
		padding: 11px 12px;
	}
	#cbTous {
		padding-bottom: 96px;
	}
}
@media (hover: hover) and (pointer: fine) {
	.cbBouton:hover {
		background: #35353e;
	}
	.cbNavLien:hover {
		border-color: #e3c66f;
	}
	#cbListe a:hover .cbListeTitre {
		text-decoration: underline;
		text-decoration-color: rgba(201, 154, 18, .6);
		text-underline-offset: 3px;
	}
	#cbTexte a:hover {
		text-decoration-color: #8f6200;
	}
}
@media screen and (min-width: 1280px) {
	#cbChapo {
		margin-top: -34px; /* le h1 a 70 px de marge dessous */
	}
}