/* TAT child theme styles. Replaces the inline <style> of the old footer.php and the CSS of the
   Events Shortcode and Locations Shortcode plugins (now part of this theme). */

/* ---- Upcoming events ([events_shortcode]) ---- */
#upcoming-events {
  margin-bottom: 80px;
}

#upcoming-events h5 {
  text-align: center;
}


/* ---- Locations map ([locations]) ---- */
.locations {
	 background-color: #f7f7f7;
}
.locations-lite {
	background-color: transparent;
}
/* [locations lite="true"] (the "Découvrir la Thaïlande" pages): the shortcode gives the map
   column an inline 50 % width, meant for the map beside the text. On phones the map becomes the
   list of location cards, stacked under the text: full width there. */
@media (max-width: 767px) {
	.locations-lite .row .col[style] {
		max-width: none !important;
		margin-top: 0 !important;
	}
}
 .locations .container {
	 padding: 50px 30px;
}
 @media (min-width: 768px) {
	 .locations .container {
		 padding: 100px 30px;
	}
}
 @media (min-width: 969px) {
	 .locations .container {
		 padding: 100px;
	}
}
 .locations .container .row {
	 display: flex;
	 align-items: center;
	 flex-wrap: wrap;
}
 .locations .container .row .col {
	 width: 100%;
}
 @media (min-width: 768px) {
	 .locations .container .row .col {
		 width: 39%;
	}
}
 .locations .container .row .col:first-of-type {
	 margin: 0 0 30px;
}
 @media (min-width: 768px) {
	 .locations .container .row .col:first-of-type {
		 margin: 0;
		 width: 60%;
		 padding: 0 100px 0 0;
	}
}
 .locations__map {
	 width: 100%;
	 background-image: url('../img/map.svg');
	 background-position: center;
	 background-repeat: no-repeat;
	 background-size: contain;
	 position: relative;
	 margin: 0 0 10px;
}
 .locations__map:last-of-type {
	 margin: 0;
}
 @media (max-width: 768px) {
	 .locations__map {
		 padding: 0 !important;
		 background-image: none;
	}
}
 @media (min-width: 768px) {
	 .locations__map {
		 margin: 0;
	}
}
 .locations__map__dot {
	 position: absolute;
	 transform: translate3d(-50%, -50%, 0);
	 height: 30px;
	 width: 30px;
	 border-radius: 100%;
	 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	 padding: 0;
	 appearance: none;
	 border: 5px solid #fff;
	 cursor: pointer;
	 background-color: #ee1b91;
	 transition: all 0.3s ease;
}
 @media (max-width: 768px) {
	 .locations__map__dot {
		 display: none;
	}
}
 .locations__map__dot.is-active {
	 border-color: rgba(255, 237, 194, 1);
	 transition: all 0.3s ease;
}
 .locations__map__list {
	 display: flex;
	 opacity: 0;
	 visibility: hidden;
	 cursor: pointer;
	 height: 250px;
	 position: relative;
	 width: 100%;
	 display: flex;
	 margin: 0 0 10px;
         border-radius: 6px;
         overflow: hidden;
	/* Only the fade and slide: with "all", z-index changed at the end of the transition and the
	   card showed under the dots while appearing. */
	transition: opacity 0.45s cubic-bezier(0.65, 0, 0.076, 1), visibility 0.45s cubic-bezier(0.65, 0, 0.076, 1), margin-top 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
 @media (min-width: 768px) {
	 .locations__map__list {
		 margin: 0;
		 position: absolute;
		 z-index: 5; /* always above the dots, also while fading in or out (hidden cards are not clickable) */
		 width: 350px;
		 height: 200px;
		 margin-top: 30px;
	}
	 .locations__map__list.is-active {
		 opacity: 1;
	 	 visibility: visible;
		 z-index: 5;
	  	 margin-top: 0px;
	}
}
 @media (max-width: 768px) {
	 .locations__map__list {
		 left: 0 !important;
		 top: 0 !important;
		 transform: none !important;
	 	 opacity: 1 !important;
		 visibility: visible !important;
		 z-index: 5;

	}
}
 .locations__map__list img {
	 position: absolute;
	 left: 0;
	 top: 0;
	 height: 100%;
	 width: 100%;
	 object-fit: cover;
}
 .locations__map__list span {
	 background-image: linear-gradient(0deg, rgb(0 0 0 / 62%), transparent);
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 padding: 12px 18px;
	 font-size: 1.5em;
	 color: #fff;
	 text-transform: uppercase;
	 font-weight: 700;
	 font-family: 'Open Sans Condensed', sans-serif;
}
 .locations__map__list span::before, .locations__map__list span::after {
	 position: absolute;
	 right: 25px;
	 top: 50%;
	 width: 6px;
	 height: 1px;
	 background-color: #ffc30a;
	 content: '';
	 transform-origin: right center;
	 transform: rotate(45deg) translate3d(0, -50%, 0);
}
 .locations__map__list span::after {
	 width: 5px;
	 transform: rotate(-45deg) translate3d(0, -50%, 0);
}
 

/* ---- Footer ---- */
.footer-hashtags-inline {
	text-align: center;
	margin-bottom: 10px;
}
.footer-hashtags-inline a {
	display: inline-block;
	margin: 0 8px 8px;
	padding: 6px 22px;
	border-radius: 99rem;
	background: linear-gradient(to right, #f7971e, #ffd200);
	color: #fff;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.8px;
	text-decoration: none;
}
.site-footer-signup-form-wrapper {
	background-position-y: 78%;
}
.sib-email-area {
	margin-bottom: 1em;
}
.fields-container .sib-email-area {
	margin-right: 1em;
}

/* Floating Messenger button */
.tat-messenger {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.tat-messenger svg {
	width: 36px;
	height: 36px;
}

/* Homepage sections fade in on scroll. Only added by JS, so content stays visible without it.
   The main content (#primary) is deliberately left out: hiding it delayed the first paint. */
.tat-fade {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.tat-fade.is-visible {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.tat-fade { opacity: 1; transition: none; }
}

/* ---- Event page ---- */
.event-buttons .button {
	margin: 0 8px 8px 0;
}

/* Practical information box under an event */
.event-details {
	margin: 2em 0;
	padding: 1.5em 1.75em;
	border-radius: 8px;
	background: #f7f7f7;
}
.event-details-title {
	margin: 0 0 0.75em;
	font-size: 1.1em;
}
.event-details-address {
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
	margin: 0 0 0.75em;
}
.event-details-address svg {
	flex: none;
	margin-top: 0.3em;
}
.event-details-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.event-details-links a::after {
	content: " \2197";
}

/* Newsletter bar with its own texts (TAT settings newsletter_title / _text / _follow): a dark veil
   over the background picture, white text, the social icons under it. Sites without these settings
   keep the plain bar. */
.site-bottom-signup.tat-signup {
	color: #fff;
}
.site-bottom-signup.tat-signup::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
}
.site-bottom-signup.tat-signup > .container {
	position: relative;
}
.site-bottom-signup.tat-signup .widget-title {
	margin-bottom: 0.4em;
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.site-bottom-signup.tat-signup .tat-signup-text {
	margin: 0 0 1.5em;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	text-align: center;
}
.site-bottom-signup.tat-signup .tat-signup-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: 1rem;
}
.site-bottom-signup.tat-signup .tat-signup-follow-label {
	font-weight: 600;
	letter-spacing: 0.04em;
}
.site-bottom-signup.tat-signup .social-nav {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-bottom-signup.tat-signup .social-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 1.1rem;
	text-decoration: none;
	transition: background 0.2s ease;
}
.site-bottom-signup.tat-signup .social-nav a:hover,
.site-bottom-signup.tat-signup .social-nav a:focus {
	background: linear-gradient(135deg, var(--gradient-start, #ed1c91), var(--gradient-end, #ffc20e));
}
.site-bottom-signup.tat-signup .widget.widget_mc4wp_form_widget .widget-title {
	font-size: clamp(1.75rem, 4vw, 3rem);
}
.site-bottom-signup.tat-signup .widget.widget_mc4wp_form_widget .tat-signup-follow {
	width: auto;
}
.site-bottom-signup.tat-signup .tat-signup-follow > *,
.site-bottom-signup.tat-signup .social-nav li,
.site-bottom-signup.tat-signup .social-nav i {
	margin: 0 !important;
}
.site-bottom-signup.tat-signup::before {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}

/* ---- Site menu (inc/menu.php, docs/menu.md) ----
   Panel opened by the header's hamburger: a modal <dialog> sliding in from the right, its
   ::backdrop as the overlay. The page behind does not scroll while it is open (the gutter keeps
   the scrollbar's room, so nothing moves). */
html.tat-menu-open {
	overflow: hidden;
	scrollbar-gutter: stable;
}
.tat-menu {
	--tat-menu-bg: #000;
	--tat-menu-fg: #fff;
	--tat-menu-muted: rgba(255, 255, 255, 0.72);
	--tat-menu-line: rgba(255, 255, 255, 0.14);
	--tat-menu-hover: rgba(255, 255, 255, 0.07);
	position: fixed;
	inset: 0 0 0 auto;
	width: min(400px, 100vw);
	max-width: 100vw;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--tat-menu-bg);
	color: var(--tat-menu-fg);
	font-size: 16px;
	line-height: 1.4;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.tat-menu[open] {
	display: flex;
	flex-direction: column;
}
/* Eaven sets "* { margin: 0 auto }", which would centre every flex item of the panel. */
.tat-menu * {
	margin: 0;
}
.tat-menu.is-open {
	transform: none;
}
.tat-menu::backdrop {
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.28s;
}
.tat-menu.is-open::backdrop {
	opacity: 1;
}
@media (max-width: 599px) {
	.tat-menu {
		width: 100vw;
	}
}

/* Head: languages (BE) and the close button */
.tat-menu__head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 10px 10px 6px 24px;
}
/* Site name where there is no language switcher (FR, NL): a label, not a link */
.tat-menu__site {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--tat-menu-muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.tat-menu__langs ul {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tat-menu__langs a {
	display: block;
	padding: 5px 12px;
	border: 1px solid var(--tat-menu-line);
	border-radius: 8px; /* small chips: 14 px would make them pills */
	color: inherit;
	font-size: 14px;
	text-decoration: none;
}
.tat-menu__langs a.is-current {
	background: var(--tat-menu-fg);
	border-color: var(--tat-menu-fg);
	color: var(--tat-menu-bg);
}
.tat-menu button.tat-menu__close {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
}
.tat-menu__close::before,
.tat-menu__close::after {
	content: "";
	position: absolute;
	top: 21px;
	left: 11px;
	width: 22px;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}
.tat-menu__close::after {
	transform: rotate(-45deg);
}
.tat-menu__close:hover {
	background: var(--tat-menu-hover);
}

/* Search */
.tat-menu__search {
	position: relative;
	padding: 6px 24px 14px;
}
.tat-menu .tat-menu__search input[type="search"] {
	width: 100%;
	height: 44px;
	padding: 0 14px 0 44px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--tat-menu-line);
	border-radius: 6px;
	color: inherit;
	font-size: 16px; /* 16px or more: iOS does not zoom on focus */
}
.tat-menu__search input[type="search"]::placeholder {
	color: var(--tat-menu-muted);
	opacity: 1;
}
.tat-menu .tat-menu__search button {
	position: absolute;
	top: 6px;
	left: 24px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--tat-menu-muted);
	cursor: pointer;
}

/* Menu: links, and parent rows that open their sub-menu */
.tat-menu__nav {
	padding-bottom: 16px;
	border-top: 1px solid var(--tat-menu-line);
}
.tat-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tat-menu__item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--tat-menu-line);
}
.tat-menu__sub .tat-menu__item {
	border: 0;
}
.tat-menu a.tat-menu__link,
.tat-menu button.tat-menu__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 24px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}
.tat-menu a.tat-menu__link:hover,
.tat-menu button.tat-menu__toggle:hover {
	background: var(--tat-menu-hover);
	color: inherit;
	opacity: 1;
}
.tat-menu a:focus-visible,
.tat-menu button:focus-visible,
.tat-menu input:focus-visible {
	outline: 2px solid var(--tat-menu-fg);
	outline-offset: -2px;
}
.tat-menu .tat-menu__sub a.tat-menu__link,
.tat-menu .tat-menu__sub button.tat-menu__toggle {
	min-height: 44px;
	padding: 8px 24px 8px 40px;
	color: var(--tat-menu-muted);
	font-size: 16px;
}
.tat-menu .tat-menu__sub .tat-menu__sub a.tat-menu__link,
.tat-menu .tat-menu__sub .tat-menu__sub button.tat-menu__toggle {
	padding-left: 56px;
	font-size: 15px;
}
.tat-menu .tat-menu__sub .tat-menu__sub .tat-menu__sub a.tat-menu__link {
	padding-left: 72px;
}
.tat-menu .tat-menu__sub a.tat-menu__link:hover,
.tat-menu .tat-menu__sub button.tat-menu__toggle:hover,
.tat-menu .tat-menu__sub .is-open > button.tat-menu__toggle {
	color: var(--tat-menu-fg);
}
.tat-menu a.tat-menu__link[aria-current="page"] {
	color: var(--tat-menu-fg);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--tat-menu-fg);
}
.tat-menu__item--all .tat-menu__link::after {
	content: "\2192";
	margin-left: 2px;
}
.tat-menu__chevron {
	flex: none;
	width: 9px;
	height: 9px;
	margin: -4px 4px 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
}
.tat-menu__toggle[aria-expanded="true"] .tat-menu__chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Accordion: rows 0fr -> 1fr animates the height without measuring it. Closed sub-menus are
   also invisible, so their links are out of the Tab order. */
