/*
 * Touraine Hôtels : styles de blocs.
 * Chargé sur le site et dans l'éditeur. Valeurs reprises de l'ancien site Divi.
 */

/* ---------- Sections et rangées ---------- */

/* Section par défaut : 4 % de marge verticale, 54 px sur grand écran, 50 px sur mobile. */
.wp-block-group.is-style-th-section {
	padding: 4% 0;
}

/* Rangées : 2 % de marge verticale, 27 px sur grand écran, 30 px sur mobile. */
.wp-block-group.is-style-th-rangee,
.wp-block-group.is-style-th-rangee-large,
.wp-block-group.is-style-th-rangee-video {
	padding: 2% 0;
}

/* Rangée centrée : 80 % de la largeur, 1080 px au plus. */
.wp-block-group.is-style-th-rangee {
	width: 80%;
	max-width: 1080px;
	margin-inline: auto;
}

/* Rangée vidéo : 65 % de large et hauteur fixe, la vidéo peut dépasser comme sur l'ancien site. */
.wp-block-group.is-style-th-rangee-video {
	width: 65%;
	max-width: 1080px;
	height: 490px;
	margin-inline: auto;
}

@media (min-width: 1350px) {
	.wp-block-group.is-style-th-section {
		padding: 54px 0;
	}

	.wp-block-group.is-style-th-rangee,
	.wp-block-group.is-style-th-rangee-large,
	.wp-block-group.is-style-th-rangee-video {
		padding: 27px 0;
	}
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-section {
		padding: 50px 0;
	}

	.wp-block-group.is-style-th-rangee,
	.wp-block-group.is-style-th-rangee-large,
	.wp-block-group.is-style-th-rangee-video {
		padding: 30px 0;
	}
}

/*
 * Options de rangée, à combiner avec un style de rangée dans
 * « Avancé > Classes CSS additionnelles ».
 */

/* th-marge-haute : 80 px au-dessus, supprimés sur téléphone. */
.wp-block-group.th-marge-haute {
	margin-top: 80px;
}

/* th-fond-grille-droite et th-fond-grille-bas-gauche : semis de points décoratif. */
.wp-block-group.th-fond-grille-droite {
	background: url(../img/grille-points.png) right center no-repeat;
}

.wp-block-group.th-fond-grille-bas-gauche {
	background: url(../img/grille-points-large.png) left bottom no-repeat;
}

/* th-marge-basse-mobile : 30 px sous le bloc sur tablette et téléphone. */
@media (max-width: 980px) {
	.wp-block-group.th-marge-basse-mobile {
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
	.wp-block-group.th-marge-haute {
		margin-top: 0;
	}

	/* th-retrait-mobile : texte décalé de 20 px sur téléphone, sans marge haute. */
	.wp-block-group.th-retrait-mobile {
		padding: 0 0 30px 20px;
	}

	/* th-retrait-mobile-5 : décalage de 5 % sur téléphone. */
	.wp-block-group.th-retrait-mobile-5 {
		padding-left: 5%;
	}

	/* th-pleine-largeur-mobile : la rangée prend toute la largeur sur téléphone. */
	.wp-block-group.th-pleine-largeur-mobile {
		width: 100%;
	}

	/* th-droite-mobile : texte aligné à droite sur téléphone. */
	.th-droite-mobile {
		text-align: right;
	}
}

/* ---------- Bandeau sombre sous le menu ---------- */

.wp-block-group.is-style-th-fond-menu {
	padding-top: 63px;
	background-color: #032b35;
}

/* Sur tablette et mobile, le menu replié est moins haut : le bandeau aussi. */
@media (max-width: 980px) {
	.wp-block-group.is-style-th-fond-menu {
		padding-top: 39px;
	}

	/* Un espace placé dans le bandeau suit la hauteur des rangées sur tablette (2 × 30 px). */
	.wp-block-group.is-style-th-fond-menu > .wp-block-spacer {
		height: 60px !important;
	}
}

/* Sur mobile le bandeau disparaît : il ne reste que la réserve de hauteur sous le bouton de menu. */
@media (max-width: 767px) {
	.wp-block-group.is-style-th-fond-menu {
		background-color: transparent;
	}

	.wp-block-group.is-style-th-fond-menu > * {
		display: none;
	}
}

/* ---------- Introduction de page ---------- */

.wp-block-group.is-style-th-intro {
	position: relative;
	isolation: isolate;
	padding: 190px 5%;
	background: url(../img/fond-rectangle.png) right bottom no-repeat;
}

.wp-block-group.is-style-th-intro-2 {
	position: relative;
	isolation: isolate;
	padding: 190px 5%;
	background: url(../img/fond-rectangle-2.png) right bottom no-repeat;
}

/* Voile blanc dégradé posé sur l'image de fond. */
.wp-block-group.is-style-th-intro::before,
.wp-block-group.is-style-th-intro-2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.27) 100%);
}

