:root {
  --marbre: #f4efe6;
  --pierre: #d8c8aa;
  --or: #b08d57;
  --encre: #2b241c;
  --encre: #000000;
}

body.viewSend .noPassword
{
	display:flex !important ;
}

body.viewIt .login
{
	display:flex !important ;
}

.noPassword
{
	position:fixed ;
	top:0 ; left:0 ; right:0 ; bottom:0 ;
	background:rgba(0,0,0,0.5) ;
	align-items:center ;
	justify-content:center ;
	>div
	{
		padding:10px ;
		font-size:20px ;
		background-color:white ;
		background-size:cover ;
		font-family: "Cinzel", serif;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		input
		{
			padding:1rem 2rem ;
			font:inherit ;
		}
		h2
		{
			font-weight:100 ;
			font-family: "Cinzel", Georgia, serif;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: black;
			margin:0 ;
			text-align:center ;
		}
	}
}

.login
{
	position:fixed ;
	top:0 ; left:0 ; right:0 ; bottom:0 ;
	background:rgba(0,0,0,0.5) ;
	align-items:center ;
	justify-content:center ;
	form
	{
		display:flex ;
		flex-direction:column ;
		gap: 1rem ;
	}
	>div
	{
		padding:10px ;
		font-size:20px ;
		background-color:white ;
		background-size:cover ;
		font-family: "Cinzel", serif;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		input
		{
			padding:1rem 2rem ;
			font:inherit ;
		}
		h2
		{
			font-weight:100 ;
			font-family: "Cinzel", Georgia, serif;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: black;
			margin:0 ;
			text-align:center ;
		}
	}
}

.deuxbtns
{
	display:flex ;
	flex-direction:row ;
	align-items:center ;
	justify-content:space-between ;
	flex-flow:wrap ;
	gap:8px ;
}

#fronton
{
	font-size:20px ;
	box-sizing:border-box ;
	width:100vw ;
	top:0 ;
	padding:10px ;
	background-image:url(/img/marbre.png) ;
	background-size:cover ;
	font-family: "Cinzel", serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

html.html-profil, html.html-enigme, html.html-banquet, html.html-question
{
	body
	{
		padding:0 ;
		margin:0 ;
		color:black ;
		display:flex ;
		flex-direction:column ;
		background-image:url(/img/eclairs.jpg) ;
		background-color:#C0A0F0 ;
		background-size:cover ;
		background-position:bottom center ;
		background-repeat:no-repeat ;
		background-attachment:fixed ;
		*.showIn { display:none ; }
		form.viewIn .showIn { display:unset ; }
		.contenu
		{
			display:flex ;
			flex-grow:1 ;
			align-items:center ;
			justify-content:center ;
			form
			{
				background-image:url(/img/marbre.png) ;
				background-size:cover ;
				font-family: "Cinzel", serif;
				letter-spacing: 0.08em;
				margin-top:1rem ;
			}
			input, select, textarea
			{
				padding:0.5rem 1rem ;
				font:inherit ;
			}
			textarea
			{
				resize:none ;
				width:calc(100% - 2rem) ;
			}
		}
	}
}

.onlyMobile { display:none ; }

@media (max-width: 600px)
{

html.html-index
{
	h1
	{
		font-size:2em !important ;
	}
	.popups
	{
		top:4em ;
		> div
		{
			max-height:30vh ;
			overflow:auto ;
			font-size:0.8em ;
			max-width:70vw ;
		}
	}
	#icons
	{
		a
		{
			font-size:0.9em ;
		}
	}
}

.suplat
{
	display:block ;
	text-align:right ;
	width:100% ;
}
html.html-banquet {
	form { padding:1rem !important ; }
}

.onlyMobile { display:initial ; }

html.html-invit body .contenu
{
	padding:8px 8px !important ;
	font-size:12px !important ;
	.jesuis
	{
		span { display:block ; margin-left:0 !important ; }
		input { display:block ; }
		input[type="submit"] 
		{
			margin-left:0 !important ;
			margin-top:0.5rem ;
		}
	}
}

.btn-antique
{
	padding:0.5rem 0.5rem !important ;
}

#pwd
{
	display:inline-block !important ;
}

}

.btn-antique 
{
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--or);
	font-family: "Cinzel", serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--encre);
	cursor:pointer ;
	opacity:0.8 ;
	background: var(--or);
	color: var(--marbre);
	text-decoration:none ;
	font-weight:bold ;
	text-decoration:none ;
}
.btn-antique:hover, .btn-antique.coche
{
	color:white ;
	text-decoration:underline ;
}

