/*
 * Thème Halloween « Corbillard Manager » (2026-10-16).
 * Chargé seulement pendant la plage d'Halloween (assets/include/habillage.php),
 * après uikit-tm.css. Il part du thème sombre (classe dark-mode posée de force)
 * et remplace sa palette : nuit violette, orange citrouille, vert sorcière.
 * Les effets (citrouilles, chauves-souris, brume) sont ajoutés par theme-halloween.js.
 */

/* ---------- 1. Palette : on redéfinit les variables du thème sombre ---------- */
html.tm-halloween.dark-mode {
	--tm-dark-bg-body: #120b1c;      /* nuit violette */
	--tm-dark-bg-card: #1d1229;      /* cartes : prune très sombre */
	--tm-dark-bg-elevated: #2a1a3d;  /* menus, champs */
	--tm-dark-bg-hover: #3b2456;     /* survol */
	--tm-dark-text-main: #f3eefc;    /* blanc lune */
	--tm-dark-text-muted: #b9a7d6;   /* lilas */
	--tm-dark-border: #3a2550;

	--tm-dark-primary-bg: rgba(255, 117, 24, 0.16);
	--tm-dark-primary-text: #ff9a3c;  /* liens et infos : orange citrouille */
	--tm-dark-success-bg: rgba(132, 204, 22, 0.16);
	--tm-dark-success-text: #a3e635;  /* vert sorcière */
	--tm-dark-warning-bg: rgba(250, 204, 21, 0.14);
	--tm-dark-warning-text: #facc15;
	--tm-dark-danger-bg: rgba(220, 38, 38, 0.18);
	--tm-dark-danger-text: #fb7185;

	--tm-hw-orange: #ff7518;
	--tm-hw-orange-clair: #ffb347;
	--tm-hw-violet: #7c3aed;
	--tm-hw-violet-sombre: #2e1065;
}

/* Fond : halo de lune en haut, brume violette en bas */
html.tm-halloween.dark-mode,
html.tm-halloween.dark-mode body {
	background:
		radial-gradient(1200px 500px at 85% -120px, rgba(255, 179, 71, 0.10), transparent 60%),
		radial-gradient(900px 400px at 10% 110%, rgba(124, 58, 237, 0.18), transparent 60%),
		var(--tm-dark-bg-body) !important;
	background-attachment: fixed !important;
}