.wp-block-group.is-style-th-intro-2::before {
	background: linear-gradient(189deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

/* ---------- Titres de section ---------- */

.wp-block-heading.is-style-th-titre-roboto,
.wp-block-heading.is-style-th-titre-serif {
	font-size: 44px;
	line-height: 1.5em;
}

.wp-block-heading.is-style-th-titre-roboto {
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
}

/* Même titre avec un interligne plus serré. */
.wp-block-heading.is-style-th-titre-roboto-serre {
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2em;
}

@media (max-width: 767px) {
	.wp-block-heading.is-style-th-titre-roboto-serre {
		font-size: 34px;
	}
}

.wp-block-heading.is-style-th-titre-serif {
	font-family: "Noto Serif", Georgia, "Times New Roman", serif;
	font-weight: 400;
}

@media (max-width: 767px) {
	.wp-block-heading.is-style-th-titre-roboto,
	.wp-block-heading.is-style-th-titre-serif {
		font-size: 34px;
	}
}

/* ---------- Texte courant Noto Sans ---------- */

.wp-block-group.is-style-th-prose-noto {
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	line-height: 2em;
}

.wp-block-group.is-style-th-prose-noto ul,
.wp-block-group.is-style-th-prose-noto ol {
	padding: 0 0 1em 1em;
	line-height: 26px;
}

.wp-block-group.is-style-th-prose-noto ol {
	padding-left: 0;
	list-style-position: inside;
}

/* ---------- Bouton à contour orange ---------- */

.wp-block-button.is-style-th-contour .wp-block-button__link {
	padding: 0.3em 30px;
	border: 2px solid #e09900;
	border-radius: 16px;
	background-color: transparent;
	color: #e09900;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7em;
	transition: color 0.3s, background-color 0.3s;
}

.wp-block-button.is-style-th-contour .wp-block-button__link:hover,
.wp-block-button.is-style-th-contour .wp-block-button__link:focus-visible {
	background-color: #e09900;
	color: #fff;
}

/* ---------- Appel sombre à motif ---------- */

.wp-block-group.is-style-th-appel {
	padding: 147px 0;
	background: #031317 url(../img/motif-sombre.png) center repeat;
	background-blend-mode: color-dodge;
	color: #fff;
	text-align: center;
}

.wp-block-group.is-style-th-appel > * {
	width: min(560px, 100% - 120px);
	margin-inline: auto;
}

.wp-block-group.is-style-th-appel h2 {
	color: #fff;
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 60px;
	font-weight: 700;
}

.wp-block-group.is-style-th-appel p {
	padding-bottom: 20px;
}

.wp-block-group.is-style-th-appel .wp-block-buttons {
	justify-content: center;
	margin-top: 30px;
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-appel {
		padding: 150px 0;
	}

	.wp-block-group.is-style-th-appel > * {
		width: min(560px, 80% - 120px);
	}
}

@media (max-width: 767px) {
	.wp-block-group.is-style-th-appel > * {
		width: 72%;
	}

	.wp-block-group.is-style-th-appel h2 {
		font-size: 30px;
	}
}

/* ---------- Barre fixe sur mobile ---------- */

.wp-block-group.is-style-th-barre-mobile {
	display: none;
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-barre-mobile {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;
		display: block;
		padding: 10px 40px;
		background-color: #e09900;
		text-align: center;
	}

	.wp-block-group.is-style-th-barre-mobile a {
		display: inline-block;
		padding: 0.3em 2em 0.3em 0.7em;
		color: #fff;
		font-family: "Avenir Black", Helvetica, Arial, sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.7em;
	}

	.wp-block-group.is-style-th-barre-mobile a::after {
		content: "\2192";
		margin-left: 0.3em;
	}
}

/* Dans l'éditeur, la barre reste visible et à sa place pour pouvoir la modifier. */
.editor-styles-wrapper .wp-block-group.is-style-th-barre-mobile {
	position: static;
	display: block;
	padding: 10px 40px;
	background-color: #e09900;
	text-align: center;
}

/* ---------- Espace entre deux modules ---------- */

/* 2,75 % de la largeur de la rangée, 30 px sur mobile : l'écart que Divi mettait entre deux modules. */
.wp-block-spacer.is-style-th-espace-module {
	height: 0 !important;
	padding-top: 2.75%;
}

@media (max-width: 980px) {
	.wp-block-spacer.is-style-th-espace-module {
		padding-top: 30px;
	}
}

/* ---------- Colonnes ---------- */

.wp-block-columns.is-style-th-colonnes {
	gap: 5.5%;
	margin-bottom: 0;
}

/* Écart entre les blocs d'une colonne : celui des modules Divi (5,82 % à deux colonnes, 9,27 % à trois). */
.wp-block-columns.is-style-th-colonnes > .wp-block-column > * + * {
	margin-top: 5.82%;
}

.wp-block-columns.is-style-th-colonnes:has(> .wp-block-column:nth-child(3)) > .wp-block-column > * + * {
	margin-top: 9.27%;
}

@media (max-width: 980px) {
	.wp-block-columns.is-style-th-colonnes {
		flex-wrap: wrap !important;
		gap: 0;
	}

	.wp-block-columns.is-style-th-colonnes > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.is-style-th-colonnes > .wp-block-column:empty {
		display: none;
	}

	.wp-block-columns.is-style-th-colonnes > .wp-block-column:not(:last-child) {
		margin-bottom: 30px;
	}

	.wp-block-columns.is-style-th-colonnes > .wp-block-column > * + *,
	.wp-block-columns.is-style-th-colonnes:has(> .wp-block-column:nth-child(3)) > .wp-block-column > * + * {
		margin-top: 30px;
	}
}

/* ---------- Images et vidéos ---------- */

.page-content .wp-block-image,
.page-content .wp-block-video {
	margin: 0;
	line-height: 0;
}

.page-content .wp-block-image img {
	display: block;
}

.page-content .wp-block-video video {
	display: block;
	width: 100%;
}

/* ---------- Bannière de logos ---------- */

.wp-block-group.is-style-th-banniere-logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	max-width: 2560px;
	margin-inline: auto;
	padding-bottom: 27px;
}

.wp-block-group.is-style-th-banniere-logos > .wp-block-image {
	display: flex;
	flex: 0 0 15.6%;
	justify-content: center;
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-banniere-logos {
		flex-wrap: wrap;
	}

	.wp-block-group.is-style-th-banniere-logos > .wp-block-image {
		flex-basis: 100%;
		margin-bottom: 30px;
	}

	/* Ordre d'affichage sur mobile, repris de l'ancien site. */
	.wp-block-group.is-style-th-banniere-logos > .wp-block-image:nth-child(1) { order: 2; }
	.wp-block-group.is-style-th-banniere-logos > .wp-block-image:nth-child(2) { order: 3; }
	.wp-block-group.is-style-th-banniere-logos > .wp-block-image:nth-child(3) { order: 4; }
	.wp-block-group.is-style-th-banniere-logos > .wp-block-image:nth-child(4),
	.wp-block-group.is-style-th-banniere-logos > .wp-block-image:nth-child(5) { order: 1; }
}

/* Sur tablette, les logos se rangent deux par deux. */
@media (min-width: 768px) and (max-width: 980px) {
	.wp-block-group.is-style-th-banniere-logos > .wp-block-image {
		flex-basis: 47.25%;
	}

	.wp-block-group.is-style-th-banniere-logos > .wp-block-image:nth-child(5) {
		justify-content: flex-start;
		padding-left: 8.3%;
	}
}

/* ---------- Formulaires Forminator ---------- */

/* Règle reprise telle quelle du thème enfant Divi. */
.forminator-button.forminator-button-submit {
	display: block !important;
	width: 300px !important;
	margin: 20px auto 0 !important;
	border-radius: 30px;
	background-color: #db8c1c;
	color: #fff !important;
}

/* ---------- Bouton discret à flèche ---------- */

.wp-block-button.is-style-th-fleche .wp-block-button__link {
	padding: 0.3em 1em;
	border: 0;
	border-radius: 100px;
	background-color: transparent;
	color: #bfbfbf;
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7em;
	text-transform: uppercase;
}

.wp-block-button.is-style-th-fleche .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	width: 0;
	opacity: 0;
	transition: opacity 0.2s, margin 0.2s;
}

