/* =================================================================
   BOUTIQUE ET PAGES CATÉGORIES — bannières, dragons, roses, filtres
   ================================================================= */

/* La bannière et les filtres, placés sous l'en-tête, en pleine largeur */
.tdc-cat-zone {
	margin: 0 !important;
	width: 100%;
}

.tdc-cat-hero {
	position: relative;
	width: 100%;
	margin: 0 !important;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	padding: 56px 20px 64px;
	text-align: center;
}

.tdc-cat-hero__contenu {
	position: relative;
	z-index: 3;
	max-width: 680px;
	margin: 0 auto;
}

.tdc-cat-hero__titre {
	margin: 0;
	font-size: clamp(2.6rem, 11vw, 4.6rem) !important;
	line-height: 1.05;
}

.tdc-cat-hero__accroche {
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(1.4rem, 5vw, 1.9rem);
	font-style: italic;
	color: var(--wp--preset--color--or);
}

.tdc-cat-hero__texte,
.tdc-cat-hero__sous {
	max-width: 560px;
	margin: 16px auto 0;
	font-size: 1.05rem;
	opacity: 0.92;
}

.tdc-cat-hero__texte p {
	margin: 0;
}

.tdc-cat-hero__box {
	display: inline-block;
	margin-top: 24px;
	padding: 12px 22px;
	min-height: 44px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--or);
	color: var(--wp--preset--color--or) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.3s ease, color 0.3s ease;
}

.tdc-cat-hero__box:hover {
	background: var(--wp--preset--color--or);
	color: var(--wp--preset--color--prune) !important;
}

/* ---------- Boutique : fond crème, deux cartes d'univers ---------- */

.tdc-cat-hero--boutique {
	padding-bottom: 32px;
}

.tdc-cat-hero--boutique .tdc-cat-hero__titre {
	color: var(--wp--preset--color--prune);
}

.tdc-univers--compact {
	position: relative;
	z-index: 3;
	max-width: 900px;
	margin: 28px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	text-align: left;
}

.tdc-univers--compact .tdc-univers__carte {
	min-height: 150px;
	padding: 18px 16px;
	gap: 4px;
}

.tdc-univers--compact .tdc-univers__titre {
	font-size: 1.35rem;
}

.tdc-univers--compact .tdc-univers__lien {
	margin-top: 4px;
	font-size: 0.9rem;
}

/* ---------- Romantasy : nuit, lune, dragons ---------- */

.tdc-cat-hero--romantasy {
	min-height: 62svh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--creme);
	background:
		radial-gradient(ellipse at 50% 120%, rgba(180, 139, 224, 0.45), transparent 60%),
		linear-gradient(180deg, #160A24 0%, #2B1240 45%, #4B1B45 100%);
}

.tdc-cat-hero--romantasy .tdc-cat-hero__titre {
	color: var(--wp--preset--color--creme) !important;
}

.tdc-lune {
	position: absolute;
	top: 9%;
	right: 10%;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 38%, #FFF6DA, #F1DDA0 55%, #C9A45C);
	box-shadow: 0 0 40px 12px rgba(246, 227, 168, 0.35), 0 0 120px 40px rgba(180, 139, 224, 0.25);
	z-index: 1;
}

.tdc-ciel i {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #FFF6DA;
	box-shadow: 0 0 6px 1px rgba(246, 227, 168, 0.8);
	animation: tdc-scintille-ciel 3.6s ease-in-out infinite;
}

