/*
 * Theme "raclette" - client theme (Entremont, "J'peux pas j'ai raclette").
 * Desktop layout of the 1920 x 1080 mockups (work/form.psd). Mobile (end of
 * the file): plain flow layout, page scroll, blocks at max-width 100%.
 * Replaces the default theme's style.css: the form rules are included.
 */

/* Roboto, local (SIL Open Font License 1.1, fonts/OFL.txt): one variable
 * file, weights 400 to 900, latin subset. */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/roboto-latin.woff2") format("woff2");
}

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

/* ---------- Page layout (layout-top.php / layout-bottom.php) ---------- */

.rc-page {
	display: flex;
	flex-direction: column;
	/* The screen height: header, frame and footer always seen, no page scroll
	 * (only the middle of the frame scrolls). */
	height: 100vh;
	height: 100dvh;
	/* Not scaled under its 1920 x 1080: cut on the sides (and bottom); above,
	 * enlarged to cover. */
	background: #fff url("images/background.webp") center top / max(1920px, 100%, 100vh * 1920 / 1080) auto no-repeat;
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-weight: 400;
}
.rc-page *,
.rc-page *::before,
.rc-page *::after { box-sizing: border-box; }

/* Banners (header, footer) and footer menu.
 * The banners (1920 x 105 / 56) at their real size, centered, cut on the
 * sides; wider than 1920px, scaled up with the width (--g, width / 1920).
 * The menu is scaled up with them (--b), never down: 17px, wrapping between
 * links when too wide; at 768px wide and less 12px, the footer as high as it.
 * Ratio as a number with tan(atan2()) (CSS trigonometry), 1 without it.
 * --hh / --fh: header / footer heights. */
.rc-page {
	--g: 1;
	--b: 1;
	--hh: calc(105px * var(--g));
	--fh: calc(56px * var(--g));
}
@supports (width: calc(tan(atan2(1px, 1px)) * 1px)) {
	.rc-page {
		--g: max(1, tan(atan2(100vw, 1920px)));
		--b: var(--g);
	}
}
.rc-header {
	flex: none;
	position: relative;
	z-index: 2;
	height: var(--hh);
	background: #c00c1a url("images/header.webp") center top / auto 100% no-repeat;
}
/* Over the header and the background, centered as in the mockup. */
.rc-logo { position: absolute; top: 0; left: 50%; margin-left: -273px; }
.rc-logo img { display: block; }

/* The frame 16px under the logo (304px from the top with the 288px logo),
 * whatever the header height. */
.rc-main { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding-top: calc(304px - var(--hh)); }

.rc-footer {
	position: relative;
	flex: none;
	height: var(--fh);
	margin-top: 11px;
	background: url("images/footer.webp") center / auto 100% no-repeat;
}
/* Red block fitted to its links: 56px high at 17px as the mockup (em:
 * spacing, separators and height follow the font size). max-content: from
 * left 50% it would only get half the width and wrap; max-width: narrower
 * than the menu, it wraps between links (upwards from the bottom). */