.wp-block-button.is-style-th-fleche .wp-block-button__link:hover::after,
.wp-block-button.is-style-th-fleche .wp-block-button__link:focus-visible::after {
	margin-left: 0.3em;
	opacity: 1;
}

/* ---------- Mosaïque de membres ---------- */

.th-mosaique {
	display: grid;
	grid-template-columns: repeat(var(--th-colonnes, 2), 1fr);
	gap: 2px 4px;
	max-width: 530px;
	line-height: 0;
}

.th-mosaique__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Bloc « Parmi nos membres » : mosaïque à gauche, texte à droite ---------- */

.wp-block-group.is-style-th-bloc-membres {
	padding: 4% 0 0;
	background: url(../img/fond-rectangle-3.png) right bottom / contain no-repeat;
}

.wp-block-group.is-style-th-bloc-membres > .wp-block-columns {
	gap: 0;
	width: 80%;
	max-width: 2560px;
	margin: 0 auto;
	padding: 2% 0 80px;
}

.wp-block-group.is-style-th-bloc-membres > .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 60%;
}

.wp-block-group.is-style-th-bloc-membres > .wp-block-columns > .wp-block-column:last-child {
	flex: 0 0 40%;
	padding: 0 20px;
}

/* Petit espace sous la mosaïque, repris de l'ancien site (proportionnel à sa largeur). */
.wp-block-group.is-style-th-bloc-membres .th-mosaique::after {
	content: "";
	grid-column: 1 / -1;
	margin-top: -2px;
	padding-top: 2.83%;
}

.wp-block-group.is-style-th-bloc-membres .wp-block-heading {
	max-width: 500px;
	margin-bottom: 20px;
}

.wp-block-group.is-style-th-bloc-membres .wp-block-column:last-child > p {
	max-width: 600px;
	padding-left: 5%;
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	line-height: 2em;
}

.wp-block-group.is-style-th-bloc-membres .wp-block-buttons {
	justify-content: flex-end;
	margin-top: 30px;
}

.wp-block-group.is-style-th-bloc-membres .wp-block-button__link {
	padding-left: 200px;
}

@media (min-width: 1350px) {
	.wp-block-group.is-style-th-bloc-membres {
		padding-top: 54px;
	}

	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns {
		padding-top: 27px;
	}
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-bloc-membres {
		padding-top: 50px;
	}

	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns {
		flex-wrap: wrap !important;
		padding-top: 30px;
	}

	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns > .wp-block-column:first-child,
	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 100% !important;
	}

	/* Sur mobile le texte passe avant la mosaïque. */
	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns > .wp-block-column:first-child {
		order: 2;
	}

	.wp-block-group.is-style-th-bloc-membres .th-mosaique {
		max-width: 800px;
	}
}

/* Sur tablette, les vignettes occupent 80 % de leur case, avec 30 px dessous. */
@media (min-width: 768px) and (max-width: 980px) {
	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns > .wp-block-column:last-child {
		margin-bottom: 30px;
	}

	.wp-block-group.is-style-th-bloc-membres .th-mosaique__item {
		padding-bottom: 30px;
	}

	.wp-block-group.is-style-th-bloc-membres .th-mosaique__item img {
		width: 80%;
	}
}

@media (max-width: 767px) {
	.wp-block-group.is-style-th-bloc-membres > .wp-block-columns {
		width: 100%;
		padding-inline: 5%;
	}

	.wp-block-group.is-style-th-bloc-membres .wp-block-button__link {
		padding: 0.3em 1em 60px 0;
	}
}

/* ---------- Options de rangée (suite) ---------- */

/* th-sans-plafond : la rangée centrée garde 80 % de large sans limite à 1080 px. */
.wp-block-group.th-sans-plafond {
	max-width: none;
}

/* ---------- Bandeau vidéo plein écran ---------- */

.wp-block-cover.is-style-th-hero {
	min-height: calc(100vh - 143px);
	padding: 0;
	overflow: hidden;
}

/* Voile : équivalent du noir à 66 % et du bleu à 30 % superposés sur l'ancien site. */
.wp-block-cover.is-style-th-hero .wp-block-cover__background {
	background-color: #212332 !important;
	opacity: 0.762 !important;
}

.wp-block-cover.is-style-th-hero .wp-block-cover__inner-container {
	position: absolute;
	top: calc(50vh - 48.5px);
	left: 5%;
	width: 90%;
	padding: 10px;
	color: #fff;
	text-align: center;
	transform: translateY(-50%);
}

.wp-block-cover.is-style-th-hero .wp-block-image {
	margin: 0 0 46px;
	line-height: 0;
}

.wp-block-cover.is-style-th-hero .wp-block-image img {
	display: inline-block;
}

.wp-block-cover.is-style-th-hero h1 {
	color: #fff;
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.2em;
	text-shadow: 0 0.1em 0.45em rgba(0, 0, 0, 0.09);
}

.wp-block-cover.is-style-th-hero p {
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	line-height: 2em;
}

.wp-block-cover.is-style-th-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 30px;
}

/* Pointe blanche en bas du bandeau. */
.wp-block-cover.is-style-th-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	height: 150px;
	min-height: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M640 139L0 0v140h1280V0L640 139z'/%3E%3C/svg%3E") center / 100% 150px no-repeat;
	pointer-events: none;
}

/* Flèche « défiler », ajoutée par le script du thème. */
.th-hero__defiler {
	position: absolute;
	bottom: 25px;
	left: 50%;
	z-index: 11;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	line-height: 0;
	cursor: pointer;
	transform: translateX(-50%);
}

/* ---------- Boutons : plein orange et lien Avenir ---------- */

.wp-block-button.is-style-th-plein .wp-block-button__link {
	padding: 0.3em 30px;
	border: 3px solid #e09900;
	border-radius: 30px;
	background-color: #e09900;
	color: #fff;
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7em;
	text-transform: uppercase;
	transition: border-radius 0.3s;
}

.wp-block-button.is-style-th-plein .wp-block-button__link:hover,
.wp-block-button.is-style-th-plein .wp-block-button__link:focus-visible {
	border-radius: 100px;
}

.wp-block-button.is-style-th-lien-avenir .wp-block-button__link {
	padding: 0.3em 1em;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: #db8c1c;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
}

/* ---------- Bande de logos avec visuel ---------- */

