:root
{
	--bg: #0b1220;
	--card: rgba(255,255,255,.06);
	--stroke: rgba(255,255,255,.12);
	--text: #e8eefc;
	--muted: rgba(232,238,252,.7);
	--work: #ff4d6d;
	--break: #38bdf8;
	--shadow: 0 18px 40px rgba(0,0,0,.45);
	--radius: 22px;
	/* Voile / image */
	--heat: 0;
	/* 0..1 : intensité */
	--fill: 0;
	/* 0..1 : hauteur (bottom-up) */
	--img: none;
	--imgOpacity: 1;
	/* Couleur du masque */
	--maskHue: 350;
	/* 0..360 */
	--maskSat: 90%;
	--maskLight: 60%;
	/* Couleur réutilisable (masque + barre) */
	--maskColor: hsl(var(--maskHue) var(--maskSat) var(--maskLight));
}

*
{
	box-sizing: border-box;
}

html,body
{
	height:100%;
}

body
{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
	color: var(--text);
	/* Fond original */
	background:radial-gradient(1200px 600px at 20% 10%, rgba(255,77,109,.20), transparent 50%),radial-gradient(1000px 600px at 85% 20%, rgba(56,189,248,.18), transparent 55%),radial-gradient(900px 600px at 50% 90%, rgba(34,197,94,.10), transparent 55%),var(--bg);
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 24px;
	position: relative;
	overflow: hidden;
}

/* Image utilisateur */
body::before
{
	content:"";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: var(--img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: var(--imgOpacity);
	transition: opacity .25s linear;
	filter: saturate(1.05) contrast(1.05) brightness(.85);
	transform: scale(1.02);
}

/* Voile bottom-up */
body::after
{
	content:"";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: var(--heat);
	transition: opacity .25s linear, transform .25s linear;
	transform-origin: bottom;
	transform: scaleY(var(--fill));
	background: linear-gradient(to top,hsla(var(--maskHue), var(--maskSat), var(--maskLight), 0.95) 0%,hsla(var(--maskHue), var(--maskSat), var(--maskLight), 0.82) 55%,hsla(var(--maskHue), var(--maskSat), var(--maskLight), 0.00) 100%  );
	mix-blend-mode: screen;
}

.wrap
{
	width: min(760px, 100%);
}

.card
{
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px;
	backdrop-filter: blur(12px);
}

.top
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.badge
{
	display:inline-flex;
	align-items:center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid var(--stroke);
	border-radius: 999px;
	background: rgba(255,255,255,.04);
	font-weight: 900;
	letter-spacing: .3px;
	user-select: none;
}

.dot
{
	width:10px;
	height:10px;
	border-radius:999px;
	background: var(--work);
	box-shadow: 0 0 18px rgba(255,77,109,.6);
}

.hint
{
	color: var(--muted);
	font-size: 13px;
	line-height: 1.2;
	text-align:right;
	font-weight: 700;
	display: none;
}

.timer
{
	display:grid;
	place-items:center;
	padding: 18px 0 10px;
}

.time
{
	font-size: clamp(56px, 9vw, 84px);
	font-weight: 950;
	letter-spacing: 1px;
}

.sub
{
	margin-top: 6px;
	color: var(--muted);
	font-size: 14px;
	text-align:center;
}

.progress
{
	height: 10px;
	border-radius: 999px;
	border: 1px solid var(--stroke);
	background: rgba(255,255,255,.04);
	overflow:hidden;
	margin: 18px 0 20px;
}

.bar
{
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--maskColor), rgba(255,255,255,0.15));
	border-radius: 999px;
	transition: width .25s linear;
}