.tat-menu__sub {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.22s ease, visibility 0s linear 0.22s;
}
.tat-menu__sub > ul {
	min-height: 0;
	overflow: hidden;
}
.tat-menu__item.is-open > .tat-menu__sub {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.22s ease, visibility 0s;
}
.tat-menu__item.is-open > .tat-menu__sub > ul {
	padding-bottom: 8px;
}

/* Social icons (Eaven's social-nav icons) */
.tat-menu__social {
	margin-top: auto;
	padding: 12px 18px 24px;
}
.tat-menu__social ul.social-nav li a {
	width: 44px;
	height: 44px;
	color: inherit;
	line-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
	.tat-menu,
	.tat-menu::backdrop,
	.tat-menu__sub,
	.tat-menu__chevron {
		transition: none;
	}
}

/* ---- Buttons (docs/menu.md, "Buttons and hero") ----
   Shape: soft rounded rectangles, one radius on the three sites. Eaven's "Rounded Corner"
   setting (customizer eaven_buttons_shape = button-rounded, set by homepage/configure.php and
   hero-ctas.php) gives 4 px; the same selectors get 14 px here. Core Button blocks too (WordPress
   and pages.css make them pills); the FR "file" buttons keep their own card corners. Also: a
   visible keyboard focus ring (Eaven removes the outline of buttons), the gradient text shadow,
   the secondary hero button and the header link. */
