/*
Theme Name: Trésor d'Hier
Description: Thème WordPress pour la vitrine virtuelle de l'atelier pédagogique "Trésor d'Hier" (Cobeff) - magasin de seconde main + cafétéria. Pensé pour être géré par des stagiaires non-développeuses : simple, robuste, sans dépendances JS lourdes. Design moderne type boutique en ligne.
Author: comArt
Version: 1.1.0
Text Domain: tresor-dhier
Requires PHP: 7.4
Requires at least: 6.0
*/

/* ==========================================================================
   Reset minimal
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	position: relative; /* ancre .td-backdrop (photo de tête de page) */
	font-family: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	color: var(--td-text);
	line-height: 1.65;
	font-size: 16.5px;
	-webkit-font-smoothing: antialiased;
	background-color: var(--td-bg);
}
/* ==========================================================================
   Fond de site « premium » : plan fixe (parallaxe subtil) combinant
   - un treillis de losanges dorés très pâle (rappel de la gemme du logo, art-déco)
   - trois halos de couleur profonds (grenat, tan, or)
   - un grain de papier discret
   - un léger vignettage doux vers les bords
   Posé en position fixe derrière tout le contenu.
   ========================================================================== */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-color: var(--td-bg);
	background-image:
		/* vignettage doux */
		radial-gradient(140% 120% at 50% 40%, transparent 62%, rgba(28, 16, 8, .05) 100%),
		/* treillis de losanges bicolore : bordure dorée + bordure bordeaux
		   en alternance (rappel de la gemme du logo et du grenat du site) */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg fill='none' stroke-width='0.9'%3E%3Cpath d='M0 23 L23 0 L46 23 L23 46 Z' stroke='%23c4a882' opacity='0.16'/%3E%3Cpath d='M46 23 L69 0 L92 23 L69 46 Z' stroke='%238c1f28' opacity='0.13'/%3E%3Cpath d='M0 69 L23 46 L46 69 L23 92 Z' stroke='%238c1f28' opacity='0.13'/%3E%3Cpath d='M46 69 L69 46 L92 69 L69 92 Z' stroke='%23c4a882' opacity='0.16'/%3E%3C/g%3E%3C/svg%3E"),
		/* étoiles éparses */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23c4a882'%3E%3Cpath d='M40 30 l2.2 5.8 L48 38 l-5.8 2.2 L40 46 l-2.2-5.8 L32 38 l5.8-2.2 Z' opacity='.2'/%3E%3Cpath d='M190 150 l1.8 4.6 4.6 1.8 -4.6 1.8 -1.8 4.6 -1.8-4.6 -4.6-1.8 4.6-1.8 Z' opacity='.16'/%3E%3Cpath d='M110 220 l1.4 3.6 3.6 1.4 -3.6 1.4 -1.4 3.6 -1.4-3.6 -3.6-1.4 3.6-1.4 Z' opacity='.13'/%3E%3C/g%3E%3C/svg%3E"),
		/* grain de papier */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #fdfaf4 0%, #f6eddc 100%);
	background-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
	background-size: auto, 92px 92px, 260px 260px, 150px 150px, auto;
}
/* Photo d'ambiance en tête de page : défile avec le contenu et fond
   en crème avant le bloc hero (élément .td-backdrop dans header.php). */
.td-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: min(74vh, 680px);
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(253, 250, 244, .55) 0%, rgba(253, 250, 244, .82) 55%, rgba(253, 250, 244, 1) 100%),
		url('assets/img/hero-bg.jpg') center top / cover no-repeat;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
