/* Theme "socopa". */

/* Page template "Jeu - page de texte" (page.php): a blank canvas. */
body.jeu-page-template { margin: 0; }

/* ---------- Home (home.php) ----------
 * Full width band, whatever the page container, filling the screen height.
 * Sizes come from the mockups (preview-home-desktop.png 1920x1080,
 * preview-home-mobile.png 1080x1920).
 */

html:has(.jeu-home) { overflow-x: clip; } /* 100vw includes the scrollbar */

.jeu-home {
	position: relative;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	background-color: #8a5a35;
	background-image: url("fond-bureau.webp");
	background-position: center bottom !important; /* horizontally centered, bottom aligned, whatever the site theme says */
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.jeu-home img {
	display: block;
	max-width: none;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* Frame decoration (not the images inside the form or the button). The logo
 * is a link to the home page: the link is positioned, its image fills it. */
.jeu-home-top > img,
.jeu-home-top > .jeu-home-logo,
.jeu-home-bottom > img,
.jeu-home-hero > img,
.jeu-home-hero > picture > img,
.jeu-home-play { position: absolute; }
.jeu-home-stage .jeu-home-play img { position: static; width: 100%; }
.jeu-home-logo { display: block; }
.jeu-home-logo img { width: 100%; }
.jeu-home-logo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.jeu-home-play { display: block; transition: transform 0.15s ease; }
.jeu-home-play:hover,
.jeu-home-play:focus-visible { transform: scale(1.05); }
.jeu-home-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
	.jeu-home-play { transition: none; }
}

/* Shown to administrators instead of the button when it has no page to go to. */
.jeu-home-play-missing {
	margin: 0;
	padding: 0.5em 0.75em;
	background: #fff;
	color: #000;
	font: 13px/1.3 sans-serif;
	border: 2px dashed #d32f2f;
}
.jeu-home-play-missing:hover { transform: none; }

/* Menu "Main" at the bottom (menu.png): white bold capitals, thin separators.
 * The mockup font is an Adobe one: a standard geometric stack instead, no
 * external font request. */
.jeu-home-menu {
	z-index: 3;
	font-family: Futura, "Century Gothic", "Avenir Next", "URW Gothic", "Trebuchet MS", Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.jeu-home-menu-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jeu-home-menu-list li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Separator: a thin line taller than the text. */
.jeu-home-menu-list li + li::before {
	content: "";
	width: 1px;
	height: 1.6em;
	margin: 0 0.75em;
	background: #fff;
}

.jeu-home-menu-list a {
	white-space: nowrap;
}
/* No hover effect, whatever the site theme says (e.g. a:hover { color }):
 * same look in every state. Keyboard focus stays visible. */
.jeu-home .jeu-home-menu-list a,
.jeu-home .jeu-home-menu-list a:link,
.jeu-home .jeu-home-menu-list a:visited,
.jeu-home .jeu-home-menu-list a:hover,
.jeu-home .jeu-home-menu-list a:focus,
.jeu-home .jeu-home-menu-list a:active {
	color: #fff;
	background: none;
	text-decoration: none;
	opacity: 1;
}
.jeu-home-menu-list a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1023.98px) {
	.jeu-home-menu { font-size: 12px; }
}

/* Wrapped on two lines, partly off the table edge: a shadow for contrast. */
@media (max-width: 768px) {
	.jeu-home-menu { text-shadow: 2px 2px 2px #622; }
}

/* Above 1080px wide: the desktop circle group (--d: circle size), the
 * circle's box holding the label, car and button in % of it. The car keeps
 * its right end on the circle and reaches at most 56% into the left band
 * (--b, as in the mockup), shrinking rather than covering a pack. */
@media (min-width: 1080.02px) {
	.jeu-home-stage {
		--b: calc((100vw - var(--d)) / 2);
		position: relative;
		height: 100svh;
	}

	.jeu-home-top,
	.jeu-home-bottom { display: contents; }

	.jeu-home-hero {
		position: absolute;
		z-index: 1;
		left: calc(50% - var(--d) / 2);
		width: var(--d);
		height: var(--d);
	}

	.jeu-home-rond     { left: 0; top: 0; width: 100%; }
	.jeu-home-par-mois { left: 57.38%; top: 58.44%; width: 31.75%; }
	.jeu-home-voiture  { right: 42.62%; bottom: 0.21%; width: min(85.97%, calc(var(--d) * 0.5738 + var(--b) * 0.56)); }
	.jeu-home-play     { left: 27.32%; top: 89.66%; width: 45.36%; }

	.jeu-home-logo { z-index: 2; left: 0; top: 0; }

	/* On the table edge, centered. */
	.jeu-home-menu { position: absolute; left: 0; right: 0; bottom: 1.5svh; padding: 0 16px; }
}

/* Desktop (1440px wide and more): the circle group spans the
 * height. When the side bands get narrower than 38svh each (packs at ~85% of
 * the mockup), the circle gives up room to them, 300px at most, and its
 * group is centered vertically. The logo and packs are centered in the side
 * bands and shrink when still too narrow. */
@media (min-width: 1440px) {
	/* 66vw at most: tall screens. */
	.jeu-home-stage { --d: min(clamp(87.69svh - 300px, 100vw - 76svh, 87.69svh), 66vw); }

	.jeu-home-hero { top: calc(1.85svh + (87.69svh - var(--d)) / 2); }

	.jeu-home-logo { width: min(50.09svh, calc(var(--b) * 1.11)); }

	.jeu-home-pack-gauche,
	.jeu-home-pack-haut-droit,
	.jeu-home-pack-bas-droit { transform: translateX(-50%); }

	.jeu-home-pack-gauche     { left: calc(var(--b) / 2);         top: 32.59svh; width: min(40.74svh, calc(var(--b) * 0.9)); }
	.jeu-home-pack-haut-droit { left: calc(100vw - var(--b) / 2); top: 8.8svh;   width: min(30.56svh, calc(var(--b) * 0.68)); }
	.jeu-home-pack-bas-droit  { left: calc(100vw - var(--b) / 2); top: 56.48svh; width: min(46.02svh, calc(var(--b) * 1.02)); }
}

/* In between (1080px to 1440px wide): the logo and top pack in the top
 * corners, the other packs in the bottom corners, sized like the mobile
 * mockup (--q: one mobile mockup pixel for 1600 high, or 1440 wide on tall
 * screens). The circle group sits between the top row (377 high) and the
 * bottom packs (their row: 275, plus 20 and the menu, 3rem, below). Circle
 * + car span the full width with the circle centered: the car sticks out
 * 28.59% of the circle on the left, so the circle is 1 / 1.5718 of the
 * width and the car starts at the left edge (same space left empty on the
 * right). The page scrolls when that is taller than the screen. */
@media (min-width: 1080.02px) and (max-width: 1439.98px) {
	.jeu-home-stage {
		--q: min(calc(100svh / 1600), calc(100vw / 1440));
		--d: calc(100vw / 1.5718);
		height: max(100svh, calc(var(--q) * 672 + 3rem + var(--d) * 1.025));
	}

	.jeu-home-hero    { top: calc(var(--q) * 377); }
	.jeu-home-voiture { width: 85.97%; }

	.jeu-home-logo            { width: calc(var(--q) * 580); }
	.jeu-home-pack-haut-droit { right: calc(var(--q) * 15); top: calc(var(--q) * 25);     width: calc(var(--q) * 290); }
	.jeu-home-pack-gauche     { left: calc(var(--q) * 88);  bottom: calc(var(--q) * 20 + 3rem); width: calc(var(--q) * 407); }
	.jeu-home-pack-bas-droit  { right: calc(var(--q) * 49); bottom: calc(var(--q) * 20 + 3rem); width: calc(var(--q) * 448); }
}

/* Mobile (1080px wide and less): three rows, the top one at the top, the
 * packs at the bottom, the spare height between them. Units are one mockup
 * pixel (1080 wide): --u for the circle group, the full width (its sides are
 * cropped); --p for the logo and packs, full size unless shrinking them
 * (below). */
@media (max-width: 1080px) {
	.jeu-home { background-image: url("fond-mobile.webp"); }

	.jeu-home-stage {
		--u: calc(100vw / 1080);
		--p: var(--u);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100svh;
	}

	.jeu-home-top { position: relative; z-index: 2; height: calc(var(--p) * 377); }
	.jeu-home-logo            { left: 0; top: 0; width: calc(var(--p) * 580); }
	.jeu-home-pack-haut-droit { right: calc(var(--p) * 15); top: calc(var(--p) * 25); width: calc(var(--p) * 290); }

	.jeu-home-hero {
		position: relative;
		z-index: 1;
		width: calc(var(--u) * 1080);
		height: calc(var(--u) * 1165);
		margin: calc(var(--p) * -30) auto 0;
	}

	.jeu-home-rond     { left: 0; top: 0; width: 100%; }
	/* Over the car, as in the mockup. */
	.jeu-home-par-mois { z-index: 1; left: calc(var(--u) * 720); top: calc(var(--u) * 663);  width: calc(var(--u) * 345); }
	.jeu-home-voiture  { left: calc(var(--u) * 5);   top: calc(var(--u) * 688);  width: calc(var(--u) * 805); }
	.jeu-home-play     { left: calc(var(--u) * 283); top: calc(var(--u) * 1033); width: calc(var(--u) * 514); }

	.jeu-home-bottom {
		position: relative;
		height: calc(var(--p) * 275);
		margin: calc(var(--p) * 23) 0 calc(var(--p) * 30);
	}

	.jeu-home-pack-gauche    { left: calc(var(--p) * 88);  top: calc(var(--p) * 13); width: calc(var(--p) * 407); }
	.jeu-home-pack-bas-droit { right: calc(var(--p) * 49); top: 0;                   width: calc(var(--p) * 448); }

	/* Under the packs, on one or two lines (height about 3.5rem, see below). */
	.jeu-home-menu { position: relative; padding: 0 16px 16px; }
}

/* Mobile, logo and packs shrunk only when that makes the page fit the screen:
 * the height left by the circle group (1165) and the menu (about 3.5rem)
 * over the rows' own (675), 60% at the least. At 60% the page needs about
 * 1618 high for 1080 wide: on wider screens it scrolls anyway, so they stay
 * full size. */
@media (max-width: 1080px) and (max-aspect-ratio: 1080/1618) {
	.jeu-home-stage {
		--p: max(calc(var(--u) * 0.6), min(var(--u), calc((100svh - var(--u) * 1165 - 3.5rem) / 675)));
	}
}

/* ---------- Form (form.php) ----------
 * Same frame as the home, the form being the yellow disk (.jeu-disk, the
 * .jeu-home-hero box) in place of the circle and car. Mockup:
 * formulaire-1.psd. Its font (Acumin Condensed) is an Adobe one: Barlow
 * Condensed instead (SIL Open Font License, fonts/OFL.txt), served from the
 * theme folder: no external font request. Windows has no condensed system
 * font, the composition needs one.
 */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }

.jeu-disk {
	box-sizing: border-box;
	margin: 0;
	background: #f8d249;
	border: 10px solid #fff;
	border-radius: 50%;
	color: #000;
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
	text-align: left;
}

.jeu-disk p { margin: 0; }

.jeu-disk-date,
.jeu-disk-intro { text-align: center; }
.jeu-disk-intro { font-weight: 700; text-transform: uppercase; }

.jeu-disk .jeu-messages {
	padding: 0.3em 0.6em;
	background: #fff;
	color: #b00020;
	font-weight: 700;
	text-align: center;
	border-radius: 4px;
}

.jeu-disk .jeu-row { display: flex; }
.jeu-disk .jeu-row-pair { gap: 1.5%; }
.jeu-disk .jeu-row .jeu-field { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; }

.jeu-disk .jeu-row label {
	flex: none;
	margin: 0;
	padding-right: 0.3em;
	color: #44793b;
	font-weight: 500;
	white-space: nowrap;
}

.jeu-disk .jeu-row .jeu-field > input,
.jeu-disk .jeu-row .jeu-liste {
	flex: 1;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 0.4em;
	background: #fff;
	border: 1px solid #52803c;
	border-radius: 0;
	box-shadow: none;
	color: #000;
	font: inherit;
	font-weight: 400;
}
.jeu-disk .jeu-row input[type="file"] { padding: 0; border: 0; background: none; }

.jeu-disk .jeu-field-error > input,
.jeu-disk .jeu-field-error .jeu-liste { border: 2px solid #b00020; }

/* Field errors under the input, without moving anything. */
.jeu-disk .jeu-error {
	position: absolute;
	top: 100%;
	right: 0;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	color: #b00020;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Checkbox then its label (not inside: the règlement label holds a link). */
.jeu-disk .jeu-field-checkbox { position: relative; display: flex; flex-wrap: wrap; gap: 0.35em; align-items: flex-start; }
.jeu-disk .jeu-field-checkbox label { flex: 1; margin: 0; font-weight: 500; cursor: pointer; }
.jeu-disk .jeu-field-checkbox a,
.jeu-disk .jeu-field-checkbox a:link,
.jeu-disk .jeu-field-checkbox a:visited,
.jeu-disk .jeu-field-checkbox a:hover,
.jeu-disk .jeu-field-checkbox a:active { color: inherit; text-decoration: underline; }
.jeu-disk .jeu-field-checkbox .jeu-error { position: static; flex-basis: 100%; white-space: normal; }

.jeu-disk input[type="checkbox"] {
	flex: none;
	box-sizing: border-box;
	margin: 0;
	background: #fff center / 80% no-repeat;
	border: 1px solid #000;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.jeu-disk input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.7 8.5 2.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.jeu-disk input:focus-visible,
.jeu-disk .jeu-liste-toggle:focus-visible { outline: 2px solid #44793b; outline-offset: 1px; }

.jeu-disk-legal { font-weight: 500; text-align: center; }
.jeu-disk-legal a,
.jeu-disk-legal a:hover { color: inherit; text-decoration: none; }

/* The image button: no theme button look. */
.jeu-disk button.jeu-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

/* "Rejet si inscription trop rapide": spinner in place of the button. */
.jeu-disk .jeu-nav .jeu-spinner { display: none; width: 40px; margin: 0 auto; }
.jeu-disk .jeu-nav.jeu-waiting .jeu-button { display: none !important; }
.jeu-disk .jeu-nav.jeu-waiting .jeu-spinner { display: block; }
.jeu-disk .jeu-nav.jeu-waiting:hover { transform: none; }

/* Above 1080px wide: the disk content is the mockup's composition, in its
 * pixels (disk 948 wide) scaled with the disk: --k. */
@media (min-width: 1080.02px) {
	/* The ring as an inset shadow: no border offsetting the content. */
	.jeu-disk { --k: calc(var(--d) / 948); border: 0; box-shadow: inset 0 0 0 10px #fff; }

	.jeu-disk > * { position: absolute; }

	.jeu-disk-date  { left: 0; right: 0; top: calc(var(--k) * 96);  font-size: calc(var(--k) * 41); line-height: 1; }
	.jeu-disk-intro { left: 0; right: 0; top: calc(var(--k) * 146); font-size: calc(var(--k) * 30); line-height: 1; }

	/* Between the intro and the fields. */
	.jeu-disk .jeu-messages { left: calc(var(--k) * 100); width: calc(var(--k) * 751); top: calc(var(--k) * 214); box-sizing: border-box; font-size: calc(var(--k) * 15); }

	/* Rows 29 high every 51, labels 23. */
	.jeu-disk-fields { left: calc(var(--k) * 100); width: calc(var(--k) * 751); top: calc(var(--k) * 278); font-size: calc(var(--k) * 23); }
	.jeu-disk .jeu-row { height: calc(var(--k) * 29); margin-bottom: calc(var(--k) * 22); }
	.jeu-disk .jeu-row-pair { gap: calc(var(--k) * 13); }
	.jeu-disk .jeu-row .jeu-field > input,
	.jeu-disk .jeu-row .jeu-liste { height: 100%; font-size: calc(var(--k) * 18); }
	/* Email and phone inputs aligned (label box 109). */
	.jeu-disk .jeu-field-email label,
	.jeu-disk .jeu-field-tel label { box-sizing: border-box; min-width: calc(var(--k) * 109); }
	.jeu-disk .jeu-error { font-size: calc(var(--k) * 12); }

	/* Boxes 20 x 21 every 40, text 16 (wider than the mockup's 440: its text is
	 * squeezed to 80%). */
	.jeu-disk-consents { left: calc(var(--k) * 99); width: calc(var(--k) * 640); top: calc(var(--k) * 571); font-size: calc(var(--k) * 16); line-height: calc(var(--k) * 19); }
	.jeu-disk-consents .jeu-field-checkbox + .jeu-field-checkbox { margin-top: calc(var(--k) * 8); }
	.jeu-disk input[type="checkbox"] { width: calc(var(--k) * 20); height: calc(var(--k) * 21); }
	.jeu-disk-consents .jeu-field-checkbox { gap: calc(var(--k) * 4); }

	/* Legal notice inscribed in the circle: 14 on 18. The two floats (down to
	 * the disk bottom) cut out everything outside a circle of radius 420
	 * around the disk center (474, 474), i.e. 180 above the text top. */
	.jeu-disk-legal {
		left: 0;
		right: 0;
		top: calc(var(--k) * 654);
		font-size: calc(var(--k) * 14);
		line-height: calc(var(--k) * 18);
	}
	.jeu-disk-shape { width: 50%; height: calc(var(--k) * 294); }
	.jeu-disk-shape-left {
		float: left;
		shape-outside: radial-gradient(circle calc(var(--k) * 420) at 100% calc(var(--k) * -180), transparent 99.5%, #000 100%);
	}
	.jeu-disk-shape-right {
		float: right;
		shape-outside: radial-gradient(circle calc(var(--k) * 420) at 0 calc(var(--k) * -180), transparent 99.5%, #000 100%);
	}

	.jeu-disk .jeu-nav { z-index: 1; }
}

/* Disk size. Desktop: as the home circle (gives room to the side packs). In
 * between: no car to make room for (form, result, closed, text pages), so native size (948) within the width
 * less 16px each side. */
@media (min-width: 1080.02px) and (max-width: 1439.98px) {
	.jeu-home-form .jeu-home-stage,
	.jeu-home-result .jeu-home-stage,
	.jeu-home-closed .jeu-home-stage,
	.jeu-home-page .jeu-home-stage { --d: min(948px, calc(100vw - 32px)); }
}

/* 1080px wide and less (mockup: preview-formulaire-mobile.png, 1080 wide, in
 * --u units): the top of a circle 1130 wide (wider than the screen, the sides
 * cut) going on as a full width rectangle, the content in flow, the button
 * over its bottom edge. The circle top where the home one is; bottom packs
 * hidden. Text sizes follow the mockup with readable minimums on phones. */
@media (max-width: 1080px) {
	.jeu-home-form .jeu-home-stage { --p: var(--u); }
	.jeu-home-form .jeu-home-bottom { display: none; }

	.jeu-home-form .jeu-disk {
		box-sizing: border-box;
		width: calc(var(--u) * 1130);
		height: auto;
		margin: calc(var(--p) * -30) 0 calc(var(--u) * 95) calc(50% - var(--u) * 565);
		/* Content 92 from the screen edges (the panel starts 25 off screen). */
		padding: calc(var(--u) * 100) calc(var(--u) * 117 - 10px) calc(var(--u) * 100);
		border-radius: calc(var(--u) * 565) calc(var(--u) * 565) 0 0;
		font-size: max(15px, calc(var(--u) * 38));
	}

	.jeu-disk-date { font-size: max(22px, calc(var(--u) * 50)); line-height: 1.1; }
	.jeu-disk .jeu-disk-intro { margin-top: calc(var(--u) * 8); font-size: max(16px, calc(var(--u) * 36)); line-height: 1.05; }

	.jeu-disk .jeu-messages { margin: calc(var(--u) * 24) 0 0; font-size: max(14px, calc(var(--u) * 30)); }

	/* One field per row, inputs 48 high every 68. */
	.jeu-disk-fields { margin-top: calc(var(--u) * 40); }
	.jeu-disk .jeu-row { flex-wrap: wrap; row-gap: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 20); }
	.jeu-disk .jeu-row .jeu-field { flex: 1 1 100%; flex-wrap: wrap; }
	.jeu-disk .jeu-row label { padding-right: calc(var(--u) * 20); }
	.jeu-disk .jeu-row .jeu-field > input,
	.jeu-disk .jeu-row .jeu-liste { height: max(36px, calc(var(--u) * 48)); font-size: max(16px, calc(var(--u) * 26)); }
	.jeu-disk .jeu-error { position: static; flex-basis: 100%; font-size: max(13px, calc(var(--u) * 24)); white-space: normal; text-align: right; }

	/* Text 32 on 42, boxes 22. */
	.jeu-disk-consents { margin-top: calc(var(--u) * 45); font-size: max(14px, calc(var(--u) * 32)); line-height: 1.31; }
	.jeu-disk-consents .jeu-field-checkbox { gap: calc(var(--u) * 8); }
	.jeu-disk-consents .jeu-field-checkbox + .jeu-field-checkbox { margin-top: max(6px, calc(var(--u) * 16)); }
	.jeu-disk input[type="checkbox"] { width: max(18px, calc(var(--u) * 22)); height: max(18px, calc(var(--u) * 22)); margin-top: 0.2em; }

	/* Text 22 on 26, justified. */
	.jeu-disk-legal { margin-top: calc(var(--u) * 40); font-size: max(11px, calc(var(--u) * 22)); line-height: 1.2; text-align: justify; }
	.jeu-disk-shape { display: none; }

	/* Centered on the panel's bottom edge, 514 wide. */
	.jeu-home-form .jeu-nav {
		left: 50%;
		top: auto;
		bottom: -5px;
		width: calc(var(--u) * 514);
		transform: translate(-50%, 50%);
	}
	.jeu-home-form .jeu-nav:hover,
	.jeu-home-form .jeu-nav:focus-within { transform: translate(-50%, 50%) scale(1.05); }
	.jeu-home-form .jeu-nav.jeu-waiting:hover { transform: translate(-50%, 50%); }
}

/* ---------- Form, codes step (.jeu-disk-codes) ----------
 * Mockups formulaire-2-bureau.psd and formulaire-2-mobile.psd: title, lead
 * and sticker at the top, two blocks of three white pills (code, produit,
 * magasin), label hidden and placeholder inside. The sticker and arrow come
 * from the mobile mockup (the desktop one has the wrong dates).
 */

.jeu-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jeu-disk-codes p { margin: 0; }
.jeu-disk-title { font-weight: 700; text-align: center; text-transform: uppercase; }
.jeu-disk-lead  { font-weight: 500; }
.jeu-disk-keep  { font-weight: 500; text-align: center; }
.jeu-disk-more  { font-weight: 400; text-align: center; text-transform: uppercase; }
.jeu-disk-foot  { text-align: center; }
.jeu-disk-codes .jeu-disk-consents { text-align: left; }

.jeu-disk-blocks { display: flex; justify-content: space-between; }
.jeu-disk-blocks-single { justify-content: center; }
.jeu-disk-block { display: flex; flex-direction: column; }

.jeu-disk .jeu-pill { position: relative; }
.jeu-disk .jeu-pill > input,
.jeu-disk .jeu-pill .jeu-liste-toggle {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: #000;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.jeu-disk .jeu-pill > input { padding: 0 1em; letter-spacing: 0.04em; }
.jeu-disk .jeu-pill > input::placeholder { color: #8c8c8c; opacity: 1; }
.jeu-disk .jeu-pill .jeu-liste { height: 100%; }
.jeu-disk .jeu-pill .jeu-liste-toggle {
	padding: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 0h20L10 10z' fill='%238c8c8c'/%3E%3C/svg%3E") no-repeat;
	cursor: pointer;
}
/* Nothing chosen yet: grey, like the placeholder. */
.jeu-disk .jeu-pill .jeu-liste:not(.jeu-liste-chosen) .jeu-liste-toggle { color: #8c8c8c; }

.jeu-disk .jeu-pill.jeu-field-error > input,
.jeu-disk .jeu-pill.jeu-field-error .jeu-liste-toggle { border: 2px solid #b00020; }

/* Field error inside the pill, at its bottom (over any layout rule). */
.jeu-disk .jeu-pill .jeu-error {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0.25em;
	left: 0;
	text-align: center;
	pointer-events: none;
}

/* Above 1080px wide: mockup pixels (disk 948 wide) scaled with the disk. */
@media (min-width: 1080.02px) {
	.jeu-disk-head { left: 0; top: 0; width: 100%; height: calc(var(--k) * 400); }
	.jeu-disk-head > * { position: absolute; }

	/* Title 40 on 45, lead 36 on 35. */
	.jeu-disk-title { left: 0; right: 0; top: calc(var(--k) * 93); font-size: calc(var(--k) * 40); line-height: calc(var(--k) * 45); }
	.jeu-disk-lead  { left: 0; right: 0; top: calc(var(--k) * 248); font-size: calc(var(--k) * 36); line-height: calc(var(--k) * 35); text-align: center; }
	/* Image 358 x 352 with its shadow, the white disk 320 wide shown at the
	 * mockup's 208. */
	.jeu-disk-sticker { left: calc(var(--k) * 582); top: calc(var(--k) * 169.5); width: calc(var(--k) * 232.4); }

	/* Pills 392 x 59, 5 apart; blocks 823 apart overall. */
	.jeu-disk-blocks { left: calc(var(--k) * 65); top: calc(var(--k) * 418); width: calc(var(--k) * 823); }
	.jeu-disk-block { gap: calc(var(--k) * 5); width: calc(var(--k) * 392); }
	.jeu-disk .jeu-pill { height: calc(var(--k) * 59); }
	.jeu-disk .jeu-pill > input { font-size: calc(var(--k) * 20); }
	.jeu-disk .jeu-pill .jeu-liste-toggle {
		padding: 0 calc(var(--k) * 56) 0 calc(var(--k) * 30);
		background-position: right calc(var(--k) * 28) center;
		background-size: calc(var(--k) * 20) calc(var(--k) * 10);
		font-size: calc(var(--k) * 13);
	}
	.jeu-disk .jeu-pill .jeu-error { font-size: calc(var(--k) * 11); }

	/* Keep 16, "Maximisez" 30 on 30 about 80 lower. */
	.jeu-disk-foot { left: calc(var(--k) * 60); top: calc(var(--k) * 622); width: calc(var(--k) * 828); }
	.jeu-disk-foot > * + * { margin-top: calc(var(--k) * 10) !important; }
	.jeu-disk-keep { font-size: calc(var(--k) * 16); line-height: 1.2; }
	.jeu-disk-foot .jeu-disk-more { margin-top: calc(var(--k) * 76) !important; font-size: calc(var(--k) * 30); line-height: 1; }
	.jeu-disk-codes .jeu-disk-consents { position: static; width: auto; }
	.jeu-disk-codes .jeu-disk-consents:empty { display: none; }
	.jeu-disk-codes .jeu-messages { position: static; width: auto; }
}

/* 1080px wide and less (formulaire-2-mobile.psd, --u units, the content box
 * starting 92 from the screen edges and 460 from the top). */
@media (max-width: 1080px) {
	.jeu-disk-head { position: relative; height: calc(var(--u) * 398); }
	.jeu-disk-head > * { position: absolute; }

	.jeu-disk-title { left: 0; right: 0; top: calc(var(--u) * 10); font-size: max(18px, calc(var(--u) * 48)); line-height: 1.12; }
	/* Desktop only line breaks (lead: two lines, "Maximisez": one line). */
	.jeu-disk-codes .jeu-br-desktop { display: none; }
	.jeu-disk-lead { right: calc(var(--u) * 319); top: calc(var(--u) * 204); font-size: max(15px, calc(var(--u) * 43)); line-height: 1; text-align: right; }
	/* The white disk shown at the mockup's 292. */
	.jeu-disk-sticker { left: calc(var(--u) * 582.6); top: calc(var(--u) * 71.7); width: calc(var(--u) * 326.7); }

	/* Pills 708 x 104, 11 apart; 10px above and below each block (flex: no
	 * margin collapsing, 20px between the blocks). */
	.jeu-disk-blocks { flex-direction: column; width: calc(var(--u) * 708); max-width: 100%; margin: 0 auto; }
	.jeu-disk-block { gap: calc(var(--u) * 11); margin: 10px 0; }
	.jeu-disk .jeu-pill { height: max(40px, calc(var(--u) * 104)); }
	.jeu-disk .jeu-pill > input { font-size: max(15px, calc(var(--u) * 36)); }
	.jeu-disk .jeu-pill .jeu-liste-toggle {
		padding: 0 calc(var(--u) * 100) 0 calc(var(--u) * 50);
		background-position: right calc(var(--u) * 52) center;
		background-size: max(14px, calc(var(--u) * 34)) max(7px, calc(var(--u) * 15));
		font-size: max(12px, calc(var(--u) * 23.5));
	}
	.jeu-disk .jeu-pill .jeu-error { font-size: max(11px, calc(var(--u) * 20)); }

	.jeu-disk-foot { margin-top: calc(var(--u) * 35); }
	.jeu-disk-foot > * + * { margin-top: calc(var(--u) * 16) !important; }
	.jeu-disk-codes .jeu-messages { margin: 0 0 calc(var(--u) * 16); }
	.jeu-disk-keep { font-size: max(13px, calc(var(--u) * 24)); line-height: 1.25; }
	/* One line, wider than the content box. */
	.jeu-disk-foot .jeu-disk-more { margin: calc(var(--u) * 30) calc(var(--u) * -30) 0 !important; font-size: max(15px, calc(var(--u) * 36)); line-height: 1.1; }
	.jeu-disk-codes .jeu-disk-consents:empty { display: none; }
}

/* ---------- Result (result.php) ----------
 * As the home: the circle (text included) is an image in the .jeu-home-hero
 * box, two versions switched at 1080px with a <picture> (rond-resultat-bureau
 * 948x949, rond-resultat-mobile 1080x1131, ring included). Desktop: sized
 * like the home circle; in between: native size (see Disk size above);
 * mobile: full width, where the home circle is.
 */

@media (max-width: 1080px) {
	.jeu-home-result .jeu-home-hero { height: calc(var(--u) * 1131); }
}

/* Buttons over the circle bottom (prevue-resultat.jpg, circle 948 wide):
 * Rejouer 242 x 69 on the left, Découvrir nos produits 392 x 69 on the
 * right, 39 apart, centered, their top 881 below the circle top. Hover and
 * focus as "Je joue" (.jeu-home-play). */
@media (min-width: 1080.02px) {
	.jeu-home-result .jeu-result-rejouer   { left: 20.5%;   top: 92.93%; width: 25.53%; }
	.jeu-home-result .jeu-result-decouvrir { left: 53.14%;  top: 92.93%; width: 32.35%; }
}

/* 1080px and less: the same, scaled as the mobile circle (1128 for 948). */
@media (max-width: 1080px) {
	.jeu-home-result .jeu-result-rejouer   { left: calc(var(--u) * 204); top: calc(var(--u) * 1049); width: calc(var(--u) * 288); }
	.jeu-home-result .jeu-result-decouvrir { left: calc(var(--u) * 555); top: calc(var(--u) * 1049); width: calc(var(--u) * 367); }
}

/* ---------- Disk pages: closed (form.php) and text pages (page.php) ----------
 * The frame of the home, the yellow disk (.jeu-disk) in the hero box:
 * 1080px and less, 1128 wide (the sides slightly cut), its top 27 above the
 * end of the top row; the ring as an inset shadow on every layout.
 */

@media (max-width: 1080px) {
	.jeu-home-closed .jeu-home-stage,
	.jeu-home-page .jeu-home-stage { --d: calc(var(--u) * 1128); }

	.jeu-home-closed .jeu-disk,
	.jeu-home-page .jeu-disk {
		width: var(--d);
		height: var(--d);
		margin: calc(var(--p) * -27) 0 0 calc(50% - var(--d) / 2);
		border: 0;
		box-shadow: inset 0 0 0 10px #fff;
	}
}

/* Above 1080px wide: as the form's disk (ring as an inset shadow). */
@media (min-width: 1080.02px) {
	.jeu-home-closed .jeu-disk,
	.jeu-home-page .jeu-disk { border: 0; box-shadow: inset 0 0 0 10px #fff; }
}

/* ---------- Game not open / over (form.php, $jeu->closed) ----------
 * The disk page frame (rules above), the message of
 * notopened.php / closed.php centered in it, in disk pixels (948 wide).
 */

.jeu-disk-closed {
	--k: calc(var(--d) / 948);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--k) * 110);
	text-align: center;
}
.jeu-disk-closed > * { position: static; }
.jeu-disk-closed .jeu-closed { font-size: calc(var(--k) * 48); font-weight: 700; line-height: 1.15; text-transform: uppercase; }

/* ---------- Page template "Jeu - page de texte" (page.php) ----------
 * The disk page frame (rules above), the box a square with rounded
 * corners instead of a circle: the page title, the
 * content below it, scrolling inside the square when longer. Disk pixels
 * (948 wide), --k = box / 948.
 */

/* The ring (10px, an inset shadow: it takes no room) plus the padding
 * around the content. The box doesn't scroll: the text block does, within
 * that area, so nothing goes over the padding or the ring. */
.jeu-disk-page {
	--k: calc(var(--d) / 948);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: calc(10px + var(--k) * 55) calc(10px + var(--k) * 40) calc(10px + var(--k) * 40);
	border-radius: calc(var(--k) * 80);
	text-align: center;
}
.jeu-disk-page > * { position: static; }
.jeu-disk-page .jeu-page-text { flex: 1; min-height: 0; text-align: left; overflow-y: auto; overscroll-behavior: contain; }

/* Title 40, text 24 on 25.7, a blank line between paragraphs. */
.jeu-disk-page .jeu-page-title {
	margin: 0 0 calc(var(--k) * 76);
	padding: 0;
	color: #000;
	font-size: calc(var(--k) * 40);
	font-weight: 700;
	line-height: 1;
	font-family: inherit;
	letter-spacing: 0;
	text-transform: uppercase;
}
.jeu-page-text { font-size: calc(var(--k) * 24); font-weight: 500; line-height: calc(var(--k) * 25.7); }
.jeu-disk-page .jeu-page-text > * { margin: 0; }
.jeu-disk-page .jeu-page-text > * + * { margin-top: calc(var(--k) * 25.7); }
.jeu-page-text h2,
.jeu-page-text h3,
.jeu-page-text h4 { color: inherit; font: inherit; font-weight: 700; text-transform: uppercase; }
.jeu-page-text strong { font-weight: 700; }
.jeu-page-text a,
.jeu-page-text a:link,
.jeu-page-text a:visited,
.jeu-page-text a:hover,
.jeu-page-text a:active { color: inherit; text-decoration: underline; }
.jeu-page-text ul,
.jeu-page-text ol { padding: 0; list-style-position: inside; }

/* 1080px and less: the disk is wider than the screen (its sides
 * cut), the square fits within the width less 16px each side. */
@media (max-width: 1080px) {
	.jeu-home-page .jeu-home-stage { --d: calc(var(--u) * 1080 - 32px); }

	/* Readable minimums on phones (the sizes follow the box). */
	.jeu-disk-page .jeu-page-title { font-size: max(20px, calc(var(--k) * 40)); }
	.jeu-page-text { font-size: max(14px, calc(var(--k) * 24)); line-height: max(15px, calc(var(--k) * 25.7)); }
	.jeu-disk-page .jeu-page-text > * + * { margin-top: max(15px, calc(var(--k) * 25.7)); }
}

/* ---------- List fields (form.php $liste, liste.js) ----------
 * Mockup prevue-liste.jpg: the button is the pill (codes step) or the row's
 * input box (generic rows); the list opens under it over what follows, a
 * white panel with one row per value: image on the left (optional), label
 * in capitals. Without the script the values are listed in place.
 */

.jeu-liste { position: relative; }
.jeu-disk .jeu-liste-toggle[hidden] { display: none !important; }
.jeu-disk .jeu-liste-toggle:hover,
.jeu-disk .jeu-liste-toggle:focus { background-color: #fff; color: #000; }
.jeu-disk .jeu-liste:not(.jeu-liste-chosen) .jeu-liste-toggle:hover,
.jeu-disk .jeu-liste:not(.jeu-liste-chosen) .jeu-liste-toggle:focus { color: #8c8c8c; }

/* Generic rows: the box is .jeu-liste (as the inputs), the button fills it. */
.jeu-disk .jeu-row .jeu-liste { padding: 0; }
.jeu-disk .jeu-row .jeu-liste-toggle {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 1.6em 0 0.4em;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 0h20L10 10z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 0.5em center / 0.7em 0.35em;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #000;
	font: inherit;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.jeu-disk .jeu-liste-options {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #d6d6d6;
	color: #000;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-align: left;
}
.jeu-disk .jeu-liste-js .jeu-liste-options {
	display: none;
	position: absolute;
	z-index: 20;
	top: 100%;
	right: 0;
	left: 0;
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.jeu-disk .jeu-liste-js.jeu-liste-open .jeu-liste-options { display: block; }
/* Not enough room under it in the window (liste.js): above the button. */
.jeu-disk .jeu-liste-js.jeu-liste-up .jeu-liste-options { top: auto; bottom: 100%; box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.18); }

.jeu-disk .jeu-liste-option { position: relative; display: flex; align-items: center; margin: 0; cursor: pointer; }
.jeu-disk .jeu-liste-option + .jeu-liste-option { border-top: 1px solid #e3e3e3; }
.jeu-disk .jeu-liste-option:has(input:checked) { background: #f3f3f3; }
/* Mouse only: on touch screens the hover would stick after a tap. */
@media (hover: hover) {
	.jeu-disk .jeu-liste-option:hover { background: #f3f3f3; }
}
.jeu-disk .jeu-liste-option:has(input:focus-visible) { outline: 2px solid #44793b; outline-offset: -2px; }
/* The radio stays focusable (keyboard, validation), the row shows the choice. */
.jeu-disk .jeu-liste-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.jeu-disk .jeu-liste-image { display: flex; flex: none; align-items: center; justify-content: center; }
.jeu-disk .jeu-liste-image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; }
.jeu-disk .jeu-liste-label { font-weight: 400; text-transform: uppercase; }

/* Pill, list open: one card with the list (rounded corners at the bottom). */
.jeu-disk .jeu-pill .jeu-liste-open .jeu-liste-toggle { border-radius: 1em 1em 0 0; }
.jeu-disk .jeu-pill .jeu-liste-options { border-radius: 0 0 1em 1em; }
.jeu-disk .jeu-pill .jeu-liste-js .jeu-liste-options { border-top-color: #e3e3e3; }
.jeu-disk .jeu-pill .jeu-liste-open.jeu-liste-up .jeu-liste-toggle { border-radius: 0 0 1em 1em; }
.jeu-disk .jeu-pill .jeu-liste-up .jeu-liste-options { border-radius: 1em 1em 0 0; border-top-color: #d6d6d6; border-bottom-color: #e3e3e3; }

/* Above 1080px wide: disk pixels (948), rows about 65 high. */
@media (min-width: 1080.02px) {
	.jeu-disk .jeu-liste-option { gap: calc(var(--k) * 24); min-height: calc(var(--k) * 64); padding: calc(var(--k) * 6) calc(var(--k) * 20); }
	.jeu-disk .jeu-liste-image { width: calc(var(--k) * 80); }
	.jeu-disk .jeu-liste-image img { max-height: calc(var(--k) * 52); }
	.jeu-disk .jeu-liste-label { font-size: calc(var(--k) * 14); }
}

/* 1080px and less: mobile mockup units. */
@media (max-width: 1080px) {
	.jeu-disk .jeu-liste-option { gap: calc(var(--u) * 40); min-height: max(56px, calc(var(--u) * 120)); padding: calc(var(--u) * 10) calc(var(--u) * 34); }
	.jeu-disk .jeu-liste-image { width: max(60px, calc(var(--u) * 140)); }
	.jeu-disk .jeu-liste-image img { max-height: max(44px, calc(var(--u) * 96)); }
	.jeu-disk .jeu-liste-label { font-size: max(13px, calc(var(--u) * 26)); }
}