/* ==========================================================================
   AVATTO — Couche cinematique (Lots 2 & 3)
   --------------------------------------------------------------------------
   Enrichissement PROGRESSIF pose par-dessus le HTML d'Elementor/Woodmart.
   Aucun markup n'est reecrit : on habille l'existant.

   SECURITE — regle absolue de ce fichier :
   tout etat initial qui masque du contenu est conditionne a .av-anim,
   classe posee par JavaScript. Sans JS, ou si le JS echoue, le contenu
   reste entierement visible. Un visiteur ne peut jamais se retrouver
   devant une page blanche a cause d'une animation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typographie — resserrage des grands titres
   -------------------------------------------------------------------------- */
.home h1, .home h2,
.single-product .product_title,
.single-product .entry-summary h2 {
	letter-spacing: var(--av-tracking-tight);
	line-height: var(--av-lh-tight);
}

.home h2 {
	font-size: clamp(1.6rem, 2.4vw + 0.6rem, 2.6rem);
}

/* --------------------------------------------------------------------------
   2. Reveal au scroll — opacite + translation, uniquement GPU
   -------------------------------------------------------------------------- */
.av-anim .av-reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition:
		opacity var(--av-dur-slow) var(--av-ease),
		transform var(--av-dur-slow) var(--av-ease);
	will-change: opacity, transform;
}

.av-anim .av-reveal.av-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Variantes directionnelles (epic-design : directional reveals) */
.av-anim .av-reveal[data-av-from="left"]  { transform: translate3d(-38px, 0, 0); }
.av-anim .av-reveal[data-av-from="right"] { transform: translate3d(38px, 0, 0); }
.av-anim .av-reveal[data-av-from="scale"] { transform: scale(0.965); }
.av-anim .av-reveal.av-in[data-av-from]   { transform: none; }

/* Cascade : chaque enfant direct entre legerement apres le precedent */
.av-anim .av-stagger > * {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity var(--av-dur) var(--av-ease),
		transform var(--av-dur) var(--av-ease);
}
.av-anim .av-stagger.av-in > * { opacity: 1; transform: none; }
.av-anim .av-stagger.av-in > *:nth-child(1) { transition-delay: 0ms; }
.av-anim .av-stagger.av-in > *:nth-child(2) { transition-delay: 70ms; }
.av-anim .av-stagger.av-in > *:nth-child(3) { transition-delay: 140ms; }
.av-anim .av-stagger.av-in > *:nth-child(4) { transition-delay: 210ms; }
.av-anim .av-stagger.av-in > *:nth-child(5) { transition-delay: 280ms; }
.av-anim .av-stagger.av-in > *:nth-child(n+6) { transition-delay: 350ms; }

/* --------------------------------------------------------------------------
   3. Profondeur — parallaxe legere (modele epic-design, depth 0 a 5)
   La translation est pilotee en JS via --av-shift.
   -------------------------------------------------------------------------- */
.av-anim [data-depth] {
	transform: translate3d(0, var(--av-shift, 0px), 0);
	will-change: transform;
}
.av-anim [data-depth="0"] { filter: blur(1px); }

/* Halo d'ambiance, purement decoratif */
.av-glow {
	position: relative;
	isolation: isolate;
}
.av-glow::before {
	content: "";
	position: absolute;
	inset: -10% -5% auto -5%;
	height: 60%;
	background: var(--av-gradient-glow);
	z-index: -1;
	pointer-events: none;
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   4. Micro-interactions produit
   -------------------------------------------------------------------------- */
.product-grid-item,
.wd-product {
	transition: transform var(--av-dur) var(--av-ease),
	            box-shadow var(--av-dur) var(--av-ease);
}
.product-grid-item:hover,
.wd-product:hover {
	transform: translateY(-4px);
	box-shadow: var(--av-shadow-lg);
}

/* --------------------------------------------------------------------------
   5. Boutons documentation (Lot 3) — orange/jaune, effet lumineux
   -------------------------------------------------------------------------- */
.av-docs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--av-space-3);
	margin: var(--av-space-6) 0;
}

.av-doc-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--av-space-2);
	padding: 12px 22px;
	border: none;
	border-radius: var(--av-radius-full);
	background: linear-gradient(135deg, var(--av-orange-400) 0%, var(--av-orange-600) 100%);
	color: #22160a;
	font-weight: 700;
	font-size: var(--av-fs-sm);
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 0 0 rgb(255 154 31 / 0%);
	transition: transform var(--av-dur) var(--av-ease),
	            box-shadow var(--av-dur) var(--av-ease),
	            filter var(--av-dur) var(--av-ease);
}

.av-doc-btn:hover,
.av-doc-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--av-shadow-glow);
	filter: saturate(1.15);
	color: #22160a;
}

