/* =================================================================
   TRÉSORS DE CHAPITRE — LES EFFETS MAGIQUES (partie CSS)

   Sommaire
   1. Réglages communs (couleurs des effets, durées)
   2. Les objets qui s'éveillent : cartes produit et Box
   3. Le coup de baguette (reflet qui balaie les images)
   4. Les sections qui se révèlent au défilement
   5. Le panier qui scintille
   6. Les ambiances d'univers (Dark Romance, Romantasy)
   7. Bannières vivantes
   8. Accessibilité : tout s'arrête si l'utilisatrice le demande

   Pour activer un effet sur un bloc de son choix, il suffit d'ajouter
   sa classe dans « Avancé → Classe(s) CSS additionnelle(s) » :
   - tdc-eveil     → l'élément se soulève avec un halo au survol
   - tdc-box       → version renforcée pour l'image de la Box
   - tdc-baguette  → le reflet de baguette balaie l'élément
   - tdc-reveal    → l'élément apparaît au défilement
   - tdc-banniere  → particules lentes en fond (à mettre sur un bloc Couverture)
   ================================================================= */


/* 1. RÉGLAGES COMMUNS ------------------------------------------- */

:root {
	--tdc-halo: rgba(107, 63, 160, 0.45);      /* violet translucide */
	--tdc-halo-2: rgba(201, 164, 92, 0.25);    /* or translucide */
	--tdc-ombre: 0 22px 40px -18px rgba(43, 18, 64, 0.55);
	--tdc-elan: cubic-bezier(0.2, 0.8, 0.2, 1); /* mouvement souple, comme soulevé */
	--tdc-duree: 450ms;
	/* Couleurs de la poussière d'étoiles, lues par magic.js */
	--tdc-etoiles: #C9A45C, #E6D8F2, #F4EDE4, #B48BE0;
}


/* 2. LES OBJETS QUI S'ÉVEILLENT --------------------------------- */

/* Les cartes produit de WooCommerce reçoivent l'effet automatiquement :
   Jessica n'a rien à faire quand elle ajoute un produit. */
.tdc-eveil,
.tdc-box,
.wc-block-product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li,
ul.products li.product {
	position: relative;
	isolation: isolate; /* le halo reste derrière la carte */
	transition: transform var(--tdc-duree) var(--tdc-elan),
	            box-shadow var(--tdc-duree) var(--tdc-elan);
	will-change: transform;
}

/* Le halo mauve, caché tant qu'on ne survole pas */
.tdc-eveil::before,
.tdc-box::before,
.wc-block-product::before,
.wc-block-grid__product::before,
.wp-block-woocommerce-product-template > li::before,
ul.products li.product::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--tdc-halo), var(--tdc-halo-2) 55%, transparent 75%);
	filter: blur(14px);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--tdc-duree) ease, transform var(--tdc-duree) var(--tdc-elan);
	pointer-events: none;
}

/* Sur ordinateur (souris) : au survol */
@media (hover: hover) and (pointer: fine) {
	.tdc-eveil:hover,
	.wc-block-product:hover,
	.wc-block-grid__product:hover,
	.wp-block-woocommerce-product-template > li:hover,
	ul.products li.product:hover {
		transform: translateY(-8px) rotate(-0.4deg);
	}

	.tdc-eveil:hover::before,
	.wc-block-product:hover::before,
	.wc-block-grid__product:hover::before,
	.wp-block-woocommerce-product-template > li:hover::before,
	ul.products li.product:hover::before {
		opacity: 1;
		transform: scale(1);
		animation: tdc-pulse 2.4s ease-in-out infinite;
	}

	/* La Box : elle flotte vraiment */
	.tdc-box:hover {
		transform: translateY(-14px) rotate(-1deg) scale(1.02);
		animation: tdc-flotte 3s ease-in-out 0.45s infinite;
	}

	.tdc-box:hover::before {
		inset: -18%;
		opacity: 1;
		transform: scale(1);
		animation: tdc-pulse 2s ease-in-out infinite;
	}
}

/* Sur téléphone (pas de survol) : magic.js ajoute « is-awake » quand
   l'objet entre dans l'écran ou qu'on le touche → il s'éveille une fois. */
.is-awake {
	animation: tdc-reveil 1.4s var(--tdc-elan) both;
}

.is-awake::before {
	animation: tdc-halo-flash 1.4s ease-out both;
}