/* Halos « aurora » grenat/or qui dérivent lentement : le fond respire */
body::after {
	content: '';
	position: fixed;
	inset: -22%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(620px 500px at 18% 32%, rgba(155, 26, 46, .075), transparent 62%),
		radial-gradient(740px 580px at 82% 68%, rgba(196, 168, 130, .2), transparent 62%),
		radial-gradient(460px 420px at 68% 14%, rgba(212, 168, 130, .1), transparent 60%);
	animation: td-aurora 26s ease-in-out infinite alternate;
}
@keyframes td-aurora {
	from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
	to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
	body::after { animation: none; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.12;
	color: var(--td-heading);
}
h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* Révélation au défilement (amélioration progressive : n'agit que si .td-js) */
.td-reveal {
	transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
.td-js .td-reveal {
	opacity: 0;
	transform: translateY(22px);
}
.td-js .td-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.td-js .td-reveal { opacity: 1; transform: none; }
}

/* Petit sur-titre éditorial au-dessus des sections : filet doré + gemme */
.td-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3em;
	color: var(--td-color-primary);
	margin-bottom: 8px;
}
.td-eyebrow::before {
	content: '✦';
	font-size: .85em;
	color: var(--td-color-accent);
	letter-spacing: 0;
	animation: td-eyebrow-gem 3s ease-in-out infinite;
}
.td-eyebrow::after {
	content: '';
	width: 46px;
	height: 1.5px;
	background: linear-gradient(90deg, var(--td-color-accent), transparent);
}
@keyframes td-eyebrow-gem {
	0%, 100% { opacity: .5; transform: scale(.9) rotate(0deg); }
	50%      { opacity: 1; transform: scale(1.15) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
	.td-eyebrow::before { animation: none; }
}

/* Titre de section : grand serif avec mot accentué en italique dégradé
   et soulignement calligraphique doré (même signature que le hero) */
.td-section-head { margin-bottom: 14px; }
.td-section-head h2 {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3rem);
	letter-spacing: .005em;
}
.td-section-head h2 em {
	font-style: italic;
	font-weight: 700;
	background: linear-gradient(120deg, var(--td-color-primary) 25%, #c4a882 95%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.td-section-head h2::after {
	content: '';
	display: block;
	width: 130px;
	height: 9px;
	margin-top: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 Q 30 2 60 7 T 118 5' fill='none' stroke='%23c4a882' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	opacity: .85;
}

/* ==========================================================================
   Variables — les 4 premières sont pilotées par le thème saisonnier
   (inc/seasonal-theme.php), le reste en dérive.
   ========================================================================== */
:root {
	/* Palette alignée sur cobeff.be (cobeff-theme/assets/css/cobeff.css) */
	--td-color-primary: #9b1a2e;
	--td-color-accent: #c4b99a;
	--td-color-bg-banner: #f5edd6;
	--td-color-text-banner: #4a3828;

	--td-bg: #fdfaf4;
	--td-surface: #ffffff;
	--td-text: #4a3828;
	--td-heading: #1c1008;
	--td-muted: #8a7a68;
	--td-border: #ede0c0;

	--td-radius: 14px;
	--td-radius-sm: 10px;
	--td-shadow: 0 1px 3px rgba(30, 25, 15, .06), 0 8px 24px rgba(30, 25, 15, .07);
	--td-shadow-hover: 0 4px 12px rgba(30, 25, 15, .10), 0 16px 40px rgba(30, 25, 15, .13);
	--td-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   Structure générale
   ========================================================================== */
.td-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}
main.td-container { padding-top: 4px; padding-bottom: 48px; }

section { margin: 28px 0; }
/* La première section (carrousel sur l'accueil, contenu sur les autres pages)
   remonte pour que les cartes soient visibles dès l'arrivée, prix compris. */
main.td-container > section:first-child,
main.td-container > .td-section-head:first-child { margin-top: 10px; }

/* ==========================================================================
   Header
   ========================================================================== */
.td-header {
	/* Même ambiance que le bloc hero : photo de boutique sous voile clair */
	background:
		linear-gradient(100deg, rgba(255, 255, 255, .97) 0%, rgba(253, 250, 244, .93) 55%, rgba(245, 237, 214, .82) 100%),
		url('assets/img/hero-bg.jpg') center 30% / cover no-repeat;
	border-bottom: 1px solid var(--td-border);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 10px rgba(28, 16, 8, .05);
}
.td-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 20px;
	max-width: 1160px;
	margin: 0 auto;
	transition: padding .28s ease;
}
.td-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-decoration: none;
	white-space: nowrap;
}
/* !important + sélecteur ciblé : WooCommerce impose sinon une hauteur d'image
   sur ses pages (catalogue), ce qui gonflait énormément la barre de titre. */
.td-header .td-logo-img {
	height: 50px !important;
	width: auto !important;
	max-width: none !important;
	display: block;
	transition: height .28s ease;
}
/* Baseline « Magasin d'application de la Cobeff » avec filets dorés */
.td-logo-baseline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: .62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--td-color-primary);
	margin-top: -2px;
	max-height: 20px;
	overflow: hidden;
	transition: opacity .22s ease, max-height .28s ease, margin-top .28s ease;
}

/* Header compact au défilement : logo réduit, baseline repliée
   (classe « scrolled » posée par assets/js/tresor.js). */
.td-header.scrolled .td-header-inner { padding-top: 6px; padding-bottom: 6px; }
.td-header.scrolled .td-logo-img { height: 38px !important; }
.td-header.scrolled .td-logo-baseline {
	opacity: 0;
	max-height: 0;
	margin-top: -4px;
}
.td-logo-baseline-line {
	display: block;
	width: 22px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--td-color-accent));
}
.td-logo-baseline-line:last-child {
	background: linear-gradient(90deg, var(--td-color-accent), transparent);
}
.td-logo-mark {
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: var(--td-color-primary);
	flex: 0 0 auto;
}
.td-logo-mark svg { width: 100%; height: 100%; }
.td-logo-text {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--td-color-primary) 30%, var(--td-color-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.td-nav ul {
	list-style: none;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.td-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background var(--td-transition), color var(--td-transition);
}
.td-nav a:hover {
	background: var(--td-color-bg-banner);
	color: var(--td-color-primary);
}
/* Panier du menu : l'icône remplace le mot « Panier », dans la même liste
   que les autres entrées (même hauteur, même espacement). La pastille se met
   à jour en direct via les « cart fragments » WooCommerce. */
.td-nav ul { align-items: center; }
.td-menu-cart { display: inline-flex; align-items: center; }
/* a.td-cart-link : sélecteur renforcé pour neutraliser le padding des liens
   texte du menu (.td-nav a), qui écraserait l'icône dans son cercle. */
.td-nav a.td-cart-link,
.td-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	color: var(--td-heading);
	flex: 0 0 auto;
	transition: background .2s ease, color .2s ease;
}
.td-cart-link svg { width: 24px; height: 24px; flex: 0 0 auto; }
.td-cart-link:hover {
	background: var(--td-color-bg-banner);
	color: var(--td-color-primary);
}
.td-cart-count {
	position: absolute;
	top: -1px;
	right: -3px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--td-color-primary);
	color: #fff;
	font-size: .72rem;
	font-weight: 800;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
/* Mobile : logo au-dessus, menu en dessous sur toute la largeur */
@media (max-width: 640px) {
	.td-header-inner {
		flex-direction: column;
		gap: 6px;
		padding: 12px 16px 10px;
	}
	.td-nav ul { justify-content: center; gap: 2px; }
	/* Cibles tactiles confortables (~40 px de haut) */
	.td-nav a { padding: 11px 15px; font-size: .95rem; }
	/* L'icône panier vit dans le menu : pas de padding de lien texte */
	.td-nav .td-cart-link { padding: 0; }
}