:root {
	--tat-button-radius: 14px;
}
.button-rounded .site-content .button,
.button-rounded .widget-area .button,
.button-rounded .pagination a.load-more-btn,
.button-rounded input[type="submit"],
.button-rounded .widget.eaven-widget_cat .cat .cat-meta,
.wp-block-button .wp-block-button__link,
.tat-page .post-entry .wp-block-button .wp-block-button__link {
	border-radius: var(--tat-button-radius);
}
.button:focus-visible,
a.load-more-btn:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid #ed1c91;
	outline-offset: 3px;
}

/* The block editor's Button block, in posts and pages: the brand gradient instead of Eaven's black,
   like the theme's buttons (e.g. "Toutes nos vidéos sur YouTube" on the video pages). Buttons an
   editor gave a colour, outline buttons and the FR file buttons keep their own look. */
.wp-block-button:not(.is-style-outline):not(.is-style-tat-file) > .wp-block-button__link:not(.has-background) {
	background: linear-gradient(90deg, #ed1c91, #ffc20e);
	color: #fff;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	box-shadow: -10px 10px 22px -8px rgba(237, 28, 145, 0.55), 10px 10px 22px -8px rgba(255, 194, 14, 0.6);
	transition: box-shadow 0.2s ease;
}
.wp-block-button:not(.is-style-outline):not(.is-style-tat-file) > .wp-block-button__link:not(.has-background):hover {
	color: #fff;
	box-shadow: -12px 14px 28px -8px rgba(237, 28, 145, 0.65), 12px 14px 28px -8px rgba(255, 194, 14, 0.7);
}

/* Gradient buttons keep the brand gradient (#ed1c91 → #ffc20e). White text on its yellow end is
   only 1.6:1: a soft dark shadow gives the letters an edge there, without changing a colour
   (Eaven already sets them bold). */
.gradient-enabled .site-content .button:not(.tat-button-secondary),
.gradient-enabled .widget-area .button,
.gradient-enabled input[type="submit"] {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	/* Glow in the gradient's colours: pink under the left half, yellow under the right. Two
	   shadows rather than a blurred pseudo-element, which Eaven's buttons may already use. */
	box-shadow: -10px 10px 22px -8px rgba(237, 28, 145, 0.55), 10px 10px 22px -8px rgba(255, 194, 14, 0.6);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gradient-enabled .site-content .button:not(.tat-button-secondary):hover,
.gradient-enabled .widget-area .button:hover,
.gradient-enabled input[type="submit"]:hover {
	box-shadow: -12px 14px 28px -8px rgba(237, 28, 145, 0.65), 12px 14px 28px -8px rgba(255, 194, 14, 0.7);
}
/* Calls to action (homepage hero and section buttons), variant D of the CTA comparison
   (artifacts/tourism-cta-comparison.html): 16 px Heebo Medium in sentence case, no tracking,
   56 px tall, 16 px corners, a thin arrow on the gradient button. Phones: stacked, full width. */
.featured-section .button,
.site-content .featured-section .button,
.home-widget .button,
.site-content .home-widget .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 30px;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 500; /* Heebo Medium, already loaded */
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}
.gradient-enabled .site-content .featured-section .button:not(.tat-button-secondary),
.gradient-enabled .site-content .home-widget .button:not(.tat-button-secondary) {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* lighter than the general button rule above */
}
.featured-section .button.tat-button-secondary,
.site-content .featured-section .button.tat-button-secondary {
	text-shadow: none;
}
/* The arrow: an inline SVG used as a mask, so it takes the text colour. */
.featured-section .button:not(.tat-button-secondary)::after,
.home-widget .button:not(.tat-button-secondary)::after {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.18s ease;
}
.featured-section .button:not(.tat-button-secondary):hover::after,
.home-widget .button:not(.tat-button-secondary):hover::after {
	transform: translateX(3px);
}
/* The hero's two buttons sit in one paragraph separated by &nbsp;: lay them out as a row with a
   real gap (font-size 0 hides the spaces), stacked on phones. */
.featured-section .content p:has(> .button) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	font-size: 0;
}
.featured-section .content p:has(> .button) > .button,
.featured-section .button > span,
.home-widget .button > span {
	margin: 0; /* Eaven's auto side margins would take all the free space in the flex row */
}
@media (max-width: 600px) {
	.featured-section .content p:has(> .button) {
		flex-direction: column;
		align-items: stretch;
		padding: 0 16px;
	}
	/* The hero is a fixed 540 px with its content centred, under a ~100 px transparent header:
	   with the stacked buttons the title slid under the header. Let it grow instead. */
	.featured-section .custom-content {
		height: auto;
		min-height: 540px;
		padding: 112px 0 40px;
	}
	.featured-section .content p:has(> .button) .button {
		width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.featured-section .button::after,
	.home-widget .button::after {
		transition: none;
	}
}

/* No glow on the homepage hero (featured section): over the photo it only blurs the button. */
.gradient-enabled .featured-section .button,
.gradient-enabled .site-content .featured-section .button:not(.tat-button-secondary),
.gradient-enabled .site-content .featured-section .button:not(.tat-button-secondary):hover {
	box-shadow: none;
}

/* Homepage hero: the second call to action is solid white with dark text (#1d1d24 on white:
   16.8:1; the brand pink would be 4.1:1, under the 4.5:1 of small text), so the gradient one
   still leads. Hover: the text turns brand pink. */
.site-content .button.tat-button-secondary,
.gradient-enabled .site-content .button.tat-button-secondary {
	background: #fff;
	color: #1d1d24;
}
.no-touch .site-content .button.tat-button-secondary:hover,
.site-content .button.tat-button-secondary:focus-visible {
	background: #fff;
	color: #ed1c91;
}

/* Header link ("Header button" menu location, inc/menu.php): a quiet text link with an icon,
   printed just before the social icons, set off from them by a thin vertical divider on its
   right. From 768 px; below, the header has no room and the link is in the menu panel. */
.site-header .tat-header-cta {
	display: none;
}
@media (min-width: 768px) {
	.site-header .tat-header-cta {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 40px;
		margin: 0 10px 0 0;
		padding: 0 17px 0 4px;
		color: inherit;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.02em;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		transition: opacity 0.2s;
	}
	.site-header .tat-header-cta::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 1px;
		height: 18px;
		background: rgba(255, 255, 255, 0.4); /* not currentColor: the hover gradient makes the text transparent */
		transform: translateY(-50%);
	}
	.site-header .tat-header-cta i {
		font-size: 14px;
	}
	.site-header .tat-header-cta:hover,
	.site-header .tat-header-cta:focus-visible {
		color: inherit;
		opacity: 0.75;
	}
	.site-header .tat-header-cta:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}