@keyframes tdc-pulse {
	0%, 100% { opacity: 0.75; transform: scale(0.96); }
	50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes tdc-flotte {
	0%, 100% { transform: translateY(-14px) rotate(-1deg) scale(1.02); }
	50%      { transform: translateY(-20px) rotate(0.5deg) scale(1.02); }
}

@keyframes tdc-reveil {
	0%   { transform: translateY(0); }
	35%  { transform: translateY(-10px) rotate(-0.6deg); }
	100% { transform: translateY(0); }
}

@keyframes tdc-halo-flash {
	0%   { opacity: 0; transform: scale(0.8); }
	35%  { opacity: 1; transform: scale(1.02); }
	100% { opacity: 0; transform: scale(1.05); }
}


/* 3. LE COUP DE BAGUETTE ---------------------------------------- */

/* Le reflet passe sur les images des produits (et sur tout bloc tdc-baguette) */
.tdc-baguette,
.wc-block-components-product-image,
.wc-block-grid__product-image,
.wp-block-woocommerce-product-image,
ul.products li.product .woocommerce-LoopProduct-link {
	position: relative;
	overflow: hidden;
	display: block;
}

.tdc-baguette::after,
.wc-block-components-product-image::after,
.wc-block-grid__product-image::after,
.wp-block-woocommerce-product-image::after {
	content: "";
	position: absolute;
	inset: -20% -60%;
	background: linear-gradient(
		115deg,
		transparent 40%,
		rgba(230, 216, 242, 0.0) 44%,
		rgba(230, 216, 242, 0.55) 48%,
		rgba(255, 244, 214, 0.85) 50%,
		rgba(180, 139, 224, 0.45) 52%,
		transparent 58%
	);
	transform: translateX(-100%);
	pointer-events: none;
	mix-blend-mode: soft-light;
}

@media (hover: hover) and (pointer: fine) {
	.tdc-baguette:hover::after,
	.wc-block-product:hover .wc-block-components-product-image::after,
	.wc-block-grid__product:hover .wc-block-grid__product-image::after,
	.wp-block-woocommerce-product-template > li:hover .wp-block-woocommerce-product-image::after {
		animation: tdc-baguette 1.1s ease-out;
	}
}

/* Sur téléphone : le reflet passe une fois à l'apparition */
.is-awake .wc-block-components-product-image::after,
.is-awake .wc-block-grid__product-image::after,
.is-awake .wp-block-woocommerce-product-image::after,
.tdc-baguette.is-awake::after {
	animation: tdc-baguette 1.2s ease-out 0.2s;
}

@keyframes tdc-baguette {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}


/* 4. LES SECTIONS QUI SE RÉVÈLENT ------------------------------- */

/* Seulement si le JavaScript tourne (classe tdc-js) : sans lui, tout reste visible. */
.tdc-js .tdc-reveal {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(6px);
	transition: opacity 0.9s ease, transform 0.9s var(--tdc-elan), filter 0.9s ease;
}

.tdc-js .tdc-reveal.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}


/* 5. LE PANIER QUI SCINTILLE ------------------------------------ */

.tdc-scintille {
	animation: tdc-scintille 0.9s ease-out;
}

@keyframes tdc-scintille {
	0%   { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
	30%  { transform: scale(1.25); filter: drop-shadow(0 0 10px #C9A45C); }
	100% { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
}


/* 6. LES AMBIANCES D'UNIVERS ------------------------------------ */

/* Romantasy : nuit violette, or et étoiles */
body.univers-romantasy {
	--tdc-halo: rgba(180, 139, 224, 0.55);
	--tdc-halo-2: rgba(201, 164, 92, 0.3);
	--tdc-etoiles: #C9A45C, #E6D8F2, #FFFFFF, #B48BE0;
	background: linear-gradient(170deg, #2B1240 0%, #4B1B45 45%, #3A1D63 100%) fixed;
	color: #F4EDE4;
}

/* Dark Romance : noir, bordeaux, braises dorées */
body.univers-dark {
	--tdc-halo: rgba(140, 26, 50, 0.6);
	--tdc-halo-2: rgba(201, 164, 92, 0.3);
	--tdc-etoiles: #C9A45C, #E8B4A0, #8C1A32, #F4EDE4;
	background: linear-gradient(170deg, #141014 0%, #22101A 50%, #3E1220 100%) fixed;
	color: #F4EDE4;
}

/* Sur fond sombre : titres en or, texte en crème */
body.univers-romantasy :where(h1, h2, h3, h4, .wp-block-post-title),
body.univers-dark :where(h1, h2, h3, h4, .wp-block-post-title) {
	color: #C9A45C;
}

body.univers-romantasy a:where(:not(.wp-element-button)),
body.univers-dark a:where(:not(.wp-element-button)) {
	color: #F4EDE4;
}

/* L'en-tête reste crème : son logo et ses liens gardent la couleur prune */
body.univers-romantasy .tdc-entete a,
body.univers-dark .tdc-entete a {
	color: var(--wp--preset--color--prune);
}

/* Les champs (quantité, variantes) restent clairs et lisibles */
body.univers-romantasy :where(input, select, textarea),
body.univers-dark :where(input, select, textarea) {
	background: #FBF7F1;
	color: #2A1828;
}

/* Bouton Dark Romance : bordeaux */
body.univers-dark .wp-element-button,
body.univers-dark .wp-block-button__link,
body.univers-dark button.single_add_to_cart_button {
	background-color: #5C1A2B;
}

body.univers-dark .wp-element-button:hover,
body.univers-dark .wp-block-button__link:hover {
	background-color: #8C1A32;
}

/* Sur téléphone, « fixed » fait sauter le fond : on le désactive */
@media (max-width: 781px) {
	body.univers-romantasy,
	body.univers-dark {
		background-attachment: scroll;
	}
}


/* 7. BANNIÈRES VIVANTES ----------------------------------------- */

.tdc-banniere {
	position: relative;
	overflow: hidden;
}

/* Le canvas des particules, ajouté par magic.js */
.tdc-banniere > .tdc-particules {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* Le texte de la bannière reste au-dessus des particules */
.tdc-banniere > .wp-block-cover__inner-container {
	z-index: 2;
}


/* 8. ACCESSIBILITÉ ---------------------------------------------- */

/* Si le téléphone ou l'ordinateur demande de réduire les animations,
   on coupe tout. magic.js fait de même pour les étoiles. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.tdc-js .tdc-reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}
}


/* 9. REFLET SÉPARÉ DU HALO ---------------------------------------
   Sur une carte qui a déjà un halo (tdc-eveil), le reflet passe par
   une couche intérieure « tdc-reflet », sinon il couperait le halo. */
.tdc-reflet {
	position: absolute !important;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	.tdc-eveil:hover > .tdc-reflet::after {
		animation: tdc-baguette 1.1s ease-out;
	}
}

.tdc-eveil.is-awake > .tdc-reflet::after {
	animation: tdc-baguette 1.2s ease-out 0.2s;
}