/* ==========================================================================
   Bannière saisonnière (accroche)
   ========================================================================== */
/* Ticker rouge : bandeau défilant (accroche + adresse + mentions) */
.td-season-banner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(95deg, var(--td-color-primary) 0%, #7a1225 45%, var(--td-color-primary) 75%, var(--td-color-accent) 150%);
	color: #f5edd6;
	padding: 9px 0;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
	/* Fond léger fondu sur les bords pour un défilement « sans fin » */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.td-ticker-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: td-ticker-scroll 34s linear infinite;
}
.td-season-banner:hover .td-ticker-track {
	animation-play-state: paused;
}
@keyframes td-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.td-ticker-item { padding: 0 2px; }
.td-ticker-sep {
	color: var(--td-color-accent);
	margin: 0 24px;
	text-shadow: none;
}
/* Reflet lumineux qui balaie le bandeau */
.td-season-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .18) 50%, transparent 58%);
	transform: translateX(-100%);
	animation: td-banner-sheen 7s ease-in-out infinite;
	pointer-events: none;
}
@keyframes td-banner-sheen {
	0%, 60%  { transform: translateX(-100%); }
	88%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.td-ticker-track { animation: none; transform: none; }
	.td-season-banner::after { animation: none; }
}

/* ==========================================================================
   Hero d'accueil
   ========================================================================== */
.td-hero {
	position: relative;
	overflow: hidden;
	/* Photo d'ambiance sous un voile beige : le site respire sans gêner la lecture */
	background:
		linear-gradient(100deg, rgba(253, 250, 244, .97) 0%, rgba(253, 250, 244, .9) 55%, rgba(245, 237, 214, .68) 100%),
		url('assets/img/hero-bg.jpg') center 30% / cover no-repeat;
	border: 1px solid var(--td-border);
	border-radius: calc(var(--td-radius) + 6px);
	padding: clamp(20px, 3vw, 34px) clamp(20px, 4vw, 44px);
	text-align: left;
	box-shadow: var(--td-shadow);
}
/* Entrée douce du contenu du hero */
@keyframes td-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.td-hero .td-eyebrow,
.td-hero h1,
.td-hero p,
.td-hero .td-hero-actions {
	animation: td-fade-up .7s cubic-bezier(.2, .7, .3, 1) both;
}
.td-hero h1 { animation-delay: .08s; }
.td-hero p { animation-delay: .16s; }
.td-hero .td-hero-actions { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.td-hero .td-eyebrow, .td-hero h1, .td-hero p, .td-hero .td-hero-actions { animation: none; }
}

/* Effet signature sur le mot-clé du titre : italique serif, dégradé
   grenat → tan et soulignement dessiné à la main (SVG intégré) */
.td-accent {
	font-style: italic;
	font-weight: 700;
	background: linear-gradient(120deg, var(--td-color-primary) 20%, #c4a882 95%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	display: inline-block;
	padding-bottom: .12em;
}
.td-accent::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: .18em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 Q 30 2 60 7 T 118 5' fill='none' stroke='%23c4a882' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.td-hero h1 {
	margin: 0 0 10px;
	max-width: 20ch;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
.td-hero p {
	margin: 0 0 18px;
	font-size: 1rem;
	color: var(--td-text);
	max-width: 52ch;
}
.td-hero .td-eyebrow { margin-bottom: 6px; }
.td-hero .td-hero-actions .td-btn { padding: 11px 22px; }
.td-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Boutons
   ========================================================================== */
.button, button, input[type="submit"],
.td-btn {
	display: inline-block;
	background: var(--td-color-primary);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 13px 26px;
	font-size: .98rem;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--td-transition), box-shadow var(--td-transition), background var(--td-transition);
}
.button:hover, button:hover, input[type="submit"]:hover, .td-btn:hover {
	background: var(--td-color-accent);
	transform: translateY(-1px);
	box-shadow: var(--td-shadow);
}
/* Écrase les styles boutons de la feuille WooCommerce (spécificité + ordre de chargement) */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce button.button.alt, .woocommerce a.button.alt,
.wc-block-components-button {
	background-color: var(--td-color-primary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	transition: background var(--td-transition), transform var(--td-transition), box-shadow var(--td-transition);
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover,
.woocommerce input.button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover {
	background-color: var(--td-color-accent) !important;
	transform: translateY(-1px);
	box-shadow: var(--td-shadow);
}
.button:active, button:active, .td-btn:active { transform: translateY(0); }

.td-btn--ghost {
	background: transparent;
	color: var(--td-color-primary) !important;
	box-shadow: inset 0 0 0 2px var(--td-color-primary);
}
.td-btn--ghost:hover {
	background: var(--td-color-primary);
	color: #fff !important;
}

/* ==========================================================================
   Carrousel « manège » 3D : les cartes tournent autour d'un axe vertical.
   CSS pur ; rayon (--td-ring-radius) et angle par carte (--td-card-angle)
   calculés en PHP selon le nombre d'articles vedettes.
   ========================================================================== */
.td-carousel-3d {
	position: relative;
	perspective: 1400px;
	height: 345px;
	margin: 0;
	overflow: hidden;
}
/* Sol du manège : halo elliptique juste sous les cartes */
.td-carousel-3d::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 12px;
	width: min(72%, 560px);
	height: 30px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(28, 16, 8, .14), transparent 68%);
	pointer-events: none;
}
.td-carousel-ring {
	position: relative;
	width: 240px;
	height: 100%;
	margin: 0 auto;
	transform-style: preserve-3d;
	animation: td-ring-spin 36s linear infinite;
}
/* Pause uniquement quand le curseur/toucher est sur une CARTE produit
   (et non sur toute la zone du manège). */
