/****************** EN-TÊTE DU SITE (tete.php, inclus par header2.php) ******************/
/* Même famille que /carnet-de-bord et /newsletter : champ en pilule blanche, or foncé #8f6200, écrin crème bordé d'or.
   iPhone : logo + menu, champ de recherche sous le logo (sauf sur l'accueil), menu en panneau clair.
   Ordinateur : logo à la même place qu'avant (la page ne bouge pas), recherche en haut à droite, six rubriques dessous.
   Partout : quand on remonte dans une page, l'en-tête revient en barre blanche fine en haut de l'écran (js/tete.js).
   Mobile d'abord, puis ordinateur dès 500 px et 1280 px. Classes « tt ». */

.tete {
	position: relative;
	font-family: 'Source Sans Pro', sans-serif;
	color: #1e1e25;
}
.ttCache {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.ttCadre {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 10px;
}
.ttLogo {
	display: block;
	width: 120px;
	line-height: 0;
}
.ttLogo img {
	display: block;
	width: 100%;
	height: auto;
}
.ttAccueil .ttLogo {
	width: 176px;
}
.ttBoutons {
	display: flex;
	gap: 4px;
	margin-right: -7px; /* le dessin du menu (30 px dans un bouton de 44) s'aligne sur la marge de 20 px */
}
.ttRond {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: #1e1e25;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ttRond svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.ttOuvrirMenu svg { /* trois traits de 30 × 22 px, comme l'icône d'aujourd'hui */
	width: 30px;
	height: 22px;
}
.ttRond:focus-visible {
	outline: 3px solid #eeb315; /* styleMobile2.css retire le contour de tous les boutons */
	outline-offset: 1px;
}


/* Champ de recherche : la pilule du formulaire de /carnet-de-bord */

.ttRecherche {
	position: relative;
	margin: 0;
}
.ttRecherche input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 54px 0 20px;
	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: #1e1e25;
	transition: border-color .2s, box-shadow .2s;
}
.ttRecherche input::-webkit-search-decoration,
.ttRecherche input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.ttRecherche input::placeholder {
	color: #8a8a93;
	opacity: 1;
}
.ttRecherche input:focus {
	outline: none;
	border-color: #c99a12;
	box-shadow: 0 0 0 4px rgba(238, 179, 21, .25);
}
.ttLoupe {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 50%;
	right: 5px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: -21px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: #1e1e25;
	cursor: pointer;
}
.ttLoupe svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.ttLoupe:focus-visible {
	outline: 3px solid #eeb315;
	outline-offset: -3px;
}


/* Menu de l'iPhone : un panneau clair plein écran, comme la page /carnet-de-bord */