.controls
{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.controls-single
{
	grid-template-columns: 1fr;
}

button
{
	appearance:none;
	border: 1px solid var(--stroke);
	background: rgba(255,255,255,.06);
	color: var(--text);
	padding: 12px 14px;
	border-radius: 16px;
	font-weight: 950;
	cursor:pointer;
	transition: transform .08s ease, background .2s ease, opacity .2s ease;
	user-select:none;
	white-space: nowrap;
}

button:hover
{
	background: rgba(255,255,255,.10);
}

button:active
{
	transform: translateY(1px);
}

button:disabled
{
	opacity:.55;
	cursor:not-allowed;
}

.primary
{
	border-color: rgba(255,255,255,.18);
	background: rgba(255,255,255,.10);
}

/* Dashboard compact */
.dash
{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 14px;
}

.stat
{
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.04);
	border-radius: 18px;
	padding: 12px 12px;
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.stat-line
{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px;
}

.stat-k
{
	font-size: 14px;
	font-weight: 950;
	color: rgba(232,238,252,.85);
	letter-spacing: .2px;
}

.stat-v
{
	font-size: 14px;
	font-weight: 950;
	color: rgba(232,238,252,.98);
	white-space: nowrap;
}

#statState
{
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55%;
	text-align: right;
}

/* Fond + slider */
.bg-controls
{
	display:flex;
	gap: 10px;
	align-items:center;
	justify-content:space-between;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,.08);
}

.chip
{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding: 7px 10px;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 999px;
	background: rgba(255,255,255,.04);
	color: rgba(232,238,252,.8);
	font-size: 13px;
	font-weight: 800;
}

.file
{
	display:flex;
	align-items:center;
	gap: 10px;
	flex-wrap:wrap;
}

input[type="file"]
{
	max-width: 260px;
	color: var(--muted);
	font-weight: 700;
}

/* Slider Hue progressif */
#hueSlider
{
	width: 240px;
	height: 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.12);
	outline: none;
	cursor: pointer;
	background: linear-gradient(to right,hsl(0 100% 50%),hsl(15 100% 50%),hsl(30 100% 50%),hsl(45 100% 50%),hsl(60 100% 50%),hsl(75 100% 50%),hsl(90 100% 50%),hsl(105 100% 50%),hsl(120 100% 50%),hsl(135 100% 50%),hsl(150 100% 50%),hsl(165 100% 50%),hsl(180 100% 50%),hsl(195 100% 50%),hsl(210 100% 50%),hsl(225 100% 50%),hsl(240 100% 50%),hsl(255 100% 50%),hsl(270 100% 50%),hsl(285 100% 50%),hsl(300 100% 50%),hsl(315 100% 50%),hsl(330 100% 50%),hsl(345 100% 50%),hsl(360 100% 50%)  );
}

#hueSlider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,.9);
	background: rgba(0,0,0,.25);
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

#hueSlider::-moz-range-thumb
{
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,.9);
	background: rgba(0,0,0,.25);
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

#colorSwatch
{
	width: 38px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.18);
	background: hsl(var(--maskHue) 90% 60%);
	box-shadow: 0 10px 20px rgba(0,0,0,.20);
}

/* SEO bloc */
.seo
{
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,.08);
	color: rgba(232,238,252,.75);
	font-size: 14px;
	line-height: 1.5;
}

.seo h1
{
	text-align:center;
	opacity: 0;
	transform: translateY(10px);
	animation: titleFadeIn 0.8s ease-out forwards;
	text-shadow:0 0 10px rgba(255,255,255,0.08),0 0 25px rgba(255,77,109,0.15);
	font-size: 18px;
	margin: 0 0 8px;
	color: rgba(232,238,252,.92);
}

.seo h2
{
	text-align:center;
	opacity: 0;
	transform: translateY(10px);
	animation: titleFadeIn 0.8s ease-out forwards;
	animation-delay: .2s;
	font-size: 15px;
	margin: 0 0 10px;
	color: rgba(232,238,252,.85);
	font-weight: 800;
	letter-spacing: .2px;
}

@keyframes titleFadeIn
{
	0%
	{
		opacity: 0;
		transform: translateY(10px);
	}

	100%
	{
		opacity: 1;
		transform: translateY(0);
	}
}