.td-carousel-ring:has(.td-carousel-card:hover),
.td-carousel-ring:has(.td-carousel-card:active),
.td-carousel-ring:has(.td-carousel-card:focus) {
	animation-play-state: paused;
}
/* Le manège n'entame sa rotation qu'une fois ses photos chargées : sur une
   connexion réseau (≠ local), ça évite de voir des cartes encore vides passer
   devant. La classe .td-carousel-loading est retirée par le JS au chargement
   des images (repli de sécurité au bout de 3 s). Gaté par .td-js : sans
   JavaScript, le manège tourne immédiatement comme avant. */
.td-js .td-carousel-loading .td-carousel-ring {
	animation-play-state: paused;
}
/* La scène recule du rayon : la carte de face reste au plan de l'écran,
   quel que soit le nombre de cartes (sinon elle "avance" et déborde). */
@keyframes td-ring-spin {
	from { transform: translateZ(calc(-1 * var(--td-ring-radius))) rotateY(0deg); }
	to   { transform: translateZ(calc(-1 * var(--td-ring-radius))) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.td-carousel-ring { animation: none; }
}
.td-carousel-card {
	position: absolute;
	inset: 12px 0 auto;
	width: 240px;
	transform: rotateY(var(--td-card-angle)) translateZ(var(--td-ring-radius));
	backface-visibility: hidden;
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	overflow: hidden;
	box-shadow: var(--td-shadow);
	text-decoration: none;
}
.td-carousel-card img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.td-carousel-card .td-carousel-caption { padding: 14px 16px 16px; }
.td-carousel-card .name {
	font-weight: 700;
	color: var(--td-heading);
	margin-bottom: 8px;
	/* Réserve 2 lignes pour que le prix soit toujours à la même hauteur
	   (cartes alignées, quel que soit le nom du produit). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	line-height: 1.25;
}
.td-carousel-card .price {
	display: inline-block;
	background: var(--td-color-bg-banner);
	color: var(--td-color-primary);
	font-weight: 800;
	font-size: .95rem;
	padding: 4px 12px;
	border-radius: 999px;
}
/* ==========================================================================
   Sur smartphone/tablette étroite, le manège 3D devient un carrousel à
   glissement horizontal natif (swipe au doigt) : bien plus confortable et
   lisible qu'une rotation 3D. Même balisage, on neutralise juste la 3D.
   ========================================================================== */
@media (max-width: 760px) {
	.td-carousel-3d {
		perspective: none;
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding: 0 20px;
		padding: 6px 20px 14px;
		scrollbar-width: none;
	}
	.td-carousel-3d::-webkit-scrollbar { display: none; }
	.td-carousel-3d::after { display: none; } /* halo de sol : inutile à plat */
	.td-carousel-ring {
		position: static;
		width: max-content;
		height: auto;
		margin: 0;
		display: flex;
		gap: 16px;
		transform: none !important;
		animation: none !important;
		transform-style: flat;
	}
	.td-carousel-card {
		position: static;
		transform: none !important;
		width: 78vw;
		max-width: 300px;
		flex: 0 0 auto;
		scroll-snap-align: center;
		backface-visibility: visible;
	}
	/* Rappel visuel qu'on peut faire glisser : léger fondu sur les bords */
	.td-carousel-3d {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	}
}

/* ==========================================================================
   Carrousel accueil (CSS pur, scroll-snap)
   ========================================================================== */
.td-carousel {
	overflow: hidden;
	position: relative;
	padding: 8px 0 20px;
	/* Estompe les bords du bandeau, comme une vitrine sans fin visible */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.td-carousel-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: td-carousel-scroll 28s linear infinite;
}
.td-carousel:hover .td-carousel-track,
.td-carousel:focus-within .td-carousel-track {
	animation-play-state: paused;
}
@keyframes td-carousel-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.td-carousel-track { animation: none; }
}
.td-carousel-slide {
	flex: 0 0 auto;
	width: min(78vw, 300px);
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	overflow: hidden;
	box-shadow: var(--td-shadow);
	text-decoration: none;
	transition: transform var(--td-transition), box-shadow var(--td-transition);
}
.td-carousel-slide:hover {
	transform: translateY(-4px);
	box-shadow: var(--td-shadow-hover);
}
.td-carousel-slide img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	transition: transform .4s ease;
}
.td-carousel-slide:hover img { transform: scale(1.04); }
.td-carousel-caption { padding: 16px 18px 18px; }
.td-carousel-caption .name {
	font-weight: 700;
	color: var(--td-heading);
	margin-bottom: 6px;
}
.td-carousel-caption .price {
	display: inline-block;
	background: var(--td-color-bg-banner);
	color: var(--td-color-primary);
	font-weight: 800;
	font-size: .95rem;
	padding: 4px 12px;
	border-radius: 999px;
}
@media (min-width: 700px) {
	.td-carousel-slide { width: 260px; }
}

/* ==========================================================================
   Bandeau de réassurance (3 promesses, style boutique premium)
   ========================================================================== */