.tdc-ciel i:nth-child(1)  { top: 8%;  left: 6%; }
.tdc-ciel i:nth-child(2)  { top: 18%; left: 24%; animation-delay: 0.6s; }
.tdc-ciel i:nth-child(3)  { top: 6%;  left: 46%; animation-delay: 1.2s; }
.tdc-ciel i:nth-child(4)  { top: 28%; left: 62%; animation-delay: 1.8s; }
.tdc-ciel i:nth-child(5)  { top: 14%; left: 74%; animation-delay: 2.4s; }
.tdc-ciel i:nth-child(6)  { top: 36%; left: 90%; animation-delay: 0.3s; }
.tdc-ciel i:nth-child(7)  { top: 44%; left: 12%; animation-delay: 0.9s; }
.tdc-ciel i:nth-child(8)  { top: 60%; left: 4%;  animation-delay: 1.5s; }
.tdc-ciel i:nth-child(9)  { top: 70%; left: 86%; animation-delay: 2.1s; }
.tdc-ciel i:nth-child(10) { top: 82%; left: 30%; animation-delay: 2.7s; }
.tdc-ciel i:nth-child(11) { top: 52%; left: 52%; animation-delay: 3.1s; }
.tdc-ciel i:nth-child(12) { top: 24%; left: 38%; animation-delay: 0.2s; }
.tdc-ciel i:nth-child(13) { top: 88%; left: 64%; animation-delay: 1.1s; }
.tdc-ciel i:nth-child(14) { top: 40%; left: 78%; animation-delay: 1.7s; }

@keyframes tdc-scintille-ciel {
	0%, 100% { opacity: 0.2; transform: scale(0.7); }
	50%      { opacity: 1;   transform: scale(1.4); }
}

/* Les dragons : ils traversent la bannière, ailes battantes */
.tdc-dragon {
	position: absolute;
	left: 0;
	z-index: 2;
	pointer-events: none;
	animation: tdc-traverse linear infinite;
}

.tdc-dragon svg {
	display: block;
	width: 100%;
	height: auto;
	fill: #C9A45C;
	filter: drop-shadow(0 0 8px rgba(246, 227, 168, 0.35));
}

.tdc-dragon__vol {
	animation: tdc-ondule 2.4s ease-in-out infinite;
}

.tdc-aile {
	transform-box: view-box;
	animation: tdc-battement 0.9s ease-in-out infinite;
}

.tdc-aile--pres {
	transform-origin: 118px 62px;
}

.tdc-aile--loin {
	transform-origin: 126px 60px;
	opacity: 0.55;
	animation-delay: -0.12s;
}

/* Dragon 1 : grand, au premier plan, vers la droite */
.tdc-dragon--1 {
	top: 16%;
	width: 150px;
	animation-duration: 16s;
	animation-delay: -3s;
}

/* Dragon 2 : lointain, plus petit et plus pâle, vers la gauche */
.tdc-dragon--2 {
	top: 54%;
	width: 80px;
	opacity: 0.5;
	animation-name: tdc-traverse-retour;
	animation-duration: 24s;
	animation-delay: -11s;
}

.tdc-dragon--2 .tdc-dragon__vol {
	transform: scaleX(-1);
	animation-name: tdc-ondule-retour;
	animation-duration: 3s;
}

/* Dragon 3 : moyen, haut dans le ciel */
.tdc-dragon--3 {
	top: 6%;
	width: 100px;
	opacity: 0.75;
	animation-duration: 21s;
	animation-delay: -16s;
}

@keyframes tdc-traverse {
	from { transform: translateX(-200px); }
	to   { transform: translateX(calc(100vw + 40px)); }
}

@keyframes tdc-traverse-retour {
	from { transform: translateX(calc(100vw + 40px)); }
	to   { transform: translateX(-200px); }
}

@keyframes tdc-ondule {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50%      { transform: translateY(14px) rotate(2deg); }
}

@keyframes tdc-ondule-retour {
	0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2deg); }
	50%      { transform: scaleX(-1) translateY(12px) rotate(2deg); }
}

@keyframes tdc-battement {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(0.25) skewX(-8deg); }
}

/* ---------- Dark Romance : ombre, roses, pétales ---------- */

.tdc-cat-hero--dark {
	min-height: 62svh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--creme);
	background:
		radial-gradient(ellipse at 50% 110%, rgba(140, 26, 50, 0.55), transparent 60%),
		radial-gradient(ellipse at 50% 0%, rgba(201, 164, 92, 0.12), transparent 50%),
		linear-gradient(180deg, #0B080B 0%, #141014 40%, #2A0F18 100%);
}

.tdc-cat-hero--dark .tdc-cat-hero__titre {
	color: var(--wp--preset--color--creme) !important;
}

/* Les roses, posées dans les coins, qui se balancent doucement */
.tdc-rose {
	position: absolute;
	bottom: -14px;
	z-index: 2;
	transform-origin: 50% 100%;
	animation: tdc-balance 6s ease-in-out infinite;
}