/* ---------- 2. Bandeau, menus, boutons ---------- */
.tm-halloween .uk-navbar-primary:not(.uk-navbar-transparent),
.tm-halloween .uk-navbar-container:not(.uk-navbar-transparent).uk-navbar-primary {
	background: linear-gradient(90deg, #1a0d2b 0%, var(--tm-hw-violet-sombre) 55%, #1a0d2b 100%) !important;
	border-bottom: 2px solid var(--tm-hw-orange);
	box-shadow: 0 4px 18px rgba(255, 117, 24, 0.18);
}
.tm-halloween .uk-navbar-nav > li > a:hover,
.tm-halloween .uk-navbar-nav > li.uk-open > a {
	color: var(--tm-hw-orange-clair) !important;
	text-shadow: 0 0 10px rgba(255, 117, 24, 0.55);
}
.tm-halloween .uk-navbar-dropdown,
.tm-halloween .uk-offcanvas-bar {
	background: var(--tm-dark-bg-elevated) !important;
	border: 1px solid var(--tm-dark-border);
}
.tm-halloween .uk-nav-header {
	color: var(--tm-hw-orange-clair) !important;
}

.tm-halloween .uk-button-primary {
	background: linear-gradient(180deg, var(--tm-hw-orange-clair), var(--tm-hw-orange)) !important;
	color: #1a0d2b !important;
	border-color: transparent !important;
	box-shadow: 0 0 0 0 rgba(255, 117, 24, 0.0);
	transition: box-shadow .2s, transform .15s;
}
.tm-halloween .uk-button-primary:hover,
.tm-halloween .uk-button-primary:focus {
	box-shadow: 0 0 14px rgba(255, 117, 24, 0.65);
	transform: translateY(-1px);
}
.tm-halloween .uk-button-secondary {
	background: var(--tm-hw-violet) !important;
	color: #fff !important;
}
.tm-halloween .uk-button-default {
	border-color: var(--tm-hw-orange) !important;
	color: var(--tm-hw-orange-clair) !important;
}

/* Titres : un peu de lueur.
   :not([style]) : le <h1> de l'accueil a la taille du texte courant (style en ligne), il garde son allure. */
html.tm-halloween.dark-mode h1:not([style]),
html.tm-halloween.dark-mode .uk-h1 {
	color: var(--tm-hw-orange-clair);
	text-shadow: 0 0 18px rgba(255, 117, 24, 0.35);
}
.tm-halloween .uk-heading-divider {
	border-bottom-color: var(--tm-hw-orange) !important;
}

/* Bandeaux pleine largeur (chiffres clés de l'accueil, pied de page) : sans ça ils
   restaient bleu et gris, les couleurs du thème normal. */
html.tm-halloween .uk-section-primary {
	background: linear-gradient(135deg, #2e1065 0%, #4c1d95 55%, #2e1065 100%) !important;
	border-top: 2px solid var(--tm-hw-orange);
	border-bottom: 2px solid var(--tm-hw-orange);
}
html.tm-halloween .uk-section-primary h2,
html.tm-halloween .uk-section-primary .uk-heading-primary {
	color: var(--tm-hw-orange-clair) !important;
}
html.tm-halloween .uk-section-secondary {
	background: #0d0716 !important;
	border-top: 2px solid #3a2550;
}
html.tm-halloween .uk-section-secondary .uk-nav-header {
	color: var(--tm-hw-orange-clair) !important;
}
html.tm-halloween .uk-section-secondary a:hover {
	color: var(--tm-hw-orange-clair) !important;
}
html.tm-halloween .uk-section-muted,
html.tm-halloween .uk-section-default {
	background: transparent !important;
}

/* Cartes : liseré orange discret, et elles « flottent » au survol */
.tm-halloween .uk-card-default,
.tm-halloween .uk-card-muted {
	border-top: 2px solid rgba(255, 117, 24, 0.55) !important;
}
.tm-halloween .uk-card-default:hover {
	box-shadow: 0 10px 28px rgba(124, 58, 237, 0.28) !important;
}

/* Barres de progression (citernes, etc.) : orange */
.tm-halloween .uk-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--tm-hw-orange), var(--tm-hw-orange-clair)); }
.tm-halloween .uk-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--tm-hw-orange), var(--tm-hw-orange-clair)); }

/* Étiquettes et badges du bandeau */
.tm-halloween .uk-head-label,
.tm-halloween .uk-label-danger {
	background: var(--tm-hw-orange) !important;
	color: #1a0d2b !important;
}

/* Étiquettes d'état (tableau des véhicules...) aux couleurs d'Halloween, texte foncé lisible */
html.tm-halloween .uk-label.tm-service,
html.tm-halloween .uk-label.uk-label-success {
	background: #a3e635 !important;
	color: #1a2e05 !important;
}
html.tm-halloween .uk-label.uk-label-warning {
	background: #facc15 !important;
	color: #2a1a00 !important;
}

/* Sélection et barre de défilement */
.tm-halloween ::selection { background: var(--tm-hw-orange); color: #1a0d2b; }
.tm-halloween ::-webkit-scrollbar { width: 11px; }
.tm-halloween ::-webkit-scrollbar-track { background: #120b1c; }
.tm-halloween ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--tm-hw-violet), var(--tm-hw-orange)); border-radius: 6px; }

/* Logo : le JS remplace l'image, on lui donne une légère lueur */
.tm-halloween .tm-hw-logo {
	filter: drop-shadow(0 0 6px rgba(255, 117, 24, 0.45));
}

/* ---------- 3. Effets (éléments créés par theme-halloween.js) ---------- */
.tm-hw-decor {
	position: fixed;
	inset: 0;
	pointer-events: none;   /* ne gêne jamais un clic */
	z-index: 999;
	overflow: hidden;
}

/* Brume au pied de l'écran */
.tm-hw-brume {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -40px;
	height: 140px;
	background:
		radial-gradient(60% 80% at 20% 100%, rgba(185, 167, 214, 0.18), transparent 70%),
		radial-gradient(50% 70% at 70% 100%, rgba(185, 167, 214, 0.14), transparent 70%);
	animation: tm-hw-brume 18s ease-in-out infinite alternate;
}
@keyframes tm-hw-brume {
	from { transform: translateX(-3%); }
	to { transform: translateX(3%); }
}