.wp-block-group.is-style-th-logos-visuel {
	height: 80vh;
	padding-top: 50px;
	background: linear-gradient(360deg, #fff 0%, rgba(255, 255, 255, 0) 50%), url(../img/grille-points-fond.png) right bottom no-repeat;
}

.wp-block-group.is-style-th-logos-visuel > .wp-block-columns {
	align-items: center !important;
	gap: 5.5%;
	width: 80%;
	margin: 0 auto;
	padding-bottom: 27px;
}

.wp-block-group.is-style-th-logos-visuel > .wp-block-columns > .wp-block-column {
	flex: 0 0 12.0625%;
}

.wp-block-group.is-style-th-logos-visuel > .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 47.25%;
}

.wp-block-group.is-style-th-logos-visuel .wp-block-image {
	display: flex;
	justify-content: center;
}

/* ---------- Section à pictogrammes ---------- */

.wp-block-group.is-style-th-section-pictos {
	padding-top: 200px;
	background: url(../img/fond-rectangle-4.png) left center / contain no-repeat;
}

.wp-block-group.is-style-th-pictogramme {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-content: start;
	column-gap: 15px;
	min-height: 250px;
}

.wp-block-group.is-style-th-pictogramme > .wp-block-image {
	grid-row: 1 / span 2;
	padding-top: 4px;
}

.wp-block-group.is-style-th-pictogramme > .wp-block-heading {
	grid-column: 2;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-size: 30px;
}

.wp-block-group.is-style-th-pictogramme > p {
	grid-column: 2;
	font-family: "Avenir Book", Helvetica, Arial, sans-serif;
}

/* ---------- Témoignage sur fond sombre ---------- */

.wp-block-group.is-style-th-temoignage {
	padding: calc(27px + min(144px, 14.08%)) 0;
	background: #031317 url(../img/motif-sombre.png) center repeat;
	background-blend-mode: color-dodge;
	color: #fff;
	font-family: "Avenir Book", Helvetica, Arial, sans-serif;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wp-block-group.is-style-th-temoignage > * {
	width: min(756px, 73.92%);
	margin-inline: auto;
}

.wp-block-group.is-style-th-temoignage p {
	padding-bottom: 1em;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8em;
}

.wp-block-group.is-style-th-temoignage .wp-block-image {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.wp-block-group.is-style-th-temoignage h6 {
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}

/* ---------- Fenêtre pop-up ---------- */

/* Elle s'ouvre par tout lien pointant vers son ancre (par exemple #devenir-membre). */
.wp-block-group.is-style-th-popup {
	display: none;
}

.wp-block-group.is-style-th-popup.is-open {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000002;
	display: block;
	width: min(1080px, 90%);
	max-height: 100vh;
	overflow: auto;
	background: #fff url(../img/fond-rectangle-3.png) right bottom no-repeat;
	box-shadow: 0 3px 10px -1px rgba(0, 0, 0, 0.3), 0 2px 50px 2px rgba(0, 0, 0, 0.2);
	transform: translate(-50%, -50%);
}

.wp-block-group.is-style-th-popup > .wp-block-columns {
	align-items: center !important;
	width: 90%;
	min-height: 660px;
	margin: 0 auto;
	padding: 27px 0;
}

.th-popup__fermer {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #666;
	font-size: 14px;
	line-height: 30px;
	cursor: pointer;
}

.th-popup-fond {
	position: fixed;
	inset: 0;
	z-index: 1000001;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: saturate(1.8) blur(5px);
	backdrop-filter: saturate(1.8) blur(5px);
}

body.th-popup-ouverte {
	overflow: hidden;
}

/* Dans l'éditeur, la pop-up reste visible pour pouvoir la modifier. */
.editor-styles-wrapper .wp-block-group.is-style-th-popup {
	display: block;
	border: 1px dashed #bfbfbf;
}

/* ---------- Adaptations mobiles des blocs de « Devenir membre » ---------- */

@media (max-width: 980px) {
	.wp-block-group.is-style-th-temoignage {
		padding-block: calc(30px + min(144px, 14.08%));
	}

	/* Bande de logos : le visuel passe en premier, les logos se rangent par trois. */
	.wp-block-group.is-style-th-logos-visuel > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-group.is-style-th-logos-visuel > .wp-block-columns > .wp-block-column {
		flex-basis: 29.667% !important;
		margin-bottom: 30px;
		order: 2;
	}

	.wp-block-group.is-style-th-logos-visuel > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 100% !important;
		order: 1;
	}

	/* Sur tablette, la bande prend la hauteur de son contenu et le bandeau vidéo suit le menu replié. */
	.wp-block-group.is-style-th-logos-visuel {
		height: auto;
	}

	.wp-block-cover.is-style-th-hero {
		min-height: calc(100vh - 7px);
	}

	.wp-block-cover.is-style-th-hero .wp-block-cover__inner-container {
		top: calc(50vh - 59px);
	}
}

@media (max-width: 767px) {
	.wp-block-cover.is-style-th-hero {
		min-height: 700px;
	}

	.wp-block-cover.is-style-th-hero .wp-block-cover__inner-container {
		top: -12px;
		transform: none;
	}

	.wp-block-cover.is-style-th-hero h1 {
		font-size: 40px;
	}

	.wp-block-cover.is-style-th-hero p {
		font-size: 16px;
		line-height: 1.5em;
	}

	.wp-block-group.is-style-th-logos-visuel {
		height: 1000px;
		background: linear-gradient(360deg, #fff 0%, rgba(255, 255, 255, 0) 50%);
	}

	.wp-block-group.is-style-th-section-pictos {
		padding-top: 0;
	}
}

@media (max-width: 479px) {
	.wp-block-group.is-style-th-logos-visuel > .wp-block-columns {
		gap: 0;
	}

	.wp-block-group.is-style-th-logos-visuel > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Liste d'articles ---------- */

.th-article__titre {
	border-bottom: 0.5px solid;
}

.th-article__titre a {
	color: inherit;
}

.th-article__meta {
	margin-bottom: 6px;
	padding: 10px 0 0;
	font-size: 12px;
}

.th-article__meta a {
	color: inherit;
}

.th-article__image,
.th-article__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Carte à la une */
.th-articles--carte {
	max-width: 400px;
	margin-inline: auto;
	padding: 15px;
	background: #fff;
	box-shadow: 0 12px 60px -6px rgba(0, 0, 0, 0.07);
}

.th-articles--carte .th-article {
	margin-bottom: 60px;
}

.th-articles--carte .th-article__image {
	margin-bottom: 30px;
}

.th-articles--carte .th-article__titre {
	font-size: 24px;
	line-height: 1.5em;
}

.th-articles--carte .th-article__titre a {
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.th-articles--carte .th-article__meta {
	color: #b3b3b3;
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 1.9em;
}

.th-articles--carte .th-article__extrait {
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	line-height: 1.9em;
}

/* Grille en trois colonnes, façon mosaïque (les colonnes sont formées par le script du thème). */
.th-articles--grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 0 5.5%;
}

.th-articles--grille.est-en-colonnes {
	display: flex;
	gap: 5.5%;
}

.th-articles__colonne {
	flex: 1 1 0;
	min-width: 0;
}

.th-articles--grille .th-article {
	/* Proportionnel à la largeur de la colonne, comme sur l'ancien site. */
	margin-bottom: 18.539%;
	padding: 19px;
	border: 10px solid #fff;
	background: #fff;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
}

.th-articles--grille .th-article__image {
	width: auto;
	margin: -20px -20px 30px;
}

.th-articles__colonne .th-article:last-child {
	margin-bottom: 30px;
}

.th-articles--grille .th-article__image img {
	aspect-ratio: 400 / 250;
	object-fit: cover;
}

.th-articles--grille .th-article__titre {
	font-size: 20px;
	line-height: 1.2em;
}

.th-articles--grille .th-article__titre a {
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
}

.th-articles--grille .th-article__meta {
	color: rgba(0, 0, 0, 0.28);
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
}

.th-articles--grille .th-article__extrait {
	font-family: "Avenir Book", Helvetica, Arial, sans-serif;
}

.th-articles__pagination {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
}

@media (max-width: 980px) {
	.th-articles--grille {
		grid-template-columns: repeat(2, 1fr);
	}

	.th-articles--grille .th-article {
		margin-bottom: 16.21%;
	}
}

@media (max-width: 767px) {
	.th-articles--grille {
		grid-template-columns: 1fr;
	}

	.th-articles--grille .th-article {
		margin-bottom: 11.5%;
	}

	.th-articles--grille .th-article__image {
		margin-bottom: 30px;
	}

	.th-articles--grille .th-article__titre {
		padding-bottom: 0;
	}

	.th-articles--grille .th-article__meta {
		padding-top: 0;
	}

}

@media (max-width: 980px) {
	.th-articles--carte .th-article {
		margin-bottom: 42px;
	}
}

/* ---------- Fonds décoratifs à combiner (classes additionnelles) ---------- */

/* th-fond-rectangle : grand rectangle clair en bas à droite de la section. */
.wp-block-group.th-fond-rectangle {
	background: url(../img/fond-rectangle.png) right bottom / contain no-repeat;
}

/* th-fond-grille-gauche : semis de points à gauche d'une colonne. */
.wp-block-column.th-fond-grille-gauche {
	background: url(../img/grille-points-fond.png) left center no-repeat;
}

/* ---------- Accueil : variante du bandeau vidéo ---------- */

/* th-hero-accueil (classe additionnelle) : le bandeau occupe tout l'écran sous le menu. */
.wp-block-cover.is-style-th-hero.th-hero-accueil {
	min-height: calc(100vh - 63px);
}

.wp-block-cover.is-style-th-hero.th-hero-accueil .wp-block-cover__inner-container {
	top: calc(50vh - 68.5px);
}

.wp-block-cover.is-style-th-hero.th-hero-accueil .wp-block-image {
	margin-bottom: 6px;
}

.wp-block-cover.is-style-th-hero.th-hero-accueil .wp-block-buttons {
	margin-top: 20px;
}

/* Bouton orange avec icône de lecture. */
.wp-block-button.is-style-th-video .wp-block-button__link {
	position: relative;
	padding: 0.3em 10px 0.3em 24px;
	border: 7px solid #e09900;
	border-radius: 100px;
	background-color: #e09900;
	color: #fff;
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7em;
	text-transform: uppercase;
	transition: background-color 0.3s, border-color 0.3s;
}

.wp-block-button.is-style-th-video .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 9px;
	border: 5px solid transparent;
	border-left: 8px solid currentColor;
	transform: translateY(-50%);
}

.wp-block-button.is-style-th-video .wp-block-button__link:hover,
.wp-block-button.is-style-th-video .wp-block-button__link:focus-visible {
	border-color: #f77b00;
	background-color: #f77b00;
}

/* Bouton à contour blanc, sur fond de couleur. */
.wp-block-button.is-style-th-contour-blanc .wp-block-button__link {
	padding: 0.3em 1em;
	border: 2px solid #fff;
	border-radius: 3px;
	background-color: transparent;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
	transition: background-color 0.3s;
}

.wp-block-button.is-style-th-contour-blanc .wp-block-button__link:hover,
.wp-block-button.is-style-th-contour-blanc .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.2);
}