/* Support card */
.support-card
{
	margin-top: 16px;
	padding: 16px;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
	backdrop-filter: blur(10px);
	display: none;
}

.support-head
{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.support-title
{
	margin: 0;
	font-size: 16px;
	font-weight: 950;
	letter-spacing: .2px;
}

.support-subtitle
{
	margin: 2px 0 0;
	color: rgba(232,238,252,.72);
	font-size: 13px;
	line-height: 1.35;
}

/* Option A : boutons centrés */
.support-actions
{
	display:flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}

.support-btn
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.06);
	color: rgba(232,238,252,.95);
	text-decoration: none;
	font-weight: 950;
	cursor: pointer;
	transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
	user-select:none;
	white-space: nowrap;
}

.support-btn:hover
{
	background: rgba(255,255,255,.10);
}

.support-btn:active
{
	transform: translateY(1px);
}

.support-btn.amazon
{
	border-color: rgba(255,195,0,.25);
	background: rgba(255,195,0,.08);
}

.support-btn.coffee
{
	border-color: rgba(255,77,109,.22);
	background: rgba(255,77,109,.08);
}

.support-note
{
	margin: 10px 0 0;
	color: rgba(232,238,252,.60);
	font-size: 12px;
	line-height: 1.35;
}

/* Mode styles */
.work .dot
{
	background: var(--work);
	box-shadow: 0 0 18px rgba(255,77,109,.6);
}

.break .dot
{
	background: var(--break);
	box-shadow: 0 0 18px rgba(56,189,248,.6);
}

/*.break .bar
{
	background: linear-gradient(90deg, var(--break), rgba(56,189,248,.65));
}*/

@media (max-width: 720px)
{
	.controls
	{
		grid-template-columns: 1fr 1fr;
	}

	.hint
	{
		text-align:left;
	}

	.top
	{
		flex-direction: column;
		align-items:flex-start;
	}

	input[type="file"]
	{
		max-width: 100%;
	}

	#hueSlider
	{
		width: 100%;
		max-width: 360px;
	}
}

@media (max-width: 520px)
{
	.dash
	{
		grid-template-columns: 1fr;
	}
}

/* Pied de page fixe (bas droite) */
.site-footer
{
	position: fixed;
	right: 12px;
	bottom: 10px;
	z-index: 50;
	font-size: 12px;
	font-weight: 800;
	color: rgba(232,238,252,.55);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.18);
	backdrop-filter: blur(10px);
	pointer-events: none;
	/* ne gêne pas les clics */
}


.card{
  position: relative;
  isolation: isolate; /* ✅ empêche les mix-blend-mode d'affecter l'intérieur */
}


.timer, .time{
  position: relative;
  z-index: 2;                /* ✅ au-dessus des calques décor */
  transform: translateZ(0);  /* ✅ force un calque GPU stable */
  backface-visibility: hidden;
}


.time{
  line-height: 1;          /* ✅ supprime les artefacts de line-box */
  display: inline-block;   /* ✅ évite les calculs de ligne sur un bloc */
}


body::before,
body::after{
  will-change: transform, opacity;
  transform: translateZ(0); /* stabilise la composition */
}



body::after{
  /* petit hack anti-seam : évite une ligne due au scaleY exact */
  transform: translateZ(0) scaleY(var(--fill));
}


body::after{
  mix-blend-mode: normal;  /* au lieu de screen */
}


/* 1) Fond : image (0) puis masque (1) */
body::before{
  z-index: 0;
}

body::after{
  z-index: 1; /* ✅ masque au-dessus de l’image */
}

/* 2) Contenu : au-dessus du fond */
.wrap{
  position: relative;
  z-index: 10; /* ✅ tout ce qui est dans wrap passe au-dessus du masque */
}

/* 3) Card : au-dessus + isolée (anti-mix-blend sur le contenu) */
#card{
  position: relative;
  z-index: 11;
  isolation: isolate; /* ✅ empêche le mix-blend-mode d'affecter le contenu de la card */
}