.ttMenu {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 16px 20px calc(30px + env(safe-area-inset-bottom, 0px));
	background: #f2f2f2;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility 0s linear .22s;
}
.ttMenuTete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -7px 18px 0; /* la croix à la place du menu */
}
.ttMenuLogo {
	display: block;
	width: 120px;
	height: auto;
}
.ttAccueil .ttMenuLogo {
	width: 176px;
}
.ttMenu > * {
	transform: translateY(-6px);
	transition: transform .22s ease;
}
html.ttMenuOuvert,
html.ttMenuOuvert body {
	overflow: hidden;
}
html.ttMenuOuvert .ttMenu {
	opacity: 1;
	visibility: visible;
	transition: opacity .22s ease;
}
html.ttMenuOuvert .ttMenu > * {
	transform: none;
}
.ttListe {
	display: block; /* styleMobile2.css met tout « nav ul » en flex */
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.ttListe a {
	position: relative;
	display: block;
	padding: 15px 52px 16px 20px;
	background: #fff;
	font-size: 21px;
	line-height: 26px;
	font-weight: 600; /* semi-gras, comme les rubriques de l'ordinateur */
	letter-spacing: -.3px;
	color: #1e1e25;
	-webkit-tap-highlight-color: transparent;
}
.ttListe a::after { /* chevron or */
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6200' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ttListe li + li a {
	border-top: 1px solid #efeff2;
}
.ttListe li:first-child a {
	border-radius: 22px 22px 0 0;
}
.ttListe li:nth-child(5) a {
	border-radius: 0 0 22px 22px;
}
.ttListe a[aria-current] {
	background: #fbebc5; /* comme le carnet affiché dans « Tous les carnets » */
}
.ttListe a:focus-visible {
	outline: 3px solid #eeb315;
	outline-offset: -3px;
}
.ttLettre { /* l'écrin crème bordé d'or */
	margin-top: 16px;
	padding: 24px 20px 20px;
	border: 1.5px solid transparent;
	border-radius: 22px;
	background: linear-gradient(#fbebc5, #fbebc5) padding-box, linear-gradient(135deg, #d9a20f, #f6dc8c 48%, #c08a10) border-box;
	text-align: center;
}
.ttLettreTitre {
	display: block;
	font-size: 25px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.6px;
	color: #1e1e25;
}
.ttLettreTexte {
	display: block;
	margin: 8px auto 16px;
	max-width: 19em;
	font-size: 16px;
	line-height: 1.45;
	color: #4a4a53;
	text-wrap: balance;
}
.ttAbo {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 52px;
	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;
}
.ttAbo:focus-visible {
	outline: 3px solid #eeb315;
	outline-offset: 2px;
}
.ttLettreIci .ttAbo { /* sur /carnet-de-bord et /newsletter, le bouton passe en or, comme la rubrique affichée */
	background: #8f6200;
}
.ttAboCourt {
	display: none;
}
.ttReseaux {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
}
.ttReseauxTitre {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #66666f;
}
.ttReseauxIcones {
	display: flex;
	gap: 12px;
}
.ttReseau {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.ttReseau img {
	width: 20px;
	height: 20px;
}
.ttReseau:focus-visible {
	outline: 3px solid #eeb315;
	outline-offset: 2px;
}


/* Ordinateur (dès 500 px) : même place pour le logo qu'aujourd'hui, la page ne bouge pas.
   Ligne du haut : la recherche, à droite ; ligne du bas : les rubriques, Newsletter en sixième (choix du 10 oct). */

@media screen and (min-width: 500px) {
	.tete {
		height: 124px;
	}
	.tete.ttAccueil { /* accueil : toute la page sous l'en-tête descend de 7 px, le menu à mi-chemin entre la recherche et la grande photo */
		height: 131px;
	}
	.ttCadre {
		display: block;
		height: 124px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.ttLogo {
		position: absolute;
		z-index: 100; /* le logo déborde sous l'en-tête : au-dessus de la page, comme #logo aujourd'hui */
		top: 30px;
		left: 25px;
		width: 232px;
	}
	.ttAccueil .ttLogo {
		top: 37px;
		width: 270px;
	}
	.ttBoutons,
	.ttRecherchePage,
	.ttMenuTete,
	.ttReseaux,
	.ttLettreTitre,
	.ttLettreTexte,
	.ttAboLong {
		display: none;
	}
	.ttMenu,
	html.ttMenuOuvert .ttMenu {
		position: static;
		overflow: visible;
		padding: 0;
		background: none;
		opacity: 1;
		visibility: visible;
		transition: none;
	}
	.ttMenu > * {
		transform: none;
		transition: none;
	}
	.ttRechercheMenu {
		position: absolute;
		top: 22px;
		right: 27px;
		width: 380px;
	}
	.ttRechercheMenu input {
		height: 42px;
		padding: 0 46px 0 18px;
		font-size: 16px;
	}
	.ttRechercheMenu .ttLoupe {
		width: 36px;
		height: 36px;
		margin-top: -18px;
		right: 4px;
	}
	.ttRechercheMenu .ttLoupe svg {
		width: 19px;
		height: 19px;
	}
	.ttListe {
		position: absolute;
		top: 82px;
		right: 27px;
		display: flex;
		gap: 34px;
		margin: 0;
	}
	.ttListe a,
	.ttListe li + li a,
	.ttListe li:first-child a,
	.ttListe li:nth-child(5) a,
	.ttListe a[aria-current] {
		padding: 6px 0 7px;
		background: none;
		border: 0;
		border-radius: 0;
		font-size: 13.5px;
		line-height: 18px;
		font-weight: 600; /* comme l'ancien menu (le 700 faisait un trait 32 % plus épais) */
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #1e1e25;
	}
	.ttListe a::after { /* filet or sous la rubrique survolée ou affichée */
		top: auto;
		right: .12em; /* l'espacement des lettres déborde à droite */
		bottom: 0;
		left: 0;
		width: auto;
		height: 2px;
		margin: 0;
		background: #c99a12;
		border-radius: 2px;
		transform: scaleX(0);
		transition: transform .2s ease;
	}
	.ttListe li a[aria-current] { /* « li » : passe devant li:first-child a (Articles) et li:nth-child(5) a (Vidéos) */
		color: #8f6200;
	}
	.ttListe a[aria-current]::after {
		transform: none;
	}
	.ttLettre { /* Newsletter : la sixième rubrique, même style que les autres (c'est un bouton, pas un lien) */
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}
	.ttAbo,
	.ttLettreIci .ttAbo {
		position: relative;
		width: auto;
		height: auto;
		padding: 6px 0 7px;
		background: none;
		border-radius: 0;
		font-size: 13.5px;
		line-height: 18px;
		font-weight: 600;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #1e1e25;
	}
	.ttAbo::after { /* même filet or que les rubriques */
		content: "";
		position: absolute;
		right: .12em;
		bottom: 0;
		left: 0;
		height: 2px;
		background: #c99a12;
		border-radius: 2px;
		transform: scaleX(0);
		transition: transform .2s ease;
	}
	.ttLettreIci .ttAbo {
		color: #8f6200;
	}
	.ttLettreIci .ttAbo::after {
		transform: none;
	}
	.ttAboCourt {
		display: inline;
	}
}
@media (hover: hover) and (pointer: fine) {
	.ttListe a:hover::after,
	.ttAbo:hover::after {
		transform: none;
	}
}
@media (hover: hover) and (pointer: fine) and (max-width: 499px) { /* le bouton noir « Je m'inscris » du menu de l'iPhone */
	.ttAbo:hover {
		background: #35353e;
	}
	.ttLettreIci .ttAbo:hover {
		background: #7a5400;
	}
}
@media screen and (min-width: 1280px) {
	.ttLogo {
		left: 55px;
	}
	.ttAccueil .ttLogo {
		left: 49px;
		width: 406px;
	}
	.ttRechercheMenu {
		right: 55px;
		width: 400px;
	}
	.ttListe {
		right: 55px;
		gap: 38px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ttMenu,
	.ttMenu > *,
	.ttListe a::after {
		transition: none !important;
	}
}


/* iPhone : le champ de recherche sous le logo (pas sur l'accueil) ; la loupe ne sert que dans la barre. */

.ttOuvrirRecherche {
	display: none;
}
.ttRecherchePage {
	flex: 1 0 100%;
	margin-top: 16px;
}
.ttAccueil .ttRecherchePage {
	display: none;
}


/* La barre qui revient : quand on remonte dans la page, l'en-tête revient en barre blanche fine en haut de l'écran,
   et repart dès qu'on redescend (classes ttDefile et ttMontre posées sur <html> par js/tete.js). Sur iPhone, la barre
   n'a que le logo, la loupe (qui ouvre le menu sur la recherche) et le menu. */

html.ttDefile .ttRecherchePage {
	display: none;
}
html.ttDefile .ttOuvrirRecherche {
	display: grid;
}
html.ttDefile .ttCadre {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990; /* au-dessus de la page ; le menu ouvert depuis la barre en hérite */
	flex-wrap: nowrap;
	padding-top: 6px;
	padding-bottom: 6px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(30, 30, 37, .06), 0 8px 24px rgba(30, 30, 37, .08);
	transform: translateY(-115%);
	transition: transform .25s ease;
}
html.ttDefile.ttMontre .ttCadre {
	transform: none;
}
html.ttSansAnim .ttCadre {
	transition: none;
}
html.ttDefile .ttLogo {
	width: 88px;
}

@media screen and (min-width: 500px) {
	html.ttDefile .ttCadre {
		display: flex;
		align-items: center;
		gap: 30px;
		height: 66px;
		margin: 0 auto;
		padding-top: 0;
		padding-bottom: 0;
		background: none;
		box-shadow: none;
	}
	html.ttDefile .ttCadre::before { /* fond blanc d'un bord à l'autre de l'écran */
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -100vmax;
		right: -100vmax;
		z-index: -1;
		background: #fff;
		box-shadow: 0 1px 0 rgba(30, 30, 37, .06), 0 8px 24px rgba(30, 30, 37, .08);
	}
	html.ttDefile .ttLogo,
	html.ttDefile .ttAccueil .ttLogo {
		position: static;
		flex: none;
		width: 92px;
	}
	html.ttDefile .ttMenu {
		display: flex;
		flex: 1;
		align-items: center;
		gap: 20px;
	}
	html.ttDefile .ttNav,
	html.ttDefile .ttListe {
		display: contents;
	}
	html.ttDefile .ttListe li {
		order: 1;
	}
	html.ttDefile .ttRechercheMenu {
		position: relative;
		top: auto;
		right: auto;
		order: 2;
		width: 220px;
		margin-left: auto; /* la recherche à droite, les rubriques (Newsletter comprise) partent du logo */
	}
	html.ttDefile .ttRechercheMenu input {
		padding: 0 40px 0 16px;
		font-size: 15px;
	}
}
@media screen and (min-width: 1280px) {
	html.ttDefile .ttMenu {
		gap: 28px;
	}
	html.ttDefile .ttRechercheMenu {
		width: 260px;
	}
}