/* TalatYai — shared theme layer (2026-11).
   The dark theme is carried by this file plus the generated twins in
   template/css/dark/. Applied via html[data-theme]. */

html[data-theme="dark"] {color-scheme: dark;}
html[data-theme="light"] {color-scheme: light;}

/* Base surfaces and text */
html[data-theme="dark"], html[data-theme="dark"] body {background: #1b2029;}
html[data-theme="dark"] body {color: #ffffff;}

/* Form controls: dark fields everywhere, even where no light rule existed */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background-color: #364354;
	border-color: #455368;
	color: #ffffff;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder {color: #a3afbf; opacity: 1;}
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus {border-color: #087be4;}
html[data-theme="dark"] input:not([type]):disabled, html[data-theme="dark"] select:disabled {opacity: 0.55;}
html[data-theme="dark"] ::selection {background: #087be4; color: #ffffff;}
html[data-theme="dark"] {scrollbar-color: #455368 #1b2029;}

/* Images and photos keep their colours; slight dim keeps whites comfortable */
html[data-theme="dark"] img {filter: brightness(0.92);}
html[data-theme="dark"] img:hover {filter: none;}
html[data-theme="dark"] .sp-header-logo img, html[data-theme="dark"] a.logo img {filter: none;}

/* Inline data-sp-style colours that the generated twins cannot reach */
html[data-theme="dark"] [data-sp-style*="color:#2477c9"] {color: #60b5ff !important;}

/* Personal information page */
html[data-theme="dark"] .ty-account-page {color: #ffffff;}
html[data-theme="dark"] .ty-account-head p, html[data-theme="dark"] .ty-account-panel__head p {color: #ffffff;}
html[data-theme="dark"] .ty-account-page h1.ty-account-title, html[data-theme="dark"] .ty-account-panel__head h2 {color: #ffffff;}
html[data-theme="dark"] .ty-account-panel {background: #303b4c; border-color: #455368;}
html[data-theme="dark"] .ty-account-panel__head {background: #252c37; border-bottom-color: #455368;}
html[data-theme="dark"] .ty-field > label {color: #ffffff;}
html[data-theme="dark"] .ty-account-check label {color: #ffffff;}
html[data-theme="dark"] .ty-account-divider {background: #455368;}
html[data-theme="dark"] .ty-account-note {color: #ffffff;}
html[data-theme="dark"] .ty-theme-card {background: #364354; border-color: #455368;}
html[data-theme="dark"] .ty-theme-card:hover {border-color: #7f8a96;}
html[data-theme="dark"] .ty-theme-card svg {stroke: #ffffff;}
html[data-theme="dark"] .ty-theme-card strong {color: #ffffff;}
html[data-theme="dark"] .ty-theme-card span {color: #ffffff;}
html[data-theme="dark"] .ty-theme-card.is-active {border-color: #60b5ff; box-shadow: 0 0 0 1.5px #60b5ff inset;}
html[data-theme="dark"] .ty-theme-status {color: #7fd49a;}

/* The cookie window and the empty-results screen (ty-components) */
html[data-theme="dark"] .ty-cookie-dialog, html[data-theme="dark"] .ty-cookie-close {background: #303b4c;}
html[data-theme="dark"] .ty-cookie-close svg {stroke: #ffffff;}
html[data-theme="dark"] .ty-no-results__art {filter: brightness(0.85);}

/* Fond de page : #1b2029 (prioritaire sur body.sp-site-page des feuilles jumelles) */
html[data-theme="dark"] body.sp-site-page, html[data-theme="dark"] body.sp-site-page.sp-home-page, html[data-theme="dark"] body.sp-site-page .categories {background: #1b2029 !important;}
html[data-theme="dark"] .ty-theme-panel .ty-account-panel__head {background: #252c37;}

/* ===== Palette 3 (maquette validée) : fond #1b2029 < nav #202733 < header #252c37 < cartes #303b4c < champs #364354 ===== */
/* Zones de page : fond général (les cartes gardent #303b4c). Les règles d'origine portent !important. */
html[data-theme="dark"] body.sp-site-page .sp-site-surface,
html[data-theme="dark"] body.sp-site-page .sp-site-surface > .container-100,
html[data-theme="dark"] body.sp-home-page .sp-site-surface--home,
html[data-theme="dark"] body.sp-home-page main.sp-site-surface--home,
html[data-theme="dark"] body.sp-home-page .sp-home-canvas,
html[data-theme="dark"] body.sp-site-page .sp-home-directory-shell {background: #1b2029 !important;}

/* Header */
html[data-theme="dark"] body.sp-site-page header.header {background: #252c37; border-color: #455368; color: #ffffff;}
html[data-theme="dark"] body.sp-site-page header.header a:not(.sp-header-deposit) {color: #ffffff;}
html[data-theme="dark"] body.sp-site-page header.header a:not(.sp-header-deposit):hover {color: #60b5ff;}
html[data-theme="dark"] body.sp-site-page header.header svg {color: #60b5ff;}

/* Navigation des catégories : un seul fond continu, aucun rectangle par catégorie */
html[data-theme="dark"] body.sp-site-page .sp-category-navigation,
html[data-theme="dark"] body.sp-site-page #ty-home-nav {background: #202733; border-color: #455368; color: #ffffff;}
html[data-theme="dark"] body.sp-site-page #ty-home-nav .ty-home-nav-trigger {background: transparent !important; color: #ffffff !important;}
html[data-theme="dark"] body.sp-site-page #ty-home-nav .ty-home-nav-trigger:hover,
html[data-theme="dark"] body.sp-site-page #ty-home-nav .ty-home-nav-trigger[aria-expanded="true"] {background: transparent !important; color: #60b5ff !important;}

/* Barre de recherche (les règles d'origine portent !important : mêmes sélecteurs, chargés après) */
html[data-theme="dark"] body.sp-site-page.sp-modern-header header#ty-site-header.header .sp-header-search,
html[data-theme="dark"] body.sp-site-page.sp-modern-header header.header .sp-header-shell .sp-header-main .sp-header-search {background: #364354 !important; border-color: #455368 !important;}
html[data-theme="dark"] body.sp-site-page header.header .sp-header-search input {background: #364354; color: #ffffff;}
html[data-theme="dark"] body.sp-site-page header.header .sp-header-search button {background: #087be4; border-color: #087be4; color: #ffffff;}
html[data-theme="dark"] body.sp-site-page header.header .sp-header-search button svg {color: #ffffff; stroke: #ffffff;}

/* Panneau « Trouvez. Achetez. Vendez. » : ardoise #293548, dégradé léger, deux vagues en SVG (arrière-plan, sans clic, sans animation) */
html[data-theme="dark"] body.sp-home-page .index-container .sp-home-hero {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 260' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23304662' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23087be4' stop-opacity='.10'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23304662' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23168ff2' stop-opacity='.09'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 260V205C120 150 250 120 380 135C500 150 560 215 700 232C820 246 920 245 1000 232V260Z'/%3E%3Cpath fill='url(%23b)' d='M1000 260V140C900 112 800 118 700 160C600 202 520 220 430 238C380 248 330 255 290 260Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 70%,
		linear-gradient(160deg, #304662 0%, #293548 45%, #243247 100%);
	border-color: #455368; color: #ffffff;
}
html[data-theme="dark"] body.sp-home-page .index-container .sp-home-hero .sp-home-deposit-link {background: linear-gradient(180deg, #168ff2 0%, #087be4 100%) !important; color: #ffffff;}

/* Pied de page */
html[data-theme="dark"] body.sp-site-page footer.footer.sp-footer-v2,
html[data-theme="dark"] .sp-footer-v2 {background: #202733 !important; color: #ffffff;}

/* Icône du compte connecté : même pastille bleu nuit que « Mes recherches » et « Favoris » */
html[data-theme="dark"] body.ty-capture-fixes.sp-site-page.sp-modern-header header#ty-site-header.header .header-links .menu > a.connexion.sp-header-login svg {background: #2a3a51 !important; color: #60b5ff;}

/* Thème clair TalatYai : fond, surfaces, champs et textes. */
html:not([data-theme="dark"]) {
	--ty-light-page: #F9F9F9;
	--ty-light-surface: #FFFFFF;
	--ty-light-divider: #D8DADF;
	--ty-light-field: #A5AAB0;
	--ty-light-ink: #102F59;
	--ty-light-placeholder: #535C66;
	--ty-light-focus: #3269A3;
	--ty-light-footer: #EAF0F6;
	--ty-light-footer-divider: #D1DAE4;
	background-color: var(--ty-light-page) !important;
}

html:not([data-theme="dark"]) body.sp-site-page,
html:not([data-theme="dark"]) body.sp-site-page.sp-home-page,
html:not([data-theme="dark"]) body.sp-site-page:has(> .dashboard-menu),
html:not([data-theme="dark"]) body.sp-site-page:has(main .ad-page-container),
html:not([data-theme="dark"]) body.sp-site-page:has(main > .container-100 > .search-results-container:not(.sp-dashboard-results):not(.shop)),
html:not([data-theme="dark"]) body.sp-site-page:has(> .dashboard-menu) main.sp-site-surface,
html:not([data-theme="dark"]) body.sp-site-page main.sp-site-surface:has(.ad-page-container),
html:not([data-theme="dark"]) body.sp-site-page main.sp-site-surface:has(> .container-100 > .search-results-container:not(.sp-dashboard-results):not(.shop)),
html:not([data-theme="dark"]) body.sp-site-page :is(
	main.sp-site-surface, main.sp-site-surface > .container-100,
	#background-block, .sp-home-canvas, .ty-reference-shell, .sp-checkout-shell,
	.ad-page-container, .ad-page-parent-container, .ad-page-large-container, .ad-page-small-container
) {
	background-color: var(--ty-light-page) !important;
}

html:not([data-theme="dark"]) body.sp-site-page {
	color: var(--ty-light-ink);
}

html:not([data-theme="dark"]) body.sp-site-page main.sp-site-surface {
	--ty-frame-line: var(--ty-light-divider);
}

html:not([data-theme="dark"]) body.sp-site-page :is(
	header#ty-site-header.header, .sp-category-navigation, #ty-home-nav
) {
	background-color: var(--ty-light-surface) !important;
	border-color: var(--ty-light-divider) !important;
}

html:not([data-theme="dark"]) body.sp-site-page :is(
	.index-container .sp-home-hero, .ty-reference-page .ty-panel,
	.ty-reference-page .ty-review-panel, .ty-reference-page .ty-payment-card,
	.ty-reference-page:is(.ty-step-1,.ty-step-3) .ty-deposit-stage,
	.ty-account-panel, .ty-account-panel__head,
	.ty-dashboard-summary > .ty-dashboard-summary-card,
	.sp-login-card, .sp-signup-card, .sp-header-search-menu,
	.sp-listing-summary-row, .sp-checkout-billing, .sp-checkout-preview, .sp-invoice-table,
	.sp-modern-select-panel, .sp-location-panel, #ty-home-nav .ty-home-category-menu
) {
	background-color: var(--ty-light-surface) !important;
	border-color: var(--ty-light-divider) !important;
}

/* Fond de l'annuaire des catégories et des provinces. */
html:not([data-theme="dark"]) body.sp-site-page .sp-home-directory-shell {
	background-color: var(--ty-light-footer) !important;
	border-top: 1px solid var(--ty-light-footer-divider) !important;
}

html:not([data-theme="dark"]) body.sp-site-page .sp-home-directory nav + nav {
	border-top-color: var(--ty-light-footer-divider) !important;
}

html:not([data-theme="dark"]) body.sp-site-page .ty-reference-page
#form-ad#form-ad#form-ad .ty-choice-list {
	background-color: var(--ty-light-surface) !important;
	border-color: var(--ty-light-divider) !important;
}

html:not([data-theme="dark"]) body.sp-site-page main.sp-site-surface
.ty-list-row > .sp-ad-card:not(.background-framed) {
	border-color: var(--ty-light-divider) !important;
}

html:not([data-theme="dark"]) body.sp-site-page :is(
	.ty-reference-page .ty-stage-header h1, .ty-reference-page .ty-panel-title,
	.ty-reference-page #form-ad :is(label,.ty-field-label):not(.form-error,[role="alert"]),
	.ty-account-page h1.ty-account-title, .ty-account-panel__head h2,
	.ty-field > label, .sp-home-hero-copy h1, .sp-login-card h2,
	.sp-signup-card h2, .sp-listing-summary h1, .ty-modal-heading #ty-filter-title
) {
	color: var(--ty-light-ink) !important;
}

/* Les états d'erreur et les champs en lecture seule gardent leurs styles. */
html:not([data-theme="dark"]) body.sp-site-page :is(
	main.sp-site-surface, .ty-reference-page #form-ad, .ty-account-page, #sp-filter-drawer.ty-filter-modal
) :is(
	input:not([type]), input:is([type="text"],[type="email"],[type="password"],[type="tel"],
		[type="url"],[type="number"],[type="search"],[type="date"],[type="time"],[type="datetime-local"]),
	textarea, select
):not(.form-error,[aria-invalid="true"],:disabled,[readonly],.form-error input,.form-error select,
	.form-error textarea,.sp-native-select-hidden,.ty-native-select,
	[data-ty-category-source],.sp-modern-select-search input,.ty-select-search input,.sp-listing-summary-search > input[type="search"]) {
	background-color: var(--ty-light-surface) !important;
	border-color: var(--ty-light-field) !important;
	color: var(--ty-light-ink) !important;
}

html:not([data-theme="dark"]) body.sp-site-page :is(
	header#ty-site-header.header .sp-header-main .sp-header-search,
	.sp-listing-summary-search, .sp-modern-select-search,
	.sp-location-trigger, .sp-listing-summary-filter, .ty-select-button,
	.sp-modern-select:not(.form-error,.is-disabled) > .sp-modern-select-trigger
):not(.form-error,[aria-invalid="true"],:disabled) {
	background-color: var(--ty-light-surface) !important;
	border-color: var(--ty-light-field) !important;
}

html:not([data-theme="dark"]) body.sp-site-page
header#ty-site-header.header .sp-header-shell .sp-header-main .sp-header-search:not(:focus-within) {
	border: 1px solid var(--ty-light-field) !important;
}

html:not([data-theme="dark"]) body.sp-site-page .ty-reference-page
#form-ad#form-ad#form-ad .ty-choice-trigger:not(:disabled,[aria-invalid="true"],.ty-choice-error .ty-choice-trigger) {
	background-color: var(--ty-light-surface) !important;
	border-color: var(--ty-light-field) !important;
}

html:not([data-theme="dark"]) body.sp-site-page .ty-reference-page
#form-ad#form-ad#form-ad :is(.ty-choice-trigger,.ty-choice-option):not(
	:disabled,[aria-invalid="true"],.ty-choice-error .ty-choice-trigger
) {
	color: var(--ty-light-ink) !important;
	-webkit-text-fill-color: var(--ty-light-ink) !important;
}

html:not([data-theme="dark"]) body.sp-site-page
:is(input,textarea):not(.form-error,[aria-invalid="true"],:disabled,[readonly],.form-error input,.form-error textarea)::placeholder {
	color: var(--ty-light-placeholder) !important;
	opacity: 1;
}

html:not([data-theme="dark"]) body.sp-site-page :is(
	main.sp-site-surface :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],
		[type="tel"],[type="url"],[type="number"],[type="search"],[type="date"],[type="time"],
		[type="datetime-local"]),textarea,select),
	.sp-modern-select-trigger, .ty-choice-trigger, .ty-select-button, .sp-location-trigger, .sp-listing-summary-filter
):not(.form-error,[aria-invalid="true"],:disabled,[readonly],.form-error .sp-modern-select-trigger,
	.ty-choice-error .ty-choice-trigger,.sp-modern-select-search input,.ty-select-search input,
	.sp-listing-summary-search > input[type="search"]):focus-visible {
	outline: 2px solid var(--ty-light-focus) !important;
	outline-offset: 2px;
}

html:not([data-theme="dark"]) body.sp-site-page :is(
	header#ty-site-header.header .sp-header-main .sp-header-search, .sp-listing-summary-search,
	.sp-modern-select-search
):focus-within {
	border-color: var(--ty-light-focus) !important;
}

html:not([data-theme="dark"]) body.sp-site-page
header#ty-site-header.header .sp-header-shell .sp-header-main .sp-header-search:focus-within {
	border: 1px solid var(--ty-light-focus) !important;
}

/* Relier visuellement l'en-tête et les catégories en haut de page. */
html:not([data-theme="dark"]) body.sp-site-page:has(#ty-home-nav)
header#ty-site-header.header {
	border-bottom-color: transparent !important;
}

html:not([data-theme="dark"]) body.sp-site-page:has(#ty-home-nav)
header#ty-site-header.header + .header-end {
	background-color: var(--ty-light-surface);
}

html:not([data-theme="dark"]) body.sp-site-page #ty-home-nav {
	border-bottom-color: transparent !important;
}

/* Étendre le fond et le trait sans élargir la navigation ni ses menus. */
html:not([data-theme="dark"]) body.sp-site-page #ty-home-nav::before {
	content: "";
	position: absolute;
	inset: 0 0 -1px;
	z-index: -1;
	pointer-events: none;
	border-image: linear-gradient(to bottom,
		var(--ty-light-surface) calc(100% - 1px),
		var(--ty-light-divider) 0
	) 0 fill / 0 / 0 100vmax;
}

/* Encadré de navigation partagé par les pages du compte. */
html:not([data-theme="dark"]) body.sp-site-page.sp-modern-header .dashboard-menu {
	width: var(--ty-col) !important;
	background-color: var(--ty-light-surface) !important;
	border: 1px solid var(--ty-light-divider) !important;
	border-radius: 8px;
}

html:not([data-theme="dark"]) body.ty-capture-fixes.sp-site-page.sp-modern-header
.dashboard-menu > ul > li > a[aria-current="page"]::after {
	inset-inline: 15%;
	bottom: 0 !important;
	border-radius: 2px;
}

@media (min-width: 931px) {
	html:not([data-theme="dark"]) body.sp-site-page.sp-modern-header
	.dashboard-menu > ul > li {
		border-right-color: transparent;
	}

	html:not([data-theme="dark"]) body.sp-site-page.sp-modern-header
	.dashboard-menu > ul > li:not(:last-child)::before {
		content: "";
		position: absolute;
		inset-block: 25%;
		inset-inline-end: 0;
		border-inline-end: 1px solid var(--ty-light-divider);
		pointer-events: none;
	}
}

/* Les raccourcis suivent la largeur du menu, y compris après connexion. */
html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches {
	container: ty-search-shortcuts / inline-size;
}

html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches > div {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches span {
	overflow: visible;
	overflow-wrap: anywhere;
	text-overflow: clip;
	white-space: normal;
}

@container ty-search-shortcuts (min-width: 540px) {
	html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches > div {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches a {
		grid-template-columns: 20px minmax(0, 1fr) 8px;
		gap: 5px;
		padding-inline: 6px;
	}

	html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches svg {
		width: 20px;
		height: 20px;
	}
}

@container ty-search-shortcuts (max-width: 260px) {
	html body.sp-site-page #sp-header-search-menu .sp-header-quick-searches > div {
		grid-template-columns: minmax(0, 1fr);
	}
}