/* Citrouilles posées dans les coins, qui se balancent et dont la bougie vacille */
.tm-hw-citrouille {
	position: absolute;
	bottom: 6px;
	width: 58px;
	height: 52px;
	transform-origin: 50% 100%;
	animation: tm-hw-balance 4.5s ease-in-out infinite;
}
.tm-hw-citrouille svg { width: 100%; height: 100%; display: block; }
.tm-hw-citrouille .tm-hw-flamme { animation: tm-hw-vacille 1.6s ease-in-out infinite; }
.tm-hw-citrouille.tm-hw-c1 { left: 10px; }
.tm-hw-citrouille.tm-hw-c2 { left: 62px; width: 40px; height: 36px; animation-delay: -1.5s; }
.tm-hw-citrouille.tm-hw-c3 { right: 14px; width: 64px; height: 58px; animation-delay: -3s; }
@keyframes tm-hw-balance {
	0%, 100% { transform: rotate(-3deg); }
	50% { transform: rotate(3deg); }
}
@keyframes tm-hw-vacille {
	0%, 100% { opacity: 1; }
	40% { opacity: .7; }
	60% { opacity: .9; }
}

/* Chauves-souris qui traversent l'écran de temps en temps */
.tm-hw-chauve-souris {
	position: absolute;
	top: 0;
	left: -60px;
	width: 42px;
	height: 22px;
	opacity: .85;
	animation: tm-hw-vol 16s linear infinite;
}
.tm-hw-chauve-souris svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 3px rgba(255, 179, 71, 0.7)); animation: tm-hw-ailes .22s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.tm-hw-chauve-souris.tm-hw-b2 { animation-duration: 22s; animation-delay: -7s; width: 30px; height: 16px; }
.tm-hw-chauve-souris.tm-hw-b3 { animation-duration: 27s; animation-delay: -15s; width: 36px; height: 19px; }
@keyframes tm-hw-vol {
	0%   { transform: translate(0, 18vh); }
	25%  { transform: translate(28vw, 9vh); }
	50%  { transform: translate(55vw, 22vh); }
	75%  { transform: translate(82vw, 6vh); }
	100% { transform: translate(110vw, 16vh); }
}
@keyframes tm-hw-ailes {
	from { transform: scaleY(1); }
	to { transform: scaleY(.55); }
}

/* Araignée qui descend du bandeau puis remonte */
.tm-hw-araignee {
	position: absolute;
	top: 0;
	right: 18%;
	width: 18px;
	animation: tm-hw-fil 9s ease-in-out infinite;
}
.tm-hw-araignee::before {
	content: "";
	position: absolute;
	left: 8.5px;
	bottom: 14px;
	width: 1px;
	height: 140px;
	background: rgba(243, 238, 252, 0.45);
}
.tm-hw-araignee svg { width: 18px; height: 16px; display: block; }
@keyframes tm-hw-fil {
	0%, 100% { transform: translateY(-20px); }
	50% { transform: translateY(110px); }
}

/* Citrouille cachée à attraper (petit bonus visuel, cliquable : seule exception à pointer-events) */
.tm-hw-cachee {
	position: absolute;
	width: 30px;
	height: 27px;
	pointer-events: auto;
	cursor: pointer;
	opacity: .9;
	transition: transform .2s;
}
.tm-hw-cachee:hover { transform: scale(1.15) rotate(-8deg); }
.tm-hw-cachee svg { width: 100%; height: 100%; display: block; }
.tm-hw-pouf {
	position: absolute;
	font-size: 26px;
	pointer-events: none;
	animation: tm-hw-pouf .9s ease-out forwards;
}
@keyframes tm-hw-pouf {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to { opacity: 0; transform: translateY(-50px) scale(1.6); }
}

/* Téléphone : moins de décor */
@media (max-width: 639px) {
	.tm-hw-citrouille.tm-hw-c2, .tm-hw-chauve-souris.tm-hw-b3, .tm-hw-araignee { display: none; }
	.tm-hw-citrouille { width: 40px; height: 36px; }
	.tm-hw-citrouille.tm-hw-c3 { width: 44px; height: 40px; }
}

/* Mouvement réduit demandé par le système : tout reste immobile */
@media (prefers-reduced-motion: reduce) {
	.tm-hw-decor *, .tm-hw-decor *::before { animation: none !important; }
	.tm-hw-chauve-souris { display: none; }
}

/* Impression : pas de décor */
@media print {
	.tm-hw-decor { display: none !important; }
}