/* buro-noel-deco.css — 14/11/2026 — la guirlande péi sous le menu rouge, sur tout le site (body.buro-noel).
   Deux pseudo-éléments, aucune balise. Elle ne prend aucune place (absolute), ne capte aucun clic, et reste
   derrière le méga-menu : ::before est AVANT .buro-mega dans l'arbre, et z-index 1 est le plus bas des positifs.
   Ancrage : top:100% du premier parent positionné — .buro-redmenu s'il l'est, sinon .buro-headwrap dont le menu
   rouge est le dernier enfant. On ne pose volontairement aucun `position` sur le menu. */

body.buro-noel {
	--bn-pas: 96px;                      /* largeur d'un feston */
	--bn-h: 40px;                        /* hauteur totale */
	--bn-g: 38px;                        /* taille d'une grappe */
	--bn-e: calc(var(--bn-pas) * 3);     /* une grappe tous les 3 festons */
	--bn-grappe: url(/wp-content/themes/Divi-child-445/home-v4/noel26/img/deco_grappe.webp);
}

body.buro-noel .buro-redmenu::before,
body.buro-noel .buro-redmenu > .buro-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--bn-h);
	z-index: 1;
	pointer-events: none;
}

/* Calque 1 : les grappes (9, centrées, de part et d'autre du milieu) puis la liane et ses 5 ampoules. */
body.buro-noel .buro-redmenu::before {
	background:
		var(--bn-grappe) calc(50% - var(--bn-e) * 4) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% - var(--bn-e) * 3) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% - var(--bn-e) * 2) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% - var(--bn-e)) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) 50% -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% + var(--bn-e)) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% + var(--bn-e) * 2) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% + var(--bn-e) * 3) -3px / var(--bn-g) var(--bn-g) no-repeat,
		var(--bn-grappe) calc(50% + var(--bn-e) * 4) -3px / var(--bn-g) var(--bn-g) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 40'%3E%3Cpath d='M0 1Q48 25 96 1' fill='none' stroke='%231F5B36' stroke-width='1.6'/%3E%3Cpath d='M22 9.6q3.5-5.2 8.6-2.6q-3.5 5.2-8.6 2.6zM74 9.6q-3.5-5.2-8.6-2.6q3.5 5.2 8.6 2.6z' fill='%232E9B4F' stroke='%231F5B36' stroke-width='.6'/%3E%3Cg fill='%231F5B36'%3E%3Crect x='14.5' y='7' width='3' height='3'/%3E%3Crect x='30.5' y='11' width='3' height='3'/%3E%3Crect x='46.5' y='12.3' width='3' height='3'/%3E%3Crect x='62.5' y='11' width='3' height='3'/%3E%3Crect x='78.5' y='7' width='3' height='3'/%3E%3C/g%3E%3Cg fill='%23FFF1C2' stroke='%23C98A12' stroke-width='.7'%3E%3Cellipse cx='16' cy='13.4' rx='2.7' ry='3.6'/%3E%3Cellipse cx='32' cy='17.4' rx='2.7' ry='3.6'/%3E%3Cellipse cx='48' cy='18.7' rx='2.7' ry='3.6'/%3E%3Cellipse cx='64' cy='17.4' rx='2.7' ry='3.6'/%3E%3Cellipse cx='80' cy='13.4' rx='2.7' ry='3.6'/%3E%3C/g%3E%3C/svg%3E")
			calc(50% + var(--bn-pas) / 2) 0 / var(--bn-pas) var(--bn-h) repeat-x;
}

/* Calque 2 : le halo d'une ampoule sur deux, qui respire. */
body.buro-noel .buro-redmenu > .buro-container::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 40'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFFBE6'/%3E%3Cstop offset='.4' stop-color='%23FFD866' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23FFD866' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23h)'%3E%3Ccircle cx='16' cy='13.4' r='8'/%3E%3Ccircle cx='48' cy='18.7' r='8'/%3E%3Ccircle cx='80' cy='13.4' r='8'/%3E%3C/g%3E%3C/svg%3E")
		calc(50% + var(--bn-pas) / 2) 0 / var(--bn-pas) var(--bn-h) repeat-x;
	opacity: .6;
}