.rc-menu { position: absolute; bottom: 0; left: 50%; width: max-content; max-width: 100%; padding: 0.94em 0.7em; transform: translateX(-50%) scale(var(--b)); transform-origin: 50% 100%; background: #c00c1a; font-size: 17px; }
.rc-menu ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 0.2em; margin: 0; padding: 0; list-style: none; }
.rc-menu li { display: flex; align-items: center; }
.rc-menu li + li::before { content: ""; width: 1px; height: 1.41em; background: #fff; }
.rc-menu a { padding: 0 1em; color: #fff; font-size: 1em; line-height: 1.41; letter-spacing: -0.015em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.rc-menu li:first-child a { padding-left: 0; }
.rc-menu li:last-child a { padding-right: 0; }
.rc-menu a:hover,
.rc-menu a:focus-visible { text-decoration: underline; }
@media (max-width: 768px) {
	.rc-page { background-size: cover; }
	/* As high as the menu, the banner (its height) centered behind it. */
	.rc-footer { display: flex; justify-content: center; height: auto; background: url("images/footer.webp") center / auto var(--fh) no-repeat; }
	.rc-menu { position: static; width: fit-content; max-width: 100%; transform: none; font-size: 12px; }
}

/* Narrow portrait screens: the mobile background (855 x 1268). */
@media (max-width: 1023px) and (orientation: portrait) {
	.rc-page { background-image: url("images/background-mobile.webp"); background-size: cover; }
}

/* ---------- Blue frame: 10px top, stretched middle, 10px bottom ----------
 * The three parts use blue-frame.webp (677 x 674). The middle scales it
 * vertically with its 10px edges pushed out of the box (674 / 654), so only
 * the plain part shows. The frame takes the room left on the screen, at most:
 * the middle grows with its content, then scrolls. The button (.jeu-nav)
 * comes after the bottom part, moved up over it (the middle would cut it). */

/* At most the mockup width, the whole width on narrower screens. */
.rc-cadre { position: relative; display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; width: 100%; max-width: 677px; margin: 0 auto; }
.rc-cadre-haut,
.rc-cadre-bas { flex: none; height: 10px; background: url("images/blue-frame.webp") no-repeat; background-size: 100% 674px; }
.rc-cadre-haut { background-position: center top; }
.rc-cadre-bas { background-position: center bottom; }
.rc-cadre-milieu {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-color: #fff transparent;
	scrollbar-width: thin;
	padding: 31px 0;
	background: url("images/blue-frame.webp") center center no-repeat;
	background-size: 100% calc(100% * 674 / 654);
}

/* letter-spacing: the variable Roboto is a little wider than the mockup's Roboto Black. */
.rc-titre { margin: 0; color: #fff; font-size: 38px; font-weight: 900; line-height: 40px; letter-spacing: -0.45px; text-align: center; text-transform: uppercase; }
.rc-intro { margin: 21px 0 0; font-size: 18px; font-weight: 700; line-height: 22px; text-align: center; }

.rc-obligatoires { flex: none; margin: 10px 0 0; color: #2a3580; font-size: 14px; font-weight: 700; line-height: 17px; text-align: center; }
.rc-obligatoires span { font-size: 0.8em; }

/* ---------- Form ---------- */

/* Bottom: the 40px gap, then the 57px of the middle the button covers (less the middle padding). */
.jeu-form { margin: 0; padding-bottom: 66px; }
.jeu-form .jeu-step { margin: 16px 0 0; font-size: 14px; text-align: center; }

.jeu-form .jeu-messages { margin: 20px 40px 0; padding: 10px 14px; background: #fff; color: #c00c1a; font-size: 15px; font-weight: 700; text-align: center; }
.jeu-form .jeu-messages p { margin: 0; }
.jeu-form .jeu-messages p + p { margin-top: 4px; }

.jeu-form .jeu-error { margin: 4px 0 0; color: #fff; font-size: 13px; font-weight: 700; line-height: 16px; }
.jeu-form .jeu-help,
.jeu-form .jeu-file-sent { margin: 4px 0 0; font-size: 13px; line-height: 16px; }

/* Rows: label right aligned in a 189px column (5px padding), field from 189px. */
.rc-champs { margin-top: 35px; }
.rc-ligne { display: flex; margin: 0 0 20px; }
.rc-ligne > label {
	position: relative;
	top: 5px;
	flex: none;
	width: 189px;
	padding-right: 5px;
	font-size: 21px;
	font-weight: 700;
	line-height: 29px;
	text-align: right;
}
/* line-height 0: the smaller marker must not make the line taller. */
.jeu-required { font-size: 0.75em; line-height: 0; }
.rc-saisie { width: 390px; }

.rc-saisie input[type="text"],
.rc-saisie input[type="email"],
.rc-saisie input[type="tel"] {
	display: block;
	width: 100%;
	height: 29px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #2a3580;
	font: 400 16px/29px "Roboto", Arial, sans-serif;
}
.rc-saisie input[type="file"] { display: block; color: #fff; font: 400 14px "Roboto", Arial, sans-serif; }
.rc-saisie input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jeu-field-error .rc-saisie input { box-shadow: 0 0 0 2px #c00c1a; }

/* Consents: 18px white boxes, text 14px. */
.rc-consentements { margin: 35px 0 0; padding: 0 25px 0 36px; }
.jeu-field-checkbox { margin: 0 0 8px; }
.jeu-field-checkbox > label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 17.5px; cursor: pointer; }
.jeu-field-checkbox input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
/* Checked: a blue square inside the white box. */
.jeu-field-checkbox input[type="checkbox"]:checked { background: #2a3580; box-shadow: inset 0 0 0 4px #fff; }
.jeu-field-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jeu-field-error.jeu-field-checkbox input[type="checkbox"] { box-shadow: 0 0 0 2px #c00c1a; }
.jeu-field-error.jeu-field-checkbox input[type="checkbox"]:checked { box-shadow: inset 0 0 0 4px #fff, 0 0 0 2px #c00c1a; }
.jeu-field-checkbox a { color: #fff; text-decoration: underline; }
.jeu-field-checkbox .jeu-error { margin-left: 26px; }

.jeu-hcaptcha { display: flex; justify-content: center; margin: 24px 0 0; }

/* Button: button.webp (473 x 73), over the bottom edge of the frame: after
 * the bottom part, moved up 67px (6px stay below the frame). */
.jeu-nav {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 73px;
	flex: none;
	margin: -67px 0 0;
}
.jeu-nav .jeu-button {
	display: block;
	width: 473px;
	height: 73px;
	margin: 0;
	padding: 0 0 2px;
	border: 0;
	background: url("images/button.webp") center no-repeat;
	color: #c00c1a;
	font: 900 40px/71px "Roboto", Arial, sans-serif;
	text-transform: uppercase;
	cursor: pointer;
}
.jeu-nav .jeu-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jeu-nav .jeu-spinner { display: none; }
.jeu-nav.jeu-waiting .jeu-button { display: none !important; }
.jeu-nav.jeu-waiting .jeu-spinner { display: block; }

/* ---------- List fields (liste.js, from the default theme) ----------
 * The box of the mockup: 150 x 29, blue arrow and line on the left. */

.rc-ligne-liste .rc-saisie { width: 150px; }
.jeu-liste { position: relative; }
.jeu-liste-toggle[hidden] { display: none; }
.jeu-liste-toggle {
	position: relative;
	display: block;
	width: 100%;
	height: 29px;
	margin: 0;
	padding: 0 8px 0 45px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #2a3580;
	font: 400 16px/29px "Roboto", Arial, sans-serif;
	text-align: left;
	cursor: pointer;
}
/* Arrow: 21 x 17 at 8px / 7px; line: 1px at 37px, 3px from top and bottom. */
.jeu-liste-toggle::before { content: ""; position: absolute; top: 7px; left: 8px; border-style: solid; border-width: 17px 10.5px 0; border-color: #2a3580 transparent transparent; }
.jeu-liste-toggle::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 37px; width: 1px; background: #2a3580; }
.jeu-liste-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jeu-field-error .jeu-liste-toggle { box-shadow: 0 0 0 2px #c00c1a; }
.jeu-liste-current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jeu-liste-options { background: #fff; color: #2a3580; }
.jeu-liste-js .jeu-liste-options {
	display: none;
	position: absolute;
	z-index: 10;
	top: 100%;
	right: 0;
	left: 0;
	max-height: 60vh;
	overflow-y: auto;
	margin-top: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.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-liste-js.jeu-liste-up .jeu-liste-options { top: auto; bottom: 100%; margin: 0 0 2px; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25); }

.jeu-liste-option { position: relative; display: flex; gap: 8px; align-items: center; margin: 0; padding: 4px 8px; font-size: 16px; line-height: 21px; cursor: pointer; }
.jeu-liste-option + .jeu-liste-option { border-top: 1px solid #dfe1ec; }
.jeu-liste-option:has(input:checked) { background: #2a3580; color: #fff; }
/* Mouse only: on touch screens the hover would stick after a tap. */
@media (hover: hover) {
	.jeu-liste-option:hover { background: #dfe1ec; color: #2a3580; }
}
.jeu-liste-option:has(input:focus-visible) { outline: 2px solid #2a3580; outline-offset: -2px; }
/* The radio stays focusable (keyboard, validation), the row shows the choice. */
.jeu-liste-option input { position: absolute; opacity: 0; pointer-events: none; }
.jeu-liste-image { flex: none; width: 3em; }
.jeu-liste-image img { display: block; max-width: 100%; height: auto; max-height: 2.5em; margin: 0 auto; }
.jeu-liste-image:empty { display: none; }

/* ---------- Text pages (page.php: règlement, mentions légales...) ----------
 * The page title, then its content (WordPress editor) in the frame, white
 * text on the blue; the middle of the frame scrolls when it is long. */

.rc-page-texte .rc-titre { font-size: 28px; line-height: 32px; }
.rc-texte { margin: 24px 0 0; padding: 0 40px; font-size: 16px; line-height: 1.5; }
.rc-texte > :first-child { margin-top: 0; }
.rc-texte > :last-child { margin-bottom: 0; }
.rc-texte p,
.rc-texte ul,
.rc-texte ol,
.rc-texte table,
.rc-texte figure { margin: 0 0 1em; }
.rc-texte h2 { margin: 1.4em 0 0.5em; font-size: 22px; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.rc-texte h3 { margin: 1.2em 0 0.4em; font-size: 18px; font-weight: 700; line-height: 1.3; }
.rc-texte h4,
.rc-texte h5,
.rc-texte h6 { margin: 1em 0 0.3em; font-size: 16px; font-weight: 700; }
.rc-texte ul,
.rc-texte ol { padding-left: 1.5em; }
.rc-texte li + li { margin-top: 0.25em; }
.rc-texte a { color: #fff; text-decoration: underline; }
.rc-texte a:hover,
.rc-texte a:focus-visible { text-decoration: none; }
.rc-texte strong,
.rc-texte b { font-weight: 700; }
.rc-texte img { max-width: 100%; height: auto; }
.rc-texte table { width: 100%; border-collapse: collapse; }
.rc-texte th,
.rc-texte td { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.5); text-align: left; vertical-align: top; }
.rc-texte hr { margin: 1.5em 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); }
@media (max-width: 767px), (max-height: 500px) {
	.rc-texte { padding: 0 16px; }
	.rc-texte table { display: block; overflow-x: auto; }
}

/* ---------- Game not open / closed (notopened.php, closed.php) ----------
 * In the form page's frame, in place of the form. The frame as high as in
 * the mockups (655px middle, 675px in all), less when the screen is too
 * short; the content centered in it ("safe": still reachable when it
 * scrolls). Mockup of the not open page: work/pas-ouvert.psd. */

.rc-cadre-ferme .rc-cadre-milieu { display: flex; flex: 0 1 655px; flex-direction: column; justify-content: safe center; padding: 0; }
.rc-ferme-message { margin: 0; padding: 20px 16px; font-size: 38px; font-weight: 900; line-height: 1.2; text-align: center; }

/* Line boxes as high as their font (tops from the mockup). letter-spacing:
 * -0.02em in the mockup, tighter per line for the wider variable Roboto. */
.rc-attente { padding: 8px 0 31px; font-weight: 900; letter-spacing: -0.02em; text-align: center; }
.rc-attente > * { margin: 0; }
.rc-attente-jeu { font-size: 62px; line-height: 62px; letter-spacing: -0.039em; text-transform: uppercase; }
.rc-attente-hashtag { display: block; max-width: calc(100% - 20px); height: auto; margin: 4px auto 0; }
.rc-attente-bientot { margin-top: 10px; font-size: 62px; line-height: 62px; letter-spacing: -0.055em; text-transform: uppercase; }
.rc-attente-date { margin-top: 29px; font-size: 43px; line-height: 45px; letter-spacing: -0.04em; }
.rc-attente > .rc-attente-nombre { display: flex; justify-content: center; align-items: flex-start; gap: 20px; margin-top: -6px; }
.rc-attente-lun { margin-top: 74px; font-size: 55px; line-height: 55px; letter-spacing: -0.05em; }
.rc-attente-200 { font-size: 200px; line-height: 200px; letter-spacing: -0.05em; }
.rc-attente-sweats { margin-top: -22px; font-size: 55px; line-height: 59px; letter-spacing: -0.05em; }

/* ---------- Result page (result.php, work/resultat.psd) ----------
 * The standard layout; in the frame the title and four 264px squares
 * (2 x 2, gaps 62 / 26). result.js flips the chosen one. */

.rc-resultat .rc-cadre-milieu { padding: 10px 0 11px; }
.rc-res-intro { margin: 0; font-size: 22px; font-weight: 900; line-height: 26px; letter-spacing: -0.3px; text-align: center; }
.rc-cases { display: grid; grid-template-columns: 264px 264px; justify-content: center; gap: 26px 62px; margin: 14px 0 0; }
.rc-case { position: relative; display: block; width: 264px; height: 264px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.rc-case:disabled { cursor: default; }
.rc-case:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* The flip: the image shrinks to 0 wide (ease-in), then grows back with
 * the back image (ease-out); 250ms each, as result.js. */
.rc-case img { display: block; transition: transform 250ms ease-out; }
.rc-case.rc-case-flip img { transform: scaleX(0); transition-timing-function: ease-in; }
/* Won: around the square as in the mockup (411 x 293, 95px left, 18px up). */
.rc-case .rc-case-confetti { position: absolute; top: -18px; left: -95px; z-index: 1; width: 411px; height: 293px; max-width: none; pointer-events: none; animation: rc-apparition 400ms ease-out; }
.rc-res-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rc-res-sans-js { display: block; margin: 14px auto 0; }
@media (prefers-reduced-motion: reduce) {
	.rc-case img { transition: none; }
	.rc-case .rc-case-confetti,
	.rc-popup { animation: none; }
}

/* Won popup (work/popup.png): centered on the screen, cannot be closed. */
.rc-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	width: 634px;
	max-width: calc(100vw - 32px);
	height: 305px;
	padding: 48px 16px 0;
	transform: translate(-50%, -50%);
	border: 4px solid #c00c1a;
	background: #fff;
	color: #2a3580;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
	animation: rc-apparition 300ms ease-out;
}
.rc-popup[hidden] { display: none; }
.rc-popup:focus { outline: none; }
.rc-popup p { margin: 0; }
.rc-popup .rc-popup-etape { margin: 7px 0 2px; color: #c00c1a; font-size: 24px; text-transform: uppercase; }
.rc-popup .rc-popup-rappel { margin-top: 12px; color: #c00c1a; }
.rc-popup-puce { color: #c00c1a; font-weight: 900; }

@keyframes rc-apparition {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- Home page (home.php, work/home.psd) ----------
 * Over 1024px wide (and over 500px high): the special background, so
 * everything is scaled (nothing cut): the 1920 x 1080 page scaled to fit the
 * screen (--k: the smaller of width / 1920 and height / 1080), no scroll; the
 * header at the top, the footer at the bottom, both on the whole width at
 * their ratio (the menu scaled with the footer); the rest (.rc-scene:
 * background and frame) aligned top under the header; all centered
 * horizontally.
 * 1024px wide and less: the standard layout (banners, logo, menu as the
 * other pages), page scroll, the frame at its 677px with the sweats in it
 * above the button; on mobile (end of the file) the frame at max-width 100%
 * with smaller fonts, no scaling. */

/* The frame content at the mockup's sizes. */
.rc-home .rc-cadre { display: block; width: 677px; margin: 0; }
/* min-height: the frame keeps its 674px when there is no button. */
.rc-home .rc-cadre-milieu { display: flow-root; min-height: 654px; padding: 45px 0 0; overflow: visible; }

/* Frame content: line boxes as high as their font (tops from the mockup).
 * letter-spacing: -0.02em in the mockup, tighter here per line because the
 * variable Roboto is wider than its Roboto Black / Medium (widths measured). */
.rc-home-dates { margin: 0; font-size: 30px; font-weight: 500; line-height: 30px; letter-spacing: -0.028em; text-align: center; }
.rc-home-titre { margin: 11px 0 0; font-weight: 900; letter-spacing: -0.02em; text-align: center; }
.rc-home-titre > span { display: block; }
.rc-home-tentez { font-size: 55px; line-height: 55px; letter-spacing: -0.056em; }
.rc-home-gagner { margin-top: -10px; font-size: 125px; line-height: 125px; letter-spacing: -0.067em; }
.rc-home-titre > .rc-home-nombre { display: flex; justify-content: center; align-items: flex-start; gap: 17px; margin-top: -31px; }
.rc-home-lun { margin-top: 74px; font-size: 55px; line-height: 55px; letter-spacing: -0.05em; }
.rc-home-200 { font-size: 195px; line-height: 195px; letter-spacing: -0.05em; }
.rc-home-sweats { margin-top: -16px; font-size: 55px; line-height: 55px; letter-spacing: -0.049em; }
.rc-home-hashtag { display: block; margin: 23px auto 0; }
.rc-home-limite { margin: 18px 0 0; font-size: 25px; line-height: 25px; letter-spacing: -0.028em; text-align: center; }
/* Button link (button.webp), over the bottom edge of the frame (8px below it). */
.rc-home-jouer {
	position: relative;
	z-index: 1;
	display: block;
	width: 473px;
	height: 73px;
	margin: 26px auto -18px;
	padding: 0 0 2px;
	background: url("images/button.webp") center no-repeat;
	color: #273585;
	font: 900 40px/71px "Roboto", Arial, sans-serif;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.rc-home-jouer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 1024px wide and less (or short screens): the standard layout, page
 * scroll, the frame at its 677px with the sweats in it above the button. */
.rc-home { height: auto; min-height: 100vh; }
.rc-scene { flex: 1 0 auto; }
/* Bottom 8px: the button below the frame. */
.rc-home .rc-main { flex: 1 0 auto; padding-bottom: 8px; }
.rc-home .rc-cadre { margin: 0 auto; }
.rc-home-sweats-image { display: block; width: 600px; max-width: calc(100% - 32px); height: auto; margin: 20px auto 0; }

@media (min-width: 1025px) and (min-height: 501px) {
	.rc-home {
		--k: 1;
		--hh: calc(100vw * 105 / 1920);
		--fh: calc(100vw * 56 / 1920);
		--b: 1;
		position: relative;
		display: block;
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
		background: #fff;
	}
	@supports (width: calc(tan(atan2(1px, 1px)) * 1px)) {
		.rc-home { --k: min(tan(atan2(100vw, 1920px)), tan(atan2(100vh, 1080px))); --b: tan(atan2(100vw, 1920px)); }
		@supports (height: 100dvh) {
			.rc-home { --k: min(tan(atan2(100vw, 1920px)), tan(atan2(100dvh, 1080px))); }
		}
	}

	/* The page at the mockup's size, scaled by --k from its top center. */
	.rc-scene { position: absolute; top: 0; left: 50%; width: 1920px; height: 1080px; transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 0; background: url("images/background-home.webp") 0 0 / 1920px 1080px no-repeat; }

	.rc-home .rc-header,
	.rc-home .rc-footer { position: absolute; left: 0; width: 100%; margin: 0; }
	.rc-home .rc-header { top: 0; background: url("images/header-home.webp") 0 0 / 100% 100% no-repeat; }
	.rc-home .rc-footer { bottom: 0; z-index: 1; background: url("images/footer.webp") 0 0 / 100% 100% no-repeat; }
	/* Scaled with the footer, it never needs to wrap. */
	.rc-home .rc-menu { max-width: none; }
	/* Logo scaled with the page, at its place (227px from its left edge). */
	.rc-home .rc-logo { left: calc(50% + (227px - 960px) * var(--k)); margin-left: 0; }
	.rc-home .rc-logo img { width: calc(557px * var(--k)); height: auto; }
	.rc-home .rc-main { position: absolute; top: 307px; left: 162px; display: block; width: 677px; padding: 0; }
	/* The sweats are in the background image. */
	.rc-home-sweats-image { display: none; }
}

/* ---------- Mobile (under 768px wide, or under 501px high) ----------
 * No scaling: everything in the flow, page scroll (the frame grows with its
 * content), the blocks that must fit at max-width 100%, fixed smaller font
 * sizes. The header banner at its 105px height behind the logo, the logo in
 * the flow (557px at most), the frame 16px under it and 5px from the sides;
 * texts and form 16px from the frame edges, labels above the fields. */
@media (max-width: 767px), (max-height: 500px) {
	.rc-page { height: auto; min-height: 100vh; min-height: 100dvh; }

	.rc-header { height: auto; padding: 0 5px; background: url("images/header.webp") center top / auto 105px no-repeat; }
	.rc-logo { position: static; display: block; margin: 0; text-align: center; }
	.rc-logo img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; }

	.rc-main { flex: 1 0 auto; min-height: 0; padding: 16px 5px 0; }
	.rc-cadre { flex: none; width: 100%; max-width: 677px; }
	.rc-cadre-milieu { flex: none; overflow: visible; padding: 24px 0; }

	/* Frame contents. */
	.rc-titre,
	.rc-intro,
	.rc-res-intro,
	.rc-champs,
	.rc-consentements { padding: 0 16px; }
	.rc-titre { font-size: 26px; line-height: 30px; letter-spacing: 0; }
	.rc-intro { margin-top: 12px; font-size: 16px; line-height: 20px; }
	/* The mockup line break would leave a word alone. */
	.rc-intro br { display: none; }

	/* Form: labels above the fields, fields on the whole width. */
	.jeu-form { padding-bottom: 0; }
	.jeu-form .jeu-messages { margin: 16px 16px 0; }
	.rc-champs { margin-top: 20px; }
	.rc-ligne { display: block; margin-bottom: 14px; }
	.rc-ligne > label { position: static; display: block; width: auto; padding: 0; margin: 0 0 4px; font-size: 17px; line-height: 22px; text-align: left; }
	.rc-saisie,
	.rc-ligne-liste .rc-saisie { width: 100%; }
	.rc-saisie input[type="text"],
	.rc-saisie input[type="email"],
	.rc-saisie input[type="tel"],
	.jeu-liste-toggle { height: 40px; line-height: 40px; }
	.jeu-liste-toggle::before { top: 12px; }
	.rc-consentements { margin-top: 20px; }

	/* Button: below the frame, 20px over its bottom edge, at most the
	 * width; the image at its ratio. */
	.jeu-nav { min-height: 0; margin: -20px 0 0; padding: 0 16px; }
	.jeu-nav .jeu-button { width: 100%; max-width: 473px; height: auto; aspect-ratio: 473 / 73; padding: 0; background-size: 100% 100%; font-size: 24px; line-height: 1; }
	.rc-obligatoires { margin-top: 12px; padding: 0 16px; }

	/* Home page. */
	.rc-home .rc-cadre { width: 100%; }
	.rc-home .rc-cadre-milieu { min-height: 0; padding: 24px 0 0; }
	.rc-home-dates { padding: 0 16px; font-size: 18px; line-height: 22px; }
	.rc-home-titre { margin-top: 8px; padding: 0 16px; }
	.rc-home-tentez { font-size: 26px; line-height: 28px; letter-spacing: -0.03em; }
	.rc-home-gagner { margin-top: 0; font-size: 64px; line-height: 64px; letter-spacing: -0.04em; }
	.rc-home-titre > .rc-home-nombre { gap: 8px; margin-top: -8px; }
	.rc-home-lun { margin-top: 38px; font-size: 26px; line-height: 28px; letter-spacing: -0.03em; }
	.rc-home-200 { font-size: 100px; line-height: 100px; letter-spacing: -0.04em; }
	.rc-home-sweats { margin-top: -6px; font-size: 26px; line-height: 28px; letter-spacing: -0.03em; }
	.rc-home-hashtag { max-width: calc(100% - 32px); height: auto; margin-top: 14px; }
	.rc-home-limite { margin-top: 12px; padding: 0 16px; font-size: 15px; line-height: 18px; }
	.rc-home-sweats-image { margin-top: 16px; }
	.rc-home-jouer { display: flex; justify-content: center; align-items: center; width: calc(100% - 32px); max-width: 473px; height: auto; aspect-ratio: 473 / 73; margin: 16px auto -18px; padding: 0; background-size: 100% 100%; font-size: 24px; line-height: 1; }

	/* Game not open / closed. */
	.rc-cadre-ferme .rc-cadre-milieu { flex: none; padding: 0; }
	.rc-ferme-message { font-size: 26px; }
	.rc-attente { padding: 16px 16px 24px; }
	.rc-attente-jeu { font-size: 32px; line-height: 34px; letter-spacing: -0.03em; }
	.rc-attente-bientot { margin-top: 8px; font-size: 30px; line-height: 34px; letter-spacing: -0.03em; }
	.rc-attente-date { margin-top: 16px; font-size: 22px; line-height: 26px; letter-spacing: -0.02em; }
	.rc-attente > .rc-attente-nombre { gap: 8px; margin-top: 0; }
	.rc-attente-lun { margin-top: 38px; font-size: 26px; line-height: 28px; letter-spacing: -0.03em; }
	.rc-attente-200 { font-size: 100px; line-height: 100px; letter-spacing: -0.04em; }
	.rc-attente-sweats { margin-top: -6px; font-size: 26px; line-height: 30px; letter-spacing: -0.03em; }

	/* Result page: the squares share the width (264px at most), the
	 * confetti placed in % of the square (same place as on desktop). */
	.rc-res-intro { font-size: 18px; line-height: 22px; }
	.rc-cases { grid-template-columns: repeat(2, minmax(0, 264px)); gap: 16px; padding: 0 16px; }
	.rc-case { width: 100%; height: auto; }
	.rc-case img { width: 100%; height: auto; }
	.rc-case .rc-case-confetti { top: -6.8%; left: -36%; width: 155.7%; height: auto; }
	.rc-res-sans-js { max-width: calc(100% - 32px); height: auto; }
	.rc-popup { height: auto; padding: 24px 16px; font-size: 16px; line-height: 24px; }
	.rc-popup .rc-popup-etape { margin: 8px 0 4px; font-size: 20px; }
}

/* complianz color fix */
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div {
	background: rgb(50,50,100) !important;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .retention-header {
	background: rgb(80,80,150) !important;
}

/* dotation */
figure.absolute-shirts {
	position: absolute;
	bottom: 4%;
	left: -5%;
	right: -5%;
}
@media (max-width: 768px) {
	figure.absolute-shirts {
		position: absolute;
		bottom: 11%;
		left: 1%;
		right: 1%;
	}
}