.tat-menu__cta {
	padding: 14px 24px 0;
}
.tat-menu a.tat-menu__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--tat-menu-muted);
	font-size: 16px;
	text-decoration: none;
}
.tat-menu a.tat-menu__cta-link:hover {
	color: var(--tat-menu-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (min-width: 768px) {
	.tat-menu__cta {
		display: none;
	}
}

/* ---- Cards (docs/menu.md, "Cards and hero") ----
   One card radius on the three sites, the same family as the 16 px calls to action: post cards
   in lists, archives, search and related posts, event cards, the post navigation thumbnails,
   the homepage category tiles and intro photo, the single post / 404 content box, the map
   cards. Eaven had 4, 6 or 10 px (or none); the wrappers that hold the images already clip
   them (overflow: hidden), so the pictures follow the corners. Full-bleed heroes and banners
   stay square. The FR page design (pages.css) already uses 16 px. */
:root {
	--tat-card-radius: 16px;
}
.posts .post,
.posts.layout-block .post,
.posts.layout-block .post .post-link,
.posts.layout-block .post .featured-img,
.single .main > .container,
.error404 .main > .container,
.single .post-navigation .nav-links > *,
.widget.eaven-widget_cat .cat,
.widget.eaven-widget_cat .cat a,
.widget.eaven-widget_cat .cat .cat-bg,
.posts.search-results article .featured-img,
.locations__map .locations__map__list {
	border-radius: var(--tat-card-radius);
}
.posts .post .featured-img {
	border-top-left-radius: var(--tat-card-radius);
	border-top-right-radius: var(--tat-card-radius);
}
/* Homepage intro block: its photo runs to the edge of the screen on its own side, so only the
   inner corners are rounded; stacked on phones it is full width and stays square. */
@media (min-width: 768px) {
	.home-widget.intro-block .intro-img {
		overflow: hidden;
	}
	.home-widget.intro-block.text-right-column .intro-img {
		border-radius: 0 var(--tat-card-radius) var(--tat-card-radius) 0;
	}
	.home-widget.intro-block.text-left-column .intro-img {
		border-radius: var(--tat-card-radius) 0 0 var(--tat-card-radius);
	}
	.home-widget.intro-block:not(.stretched) .intro-img {
		border-radius: var(--tat-card-radius);
	}
}

/* ---- Homepage hero (Eaven featured section, background video) ----
   Full screen (Sébastien, 2026-10-01), at least Eaven's 540 px; on phones the content-fit rule
   above keeps its padding, with room at the bottom for the scroll-down button. .site-content:
   Eaven's inline customizer CSS, printed after this file, sets the 540 px with the same selector.
   (A white fade at the bottom was tried and removed the same day.) */
.site-content .featured-section.custom-section .custom-content {
	min-height: max(540px, 100vh);
	min-height: max(540px, 100svh);
}
/* The subtitle ran the full 1160 px on one line: a reading width, balanced over two lines. */
.featured-section .content p:not(:has(.button)) {
	max-width: 640px;
	margin-right: auto;
	margin-left: auto;
	font-size: 17px;
	line-height: 1.6;
	text-wrap: balance;
}
@media (max-width: 600px) {
	.featured-section .content p:not(:has(.button)),
	.featured-section .content .intro-title {
		padding-right: 16px;
		padding-left: 16px;
	}
}
@media (max-width: 600px) {
	.site-content .featured-section.custom-section .custom-content {
		padding-bottom: 104px;
	}
}
/* Scroll-down button (inc/setup.php prints it, theme.js moves it here): centred at the bottom of
   the hero, a white double chevron with a soft shadow (no ring or disc: they fought the video),
   gently drifting down. 56 px tap area. */
.tat-scroll-down {
	position: absolute;
	z-index: 2;
	bottom: 24px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-left: -28px;
	color: #fff;
	opacity: 0.9;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
	transition: opacity 0.2s ease;
	animation: tat-scroll-bounce 2.4s ease-in-out infinite;
}
.tat-scroll-down[hidden] {
	display: none;
}
.tat-scroll-down svg {
	width: 34px;
	height: 34px;
}
.tat-scroll-down:hover,
.tat-scroll-down:focus-visible {
	color: #fff;
	opacity: 1;
}
.tat-scroll-down:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 12px;
}
@keyframes tat-scroll-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
	.tat-scroll-down { animation: none; }
}
@media (max-width: 600px) {
	.tat-scroll-down {
		bottom: 20px;
	}
}
/* The video: Eaven sizes it once from the hero's height, before the page has its final height
   (fonts, the taller hero), and anchors it top left, so it could stop short of the bottom. It
   now always covers the hero, centred. */