@media (max-width: 991px) {
	body.buro-noel {
		--bn-pas: 64px;
		--bn-h: 27px;
		--bn-g: 27px;
		--bn-e: calc(var(--bn-pas) * 2);   /* une grappe tous les 2 festons : 3 grappes visibles sur un téléphone */
	}
	/* 14/11 : sur mobile le menu rouge est en overflow:hidden/auto et coupe tout pseudo-élément qui dépasse.
	   La guirlande s'accroche donc à .buro-headwrap (relative, overflow visible, menu rouge = dernier enfant), sans halo. */
	body.buro-noel .buro-redmenu::before,
	body.buro-noel .buro-redmenu > .buro-container::before { display: none; }
	body.buro-noel .buro-headwrap::after {
		content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--bn-h); z-index: 1; pointer-events: none;
		background:
			var(--bn-grappe) calc(50% - var(--bn-e) * 2) -2px / var(--bn-g) var(--bn-g) no-repeat,
			var(--bn-grappe) calc(50% - var(--bn-e)) -2px / var(--bn-g) var(--bn-g) no-repeat,
			var(--bn-grappe) 50% -2px / var(--bn-g) var(--bn-g) no-repeat,
			var(--bn-grappe) calc(50% + var(--bn-e)) -2px / var(--bn-g) var(--bn-g) no-repeat,
			var(--bn-grappe) calc(50% + var(--bn-e) * 2) -2px / var(--bn-g) var(--bn-g) no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 40'%3E%3Cpath d='M0 1Q48 25 96 1' fill='none' stroke='%231F5B36' stroke-width='1.6'/%3E%3Cpath d='M22 9.6q3.5-5.2 8.6-2.6q-3.5 5.2-8.6 2.6zM74 9.6q-3.5-5.2-8.6-2.6q3.5 5.2 8.6 2.6z' fill='%232E9B4F' stroke='%231F5B36' stroke-width='.6'/%3E%3Cg fill='%231F5B36'%3E%3Crect x='14.5' y='7' width='3' height='3'/%3E%3Crect x='30.5' y='11' width='3' height='3'/%3E%3Crect x='46.5' y='12.3' width='3' height='3'/%3E%3Crect x='62.5' y='11' width='3' height='3'/%3E%3Crect x='78.5' y='7' width='3' height='3'/%3E%3C/g%3E%3Cg fill='%23FFF1C2' stroke='%23C98A12' stroke-width='.7'%3E%3Cellipse cx='16' cy='13.4' rx='2.7' ry='3.6'/%3E%3Cellipse cx='32' cy='17.4' rx='2.7' ry='3.6'/%3E%3Cellipse cx='48' cy='18.7' rx='2.7' ry='3.6'/%3E%3Cellipse cx='64' cy='17.4' rx='2.7' ry='3.6'/%3E%3Cellipse cx='80' cy='13.4' rx='2.7' ry='3.6'/%3E%3C/g%3E%3C/svg%3E")
				calc(50% + var(--bn-pas) / 2) 0 / var(--bn-pas) var(--bn-h) repeat-x;
	}
}
@media print { body.buro-noel .buro-headwrap::after { display: none; } }

@media (prefers-reduced-motion: no-preference) {
	body.buro-noel .buro-redmenu > .buro-container::before {
		animation: buro-noel-scintille 2.6s ease-in-out infinite alternate;
	}
}

@keyframes buro-noel-scintille {
	from { opacity: .2; }
	to { opacity: 1; }
}

@media print {
	body.buro-noel .buro-redmenu::before,
	body.buro-noel .buro-redmenu > .buro-container::before { display: none; }
}