/* ---------- Accueil : introduction avec losange ---------- */

.wp-block-group.is-style-th-accueil-intro {
	position: relative;
	z-index: 20;
	padding: 54px 0 60px;
}

.wp-block-group.is-style-th-accueil-intro > .wp-block-columns {
	gap: 5.5%;
	margin-bottom: 0;
}

.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 64.833%;
}

.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:last-child {
	position: relative;
	flex: 0 0 29.667%;
	padding: 2.855% 0;
}

/* Les deux blocs de la colonne de texte : 80 % de large, centrés. */
.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
	width: 80%;
	margin-inline: auto;
	padding-top: 4.24%;
}

.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child > .wp-block-group + .wp-block-group {
	padding: 4.24% 0 4.24% 5%;
}

/* Semis de points décoratif, derrière le losange. */
.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:last-child::after {
	content: "";
	position: absolute;
	top: -319px;
	left: 186px;
	z-index: -1;
	width: 408px;
	height: 408px;
	background: url(../img/grille-points-large.png) no-repeat;
}

/* Losange « Comment devenir membre » : il remonte sur le bandeau vidéo. */
.wp-block-group.is-style-th-losange {
	position: relative;
	width: 400px;
	max-width: 100%;
	height: 400px;
	margin: -400px auto 0;
	padding: 160px 40px 40px;
	background: url(../img/losange.svg) center / contain no-repeat;
	color: #fff;
	text-align: center;
	transition: transform 0.3s;
}

.wp-block-group.is-style-th-losange:hover {
	transform: scale(1.03);
}

.wp-block-group.is-style-th-losange .wp-block-heading {
	color: #fff;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-size: 23px;
	line-height: 1.4em;
}

.wp-block-group.is-style-th-losange .wp-block-heading a {
	color: inherit;
}