.av-doc-btn:focus-visible { outline: 2px solid var(--av-violet-500); outline-offset: 3px; }
.av-doc-btn svg { width: 17px; height: 17px; flex: none; }

/* Pulsation lente au repos, coupee si l'utilisateur refuse le mouvement */
@media (prefers-reduced-motion: no-preference) {
	.av-doc-btn { animation: av-pulse 3.6s var(--av-ease) infinite; }
	@keyframes av-pulse {
		0%, 100% { box-shadow: 0 0 0 rgb(255 154 31 / 0%); }
		50%      { box-shadow: 0 0 18px rgb(255 154 31 / 38%); }
	}
	.av-doc-btn:hover { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Galerie de documentation (Lot 3)
   -------------------------------------------------------------------------- */
.avatto-gallery img {
	border-radius: var(--av-radius-sm);
	transition: transform var(--av-dur) var(--av-ease),
	            box-shadow var(--av-dur) var(--av-ease);
}
.avatto-gallery a:hover img {
	transform: scale(1.03);
	box-shadow: var(--av-shadow);
}

:root[data-theme="dark"] .avatto-gallery img { border-color: var(--av-border); }

/* --------------------------------------------------------------------------
   7. Accessibilite et mobile
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.av-anim .av-reveal,
	.av-anim .av-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.av-anim [data-depth] { transform: none !important; }
}

/* Pas de parallaxe au doigt : couteux et sans benefice sur mobile */
@media (pointer: coarse) {
	.av-anim [data-depth] { transform: none !important; }
	.av-glow::before { opacity: 0.55; }
}

/* ==========================================================================
   8. Bandeau de consentement cookies (Lot 7)
   ========================================================================== */
.av-cookie {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 120%);
	width: min(940px, calc(100vw - 32px));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--av-space-4);
	padding: var(--av-space-4) var(--av-space-6);
	background: var(--av-bg-raised);
	color: var(--av-text);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius-lg);
	box-shadow: var(--av-shadow-lg);
	z-index: 99999;
	opacity: 0;
	transition: transform var(--av-dur-slow) var(--av-ease), opacity var(--av-dur-slow) var(--av-ease);
}
.av-cookie.av-in { transform: translate(-50%, 0); opacity: 1; }
.av-cookie__txt { flex: 1 1 400px; }
.av-cookie__txt strong { display: block; margin-bottom: 4px; font-size: var(--av-fs-base); }
.av-cookie__txt p { margin: 0; font-size: var(--av-fs-sm); line-height: var(--av-lh-base); color: var(--av-text-muted); }
.av-cookie__txt a { color: var(--av-violet-500); text-decoration: underline; }
.av-cookie__btn { display: flex; gap: var(--av-space-2); flex: none; }
.av-cookie button {
	padding: 10px 20px; border-radius: var(--av-radius-full); font-weight: 600;
	font-size: var(--av-fs-sm); cursor: pointer; border: 1px solid var(--av-border);
	background: transparent; color: var(--av-text);
	transition: transform var(--av-dur-fast) var(--av-ease), box-shadow var(--av-dur-fast) var(--av-ease);
}
.av-cookie .av-btn-ok {
	background: var(--av-gradient-brand); color: #fff; border-color: transparent;
}
.av-cookie button:hover { transform: translateY(-1px); box-shadow: var(--av-shadow); }
.av-cookie button:focus-visible { outline: 2px solid var(--av-violet-500); outline-offset: 2px; }
@media (max-width: 600px) {
	.av-cookie { flex-direction: column; align-items: stretch; text-align: left; }
	.av-cookie__btn button { flex: 1; }
}

/* --------------------------------------------------------------------------
   9. Alerte retour en stock (Lot 7)
   -------------------------------------------------------------------------- */
.av-restock {
	margin: var(--av-space-6) 0;
	padding: var(--av-space-4) var(--av-space-6);
	background: var(--av-bg-subtle);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
}
.av-restock p { margin: 0 0 var(--av-space-3); font-size: var(--av-fs-sm); color: var(--av-text-muted); }
.av-restock form { display: flex; flex-wrap: wrap; gap: var(--av-space-2); }
.av-restock input[type="email"] {
	flex: 1 1 240px; padding: 11px 14px; border-radius: var(--av-radius-sm);
	border: 1px solid var(--av-border); background: var(--av-bg); color: var(--av-text);
}
.av-restock button {
	padding: 11px 22px; border: none; border-radius: var(--av-radius-full);
	background: var(--av-gradient-brand); color: #fff; font-weight: 700; cursor: pointer;
}
.av-restock .av-restock-msg { margin-top: var(--av-space-2); font-size: var(--av-fs-sm); }