/* TGL Campagnes promo — tout est invisible tant que <html> n'a pas la classe tglc-on. */
.tglc-banner,
.tglc-deco,
.tglc-monsters { display: none; }

html.tglc-on .tglc-banner { display: flex; }
html.tglc-on .tglc-deco,
html.tglc-on .tglc-monsters { display: block; }

/* Popup -15 % première commande masqué pendant la campagne */
html.tglc-on.tglc-hide-fop #fop-modal,
html.tglc-on.tglc-hide-fop #fop-backdrop,
html.tglc-on.tglc-hide-fop .fop-open-popup { display: none !important; }

/* ---------- Bandeau ---------- */
.tglc-banner {
	position: relative;
	z-index: 60;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 22px;
	padding: 9px 64px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: center;
}
.tglc-banner * { box-sizing: border-box; }
.tglc-title { font-weight: 700; }
.tglc-codewrap { display: inline-flex; align-items: center; gap: 8px; }
.tglc-code {
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	padding: 4px 10px;
	border-radius: 5px;
	cursor: pointer;
	min-height: 28px;
	box-shadow: none;
	text-transform: none;
}
.tglc-code:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.tglc-count { font-variant-numeric: tabular-nums; }
.tglc-count:empty { display: none; }

/* Élégant */
.tglc-banner--elegant { background: #16130f; color: #f4ede4; }
.tglc-banner--elegant .tglc-title { color: var(--tglc-accent); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.tglc-banner--elegant .tglc-code,
.tglc-banner--elegant .tglc-code:hover,
.tglc-banner--elegant .tglc-code:focus { background: transparent; color: #f6a868; border: 1px dashed var(--tglc-accent); }
.tglc-banner--elegant .tglc-count { color: #c9bfb2; }
.tglc-bat-static { flex: none; }

/* Fun */
.tglc-banner--fun { background: var(--tglc-accent); color: #1a1208; font-weight: 500; }
.tglc-banner--fun .tglc-title { font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.tglc-banner--fun .tglc-code,
.tglc-banner--fun .tglc-code:hover,
.tglc-banner--fun .tglc-code:focus { background: #1a1208; color: #ffb36b; border: 0; }
.tglc-banner--fun .tglc-count { font-weight: 700; }
.tglc-banner-deco {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}
.tglc-banner-deco--l { left: 14px; }
.tglc-banner-deco--r { right: 14px; }
.tglc-banner-deco svg { display: block; }

.tglc-bat,
.tglc-fly { animation: tglc-flap 1.5s ease-in-out infinite; transform-origin: center; }
.tglc-bat--2 { animation-delay: 0.4s; }
@keyframes tglc-flap {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(0.55); }
}

/* ---------- Décorations sous l'en-tête (ne bloquent aucun clic) ---------- */
.tglc-deco {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--tglc-top, 0px);
	height: 0;
	z-index: 40;
	pointer-events: none;
}
.tglc-deco svg { position: absolute; display: block; pointer-events: none; }
.tglc-web { top: 0; width: 150px; height: 150px; opacity: 0.5; }
.tglc-web--r { right: 0; transform: scaleX(-1); }
.tglc-web--l { left: 0; }
html.tglc-style-fun .tglc-web { width: 180px; height: 180px; }
.tglc-spider { animation: tglc-spider 7s ease-in-out infinite; }
@keyframes tglc-spider {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(10px); }
}
.tglc-fly--1 { top: 70px; left: 20%; animation-duration: 1.3s; }
.tglc-fly--2 { top: 30px; right: 27%; animation-duration: 1.7s; }

/* ---------- Monstres (style fun) — fichiers SVG animés dans assets/monstres ---------- */
.tglc-m {
	position: fixed;
	z-index: 9990;
	pointer-events: none;
	visibility: hidden;
	will-change: transform;
	transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 0.9s;
}
.tglc-m.is-out { visibility: visible; transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s; }
.tglc-m img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; border: 0; box-shadow: none; }

/* Fantôme : glisse depuis le bord droit */
.tglc-m--fantome { right: 0; top: 34vh; width: 110px; height: 110px; transform: translateX(115%); transition-timing-function: ease-in-out; }
.tglc-m--fantome.is-out { transform: translateX(8%) rotate(-6deg); }

/* Araignée : descend du haut au bout de son fil */
.tglc-m--araignee { left: 27%; top: 0; width: 120px; height: 215px; transform: translateY(-100%); transition-duration: 1.6s; transition-timing-function: ease-out; }
.tglc-m--araignee img { position: absolute; left: 0; bottom: 0; height: 120px; }
.tglc-m--araignee::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; height: 97px; width: 2px; background: #9a8fb0; }
.tglc-m--araignee.is-out { transform: translateY(0); }

/* Boutons aux couleurs de la campagne (option) */
html.tglc-on.tglc-buttons .elementor-button { background-color: var(--tglc-accent) !important; color: #1a1208 !important; }

/* Personnages Vapor Série déguisés (WebP animés) */
.tglc-m--renard { left: 0; bottom: 16vh; width: 150px; height: 198px; transform: translateX(-110%); }
.tglc-m--renard.is-out { transform: translateX(6%) rotate(4deg); }
.tglc-m--rappeur { left: 38%; bottom: 0; width: 160px; height: 200px; transform: translateY(110%) scale(0.9); transform-origin: 50% 100%; }
.tglc-m--rappeur.is-out { transform: translateY(6%) scale(1.06); }
.tglc-m--doberman { right: 0; bottom: 20vh; width: 128px; height: 200px; transform: translateX(110%); }
.tglc-m--doberman.is-out { transform: translateX(4%) rotate(-4deg); }

/* Surprise : le doberman surgit en très grand, un peu coupé par le bas de l'écran */
.tglc-scare, .tglc-scare-dim { display: none; }
html.tglc-on .tglc-scare, html.tglc-on .tglc-scare-dim { display: block; }
.tglc-scare-dim { position: fixed; inset: 0; z-index: 9994; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(ellipse at 70% 80%, rgba(20, 8, 30, 0.15), rgba(10, 4, 16, 0.55)); }
.tglc-scare-dim.is-out { opacity: 1; }
.tglc-scare { position: fixed; z-index: 9995; pointer-events: none; right: 3vw; bottom: -16vh; height: 96vh; width: 61vh; visibility: hidden; transform: translateY(105%) scale(0.5); transform-origin: 55% 100%; }
.tglc-scare img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.tglc-scare.is-out { visibility: visible; animation: tglc-scare 2.8s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; }
@keyframes tglc-scare {
	0%   { transform: translateY(105%) scale(0.5) rotate(0deg); }
	12%  { transform: translateY(0) scale(1.08) rotate(0deg); }
	16%  { transform: translateY(0) scale(1) rotate(-3deg); }
	20%  { transform: translateY(0) scale(1.02) rotate(3deg); }
	24%  { transform: translateY(0) scale(1) rotate(-2deg); }
	28%  { transform: translateY(0) scale(1.01) rotate(1deg); }
	32%, 78% { transform: translateY(0) scale(1) rotate(0deg); }
	100% { transform: translateY(110%) scale(0.7) rotate(0deg); }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.tglc-banner { padding: 8px 12px; gap: 4px 12px; font-size: 13px; }
	.tglc-banner--fun .tglc-title { font-size: 16px; }
	.tglc-banner-deco,
	.tglc-bat-static,
	.tglc-fly,
	.tglc-web--l { display: none !important; }
	.tglc-web, html.tglc-style-fun .tglc-web { width: 90px; height: 90px; }
	.tglc-m--fantome,
	.tglc-m--araignee,
	.tglc-m--renard,
	.tglc-m--doberman { display: none !important; }
	.tglc-m--rappeur { left: 10px; width: 104px; height: 130px; }
	.tglc-scare { right: -8vw; bottom: -10vh; height: 72vh; width: 46vh; }
}
@media (max-width: 420px) {
	.tglc-count { display: none; }
}

/* Visiteurs qui ont désactivé les animations, et impression */
@media (prefers-reduced-motion: reduce) {
	html.tglc-on .tglc-monsters, html.tglc-on .tglc-scare, html.tglc-on .tglc-scare-dim { display: none !important; }
	.tglc-bat, .tglc-fly, .tglc-spider { animation: none !important; }
}
@media print {
	html.tglc-on .tglc-banner,
	html.tglc-on .tglc-deco,
	html.tglc-on .tglc-monsters, html.tglc-on .tglc-scare, html.tglc-on .tglc-scare-dim { display: none !important; }
}