/* Tout le losange est cliquable, et une flèche suit le titre. */
.wp-block-group.is-style-th-losange .wp-block-heading a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-group.is-style-th-losange .wp-block-heading a::after {
	content: "\2192";
	display: block;
	margin-top: 22px;
	font-family: Arial, sans-serif;
	font-size: 30px;
	line-height: 18px;
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child,
	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 100% !important;
	}

	.wp-block-group.is-style-th-losange {
		display: none;
	}
}

@media (max-width: 767px) {
	.wp-block-group.is-style-th-accueil-intro {
		padding-bottom: 30px;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:last-child::after {
		display: none;
	}
}

/* ---------- Encart orange ---------- */

.wp-block-group.is-style-th-encart-orange {
	padding: 40px 60px;
	background-color: #db8c1c;
	color: #fff;
	text-align: center;
}

.wp-block-group.is-style-th-encart-orange p {
	padding-bottom: 20px;
	font-size: 20px;
	line-height: 1em;
}

.wp-block-group.is-style-th-encart-orange .wp-block-buttons {
	justify-content: center;
}

/* ---------- Liste d'articles : vignettes ---------- */

.th-articles--vignettes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px 2.22%;
}

.th-articles--vignettes .th-article {
	position: relative;
	padding: 15px 15px 60px;
	background: #fff;
	box-shadow: 0 12px 60px -6px rgba(0, 0, 0, 0.05);
}

.th-articles--vignettes .th-article__image {
	margin-bottom: 9.27px;
}

.th-articles--vignettes .th-article__titre {
	margin-bottom: 9.27px;
	border-bottom: 0;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5em;
}

/* Toute la vignette est cliquable. */
.th-articles--vignettes .th-article__titre a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.th-articles--vignettes .th-article__meta {
	margin-bottom: 9.27px;
	padding: 2px 0 0;
	color: #b3b3b3;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 2em;
}