.td-values {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 30px;
}
/* Rapproche le bloc promesses du manège (les sections ont 40px par défaut) */
section.td-values { margin-top: 6px; }
section:has(.td-carousel-3d) { margin-bottom: 6px; }
@media (min-width: 700px) {
	.td-values { grid-template-columns: repeat(3, 1fr); }
}
.td-value {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	/* Fond papier à fins pointillés tan + dégradé crème */
	background:
		radial-gradient(rgba(196, 185, 154, .16) 1px, transparent 1.5px) 0 0 / 14px 14px,
		linear-gradient(150deg, #ffffff 0%, #fdf7ea 100%);
	border: 1px solid var(--td-border);
	border-left: 3px solid var(--td-color-bg-banner);
	border-radius: var(--td-radius);
	padding: 18px 20px;
	transition: transform var(--td-transition), box-shadow var(--td-transition), border-left-color var(--td-transition);
}
.td-value:hover {
	transform: translateY(-3px);
	box-shadow: var(--td-shadow);
	border-left-color: var(--td-color-primary);
}
.td-value:hover .td-value-icon { transform: scale(1.08) rotate(-6deg); }
.td-value-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--td-color-bg-banner);
	color: var(--td-color-primary);
	font-size: 1.2rem;
	transition: transform var(--td-transition);
}
.td-value strong {
	display: block;
	font-size: 1rem;
	color: var(--td-heading);
}
.td-value span { font-size: .9rem; color: var(--td-muted); }

/* ==========================================================================
   Cartes d'information (horaires, cafétéria…)
   ========================================================================== */
.td-infos {
	position: relative;
	overflow: hidden;
	/* Fond papier à fins pointillés tan + dégradé crème */
	background:
		radial-gradient(rgba(196, 185, 154, .16) 1px, transparent 1.5px) 0 0 / 16px 16px,
		linear-gradient(160deg, #ffffff 0%, #fdf7ea 78%, #f8efdb 100%);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	padding: 30px 28px 28px;
	box-shadow: var(--td-shadow);
	transition: transform var(--td-transition), box-shadow var(--td-transition);
}
/* Liseré supérieur dégradé grenat → tan (remplace l'ancienne tache) */
.td-infos::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--td-color-primary), var(--td-color-accent));
}
.td-infos:hover {
	transform: translateY(-3px);
	box-shadow: var(--td-shadow-hover);
}
.td-infos h2 { margin-top: 0; }
.td-infos.closed {
	border-color: #ecc9b8;
	background:
		radial-gradient(rgba(196, 185, 154, .14) 1px, transparent 1.5px) 0 0 / 16px 16px,
		linear-gradient(160deg, #fffdfb 0%, #fdf3ef 80%, #fbece4 100%);
}
.td-infos.closed::before {
	background: linear-gradient(90deg, #c0364a, #ecc9b8);
}

.td-infos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 760px) {
	.td-infos-grid { grid-template-columns: 1fr 1fr; }
}

.td-badge {
	display: inline-block;
	font-size: .8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.td-badge--open { background: #e5f4e6; color: #256d33; }
.td-badge--closed { background: #fbe9e4; color: #a5442a; }

/* ==========================================================================
   Catalogue WooCommerce (grille produits)
   ========================================================================== */
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 22px;
	list-style: none;
	padding: 0;
	margin: 24px 0;
}
@media (min-width: 700px) {
	.woocommerce ul.products, ul.products {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}
}
/* Le clearfix WooCommerce (::before/::after) deviendrait un élément de grille */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
ul.products li.product {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	overflow: hidden;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	box-shadow: var(--td-shadow);
	transition: transform var(--td-transition), box-shadow var(--td-transition);
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--td-shadow-hover);
}
.woocommerce ul.products li.product a img,
ul.products li.product img {
	width: 100% !important;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: 0 !important;
	transition: transform .4s ease;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem !important;
	font-weight: 700;
	color: var(--td-heading);
	padding: 14px 16px 2px !important;
}
.woocommerce ul.products li.product .price {
	color: var(--td-color-primary) !important;
	font-weight: 800 !important;
	font-size: 1.05rem !important;
	padding: 0 16px;
	margin-bottom: 4px !important;
}
.woocommerce ul.products li.product .button {
	margin: auto 16px 16px !important;
	text-align: center;
	padding: 11px 18px;
	font-size: .9rem;
}
/* Badge Promo */
.woocommerce span.onsale {
	background: var(--td-color-accent) !important;
	border-radius: 999px !important;
	font-weight: 800;
	padding: 4px 14px !important;
	line-height: 1.8 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	top: 12px !important;
	left: 12px !important;
}

/* Fiche produit */
.woocommerce div.product div.images img { border-radius: var(--td-radius); }
.woocommerce div.product p.price {
	color: var(--td-color-primary) !important;
	font-size: 1.5rem !important;
	font-weight: 800;
}

/* Notices WooCommerce */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--td-radius-sm) !important;
	border-top-width: 3px !important;
	background: var(--td-surface) !important;
	box-shadow: var(--td-shadow);
}
.woocommerce-message { border-top-color: var(--td-color-primary) !important; }
.woocommerce-message::before { color: var(--td-color-primary) !important; }

/* ==========================================================================
   Formulaires (checkout, mon compte…)
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="number"], textarea, select {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--td-text);
	background: var(--td-surface);
	border: 1.5px solid var(--td-border);
	border-radius: var(--td-radius-sm);
	transition: border-color var(--td-transition), box-shadow var(--td-transition);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--td-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--td-color-primary) 15%, transparent);
}
.woocommerce form .form-row label { font-weight: 600; font-size: .92rem; }
/* Petits écrans : prénom / nom empilés sur toute la largeur (plus confortable) */
@media (max-width: 480px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last,
	.woocommerce-page form .form-row-first,
	.woocommerce-page form .form-row-last {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-left: 0;
	}
}