.site-content .featured-section.custom-section .custom-content .section-bg video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Header hover (Sébastien, 2026-10-01) ----
   Eaven dims header items on hover (opacity), which over the white-on-video header reads as
   "darkened". No dimming anywhere in the header; where it sits on the video (homepage, before
   scrolling) or on the black sticky bar, the hovered icon or label takes the brand gradient. On
   inner pages it sits on the gradient banner itself, where items just stay full white. */
.no-touch .site-header .menu-toggle:hover,
.site-header .menu-toggle:focus,
.no-touch .site-header .header-icon:hover .toggle-button,
.no-touch .site-header .primary-menu li:not(.button):not(.current-menu-item) > a:hover,
.site-header .social-nav a:hover,
.site-header .tat-header-cta:hover,
.site-header .tat-header-cta:focus-visible {
	opacity: 1;
}
:is(body.home .site-header:not(.sticky):not(.is-sticky), .site-header.sticky, .site-header.is-sticky) .social-nav a:hover::before,
:is(body.home .site-header:not(.sticky):not(.is-sticky), .site-header.sticky, .site-header.is-sticky) .header-icon:hover .toggle-button::after,
.no-touch :is(body.home .site-header:not(.sticky):not(.is-sticky), .site-header.sticky, .site-header.is-sticky) .menu-toggle:hover::before,
:is(body.home .site-header:not(.sticky):not(.is-sticky), .site-header.sticky, .site-header.is-sticky) .tat-header-cta:hover {
	background: linear-gradient(90deg, #ed1c91, #ffc20e);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---- Market selector (inc/markets.php, docs/menu.md) ----
   A button with the current market's flag and short code, opening a white list of the four.
   Header: from 1024 px (narrower, the header row is full; the menu panel has it), after the
   icon group (search, sidebar) and before the hamburger, set off by the same thin divider as
   the professional-area link. Menu panel: in the top row, on every width. */
.tat-market {
	position: relative;
}
.tat-market * {
	margin: 0; /* Eaven's "* { margin: 0 auto }" */
}
.site-header .tat-market {
	display: none;
}
@media (min-width: 1024px) {
	.site-header .tat-market {
		display: block;
		order: 8; /* after the icon group (order 8, earlier in the HTML), before the hamburger (9) */
		margin: 0 8px 0 6px;
		padding-left: 12px;
	}
	.site-header .tat-market::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 1px;
		height: 18px;
		background: rgba(255, 255, 255, 0.4);
		transform: translateY(-50%);
	}
}
.tat-market .tat-market__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 6px;
	background: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}