@media (max-width: 767px) {
	.th-articles--vignettes {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	/* Sur tablette les trois vignettes restent côte à côte ; la carte à la une prend toute la colonne. */
	.th-articles--vignettes {
		column-gap: 25px;
	}

	.wp-block-group.th-accueil-une .th-articles--carte {
		max-width: none;
	}

	.th-articles--vignettes .th-article__image,
	.th-articles--vignettes .th-article__titre,
	.th-articles--vignettes .th-article__meta {
		margin-bottom: 30px;
	}
}

/* ---------- Pop-up sombre (vidéo) ---------- */

/* th-popup-sombre (classe additionnelle) : pas de fond blanc ni d'ombre, pour une vidéo. */
.wp-block-group.is-style-th-popup.th-popup-sombre.is-open {
	background: transparent;
	box-shadow: none;
}

.wp-block-group.is-style-th-popup.th-popup-sombre .th-popup__fermer {
	color: #fff;
	font-size: 22px;
}

.wp-block-group.is-style-th-popup.th-popup-sombre .wp-block-video video {
	display: block;
	width: 100%;
}

/* Espace sous les vignettes, repris de l'ancien site (proportionnel à la largeur). */
.th-articles--vignettes {
	margin-bottom: 2.78%;
}

/* th-accueil-une (classe additionnelle) : rangée « à la une » de l'accueil, bouton avec réserve en dessous. */
.wp-block-group.th-accueil-une .wp-block-buttons {
	padding-bottom: 56px;
}

/* ---------- Accueil : adaptations mobiles ---------- */

@media (max-width: 980px) {
	.wp-block-group.is-style-th-accueil-intro {
		padding-top: 50px;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns {
		gap: 0;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child {
		margin-bottom: 30px;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:last-child {
		min-height: 1px;
		padding: 0;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
		padding-top: 30px;
	}

	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:first-child > .wp-block-group + .wp-block-group {
		padding: 30px 0 30px 5%;
	}

	/* Rangée « à la une » : le texte passe avant la carte. */
	.wp-block-group.th-accueil-une .wp-block-columns > .wp-block-column:first-child {
		order: 2;
	}
}

@media (min-width: 768px) and (max-width: 980px) {
	.wp-block-group.is-style-th-accueil-intro > .wp-block-columns > .wp-block-column:last-child {
		min-height: 6px;
	}
}

@media (max-width: 980px) {
	.wp-block-cover.is-style-th-hero.th-hero-accueil {
		min-height: calc(100vh - 66px);
	}

	.wp-block-cover.is-style-th-hero.th-hero-accueil .wp-block-cover__inner-container {
		top: calc(50vh - 80px);
	}
}

@media (max-width: 767px) {

	.wp-block-cover.is-style-th-hero.th-hero-accueil .wp-block-cover__inner-container {
		top: calc(50vh - 110.5px);
		transform: translateY(-50%);
	}

	.wp-block-group.is-style-th-encart-orange {
		padding: 40px;
	}

	.wp-block-group.th-accueil-une {
		padding-left: 0 !important;
	}
}

/* ---------- Annuaire : filtres ---------- */

.th-filtres {
	display: grid;
	grid-template-columns: 36.47% 49.54%;
	justify-content: space-between;
	align-items: start;
	min-height: 132px;
}

.th-filtres__categories {
	margin: 0;
	padding: 16px 0 0;
	border: 0;
}

.th-filtres__option {
	position: relative;
	display: block;
	padding: 5px 0;
	cursor: pointer;
}

.th-filtres__option input {
	position: absolute;
	opacity: 0;
}

.th-filtres__texte {
	display: block;
	padding-left: 35px;
	color: #000;
	text-align: center;
}

/*
 * Filtres en pastilles (présentation par défaut) : une ligne de catégories, la recherche à droite,
 * et les sous-catégories de la catégorie choisie sur une seconde ligne.
 */
.th-filtres--pastilles {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 30px;
	min-height: 0;
}

/* Le groupe de catégories ne crée pas de boîte : ses deux lignes se placent dans le formulaire. */
.th-filtres--pastilles .th-filtres__categories {
	display: contents;
}

.th-filtres--pastilles .th-filtres__niveau {
	flex: 1 1 280px;
}

.th-filtres--pastilles .th-filtres__enfants {
	flex: 0 0 100%;
	order: 3;
}

.th-filtres--pastilles .th-filtres__niveau,
.th-filtres--pastilles .th-filtres__enfants {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.th-filtres--pastilles .th-filtres__enfants {
	gap: 8px;
}

.th-filtres--pastilles .th-filtres__enfants[hidden] {
	display: none;
}

.th-filtres--pastilles .th-filtres__option {
	padding: 0;
}

.th-filtres--pastilles .th-filtres__texte {
	display: flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 8px 20px;
	border: 1.5px solid #d5d5d5;
	border-radius: 22px;
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.th-filtres--pastilles .th-filtres__option:hover .th-filtres__texte,
.th-filtres--pastilles .th-filtres__option.est-ouvert .th-filtres__texte {
	border-color: #e09900;
}

.th-filtres--pastilles input:checked + .th-filtres__texte {
	border-color: #e09900;
	background: #e09900;
	color: #fff;
	font-weight: 700;
}

.th-filtres--pastilles input:focus-visible + .th-filtres__texte {
	outline: 2px solid #032b35;
	outline-offset: 2px;
}

/* Chevron des catégories qui ont des sous-catégories : placé après le libellé, dans la pastille. */
.th-filtres--pastilles .th-filtres__option--parent .th-filtres__texte::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: -4px 2px 0 12px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.th-filtres--pastilles .th-filtres__option--parent.est-ouvert .th-filtres__texte::after {
	margin-top: 4px;
	transform: rotate(225deg);
}

.th-filtres--pastilles .th-filtres__option--enfant .th-filtres__texte {
	min-height: 36px;
	padding: 5px 16px;
	border-color: #f2f2f2;
	background: #f2f2f2;
	font-size: 14px;
}

.th-filtres--pastilles .th-filtres__option--enfant input:checked + .th-filtres__texte {
	border-color: #032b35;
	background: #032b35;
}

.th-filtres--pastilles .th-filtres__recherche {
	flex: 0 1 340px;
	padding: 0;
}

.th-filtres--pastilles .th-filtres__recherche input {
	box-sizing: border-box;
	height: 44px;
	padding: 0 16px 0 44px;
	border: 1.5px solid #d5d5d5;
	border-radius: 22px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 15px 50% / 18px no-repeat;
	color: #333;
	font-size: 15px;
}

.th-filtres--pastilles .th-filtres__recherche input::placeholder {
	color: #767676;
	opacity: 1;
}

.th-filtres--pastilles .th-filtres__recherche input:focus {
	border-color: #e09900;
	outline: none;
}

.th-filtres--pastilles .th-filtres__recherche input:focus-visible {
	outline: 2px solid #032b35;
	outline-offset: 2px;
}

/* Nombre de résultats et message « aucun résultat ». */
.th-annuaire__compteur {
	min-height: 1.7em;
	margin: 0 0 12px;
	padding: 0;
	color: #666;
	font-size: 14px;
}

.th-annuaire__vide {
	padding: 30px 0;
	color: #333;
	text-align: center;
}

.th-annuaire__effacer {
	margin-left: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #b87900;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.th-filtres__recherche {
	display: block;
	padding-top: 16px;
}

.th-filtres__recherche input {
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #999;
	font: inherit;
	font-weight: 400;
	line-height: normal;
}

/* ---------- Annuaire : grille ---------- */

.th-annuaire__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.th-annuaire.est-en-chargement .th-annuaire__grille {
	opacity: 0.5;
}

.th-annuaire__plus {
	display: block;
	margin: 29.7px auto 30px;
	padding: 0.3em 1em;
	border: 2px solid #666;
	border-radius: 3px;
	background: transparent;
	color: #666;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
	cursor: pointer;
}

.th-annuaire__plus[hidden] {
	display: none;
}

/* Fiche en mosaïque : photo, puis voile orange et informations. */
.th-membre {
	position: relative;
	display: block;
	overflow: hidden;
	color: #fff;
	line-height: 1;
}

.th-membre img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 510 / 382;
	object-fit: cover;
}

.th-membre__voile,
.th-membre__nom,
.th-membre__categorie,
.th-membre__trait,
.th-membre__gerant {
	position: absolute;
	transition: opacity 0.4s, margin 0.4s;
}

.th-membre__voile {
	inset: 0;
	background-color: rgba(224, 153, 0, 0.88);
}

.th-membre__nom {
	top: 25%;
	left: 0;
	width: 100%;
	padding-left: 10px;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-size: 18px;
}

.th-membre__categorie {
	top: 50%;
	left: 10px;
	padding: 4px 20px;
	border-radius: 10px;
	background: #fff;
	color: #e09900;
	font-family: "Avenir Black", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.th-membre__trait {
	top: calc(60% + 10px);
	right: 10px;
	left: 10px;
	border-top: 1px solid #fff;
}

.th-membre__gerant {
	top: 70%;
	left: 0;
	width: 100%;
	padding-left: 10px;
	font-family: "Avenir Book", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

/* Sur grand écran, le voile n'apparaît qu'au survol. */
@media (min-width: 981px) {
	.th-membre__voile,
	.th-membre__nom,
	.th-membre__categorie,
	.th-membre__trait,
	.th-membre__gerant {
		opacity: 0;
	}

	.th-membre:hover > span,
	.th-membre:focus-visible > span {
		opacity: 1;
	}

	.th-membre:hover .th-membre__nom,
	.th-membre:focus-visible .th-membre__nom {
		margin-top: 5%;
	}
}

@media (max-width: 980px) {
	.th-annuaire__grille {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tablette et téléphone : la recherche passe au-dessus, sur toute la largeur. */
	.th-filtres--pastilles .th-filtres__recherche {
		flex-basis: 100%;
		order: -1;
	}

	.th-filtres--pastilles .th-filtres__niveau {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	.th-filtres {
		grid-template-columns: 1fr;
		row-gap: 30px;
		min-height: 0;
	}

	.th-filtres__recherche {
		padding-bottom: 9px;
	}

	.th-filtres--pastilles .th-filtres__recherche {
		padding-bottom: 0;
	}

	.th-annuaire__grille {
		grid-template-columns: 1fr;
	}

	/* Sur téléphone le bouton est plus étroit et passe sur deux lignes, comme sur l'ancien site. */
	.th-annuaire__plus {
		max-width: 50%;
		margin: -4px auto 8px;
	}
}

/* ---------- Annuaire : carte ---------- */

.th-carte-membres {
	width: 100%;
	margin-bottom: 20px;
	line-height: 1.5;
}

/* ---------- Bandeau de titre sombre (annuaire) ---------- */

.wp-block-group.is-style-th-bandeau-titre {
	padding-top: 63px;
	background: #031317 url(../img/motif-sombre.png) center repeat;
	background-blend-mode: color-dodge;
}

.wp-block-group.is-style-th-bandeau-titre h2 {
	max-width: 600px;
	margin: 0 auto 20px;
	color: #fff;
	text-align: center;
}

/* Bouton à contour orange, grand format. */
.wp-block-button.is-style-th-contour-accent .wp-block-button__link {
	padding: 0.3em 1em;
	border: 2px solid #db8c1c;
	border-radius: 3px;
	background-color: transparent;
	color: #db8c1c;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
	transition: background-color 0.3s;
}

.wp-block-button.is-style-th-contour-accent .wp-block-button__link:hover,
.wp-block-button.is-style-th-contour-accent .wp-block-button__link:focus-visible {
	background-color: rgba(0, 0, 0, 0.05);
}

@media (max-width: 980px) {
	.wp-block-group.is-style-th-bandeau-titre {
		padding-top: 39px;
	}
}

/* ---------- Annuaire : présentation en liste ---------- */

.th-annuaire--liste .th-annuaire__grille {
	gap: 5px 10px;
}

.th-membre--liste {
	padding: 30px 14px;
	color: #666;
	line-height: 1;
}

.th-membre--liste .th-membre__categorie,
.th-membre--liste .th-membre__nom,
.th-membre--liste .th-membre__gerant {
	position: static;
	display: block;
	width: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	opacity: 1;
}

.th-membre--liste .th-membre__categorie {
	margin-bottom: 10px;
	color: #ffc547;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
}

.th-membre--liste .th-membre__nom {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 0.5px solid #333;
	color: #333;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3em;
}

.th-membre--liste .th-membre__gerant {
	font-family: inherit;
	font-size: 12px;
}

/* Filtres en boutons sur une ligne. */
.th-filtres--boutons {
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	min-height: 99px;
}

.th-filtres--boutons .th-filtres__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 18px;
	padding-top: 34px;
}

.th-filtres--boutons .th-filtres__option {
	padding: 0;
}

.th-filtres--boutons .th-filtres__niveau {
	display: contents;
}

.th-filtres--boutons .th-filtres__texte {
	padding: 0;
	font-family: "Avenir Book", Helvetica, Arial, sans-serif;
	font-weight: 600;
	line-height: 1.12em;
}

.th-filtres--boutons input:checked ~ .th-filtres__texte {
	color: #ffc547;
}

.th-filtres--boutons .th-filtres__recherche input {
	background: #f9f9f9;
}

/* th-bouton-fixe (classe additionnelle sur un bloc Boutons) : bouton collé au bord droit de l'écran. */
.wp-block-buttons.th-bouton-fixe {
	position: fixed;
	right: 0;
	bottom: 50%;
	z-index: 30;
}

.wp-block-buttons.th-bouton-fixe .wp-block-button__link {
	padding: 10px 14px;
	border: 0;
	border-radius: 3px 0 0 3px;
	background: #fff;
	color: #5e5e5e;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7em;
}

@media (max-width: 767px) {
	.th-filtres--boutons {
		grid-template-columns: 1fr;
	}

	.wp-block-buttons.th-bouton-fixe {
		bottom: 60px;
	}
}

/* ---------- Archives, recherche et page introuvable ---------- */

.wp-block-group.is-style-th-bandeau-titre h1 {
	max-width: 600px;
	margin: 0 auto 20px;
	color: #fff;
	text-align: center;
}

.th-archive__retour,
.th-introuvable .wp-block-buttons {
	justify-content: center;
	margin-top: 30px;
}

.th-introuvable {
	text-align: center;
}

/* ---------- Animations d'apparition (classes additionnelles) ----------
 *
 * th-anim-monte       : le bloc monte légèrement en apparaissant.
 * th-anim-fondu       : le bloc apparaît en fondu.
 * th-anim-droite      : le bloc arrive par la droite.
 * th-anim-enfants     : chaque élément du bloc monte l'un après l'autre.
 * th-anim-retard      : départ retardé de 0,1 s ; th-anim-retard-long : 0,25 s.
 *
 * Ces règles ne valent que sur le site (pas dans l'éditeur), quand le script du thème
 * est chargé et que le visiteur n'a pas demandé à réduire les animations.
 */

.th-anim-retard {
	--th-anim-retard: 0.1s;
}

.th-anim-retard-long {
	--th-anim-retard: 0.25s;
}

@media (prefers-reduced-motion: no-preference) {
	html.th-js .th-anim-monte,
	html.th-js .th-anim-fondu,
	html.th-js .th-anim-droite,
	html.th-js .th-anim-enfants > *,
	html.th-js .wp-block-cover.th-anim-fondu > .wp-block-cover__inner-container {
		opacity: 0;
	}

	html.th-js .th-anim-monte {
		transform: translateY(4%);
	}

	html.th-js .th-anim-enfants > * {
		transform: translateY(10%);
	}

	html.th-js .th-anim-droite {
		transform: translateX(16%);
	}

	/* Bandeau vidéo : seul le texte apparaît en fondu, pas la vidéo. */
	html.th-js .wp-block-cover.th-anim-fondu {
		opacity: 1;
	}

	html.th-js .est-apparu.th-anim-monte,
	html.th-js .est-apparu.th-anim-fondu,
	html.th-js .est-apparu.th-anim-droite,
	html.th-js .th-anim-enfants > .est-apparu,
	html.th-js .wp-block-cover.th-anim-fondu.est-apparu > .wp-block-cover__inner-container {
		opacity: 1;
		transition: opacity 1s ease-in-out var(--th-anim-retard, 0s), transform 1s ease-in-out var(--th-anim-retard, 0s);
	}

	html.th-js .est-apparu.th-anim-monte,
	html.th-js .est-apparu.th-anim-droite,
	html.th-js .th-anim-enfants > .est-apparu {
		transform: none;
	}

	html.th-js .th-anim-enfants > .est-apparu:nth-child(n+2) {
		--th-anim-retard: 0.1s;
	}

	/* Secours : si le script ne s'est pas lancé, tout s'affiche sans animation. */
	html.th-anim-secours [class*="th-anim-"],
	html.th-anim-secours .th-anim-enfants > *,
	html.th-anim-secours .wp-block-cover.th-anim-fondu > .wp-block-cover__inner-container {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- Décalage au défilement (classes additionnelles) ----------
 *
 * th-defile-monte   : le bloc part 100 px plus haut et finit 150 px plus bas (ordinateur et tablette).
 * th-defile-leger   : décalage de 50 px vers le bas puis vers le haut (ordinateur et tablette).
 * th-defile-inverse : décalage de 100 px vers le bas puis vers le haut.
 */

[class*="th-defile-"] {
	will-change: transform;
}