.tdc-rose svg {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.tdc-rose--1 { left: -18px;  width: 130px; transform: rotate(8deg); }
.tdc-rose--2 { left: 70px;   width: 90px;  opacity: 0.8; animation-delay: -2s; }
.tdc-rose--3 { right: -14px; width: 120px; animation-delay: -4s; }

@keyframes tdc-balance {
	0%, 100% { rotate: -3deg; }
	50%      { rotate: 3deg; }
}

/* Les pétales (créés par categories.js) */
.tdc-petales {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.tdc-petale {
	position: absolute;
	top: -40px;
	left: var(--x, 50%);
	width: var(--t, 16px);
	animation: tdc-chute var(--d, 9s) linear var(--delai, 0s) infinite;
}

.tdc-petale span {
	display: block;
	animation: tdc-tangue var(--s, 3s) ease-in-out infinite alternate;
}

.tdc-petale svg {
	display: block;
	width: 100%;
	height: auto;
	animation: tdc-tournoie var(--r, 4s) linear infinite;
}

@keyframes tdc-chute {
	from { transform: translateY(0); opacity: 0; }
	8%   { opacity: 0.95; }
	90%  { opacity: 0.85; }
	to   { transform: translateY(calc(62svh + 120px)); opacity: 0; }
}

@keyframes tdc-tangue {
	from { transform: translateX(-26px); }
	to   { transform: translateX(26px); }
}

@keyframes tdc-tournoie {
	from { transform: rotate3d(1, 0.4, 0.2, 0deg); }
	to   { transform: rotate3d(1, 0.4, 0.2, 360deg); }
}

/* ---------- Filtres par type ---------- */

.tdc-filtres {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 8px;
	max-width: 1100px;
	margin: 24px auto 8px !important;
	padding: 4px 16px;
	overflow-x: auto;
	scrollbar-width: none;
	justify-content: flex-start;
}

.tdc-filtres::-webkit-scrollbar {
	display: none;
}

.tdc-filtre {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border-radius: 999px;
	border: 1.5px solid rgba(201, 164, 92, 0.55);
	background: var(--wp--preset--color--parchemin);
	color: var(--wp--preset--color--prune) !important;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: background 0.25s ease, color 0.25s ease;
}

.tdc-filtre.est-actif {
	background: var(--wp--preset--color--prune);
	color: var(--wp--preset--color--creme) !important;
	border-color: var(--wp--preset--color--or);
}

body.univers-dark .tdc-filtre.est-actif,
body.univers-romantasy .tdc-filtre.est-actif {
	background: var(--wp--preset--color--or);
	color: var(--wp--preset--color--prune) !important;
}

/* Produit masqué par un filtre */
.tdc-masque {
	display: none !important;
}

/* ---------- Écrans larges ---------- */

@media (min-width: 782px) {
	.tdc-cat-hero {
		padding: 80px 24px 88px;
	}

	.tdc-filtres {
		justify-content: center;
		flex-wrap: wrap;
	}

	.tdc-univers--compact .tdc-univers__carte {
		min-height: 200px;
		padding: 28px;
	}

	.tdc-univers--compact .tdc-univers__titre {
		font-size: 2rem;
	}

	.tdc-lune {
		width: 110px;
		height: 110px;
	}

	.tdc-dragon--1 { width: 230px; }
	.tdc-dragon--2 { width: 110px; }
	.tdc-dragon--3 { width: 150px; }

	.tdc-rose--1 { width: 200px; }
	.tdc-rose--2 { width: 130px; left: 130px; }
	.tdc-rose--3 { width: 190px; }
}

/* Accessibilité : tout s'arrête si l'utilisatrice le demande */
@media (prefers-reduced-motion: reduce) {
	.tdc-dragon,
	.tdc-dragon__vol,
	.tdc-aile,
	.tdc-rose,
	.tdc-ciel i {
		animation: none !important;
	}

	.tdc-dragon--1 { transform: translateX(60vw); }
	.tdc-dragon--2,
	.tdc-dragon--3,
	.tdc-petales {
		display: none;
	}
}