/* ===========================================================================
   Décor — 🎃 Halloween
   Une toile dans l'angle, une araignée qui descend de son fil et remonte,
   quelques chauves-souris qui traversent l'écran, une citrouille au pied.
   =========================================================================== */

.afb-habillage--halloween .afb-header{ border-bottom:2px solid var(--afb-accent); }

/* La toile dans l'angle (le motif est défini dans decor.css) */
.afb-habillage--halloween .afb-deco__web{ display:block; }

/* Les chauves-souris traversent au lieu de tomber : elles partent du bord
   gauche (le déplacement horizontal est dans l'animation) et se répartissent
   en hauteur avec --y. */
.afb-habillage--halloween .afb-deco__f{
	top:var(--y,20%);
	left:0;
	width:30px; height:16px;
	background:#120a1f;
	opacity:.5;
	animation-name:afb-vol;
	animation-timing-function:ease-in-out;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23000' d='M32 8c3-6 9-7 13-3 3-4 9-5 13-1-5 1-7 5-7 10-4-2-8-1-11 2-3-3-5-3-8-3s-5 0-8 3c-3-3-7-4-11-2 0-5-2-9-7-10 4-4 10-3 13 1 4-4 10-3 13 3z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23000' d='M32 8c3-6 9-7 13-3 3-4 9-5 13-1-5 1-7 5-7 10-4-2-8-1-11 2-3-3-5-3-8-3s-5 0-8 3c-3-3-7-4-11-2 0-5-2-9-7-10 4-4 10-3 13 1 4-4 10-3 13 3z'/%3E%3C/svg%3E");
}

/* Un sur trois est un fantôme, qui monte au lieu de traverser */
.afb-habillage--halloween .afb-deco__f:nth-of-type(3n){
	top:auto; bottom:-10vh; left:var(--x,50%);
	min-width:26px; min-height:30px;
	width:30px; height:34px;
	background:#ffffff;
	opacity:.42;
	/* Sans cette ombre, un fantôme blanc disparaît sur les cartes blanches. */
	filter:drop-shadow(0 1px 2px rgba(30,10,50,.45));
	animation-name:afb-envol;
	animation-timing-function:ease-in-out;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M24 2C13 2 6 11 6 23v27c0 2 2 3 4 2l4-3 4 3c1 1 2 1 3 0l3-3 3 3c1 1 2 1 3 0l4-3 4 3c2 1 4 0 4-2V23C42 11 35 2 24 2Z M17 20a3.5 4.5 0 1 0 0 9 3.5 4.5 0 0 0 0-9Z M31 20a3.5 4.5 0 1 0 0 9 3.5 4.5 0 0 0 0-9Z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M24 2C13 2 6 11 6 23v27c0 2 2 3 4 2l4-3 4 3c1 1 2 1 3 0l3-3 3 3c1 1 2 1 3 0l4-3 4 3c2 1 4 0 4-2V23C42 11 35 2 24 2Z M17 20a3.5 4.5 0 1 0 0 9 3.5 4.5 0 0 0 0-9Z M31 20a3.5 4.5 0 1 0 0 9 3.5 4.5 0 0 0 0-9Z'/%3E%3C/svg%3E");
}

/* Un sur quatre est une tête de mort, qui tombe en tournoyant.
   Les orbites, le nez et les dents sont des trous dans le masque
   (fill-rule evenodd) : c'est ce qui la rend lisible même en petit. */
.afb-habillage--halloween .afb-deco__f:nth-of-type(4n){
	top:-10vh; bottom:auto; left:var(--x,50%);
	min-width:28px; min-height:32px;
	width:30px; height:34px;
	background:#f2efe6;
	opacity:.6;
	filter:drop-shadow(0 1px 2px rgba(30,10,50,.45));
	animation-name:afb-chute;
	animation-timing-function:linear;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M24 2C12 2 4 11 4 24c0 7 3 12 7 15v7c0 3 2 5 5 5h16c3 0 5-2 5-5v-7c4-3 7-8 7-15C44 11 36 2 24 2Z M15 21a5.5 6.5 0 1 0 0 13 5.5 6.5 0 0 0 0-13Z M33 21a5.5 6.5 0 1 0 0 13 5.5 6.5 0 0 0 0-13Z M24 36l-3.5 7h7L24 36Z M17 46h3v6h-3Z M22.5 46h3v6h-3Z M28 46h3v6h-3Z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M24 2C12 2 4 11 4 24c0 7 3 12 7 15v7c0 3 2 5 5 5h16c3 0 5-2 5-5v-7c4-3 7-8 7-15C44 11 36 2 24 2Z M15 21a5.5 6.5 0 1 0 0 13 5.5 6.5 0 0 0 0-13Z M33 21a5.5 6.5 0 1 0 0 13 5.5 6.5 0 0 0 0-13Z M24 36l-3.5 7h7L24 36Z M17 46h3v6h-3Z M22.5 46h3v6h-3Z M28 46h3v6h-3Z'/%3E%3C/svg%3E");
}

/* La citrouille, en bas à droite du pied de page */
.afb-habillage--halloween #colophon{ position:relative; }
.afb-habillage--halloween #colophon::after{
	content:""; position:absolute; right:14px; bottom:10px;
	width:46px; height:46px; pointer-events:none; opacity:.22;
	background:var(--afb-accent);
	-webkit-mask:no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M32 14c-2-6-7-8-11-6 3 1 5 4 5 7-9-3-18 3-18 16 0 14 10 22 24 22s24-8 24-22c0-13-9-19-18-16 0-3 2-6 5-7-4-2-9 0-11 6z'/%3E%3C/svg%3E");
	mask:no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M32 14c-2-6-7-8-11-6 3 1 5 4 5 7-9-3-18 3-18 16 0 14 10 22 24 22s24-8 24-22c0-13-9-19-18-16 0-3 2-6 5-7-4-2-9 0-11 6z'/%3E%3C/svg%3E");
}