.tat-market .tat-market__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.tat-market__flag {
	flex: none;
	display: block;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.tat-market__chevron {
	flex: none;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}
.tat-market__toggle[aria-expanded="true"] .tat-market__chevron {
	transform: translateY(1px) rotate(-135deg);
}
.tat-market__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	right: 0;
	min-width: 240px;
	padding: 6px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
	color: #1d1d24;
	text-align: left;
}
.tat-market__menu[hidden] {
	display: none;
}
.tat-market__menu ul {
	padding: 0;
	list-style: none;
}
.tat-market__menu li {
	padding: 0;
}
.tat-market .tat-market__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 10px;
	color: #1d1d24;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	opacity: 1;
}
.tat-market__link .tat-market__flag {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.tat-market .tat-market__link:hover,
.tat-market .tat-market__link:focus-visible {
	background: #fdf0f7;
	color: #1d1d24;
}
.tat-market .tat-market__link:focus-visible {
	outline: 2px solid #ed1c91;
	outline-offset: -2px;
}
.tat-market .tat-market__link.is-current {
	font-weight: 600;
}
.tat-market__link.is-current::after { /* check mark */
	content: "";
	flex: none;
	width: 10px;
	height: 5px;
	margin-left: auto;
	border-bottom: 2px solid #ed1c91;
	border-left: 2px solid #ed1c91;
	transform: translateY(-2px) rotate(-45deg);
}
/* Header hover, as the other header items (see "Header hover"): the code takes the gradient. */
:is(body.home .site-header:not(.sticky):not(.is-sticky), .site-header.sticky, .site-header.is-sticky) .tat-market__toggle:hover .tat-market__code {
	background: linear-gradient(90deg, #ed1c91, #ffc20e);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* Menu panel: an outlined button in the top row, its list opening to the right. */
.tat-menu .tat-market .tat-market__toggle {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--tat-menu-line);
	font-size: 14px;
}
.tat-menu .tat-market .tat-market__toggle:hover {
	background: var(--tat-menu-hover);
}
.tat-menu .tat-market__menu {
	right: auto;
	left: 0;
}
.tat-menu .tat-market + .tat-menu__site {
	text-align: center;
}

/* GSpeech read-aloud player on single posts (inc/gspeech.php): room under it before the text. */
.tat-gspeech {
	margin: 0 0 1.5em;
}
.tat-gspeech:empty {
	display: none; /* until GSpeech's script fills it, no empty gap */
}