/* Encadré checkout + tableau commande */
.woocommerce form.checkout,
.woocommerce-order-received .woocommerce-order {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	padding: 26px;
	box-shadow: var(--td-shadow);
}
.woocommerce table.shop_table {
	border: 1px solid var(--td-border) !important;
	border-radius: var(--td-radius-sm) !important;
	border-collapse: separate !important;
	overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--td-bg); }

#td_pickup_slot {
	background: var(--td-color-bg-banner);
	border-radius: var(--td-radius-sm);
	padding: 18px 20px;
	margin-top: 10px;
}
#td_pickup_slot h3 { margin-top: 0; font-size: 1.1rem; }

/* ==========================================================================
   Menu cafétéria (page Cafétéria : blocs réutilisables par les stagiaires)
   ========================================================================== */
.td-menu-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 26px 0;
}
@media (min-width: 700px) {
	.td-menu-grid { grid-template-columns: repeat(3, 1fr); }
}
.td-menu-card {
	background: linear-gradient(160deg, #ffffff 0%, #fdf7ea 100%);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	overflow: hidden;
	box-shadow: var(--td-shadow);
	transition: transform var(--td-transition), box-shadow var(--td-transition);
}
.td-menu-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--td-shadow-hover);
}
.td-menu-card img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	margin: 0;
}
.td-menu-card h3 {
	margin: 14px 18px 4px;
	font-size: 1.35rem;
}
.td-menu-card ul {
	list-style: none;
	margin: 0;
	padding: 6px 18px 18px;
}
.td-menu-card li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--td-border);
	font-size: .95rem;
}
.td-menu-card li:last-child { border-bottom: none; }
.td-menu-price {
	font-weight: 800;
	color: var(--td-color-primary);
	white-space: nowrap;
}

/* ==========================================================================
   Pages de contenu
   ========================================================================== */