html.html-index  
{
	background:#D0D0D0 ;
	#mainDiv
	{
		overflow:hidden ;
	}
	#decalDiv
	{
		height:100vh ;
		display:flex ;
		align-items:center ;
		justify-content:center ;
		overflow:hidden ;
	}
	body
	{
		padding:0 ;
		margin:0 ;
		height:100vh ;
		display:flex ;
		flex-direction:column ;
		color:black ;
		background-image:url(/img/eclairs.jpg) ;
		background-color:#C0A0F0 ;
		background-size:cover ;
		background-position:bottom center ;
		background-attachment:fixed ;
		background-repeat:no-repeat ;
	}
	#horloge
	{
		display:flex ;
		position:relative ;
		flex-direction:column ;
		align-items:flex-end ;
		justify-content:flex-end ;
		flex-grow:1 ;
		padding-right:12px ;
		background-size:cover ;
		color:#202020 ;
		#decompte
		{
		gap:2vw ;
		text-shadow:
	    -1px -1px 0 white,
	     1px -1px 0 white,
	    -1px  1px 0 white,
	     1px  1px 0 white;
			font-size:6vh ;
			display:flex ;
			flex-direction:row ;
			span
			{
				&::after
				{
					font-size:0.7em ;
				}
			}
			.joursx::after { content:'jrs' ; }
			.heuresx::after { content:'h' ; }
			.minutesx::after { content:'m' ; }
			.secondesx::after { content:'s' ; }
		}
		h1
		{
			font-weight:100 ;
			font-family: "Cinzel", Georgia, serif;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: var(--encre);
			margin:0 ;
			position:absolute ;
			top:8px ;
			right:8px ;
			font-size:5em ;
			color:var(--or) ;
		}
	}

	#jours .n10 { animation-delay: -0.2s, -1.0s; }
	#jours .n1 { animation-delay: -0.9s, -0.3s; }
	#heures .n10 { animation-delay: -1.5s, -2.2s; }
	#heures .n1 { animation-delay: -0.4s, -1.7s; }
	#minutes .n10 { animation-delay: -1.2s, -0.6s; }
	#minutes .n1 { animation-delay: -0.7s, -2.8s; }
	#secondes .n10 { animation-delay: -2.0s, -1.1s; }
	#secondes .n1 { animation-delay: -1.8s, -0.4s; }

	span.digit
	{
		width:9vw;
		height:9vw ;
		background-size:contain ;
		background-repeat:no-repeat ;
		background-position:center center ;
		display: inline-block;
		
		transform-origin: center;
		will-change: transform, filter, opacity;
		
		animation:
			electric-vibrate 3s ease-in-out infinite,
			electric-flicker 5s ease-in-out infinite;
	}

	@keyframes electric-vibrate {
		0%   { transform: translate(0,0) rotate(0deg); }
		15%  { transform: translate(0.4px,-0.3px) rotate(-0.1deg); }
		30%  { transform: translate(-0.5px,0.2px) rotate(0.1deg); }
		45%  { transform: translate(0.3px,0.5px) rotate(-0.08deg); }
		60%  { transform: translate(-0.4px,-0.2px) rotate(0.08deg); }
		75%  { transform: translate(0.5px,0.1px) rotate(-0.1deg); }
		90%  { transform: translate(-0.3px,0.4px) rotate(0.1deg); }
		100% { transform: translate(0,0) rotate(0deg); }
	}
	@keyframes electric-flicker {
		0%, 100% {
			opacity: 1;
			filter: brightness(1)
			        drop-shadow(0 0 6px rgba(255,200,120,0.6));
		}
		50% {
			opacity: 0.95;
			filter: brightness(1.1)
			        drop-shadow(0 0 12px rgba(255,220,140,0.9));
		}
	}

	span.dig0 { background-image:url(/img/zero.png) ; }
	span.dig1 { background-image:url(/img/un.png) ; }
	span.dig2 { background-image:url(/img/deux.png) ; }
	span.dig3 { background-image:url(/img/trois.png) ; }
	span.dig4 { background-image:url(/img/quatre.png) ; }
	span.dig5 { background-image:url(/img/cinq.png) ; }
	span.dig6 { background-image:url(/img/six.png) ; }
	span.dig7 { background-image:url(/img/sept.png) ; }
	span.dig8 { background-image:url(/img/huit.png) ; }
	span.dig9 { background-image:url(/img/neuf.png) ; }

	@media(min-width:1400px)
	{
		span.digit
		{
			height:10vh ;
			width:10vh ;
		}
		#horloge #decompte
		{
			font-size:12vh ;
			gap:8vw ;
		}
	}
	
	#icons
	{
		width:100vw ;
		bottom:0 ;
		padding:10px ;
		background-image:url(/img/marbre.png) ;
		background-size:cover ;
		box-sizing:border-box ;
		display:flex ;
		gap:10px ;
	}
}

html.html-invit
{
	body 
	{
		box-sizing:border-box ;
		background-color:white ;
		height:100vh ;
		padding:0 ;
		margin:0 ;
		background-image:url(/img/olympe.jpg) ;
		background-repeat:no-repeat ;
		background-size:cover ;
		background-position:top center ;
		background-attachment:fixed ;
		position:relative ;
		overflow:auto ;
		#mainDiv
		{
			height:100% ;
		}
		.contenu
		{
			font-family:"EB Garamond", Georgia, serif ;
			font-size:20px ;
			line-height:1.7 ;
			height:92vh ;
			padding:4vh 4vh ;
			.maxsize
			{
				display:flex ;
				flex-direction:column ;
				max-width:1150px ;
				margin:auto ;
				background-image:url(/img/marbre.png) ;
				font-family: "Cinzel", serif;
				letter-spacing: 0.08em;
				text-transform: uppercase;
				padding:1rem ;
				box-shadow:4px 4px  6px 2px #808080 ;
				color: var(--encre);
				margin-top:2rem ;
				border-radius:3px ;
				opacity:0.9 ;
			}
			h1, h2, h3, nav, .titre-antique 
			{
				font-weight:100 ;
				font-family: "Cinzel", Georgia, serif;
				text-transform: uppercase;
				letter-spacing: 0.08em;
				color: var(--encre);
				margin:0 ;
			}
			h1 
			{
				font-size: clamp(2.5rem, 7vw, 5rem);
				line-height: 1.05;
				border-bottom: 2px solid var(--or);
				padding-bottom: 0.3em;
				text-align:center ;
			}
			.btn-antique 
			{
				display: inline-block;
				padding: 0.8rem 1.4rem;
				border: 1px solid var(--or);
				font-family: "Cinzel", serif;
				letter-spacing: 0.08em;
				text-transform: uppercase;
				color: var(--encre);
				cursor:pointer ;
			}
			.btn-antique:hover, .btn-antique.coche
			{
				background: var(--or);
				color: var(--marbre);
			}
			
			.invt
			{
				> div.btns
				{
					display:flex ;
					flex-direction:row ;
					justify-content:space-between ;
				}
				> div.jesuis
				{
					display:flex ;
					flex-direction:row ;
					justify-content:space-between ;
					align-items:center ;
					gap:8px ;
				}
				input, select
				{
					padding:0.5rem 1rem ;
					font:inherit ;
				}
				#prenom+span, .onlyIdf input[type='submit']
				{
					margin-left:2rem ;
				}
			}
		}
	}
	body[data-coche]
	{
		.onlyIdf
		{
			display:initial !important ;
		}
	}
	body[data-coche="0"]
	{
		.onlyIdf1
		{
			display:none !important ;
		}
	}
	body[data-coche="0"] input[type="submit"]
	{
		margin-left:0 !important ;
		margin-top:1rem ;
	}
}

.contenu.profil
{
	form
	{
		padding:3rem ;
		display:flex ;
		flex-direction:column ;
		gap:1rem ;
		align-items:flex-start ;
		input[type="text"]
		{
			font:inherit ;
			padding:0.5rem ;
		}
	}
}

.banquet
{
	form
	{
		width:80vw ;
		h1
		{
			text-align:center ;
			margin:0 ;
		}
		h2
		{
			margin-bottom:0 ;
			margin-top:1rem ;
		}
		.subm
		{
			background:rgba(255,255,255,0.9) ;
			padding:0.5rem ;
			width:calc(100% - 1rem) ;
			margin-top:-1rem ;
			div:not(.deuxbtns)
			{
				font-size:0.8em ;
				padding-left:2rem ;
			}
			a
			{
				cursor:pointer ;
				color:var(--or) ;
				&:hover
				{
					text-decoration:underline ;
				}
			}
			.suplat
			{
			}
		}
	}
}

body.ajoutp #newPlat { display:flex ; }

#newPlat
{
	display:none ;
	position:fixed ;
	top:0 ;
	right:0 ;
	left:0 ;
	bottom:0 ;
	background:rgba(0,0,0,0.5) ;
	gap: 1rem ;
	align-items:center ;
	justify-content:center ;
	form
	{
		background-image:url(/img/marbre.png) ;
		background-size:cover ;
		font-family: "Cinzel", serif;
		font-size:20px ;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding:2rem 3rem ;
		min-width:50vw ;
		input, select, textarea
		{
			font:inherit ;
			padding:3px 8px ;
		}
		textarea
		{
			resize:none ;
			width:calc(100% - 2rem) ;
		}
		.what
		{
			margin-top:0.5rem ;
			font-weight:bold ;
		}
	}
}

input[type="submit"]
{
	padding:0.8rem 1.4rem !important ;
}

div.enigme.contenu
{
	form
	{
		background:#F8F8F8 !important ;
		max-width:600px ;
		padding:0 3rem 2rem ;
	}
	#question
	{
		margin:1rem 0 ;
		background:white ;
		padding:1rem ;
		box-shadow:inset 0 0 4px #202020 ;
		font-size:1.5rem ;
	}	
}

.popups
{
	font-family: "Cinzel", serif;
	letter-spacing: 0.08em;
	display:flex ;
	flex-direction:column ;
	padding-left:8px ;
	gap:8px ;
	position:absolute ;
	top:8px ;
	left:0 ;
	> div
	{
		padding:8px ;
		background:rgba(255, 255, 255, 0.7) ;
		border-radius:8px ;
		width:250px ;
		max-width:30vw ;
	}
}