article > h1 { margin-top: 28px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.td-footer {
	background: var(--td-heading);
	color: #cdc4b6;
	padding: 56px 20px 32px;
	margin-top: 72px;
	font-size: .93rem;
}
.td-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 760px) {
	.td-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.td-footer h3 {
	color: #fff;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.35rem;
	margin: 0 0 10px;
}
.td-footer-brand .td-footer-logo {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: linear-gradient(135deg, #f5edd6 30%, #c4a882 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.td-footer ul { list-style: none; margin: 0; padding: 0; }
.td-footer li { margin-bottom: 8px; }
.td-footer a { color: inherit; text-decoration: none; transition: color var(--td-transition); }
.td-footer a:hover { color: #fff; }
.td-footer p { margin: 8px 0 0; }
.td-footer-bottom {
	text-align: center;
	padding-top: 24px;
	font-size: .85rem;
	color: #948a7a;
}

/* ==========================================================================
   Histoire de l'objet : note manuscrite sur papier kraft, épinglée
   ========================================================================== */
.td-story {
	position: relative;
	background:
		radial-gradient(rgba(139, 106, 60, .08) 1px, transparent 1.5px) 0 0 / 12px 12px,
		linear-gradient(3deg, #f3e5c9 0%, #f9efd9 100%);
	border: 1px solid #e2cfa8;
	border-radius: 4px;
	padding: 18px 22px 16px;
	margin: 18px 0;
	transform: rotate(-1.2deg);
	box-shadow: 2px 4px 12px rgba(28, 16, 8, .12);
	max-width: 460px;
}
.td-story-pin {
	position: absolute;
	top: -9px;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #d9626f, #8c1f28 65%);
	box-shadow: 0 3px 4px rgba(28, 16, 8, .3);
}
.td-story h3 {
	font-family: 'Caveat', cursive;
	font-size: 1.5rem;
	margin: 0 0 4px;
	color: #8c1f28;
}
.td-story p {
	font-family: 'Caveat', cursive;
	font-size: 1.35rem;
	line-height: 1.35;
	margin: 0;
	color: #4a3828;
}

/* Certificat pièce unique */
.td-certificate {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1.5px dashed var(--td-color-accent);
	border-radius: 10px;
	padding: 9px 16px;
	margin: 4px 0 14px;
	background: rgba(245, 237, 214, .5);
	font-size: .88rem;
	color: var(--td-text);
}
.td-certificate svg { width: 26px; height: 26px; color: var(--td-color-primary); flex: 0 0 auto; }
.td-certificate strong { color: var(--td-color-primary); letter-spacing: .06em; }

/* ==========================================================================
   Tampon encreur « Réservé » sur les articles épuisés
   ========================================================================== */
li.product, .woocommerce ul.products li.product { position: relative; }
.td-stamp {
	position: absolute;
	top: 26%;
	left: 50%;
	z-index: 5;
	transform: translate(-50%, -50%) rotate(-14deg);
	font-family: 'DM Sans', sans-serif;
	font-weight: 800;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: #8c1f28;
	border: 3px double #8c1f28;
	border-radius: 6px;
	padding: 6px 18px;
	background: rgba(253, 250, 244, .55);
	mix-blend-mode: multiply;
	opacity: .85;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(circle at 30% 40%, #000 92%, transparent 100%);
	mask-image: radial-gradient(circle at 30% 40%, #000 92%, transparent 100%);
}
.td-stamped img { filter: grayscale(.45) opacity(.85); }

/* ==========================================================================
   Étiquette-prix façon brocante (kraft + ficelle) — fiche produit
   ========================================================================== */
.woocommerce div.product p.price {
	position: relative;
	display: inline-block;
	background: linear-gradient(160deg, #e8d5ae, #dbc493);
	border-radius: 6px 14px 14px 6px;
	padding: 10px 20px 10px 30px !important;
	transform: rotate(-2deg);
	box-shadow: 1px 3px 8px rgba(28, 16, 8, .18);
	font-size: 1.35rem !important;
}
.woocommerce div.product p.price::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	width: 9px;
	height: 9px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fdfaf4;
	box-shadow: inset 0 1px 2px rgba(28, 16, 8, .35);
}
.woocommerce div.product p.price::after {
	content: '';
	position: absolute;
	left: -26px;
	top: 38%;
	width: 30px;
	height: 16px;
	border: 1.6px solid #a89e80;
	border-right: none;
	border-radius: 50% 0 0 50%;
	transform: rotate(18deg);
}

/* ==========================================================================
   Cœur favori (cartes + fiche) et panneau « Mes coups de cœur »
   ========================================================================== */
.td-fav {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 6;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50% !important;
	background: rgba(253, 250, 244, .92) !important;
	border: 1px solid var(--td-border);
	padding: 0 !important;
	cursor: pointer;
	transition: transform var(--td-transition);
	box-shadow: 0 2px 6px rgba(28, 16, 8, .12);
}
.td-fav:hover { transform: scale(1.12); background: #fff !important; }
.td-fav svg { width: 20px; height: 20px; fill: none; stroke: #9b1a2e; stroke-width: 1.8; transition: fill var(--td-transition); }
.td-fav.is-fav svg { fill: #9b1a2e; animation: td-heart-pop .35s cubic-bezier(.2, 2.2, .4, 1); }
@keyframes td-heart-pop { 50% { transform: scale(1.35); } }
.summary .td-fav { position: static; display: inline-grid; vertical-align: middle; margin-right: 8px; }

.td-fav-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 900;
	width: 54px;
	height: 54px;
	border-radius: 50% !important;
	display: grid;
	place-items: center;
	background: var(--td-color-primary) !important;
	box-shadow: 0 6px 18px rgba(28, 16, 8, .3);
	padding: 0 !important;
}
.td-fav-toggle svg { width: 24px; height: 24px; fill: #f5edd6; }
.td-fav-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--td-color-accent);
	color: #1c1008;
	font-size: .72rem;
	font-weight: 800;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	padding: 0 5px;
}
.td-fav-panel {
	position: fixed;
	right: 18px;
	bottom: 84px;
	z-index: 901;
	width: min(340px, calc(100vw - 36px));
	max-height: 60vh;
	overflow: auto;
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	box-shadow: var(--td-shadow-hover);
	padding: 16px;
}
.td-fav-panel-head { display: flex; justify-content: space-between; align-items: center; }
.td-fav-panel-head h3 { margin: 0; font-size: 1.3rem; }
.td-fav-close { background: transparent !important; color: var(--td-muted) !important; padding: 4px 8px !important; }
.td-fav-list { list-style: none; margin: 10px 0 0; padding: 0; }
.td-fav-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--td-border); }
.td-fav-list img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.td-fav-list a { text-decoration: none; font-weight: 600; font-size: .92rem; flex: 1; }
.td-fav-list .price { color: var(--td-color-primary); font-weight: 700; font-size: .85rem; }
.td-fav-remove { background: transparent !important; color: var(--td-muted) !important; padding: 2px 6px !important; font-size: 1rem; }

/* Bouton partager */
.td-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent !important;
	color: var(--td-color-primary) !important;
	box-shadow: inset 0 0 0 1.5px var(--td-color-primary);
	padding: 9px 18px !important;
	font-size: .9rem !important;
	vertical-align: middle;
}
.td-share svg { width: 16px; height: 16px; }

/* ==========================================================================
   Coup de cœur de la semaine
   ========================================================================== */
.td-pick {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	overflow: hidden;
	border-radius: calc(var(--td-radius) + 6px);
	border: 1px solid var(--td-border);
	background: linear-gradient(140deg, #fffdf8, #f8efdb);
	box-shadow: var(--td-shadow);
}
@media (min-width: 780px) {
	.td-pick { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.td-pick-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.td-pick-body { padding: clamp(22px, 4vw, 44px); align-self: center; }
.td-pick-body h2 { margin: 0 0 10px; }
.td-pick-story {
	font-family: 'Caveat', cursive;
	font-size: 1.4rem;
	color: #6a5138;
	line-height: 1.35;
	margin: 0 0 12px;
}
.td-pick-price { font-size: 1.3rem; font-weight: 800; color: var(--td-color-primary); margin: 0 0 16px; }

/* ==========================================================================
   Compteur d'impact écologique
   ========================================================================== */
.td-impact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 700px) { .td-impact-grid { grid-template-columns: repeat(3, 1fr); } }
.td-impact-item {
	text-align: center;
	background: linear-gradient(160deg, #ffffff, #fdf7ea);
	border: 1px solid var(--td-border);
	border-top: 3px solid #4a7c3a;
	border-radius: var(--td-radius);
	padding: 22px 16px;
	box-shadow: var(--td-shadow);
}
.td-impact-item strong {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2.2rem, 4vw, 3rem);
	color: #2f5426;
	line-height: 1.1;
}
.td-impact-item span { color: var(--td-muted); font-size: .92rem; }

/* ==========================================================================
   Coulisses : polaroïds inclinés
   ========================================================================== */
.td-polaroids {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}
@media (min-width: 700px) { .td-polaroids { grid-template-columns: repeat(3, 1fr); } }
.td-polaroid {
	margin: 0;
	background: #fff;
	padding: 12px 12px 8px;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(28, 16, 8, .16);
	transform: rotate(-2.4deg);
	transition: transform var(--td-transition);
}
.td-polaroid:nth-child(2) { transform: rotate(1.8deg); }
.td-polaroid:nth-child(3) { transform: rotate(-1.1deg); }
.td-polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; position: relative; }
.td-polaroid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.td-polaroid figcaption {
	font-family: 'Caveat', cursive;
	font-size: 1.25rem;
	color: #4a3828;
	text-align: center;
	padding: 8px 4px 6px;
}

/* ==========================================================================
   Animation d'ouverture : la gemme se dessine (1x par session, via JS)
   ========================================================================== */
.td-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: #fdfaf4;
	animation: td-intro-out .5s ease 1.9s both;
}
.td-intro-inner { text-align: center; }
.td-intro svg { width: 92px; height: 92px; }
.td-intro path {
	fill: none;
	stroke: #8c1f28;
	stroke-width: 1.4;
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	animation: td-intro-draw 1.2s ease-out forwards;
}
.td-intro path.gold { stroke: #c4a882; animation-delay: .35s; }
.td-intro-name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.5rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8c1f28;
	margin-top: 14px;
	opacity: 0;
	animation: td-fade-up .6s ease 1s both;
}
@keyframes td-intro-draw { to { stroke-dashoffset: 0; } }
@keyframes td-intro-out { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   Particules saisonnières (flocons / pétales) — posées par tresor.js
   ========================================================================== */
.td-flake {
	position: fixed;
	top: -4vh;
	z-index: 2;
	pointer-events: none;
	animation: td-fall linear forwards;
}
@keyframes td-fall {
	to { transform: translateY(108vh) rotate(340deg); opacity: .1; }
}

/* ==========================================================================
   Transitions de page fluides (navigateurs compatibles)
   ========================================================================== */
@view-transition { navigation: auto; }
@keyframes td-vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-new(root) { animation: td-vt-in .28s ease both; }
::view-transition-old(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-new(root), ::view-transition-old(root) { animation: none; }
}

/* ==========================================================================
   Mode sombre automatique (chaleureux : brun profond, crème, or)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--td-bg: #201914;
		--td-surface: #2b221b;
		--td-text: #e8ddcd;
		--td-heading: #f5edd6;
		--td-muted: #b3a48d;
		--td-border: #43372c;
		--td-color-bg-banner: #3a2e23;
		--td-color-text-banner: #e8ddcd;
	}
	body::before {
		background-color: var(--td-bg);
		background-image:
			radial-gradient(140% 120% at 50% 40%, transparent 62%, rgba(0, 0, 0, .28) 100%),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg fill='none' stroke-width='0.9'%3E%3Cpath d='M0 23 L23 0 L46 23 L23 46 Z' stroke='%23c4a882' opacity='0.10'/%3E%3Cpath d='M46 23 L69 0 L92 23 L69 46 Z' stroke='%23c0364a' opacity='0.10'/%3E%3Cpath d='M0 69 L23 46 L46 69 L23 92 Z' stroke='%23c0364a' opacity='0.10'/%3E%3Cpath d='M46 69 L69 46 L92 69 L69 92 Z' stroke='%23c4a882' opacity='0.10'/%3E%3C/g%3E%3C/svg%3E"),
			linear-gradient(180deg, #241c16 0%, #1b1510 100%);
		background-repeat: no-repeat, repeat, no-repeat;
		background-size: auto, 92px 92px, auto;
	}
	.td-backdrop { opacity: .5; }
	.td-header {
		background:
			linear-gradient(100deg, rgba(32, 25, 20, .96) 0%, rgba(32, 25, 20, .9) 55%, rgba(43, 34, 27, .85) 100%),
			url('assets/img/hero-bg.jpg') center 20% / cover no-repeat;
		border-bottom-color: var(--td-border);
	}
	.td-nav a { color: var(--td-text); }
	.td-nav a:hover { background: #3a2e23; color: #e8b64c; }
	.td-cart-link { color: var(--td-text); }
	.td-cart-link:hover { background: #3a2e23; color: #e8b64c; }
	.td-hero {
		background:
			linear-gradient(100deg, rgba(32, 25, 20, .94) 0%, rgba(32, 25, 20, .86) 55%, rgba(43, 34, 27, .7) 100%),
			url('assets/img/hero-bg.jpg') center 30% / cover no-repeat;
		border-color: var(--td-border);
	}
	.td-infos, .td-value, .td-menu-card, .td-impact-item, .td-pick,
	ul.products li.product, .woocommerce ul.products li.product,
	.td-carousel-card, .td-fav-panel,
	.woocommerce form.checkout, .woocommerce-order-received .woocommerce-order {
		background: var(--td-surface) !important;
		border-color: var(--td-border);
		color: var(--td-text);
	}
	.td-infos.closed { background: #32241f !important; }
	input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
	input[type="date"], input[type="number"], textarea, select {
		background: #241c16;
		border-color: var(--td-border);
		color: var(--td-text);
	}
	.td-story { background: #3a2e23; border-color: #55462f; }
	.td-story p, .td-story h3 { color: #e8ddcd; }
	.td-polaroid { background: #2b221b; }
	.td-polaroid figcaption { color: #d9cbb2; }
	.woocommerce table.shop_table th { background: #241c16; }
	.td-eyebrow, .td-carousel-caption .name { color: #e8b64c; }
	.td-accent, .td-section-head h2 em {
		background: linear-gradient(120deg, #e07a8a 20%, #e8c688 95%);
		-webkit-background-clip: text;
		background-clip: text;
	}
	.td-intro { background: #201914; }
}