/* =========================================================================
   MemoQuest 6.31.1 — interface partagée et thèmes isolés
   Règle structurelle : chaque écran est une colonne flexible bornée.
   Rien ne peut déborder, rien ne peut se superposer.
   ========================================================================= */

.mq-shell {
	--ciel-1: #4bc3f0;
	--ciel-2: #8ddcf8;
	--ciel-3: #d9f0fc;
	--ciel-4: #eef8f0;
	--sable: #f6e7c9;

	--blanc: #ffffff;
	--encre: #153c7a;
	--encre-2: #55719c;
	--encre-3: #93a9c6;

	--turq: #16c4ce;
	--turq-2: #0fa3b4;
	--bleu: #2e86e0;
	--bleu-2: #1f6ac0;
	--degrade: linear-gradient(105deg, #16c4ce 0%, #2e86e0 100%);

	--or: #ffc02e;
	--or-2: #e8951c;
	--vert: #4cc93f;
	--vert-2: #2e9e23;
	--rouge: #f04438;
	--orange: #ff8a3d;

	--past-menthe: #e4f7ef;
	--past-bleu: #e7f1fe;
	--past-lilas: #f0ebfd;
	--past-creme: #fdf3e2;
	--past-rose: #fdeaee;
	--past-ciel: #e6f4fd;

	--r-s: 10px;
	--r-m: 16px;
	--r-l: 22px;
	--r-xl: 28px;
	--r-pill: 999px;

	--ombre: 0 2px 4px rgba(21, 60, 122, .06), 0 6px 16px rgba(21, 60, 122, .10);
	--ombre-forte: 0 4px 8px rgba(21, 60, 122, .09), 0 12px 28px rgba(21, 60, 122, .16);

	--ease: cubic-bezier(.32, .72, .24, 1);
	--sortie: cubic-bezier(.16, 1, .3, 1);
	--ressort: cubic-bezier(.34, 1.56, .5, 1);

	--gap: clamp(6px, 1.3vmin, 12px);
	--pad: clamp(8px, 1.8vmin, 18px);

	position: fixed;
	inset: 0;
	z-index: 9;
	overflow: hidden;
	overscroll-behavior: none;
	color: var(--encre);
	font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
	             "Trebuchet MS", Verdana, system-ui, sans-serif;
	font-size: clamp(13px, 1.6vmin, 16px);
	line-height: 1.3;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	background: linear-gradient(180deg,
		var(--ciel-1) 0%, var(--ciel-2) 20%, var(--ciel-3) 46%,
		var(--ciel-4) 72%, var(--sable) 100%);
}

.mq-shell[data-skin="ocean"] {
	--ciel-1:#3fcfe5; --ciel-2:#20a5c8; --ciel-3:#0e769e; --ciel-4:#075a80; --sable:#043d64;
	--turq:#27d9dc; --turq-2:#0daebf; --bleu:#2098e8; --bleu-2:#0f63ad;
	--degrade:linear-gradient(105deg,#27d9dc,#2098e8);
	--encre:#0b376f; --encre-2:#476b91; --encre-3:#86a8c2;
	--mq-ocean-pearl:#fbfeff; --mq-ocean-line:#c8f1f6; --mq-ocean-deep:#033b62;
	background:
		radial-gradient(circle at 50% -12%, rgba(218,255,255,.94) 0%, rgba(92,220,236,.54) 25%, transparent 52%),
		linear-gradient(180deg,#3bcde5 0%,#1b9fc3 24%,#0c779d 52%,#075678 76%,#04395f 100%);
}
.mq-shell[data-skin="ambre"]   { --ciel-1:#ffb457; --ciel-2:#ffd79a; --ciel-3:#fff0d8; --ciel-4:#fff7ea; --sable:#f4dcae; --turq:#ff9d3d; --turq-2:#b6530d; --bleu:#f2711c; --bleu-2:#c9550c; --degrade:linear-gradient(105deg,#ff9d3d,#f2711c); --encre:#4a2b12; --encre-2:#6f4b2f; --encre-3:#9b795a; --past-ciel:#f8e3bf; --past-menthe:#fae8c9; --past-bleu:#f6dfba; --past-lilas:#f2d8bf; --past-creme:#fff3df; --past-rose:#f8d8c5; --ombre:0 2px 4px rgba(96,44,8,.05),0 6px 16px rgba(96,44,8,.11); --ombre-forte:0 4px 8px rgba(96,44,8,.08),0 12px 28px rgba(96,44,8,.17); }
.mq-shell[data-skin="nuit"]    { --ciel-1:#070b14; --ciel-2:#0b1220; --ciel-3:#111b2c; --ciel-4:#172338; --sable:#080d17; --turq:#83dcf6; --turq-2:#5fbdd9; --bleu:#7587ef; --bleu-2:#5262c4; --degrade:linear-gradient(105deg,#83dcf6,#7587ef); --encre:#f4f7fb; --encre-2:#b7c2d5; --encre-3:#8492aa; }

.mq-shell *, .mq-shell *::before, .mq-shell *::after { box-sizing: border-box; }
.mq-shell [hidden] { display: none !important; }
.mq-shell button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.mq-shell :focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; border-radius: 8px; }
.mq-noscript { padding: 2rem; text-align: center; }

.mq-degrade-texte {
	background: linear-gradient(100deg, var(--turq) 0%, var(--bleu) 46%, #1b3a86 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Décor ---------- */
.mq-ambiance { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.mq-ambiance i { position: absolute; border-radius: 50%; will-change: transform; }
.mq-ambiance i:nth-child(1) {
	width: 78vmax; height: 42vmax; left: -20vmax; top: -12vmax;
	background: radial-gradient(ellipse, rgba(255, 255, 255, .5) 0%, transparent 64%);
	animation: mq-derive-a 30s var(--ease) infinite alternate;
}
.mq-ambiance i:nth-child(2) {
	width: 56vmax; height: 56vmax; right: -22vmax; top: 26vmax;
	background: radial-gradient(circle, rgba(76, 201, 63, .18) 0%, transparent 62%);
	animation: mq-derive-b 36s var(--ease) infinite alternate;
}
.mq-ambiance i:nth-child(3) {
	width: 60vmax; height: 40vmax; left: -18vmax; bottom: -12vmax;
	background: radial-gradient(ellipse, rgba(22, 196, 206, .18) 0%, transparent 62%);
	animation: mq-derive-c 42s var(--ease) infinite alternate;
}
@keyframes mq-derive-a { to { transform: translate3d(8vmax, 3vmax, 0) scale(1.1); } }
@keyframes mq-derive-b { to { transform: translate3d(-9vmax, -6vmax, 0) scale(1.14); } }
@keyframes mq-derive-c { to { transform: translate3d(7vmax, -5vmax, 0) scale(1.12); } }

/* =========================================================================
   THÈME OCÉAN 6.26.0 — décor autonome, lumineux et strictement arrière-plan
   ========================================================================= */
.mq-ambiance > .mq-ocean-fish,
.mq-ambiance > .mq-ocean-flora { display:none; }

.mq-shell[data-skin="ocean"] .mq-ambiance {
	contain:strict;
	background:
		radial-gradient(ellipse at 50% 0%,rgba(197,255,255,.44) 0%,rgba(66,204,228,.14) 37%,transparent 68%),
		linear-gradient(180deg,rgba(6,85,124,.02),rgba(0,35,73,.14));
}
.mq-shell[data-skin="ocean"] .mq-ambiance::before {
	content:"";position:absolute;inset:-12% -20% 24%;opacity:.40;
	background:
		repeating-radial-gradient(ellipse at 50% -12%,transparent 0 8%,rgba(213,255,255,.17) 9% 10.4%,transparent 11.5% 19%),
		repeating-linear-gradient(106deg,transparent 0 8%,rgba(232,255,255,.12) 9% 10%,transparent 11% 18%);
	background-size:118% 112%,150% 100%;
	mix-blend-mode:screen;filter:blur(1px);
	animation:mq-ocean-caustics 16s ease-in-out infinite alternate;
	will-change:transform,background-position;
}
.mq-shell[data-skin="ocean"] .mq-ambiance::after {
	content:"";position:absolute;inset:auto 0 0;height:27%;opacity:.50;
	background:
		linear-gradient(180deg,transparent 0%,rgba(1,48,78,.05) 38%,rgba(1,34,64,.34) 100%),
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20260%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22sand%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%230e7c99%22%20stop-opacity%3D%22.08%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23034870%22%20stop-opacity%3D%22.58%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill%3D%22url(%23sand)%22%20d%3D%22M0%20260V202c72-24%20148-18%20216%200%2056%2015%20104%2010%20158-11%2057-22%20118-22%20178%200%2053%2019%20103%2015%20159-8%2058-24%20122-25%20189%201%2062%2025%20112%2021%20170-2%2048-19%2092-21%20139-9%2048%2013%2096%2017%20161%209v60H0Z%22/%3E%3C/svg%3E") center bottom / 120% 100% no-repeat;
	filter:saturate(.96);transform:translateZ(0);
}
.mq-shell[data-skin="ocean"] .mq-ambiance i { border-radius:0; }
.mq-shell[data-skin="ocean"] .mq-ambiance i:nth-child(1) {
	width:82%;height:52%;left:9%;top:-4%;
	background:
		linear-gradient(103deg,transparent 0 18%,rgba(217,255,255,.25) 35%,transparent 53%),
		linear-gradient(78deg,transparent 0 32%,rgba(225,255,255,.17) 46%,transparent 61%);
	filter:blur(5px);transform-origin:50% 0;
	animation:mq-ocean-rays 13s ease-in-out infinite alternate;
}
.mq-shell[data-skin="ocean"] .mq-ambiance i:nth-child(2) {
	width:100%;height:100%;inset:0;
	background:
		radial-gradient(circle at 8% 78%,transparent 0 5px,rgba(220,253,255,.38) 6px 7px,transparent 8px),
		radial-gradient(circle at 91% 64%,transparent 0 7px,rgba(220,253,255,.34) 8px 9px,transparent 10px),
		radial-gradient(circle at 74% 35%,transparent 0 3px,rgba(233,255,255,.32) 4px 5px,transparent 6px),
		radial-gradient(circle at 19% 39%,transparent 0 4px,rgba(233,255,255,.28) 5px 6px,transparent 7px),
		radial-gradient(circle at 58% 82%,transparent 0 4px,rgba(233,255,255,.30) 5px 6px,transparent 7px);
	animation:mq-ocean-bubbles 15s linear infinite;
}
.mq-shell[data-skin="ocean"] .mq-ambiance i:nth-child(3) {
	width:90%;height:24%;left:5%;bottom:-7%;
	background:radial-gradient(ellipse,rgba(53,205,221,.25) 0%,rgba(5,80,112,.14) 55%,transparent 73%);
	filter:blur(18px);animation:mq-ocean-tide 10s ease-in-out infinite alternate;
}

/* Poissons vectoriels : décor discret, aucun clic ni image externe. */
.mq-shell[data-skin="ocean"] .mq-ambiance > .mq-ocean-fish,
.mq-shell[data-skin="ocean"] .mq-ambiance > .mq-ocean-flora {
	display:block;position:absolute;pointer-events:none;z-index:1;will-change:transform;
}
.mq-shell[data-skin="ocean"] .mq-ocean-fish-a {
	width:clamp(170px,36vw,390px);aspect-ratio:13/4;left:3%;top:24%;opacity:.22;
	background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%2080%22%3E%3Cg%20fill%3D%22%23dffcff%22%3E%3Cpath%20d%3D%22M42%2038c18-16%2045-16%2062%200-17%2016-44%2016-62%200Zm-20%200%2020-13v26Z%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2234%22%20r%3D%222%22%20fill%3D%22%230b7194%22/%3E%3Cpath%20d%3D%22M126%2052c14-12%2035-12%2049%200-14%2012-35%2012-49%200Zm-16%200%2016-10v20Z%22%20opacity%3D%22.82%22/%3E%3Ccircle%20cx%3D%22162%22%20cy%3D%2249%22%20r%3D%221.7%22%20fill%3D%22%230b7194%22/%3E%3Cpath%20d%3D%22M190%2025c12-10%2030-10%2042%200-12%2010-30%2010-42%200Zm-14%200%2014-9v18Z%22%20opacity%3D%22.68%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
	animation:mq-ocean-fish-a 29s linear infinite;
}
.mq-shell[data-skin="ocean"] .mq-ocean-fish-b {
	width:clamp(145px,29vw,310px);aspect-ratio:13/4;right:2%;top:58%;opacity:.16;
	background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%2080%22%3E%3Cg%20fill%3D%22%23065f82%22%3E%3Cpath%20d%3D%22M36%2040c20-17%2049-17%2068%200-19%2017-48%2017-68%200Zm-22%200%2022-14v28Z%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2236%22%20r%3D%222%22%20fill%3D%22%23c9f9ff%22/%3E%3Cpath%20d%3D%22M130%2024c14-12%2035-12%2049%200-14%2012-35%2012-49%200Zm-16%200%2016-10v20Z%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M190%2055c12-10%2030-10%2042%200-12%2010-30%2010-42%200Zm-14%200%2014-9v18Z%22%20opacity%3D%22.64%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
	animation:mq-ocean-fish-b 36s linear infinite;
}
.mq-shell[data-skin="ocean"] .mq-ocean-flora {
	inset:auto 0 0;height:24%;opacity:.34;z-index:0;
	background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20stroke%3D%22%23075c78%22%20stroke-width%3D%2218%22%20opacity%3D%22.72%22%3E%3Cpath%20d%3D%22M72%20300c0-105%2011-151%2038-211M76%20205l-48-51M104%20164l50-58M116%20231l46-42%22/%3E%3Cpath%20d%3D%22M1114%20300c0-111-9-158-37-222M1111%20203l49-58M1082%20162l-48-55M1075%20234l-49-43%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%230b7890%22%20stroke-width%3D%2212%22%20opacity%3D%22.62%22%3E%3Cpath%20d%3D%22M190%20300c4-82-2-123-23-171M190%20228l38-42M173%20195l-34-36%22/%3E%3Cpath%20d%3D%22M996%20300c-4-85%202-128%2024-178M998%20224l-37-41M1016%20192l35-37%22/%3E%3C/g%3E%3C/g%3E%3Cg%20fill%3D%22%23096c86%22%20opacity%3D%22.5%22%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%22270%22%20r%3D%2227%22/%3E%3Ccircle%20cx%3D%22940%22%20cy%3D%22272%22%20r%3D%2231%22/%3E%3Cpath%20d%3D%22M0%20300h1200v-34c-73-12-139-9-202%208-69%2018-132%2016-198-3-67-19-135-20-204%200-64%2018-127%2018-190%200-70-20-139-22-207-2-59%2017-126%2020-199%207V300Z%22/%3E%3C/g%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
}

@keyframes mq-ocean-caustics {
	0% { transform:translate3d(-2%,0,0) scale(1.02);background-position:0 0,0 0; }
	100% { transform:translate3d(2%,-1.5%,0) scale(1.07);background-position:8% 5%,-9% 3%; }
}
@keyframes mq-ocean-rays { from { transform:skewX(-3deg) scaleX(.96);opacity:.68; } to { transform:skewX(4deg) scaleX(1.08);opacity:.95; } }
@keyframes mq-ocean-bubbles { from { transform:translate3d(0,7%,0); } to { transform:translate3d(0,-8%,0); } }
@keyframes mq-ocean-tide { to { transform:translate3d(0,-2vmax,0) scale(1.07);opacity:.76; } }
@keyframes mq-ocean-fish-a { from { transform:translate3d(-8%,0,0); } to { transform:translate3d(34%,-10%,0); } }
@keyframes mq-ocean-fish-b { from { transform:translate3d(10%,0,0) scaleX(-1); } to { transform:translate3d(-32%,8%,0) scaleX(-1); } }

/* ---------- Démarrage ---------- */
.mq-boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 2; }
.mq-boot strong { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; }
.mq-boot small { color: var(--encre-2); }
.mq-boot-mark { width: 58px; height: 58px; border-radius: 19px; background: var(--degrade); box-shadow: var(--ombre-forte); animation: mq-battement 1.5s var(--ease) infinite; }
@keyframes mq-battement { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.84) rotate(-9deg); } }

/* =========================================================================
   STRUCTURE — colonnes flexibles, jamais de débordement
   ========================================================================= */
.mq-app {
	position: absolute; inset: 0; z-index: 1;
	display: flex; flex-direction: column; gap: var(--gap);
	padding: max(var(--pad), env(safe-area-inset-top)) var(--pad) max(var(--pad), env(safe-area-inset-bottom));
	overflow: hidden;
}
.mq-app > .mq-top,
.mq-app > .mq-nav { flex: 0 0 auto; }
.mq-stage { position: relative; flex: 1 1 auto; min-height: 0; }

.mq-view {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; gap: var(--gap);
	overflow: hidden;
	opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
	transition: opacity .24s var(--sortie), transform .36s var(--sortie), visibility .36s;
}
.mq-view.is-active { opacity: 1; visibility: visible; transform: none; }
/* Le premier et le dernier bloc gardent leur taille, celui du milieu absorbe. */
.mq-view > *:nth-child(1),
.mq-view > *:nth-child(3) { flex: 0 1 auto; min-height: 0; }
.mq-view > *:nth-child(2) { flex: 1 1 auto; min-height: 0; }
.mq-view > .mq-choix { display: grid; }

/* =========================================================================
   BANDEAU JOUEUR — une seule rangée, jamais de retour à la ligne
   ========================================================================= */
.mq-top {
	display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
	padding: 6px 8px; border-radius: var(--r-l);
	background: var(--blanc); box-shadow: var(--ombre);
	min-height: 54px;
}
.mq-avatar {
	position: relative; width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
	background: var(--degrade); color: #fff; font-weight: 900; font-size: 1rem;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(22, 196, 206, .28);
}
.mq-avatar > img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; }
.mq-avatar b {
	position: absolute; right: -5px; bottom: -5px;
	min-width: 20px; height: 20px; padding: 0 4px; border-radius: 99px;
	display: flex; align-items: center; justify-content: center;
	background: var(--turq); color: #fff; font-size: .64rem; font-weight: 900;
	border: 2px solid #fff;
}
.mq-profil-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mq-profil-info strong { font-size: .88rem; font-weight: 900; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-xp { height: 7px; border-radius: 99px; background: #e4ecf5; overflow: hidden; }
.mq-xp i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--turq), #3ad8ac); transition: width .5s var(--sortie); }

.mq-chip {
	display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
	padding: 4px 5px 4px 4px; border-radius: var(--r-pill);
	background: #f4f8fc; font-weight: 900; font-size: .88rem;
	font-variant-numeric: tabular-nums; color: var(--encre);
	transition: transform .18s var(--ressort);
}
.mq-chip .mq-coin {
	width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #ffe08a, var(--or) 52%, var(--or-2));
	box-shadow: inset 0 -2px 3px rgba(140, 80, 0, .3); color: #7a4a00;
}
.mq-chip .mq-coin svg { width: 14px; height: 14px; stroke-width: 3; }
.mq-chip b { padding: 0 2px; }
.mq-chip .mq-plus {
	width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--turq); color: #fff; font-weight: 900; font-size: .9rem; line-height: 1;
}
.mq-chip:active { transform: scale(.94); }
.mq-chip.is-pinged { animation: mq-bourse .7s var(--ressort); }
@keyframes mq-bourse { 28% { transform: scale(1.14) rotate(-3deg); } 58% { transform: scale(.97); } }

.mq-icon-btn {
	width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; position: relative;
	display: flex; align-items: center; justify-content: center;
	color: var(--bleu); background: #f4f8fc;
	transition: transform .16s var(--ressort), background .2s;
}
.mq-icon-btn svg { width: 19px; height: 19px; stroke-width: 2.6; }
.mq-icon-btn:active { transform: scale(.9); }
.mq-coffre { color: var(--or-2); }
.mq-coffre.is-pret::after {
	content: ""; position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%;
	background: var(--rouge); border: 2px solid #fff;
	animation: mq-badge 1.6s var(--ease) infinite;
}
@keyframes mq-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- Titres ---------- */
.mq-eyebrow { font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--turq-2); margin: 0; }
.mq-title { font-size: clamp(1.15rem, 3.4vmin, 1.9rem); font-weight: 900; letter-spacing: -.035em; margin: 2px 0 0; }
.mq-lede { color: var(--encre-2); margin: 3px 0 0; font-size: .84rem; font-weight: 700; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.mq-btn {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 12px 20px; border-radius: var(--r-pill);
	font-weight: 900; letter-spacing: -.01em; min-height: 46px;
	color: var(--encre); background: var(--blanc); box-shadow: var(--ombre);
	transition: transform .14s var(--ease), box-shadow .2s var(--ease);
}
.mq-btn svg { width: 19px; height: 19px; stroke-width: 2.6; flex: 0 0 auto; }
.mq-btn:active { transform: translateY(2px) scale(.98); }
.mq-btn[disabled] { opacity: .45; pointer-events: none; }
.mq-shell .mq-btn-primary {
	color: #fff;
	background-color: #2287dd;
	background-image: linear-gradient(105deg, #16c4ce 0%, #2e86e0 100%);
	box-shadow: 0 4px 0 #1f6ac0, 0 8px 18px rgba(31, 106, 192, .3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.mq-shell[data-skin="ambre"] .mq-btn-primary { background-color:#f2711c; background-image:linear-gradient(105deg,#ff9d3d,#f2711c); box-shadow:0 4px 0 #c9550c, 0 8px 18px rgba(201,85,12,.3); }
.mq-shell[data-skin="nuit"] .mq-btn-primary { background-color:#3d4aa8; background-image:linear-gradient(105deg,#6d7fd6,#3d4aa8); box-shadow:0 4px 0 #2a3480, 0 8px 18px rgba(42,52,128,.3); }
.mq-shell .mq-btn-primary::after {
	content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 40%;
	border-radius: var(--r-pill);
	background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
	pointer-events: none;
}
.mq-shell .mq-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f6ac0; }
.mq-btn-vert { color: #fff; background: linear-gradient(105deg, #5fd94f, var(--vert-2)); box-shadow: 0 4px 0 #237a1a, 0 8px 18px rgba(46, 158, 35, .3); }
.mq-btn-vert:active { transform: translateY(3px); box-shadow: 0 1px 0 #237a1a; }
.mq-btn-ghost { background: rgba(255, 255, 255, .8); color: var(--encre-2); box-shadow: none; }

.mq-play {
	width: min(78%, 560px); min-height: clamp(58px, 8.8vmin, 82px); margin-inline: auto;
	font-size: clamp(1.25rem, 4.5vmin, 2rem); letter-spacing: .045em; gap: 14px;
	flex: 0 0 auto;
}
.mq-play svg { width: 1.05em; height: 1.05em; fill: currentColor; stroke: none; }
.mq-play span { position: relative; z-index: 1; }

/* =========================================================================
   PLAQUES ET TUILES
   ========================================================================= */
.mq-pick {
	display: flex; align-items: center; gap: 12px; text-align: left;
	padding: 11px 13px; border-radius: var(--r-l);
	background: var(--blanc); box-shadow: var(--ombre);
	transition: transform .18s var(--ressort), box-shadow .22s;
}
.mq-pick:active { transform: scale(.98); }
.mq-pick-icon { width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--past-ciel); color: var(--bleu); }
.mq-pick-icon svg { width: 22px; height: 22px; stroke-width: 2.4; }
.mq-pick > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.mq-pick strong { display: block; font-weight: 900; color: var(--encre); }
.mq-pick small { display: block; color: var(--encre-2); font-size: .78rem; font-weight: 700; }
.mq-pick > svg:last-child { width: 17px; height: 17px; flex: 0 0 auto; color: var(--encre-3); stroke-width: 3; }

@keyframes mq-tuile-entree { to { transform: none; opacity: 1; } }

 
 
 
 
 
 

/* Rail de catégories */
.mq-panneau {
	padding: 8px; border-radius: var(--r-xl);
	background: rgba(255, 255, 255, .74); box-shadow: var(--ombre);
	min-height: 0; overflow: hidden;
}
.mq-rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-height: 0; }
.mq-rail::-webkit-scrollbar { display: none; }
.mq-vignette {
	flex: 0 0 auto; width: clamp(62px, 13vmin, 92px);
	display: flex; flex-direction: column; gap: 4px; min-height: 0;
	transition: transform .18s var(--ressort);
}
.mq-vignette:active { transform: scale(.95); }
.mq-vignette figure {
	margin: 0; flex: 0 0 auto; height: clamp(54px, 11vmin, 84px);
	border-radius: var(--r-m); overflow: hidden; padding: 6px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(165deg, #f2fbff, #dff0fa);
	border: 2px solid #fff; box-shadow: var(--ombre);
}
.mq-vignette figure img { width: 100%; height: 100%; object-fit: contain; }
.mq-vignette strong {
	flex: 0 0 auto; text-align: center; font-size: .7rem; font-weight: 900; color: var(--encre);
	background: #fff; border-radius: var(--r-s); padding: 4px 3px; box-shadow: var(--ombre);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================================
   PARCOURS RAPIDE 6.3.1 — reproduction fidèle des maquettes validées
   ========================================================================= */
.mq-view[data-view="miseEnPlace"] {
	gap: clamp(8px, 1.15vh, 12px);
	overflow: hidden;
	isolation: isolate;
}
.mq-view[data-view="miseEnPlace"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 88% 20%, rgba(255,255,255,.32), transparent 24%),
		linear-gradient(155deg, transparent 0 32%, rgba(255,255,255,.13) 32.5% 33%, transparent 33.5% 100%);
}
.mq-setup-head {
	position: relative;
	display: grid;
	grid-template-columns: clamp(48px, 12.5vw, 58px) minmax(0,1fr);
	grid-template-areas: "back copy" "steps steps";
	align-items: end;
	column-gap: clamp(9px, 2.8vw, 15px);
	row-gap: clamp(8px, 1.25vh, 13px);
	padding: clamp(5px, .9vh, 9px) clamp(4px, 1vw, 8px) 0;
	flex: 0 0 clamp(126px, 17.2vh, 158px);
	min-height: 0;
}
.mq-setup-back {
	grid-area: back;
	align-self: start;
	width: clamp(45px, 12vw, 57px);
	height: clamp(45px, 12vw, 57px);
	border-radius: clamp(14px, 4vw, 19px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #153c7a;
	background: rgba(255,255,255,.90);
	border: 1px solid rgba(255,255,255,.95);
	box-shadow: inset 0 2px 2px rgba(255,255,255,.9), 0 8px 20px rgba(21,60,122,.14);
	transition: transform .17s var(--ressort), box-shadow .2s var(--ease);
}
.mq-setup-back:active { transform: scale(.92); box-shadow: 0 3px 9px rgba(21,60,122,.12); }
.mq-setup-back svg { width: 52%; height: 52%; stroke-width: 2.9; }
.mq-setup-copy { grid-area: copy; min-width: 0; align-self: end; padding-bottom: 1px; }
.mq-setup-copy .mq-eyebrow {
	margin: 0 0 clamp(5px,.7vh,8px);
	font-size: clamp(.78rem, 3.2vw, .98rem);
	font-weight: 950;
	letter-spacing: .16em;
	line-height: 1;
	color: #0fa3b4;
}
.mq-setup-copy .mq-title {
	margin: 0;
	font-size: clamp(1.75rem, 7.3vw, 2.35rem);
	line-height: .98;
	font-weight: 950;
	letter-spacing: -.055em;
	color: #153c7a;
	text-wrap: balance;
}
.mq-setup-steps {
	grid-area: steps;
	display: flex;
	align-items: center;
	gap: clamp(8px, 2.3vw, 14px);
	padding-left: clamp(4px, 1vw, 8px);
}
.mq-setup-steps i {
	width: clamp(36px, 11vw, 58px);
	height: clamp(5px, .72vh, 7px);
	border-radius: 999px;
	background: rgba(46,134,224,.18);
	box-shadow: inset 0 1px 2px rgba(21,60,122,.08);
	transition: background .25s var(--ease), transform .25s var(--ressort);
}
.mq-setup-steps i.is-on {
	background: linear-gradient(100deg,#16c4ce,#2e86e0);
	box-shadow: 0 2px 8px rgba(22,196,206,.28);
}
.mq-setup-grid {
	display: grid;
	min-height: 0;
	overflow: hidden;
	gap: clamp(9px, 1.35vh, 13px);
	align-content: center;
}
.mq-carreau {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: clamp(23px, 6.8vw, 31px);
	background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,252,255,.88));
	border: 2px solid rgba(255,255,255,.98);
	box-shadow: inset 0 2px 2px rgba(255,255,255,.95), 0 9px 22px rgba(21,60,122,.13), 0 2px 4px rgba(21,60,122,.05);
	transition: transform .18s var(--ressort), box-shadow .24s var(--ease), border-color .2s var(--ease);
}
.mq-carreau::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 16% 2%,rgba(255,255,255,.98),transparent 45%);
	opacity: .75;
}
.mq-carreau:active { transform: scale(.982); }
.mq-carreau[aria-checked="true"] {
	border-color: #16c4ce;
	box-shadow: inset 0 2px 2px #fff, 0 0 0 2px rgba(22,196,206,.23), 0 12px 27px rgba(15,163,180,.22);
}
.mq-carreau[aria-checked="true"]::after {
	content: "";
	position: absolute;
	top: clamp(8px,1.3vh,12px);
	right: clamp(8px,2.2vw,12px);
	width: clamp(38px,10.8vw,52px);
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 8;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
		radial-gradient(circle at 34% 24%,#66eadc 0%,#16c4ce 48%,#0b9caf 100%);
	background-size: 56% 56%,100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	border: 3px solid #fff;
	box-shadow: 0 7px 15px rgba(15,163,180,.36),0 0 0 3px rgba(22,196,206,.16);
	animation: mq-tampon .34s var(--ressort);
}
@keyframes mq-tampon { from { transform: scale(0) rotate(-28deg); } }
.mq-carreau strong { color:#153c7a; font-weight:950; line-height:1.04; }
.mq-carreau small { color:#55719c; font-weight:850; line-height:1.08; }
.mq-carreau .mq-price { display:inline-flex;align-items:center;justify-content:center;gap:4px;color:#d99424;font-weight:950; }
.mq-carreau .mq-price svg { width:14px;height:14px;stroke-width:2.4; }

/* Étape 1 — proportions identiques à la maquette Comment jouer. */
.mq-setup-grid.is-experience {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3,clamp(104px,14.5vh,132px));
	align-content: center;
}

.mq-carreau-ico { width:clamp(58px,15vw,78px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2e86e0;background:linear-gradient(145deg,#fff,#e5f3ff);box-shadow:inset 0 2px 2px #fff,0 7px 16px rgba(21,60,122,.13); }
.mq-carreau-ico svg { width:52%;height:52%;stroke-width:2.35; }

/* Étape 3 — dix formats. */
.mq-setup-grid.is-format { grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));align-content:stretch; }
.mq-format-card { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.6vh,7px);padding:clamp(6px,.9vh,10px) 4px; }
.mq-format-card strong { font-size:clamp(.92rem,3.85vw,1.24rem); }
.mq-format-card small { font-size:clamp(.66rem,2.65vw,.86rem);white-space:nowrap; }
.mq-mini-grille { display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(3px,.75vw,4px);padding:clamp(8px,2.4vw,11px);border-radius:clamp(13px,4vw,17px);background:linear-gradient(145deg,rgba(255,255,255,.99),#e7f5fd);box-shadow:inset 0 2px 2px #fff,0 5px 12px rgba(21,60,122,.10); }
.mq-mini-grille i { width:clamp(7px,2.2vw,10px);aspect-ratio:1;border-radius:3px;background:linear-gradient(145deg,#35d8d3,#159ebd);box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }

.mq-setup-foot { padding:0 3px 4px;flex:0 0 auto; }
.mq-setup-foot .mq-btn { width:100%;min-height:clamp(57px,7.6vh,68px);font-size:clamp(1.12rem,4.5vw,1.45rem);box-shadow:0 5px 0 #1f6ac0,0 12px 25px rgba(31,106,192,.31),inset 0 2px 0 rgba(255,255,255,.48); }
.mq-setup-foot .mq-btn::before { content:"";position:absolute;left:4%;right:48%;top:5%;height:44%;border-radius:99px;background:radial-gradient(ellipse at top,rgba(255,255,255,.38),transparent 70%);pointer-events:none; }
.mq-setup-foot .mq-btn svg { width:24px;height:24px;stroke-width:3.1; }

@media (max-width:480px), (max-height:700px) {
	.mq-setup-head { flex-basis:112px;row-gap:5px;padding-top:1px; }
	.mq-setup-copy .mq-eyebrow { margin-bottom:3px;font-size:.7rem; }
	.mq-setup-copy .mq-title { font-size:1.55rem; }
	.mq-setup-grid { gap:7px; }
	.mq-setup-grid.is-experience { grid-template-rows:repeat(3,minmax(86px,1fr)); }
	
	
	
	
	
	
	
	
	.mq-format-card { gap:1px;padding:3px; }
	.mq-mini-grille { padding:5px;gap:2px; }
	
	.mq-setup-foot .mq-btn { min-height:48px;font-size:1rem; }
}
@media (max-width:350px) {
	.mq-setup-head { grid-template-columns:42px minmax(0,1fr);column-gap:8px; }
	.mq-setup-copy .mq-title { font-size:1.6rem; }
	
	
	
	
}

/* Aperçu d'habillage dans la boutique */
.mq-skin-apercu {
	position: relative; overflow: hidden; flex: 0 0 auto;
	width: 40px; height: 52px; border-radius: 11px; border: 3px solid #fff;
	background: linear-gradient(168deg, var(--a, #62e0da), var(--b, #2e86e0));
	box-shadow: var(--ombre);
}
.mq-skin-apercu::before {
	content: ""; position: absolute; inset: 0;
	background: no-repeat center / 48% auto
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.4c.4 0 .8.25 1 .63l2.5 5.06 5.6.82c.9.13 1.26 1.24.6 1.87l-4.05 3.94.96 5.57c.15.9-.8 1.58-1.6 1.15L12 18.82l-5 2.63c-.8.43-1.75-.25-1.6-1.15l.96-5.57-4.05-3.94c-.66-.63-.3-1.74.6-1.87l5.6-.82L11 3.03c.2-.38.6-.63 1-.63Z'/%3E%3C/svg%3E");
}

/* ---------- Options ---------- */
.mq-options { display: grid; gap: 9px; align-content: start; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 2px 2px 6px; }
.mq-options.is-wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mq-options.is-tight { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }

.mq-opt {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
	padding: 10px 8px; border-radius: var(--r-l);
	background: var(--blanc); box-shadow: var(--ombre); border: 2px solid transparent;
	transition: transform .18s var(--ressort), box-shadow .22s, border-color .2s;
}
.mq-opt:active { transform: scale(.97); }
.mq-opt strong { font-weight: 900; font-size: .88rem; color: var(--encre); }
.mq-opt small { color: var(--encre-2); font-size: .74rem; font-weight: 700; }
.mq-opt figure {
	margin: 0; width: 100%; height: clamp(58px, 12vmin, 92px);
	border-radius: var(--r-m); padding: 6px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(165deg, #f2fbff, #ddeffa);
}
.mq-opt figure img { width: 100%; height: 100%; object-fit: contain; }
.mq-opt[aria-checked="true"], .mq-opt.is-on { border-color: var(--turq); box-shadow: 0 0 0 3px rgba(22, 196, 206, .16), var(--ombre-forte); }
.mq-opt[aria-checked="true"]::after, .mq-opt.is-on::after {
	content: ""; position: absolute; top: -8px; right: -8px; width: 25px; height: 25px; border-radius: 50%;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
		linear-gradient(150deg, #35d9c4, var(--turq-2));
	background-size: 62% 62%, 100% 100%; background-position: center; background-repeat: no-repeat;
	border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15, 163, 180, .4);
	animation: mq-tampon .3s var(--ressort);
}
@keyframes mq-tampon { from { transform: scale(0) rotate(-45deg); } }
.mq-opt.is-locked { filter: saturate(.55); }
.mq-opt .mq-price { display: inline-flex; align-items: center; gap: 4px; color: var(--or-2); font-weight: 900; font-size: .78rem; font-variant-numeric: tabular-nums; }
.mq-opt .mq-price svg { width: 13px; height: 13px; }
.mq-opt .mq-ready { color: var(--turq-2); font-weight: 900; font-size: .76rem; }
.mq-opt .mq-ready svg { width: 12px; height: 12px; vertical-align: -2px; }

.mq-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.mq-scroll::-webkit-scrollbar { width: 5px; }
.mq-scroll::-webkit-scrollbar-thumb { background: rgba(21, 60, 122, .18); border-radius: 99px; }

.mq-foot { display: flex; align-items: center; gap: 9px; }
.mq-foot .mq-btn { flex: 1 1 auto; }

/* =========================================================================
   ACCUEIL
   ========================================================================= */
.mq-view[data-view="accueil"] { gap: clamp(8px, 1.5vmin, 15px); }
.mq-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; overflow: visible; }
.mq-demo {
	position: relative; flex: 0 1 auto; height: clamp(82px, 16.5vmin, 154px); min-height: 0;
	display: flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 12px 18px rgba(21,60,122,.22));
}
.mq-demo::before, .mq-demo::after {
	content: "✦"; position: absolute; color: rgba(255,255,255,.9); font-size: clamp(12px,2.1vmin,20px);
	animation: mq-etincelle 2.8s var(--ease) infinite;
}
.mq-demo::before { left: -24%; top: 26%; }
.mq-demo::after { right: -25%; bottom: 24%; animation-delay: 1.2s; }
@keyframes mq-etincelle { 0%,100% { opacity:.2; transform:scale(.65) rotate(0); } 50% { opacity:1; transform:scale(1.18) rotate(35deg); } }
.mq-demo-card {
	height: 100%; aspect-ratio: 3 / 4; border-radius: clamp(16px, 2.8vmin, 24px); position: relative;
	transform-origin: 50% 86%; will-change: transform;
}
.mq-demo-card.is-left { transform: rotate(-10deg) translateX(14%); animation: mq-flotte-a 3.2s var(--ease) infinite alternate; }
.mq-demo-card.is-right { transform: rotate(9deg) translateX(-14%); animation: mq-flotte-b 3.55s var(--ease) infinite alternate; z-index: 2; }
@keyframes mq-flotte-a { to { transform: rotate(-12deg) translate(14%, -6%) scale(1.015); } }
@keyframes mq-flotte-b { to { transform: rotate(11deg) translate(-14%, -5%) scale(1.02); } }
.mq-demo-face {
	position: absolute; inset: 0; border-radius: inherit; display: flex; align-items: center; justify-content: center; overflow: hidden;
	border: clamp(3px,.55vmin,5px) solid #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -12px 18px rgba(21,60,122,.12);
}
.mq-demo-face::after { content:""; position:absolute; inset:-35% 42% -35% -20%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); animation:mq-demo-brille 3.8s var(--ease) infinite; }
@keyframes mq-demo-brille { 0%,28% { transform:translateX(-170%) rotate(18deg); } 62%,100% { transform:translateX(250%) rotate(18deg); } }
.mq-demo-face.is-a { background: linear-gradient(165deg, #42ddd6, #12a9b8); }
.mq-demo-face.is-b { background: linear-gradient(165deg, #ff7c6c, #ef4f3f); }
.mq-demo-face svg { width: 46%; height: 46%; fill: #fff; stroke: none; filter:drop-shadow(0 3px 3px rgba(21,60,122,.18)); }
.mq-demo-seal {
	position: absolute; left: 50%; top: 58%; width: clamp(38px, 6.2vmin, 58px); aspect-ratio: 1;
	transform: translate(-50%, -50%); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 36% 28%, #a8ff83, #58d845 48%, #2e9e23); color: #0a5422; opacity: 0; z-index: 3;
	box-shadow: 0 0 0 5px rgba(76,201,63,.18), 0 9px 16px rgba(21,60,122,.25), inset 0 2px 1px rgba(255,255,255,.5);
	animation: mq-seal 4.4s var(--ease) infinite;
}
.mq-demo-seal svg { width: 54%; height: 54%; stroke-width: 3.4; }
@keyframes mq-seal {
	0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(-12deg); }
	58% { opacity: 1; transform: translate(-50%, -50%) scale(.82) rotate(5deg); }
	66%, 83% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
	94%, 100% { opacity: 0; transform: translate(-50%, -58%) scale(.9); }
}
.mq-wordmark { font-size: clamp(2.15rem, 8.8vmin, 4rem); font-weight: 900; letter-spacing: -.055em; line-height: 1; margin: 3px 0 0; white-space: nowrap; }
.mq-wordmark span { color: var(--turq); }
.mq-wordmark b { color: #153c7a; }

/* =========================================================================
   ENTRÉE PREMIUM V2 — composition dynamique, stable et partagée
   ========================================================================= */
.mq-shell.is-app-intro-active .mq-app { opacity:0;visibility:hidden; }
.mq-shell:not(.is-app-intro-active) .mq-app { opacity:1;visibility:visible;transition:opacity .34s ease; }

.mq-app-intro,
.mq-entry-intro {
	--cinematic-charge:0;
	--cinematic-card-w:clamp(112px,34vw,178px);
	--cinematic-card-half:calc(var(--cinematic-card-w) / 2);
	--cinematic-gap:clamp(6px,1.8vw,12px);
	--intro-background:
		radial-gradient(circle at 50% 18%,rgba(255,255,255,.82) 0%,rgba(91,211,236,.36) 28%,transparent 54%),
		linear-gradient(180deg,#55c6ec 0%,#8cddf5 29%,#dff4f6 61%,#f5e4c5 100%);
	--intro-particles:
		radial-gradient(circle at 15% 17%,rgba(255,255,255,.78) 0 1px,transparent 1.8px),
		radial-gradient(circle at 82% 13%,rgba(25,143,190,.42) 0 1.2px,transparent 2px),
		radial-gradient(circle at 73% 64%,rgba(255,255,255,.44) 0 1px,transparent 1.8px),
		radial-gradient(circle at 23% 72%,rgba(19,158,184,.30) 0 1px,transparent 1.9px),
		radial-gradient(circle at 51% 81%,rgba(255,255,255,.34) 0 1px,transparent 1.8px);
	--intro-halo:radial-gradient(circle,rgba(255,255,255,.62) 0%,rgba(31,190,209,.21) 34%,transparent 68%);
	--intro-text:#123f69;
	--intro-loading-text:#123f69;
	--intro-muted:#315f80;
	--intro-logo-memo:#08aebd;
	--intro-logo-quest:#143f75;
	--intro-accent:#13bfca;
	--intro-accent-soft:rgba(19,191,202,.22);
	--intro-accent-faint:rgba(46,134,224,.12);
	--intro-accent-2:#2e86e0;
	--intro-line:#20becb;
	--intro-border:#ffffff;
	--intro-card-back:linear-gradient(145deg,#19c4ce 0%,#2f8de4 100%);
	--intro-card-front:#10385d;
	--intro-label-bg:rgba(4,27,48,.72);
	--intro-label-text:#ffffff;
	--intro-universe-bg:#eaf8fb;
	--intro-universe-border:rgba(19,109,150,.24);
	--intro-universe-opacity:.26;
	--intro-universe-active-opacity:.46;
	--intro-universe-filter:saturate(.86) brightness(.94);
	--intro-universe-active-filter:saturate(1) brightness(1);
	--intro-universe-overlay:linear-gradient(180deg,rgba(255,255,255,.04),rgba(5,42,65,.58));
	--intro-universe-caption:rgba(248,253,255,.94);
	--intro-track-bg:rgba(255,255,255,.58);
	--intro-track-border:rgba(15,166,190,.82);
	--intro-progress:linear-gradient(90deg,#0fb8c5 0%,#31d7df 48%,#2f8ee1 100%);
	--intro-progress-glow:rgba(26,184,209,.44);
	--intro-version:#315f80;
	--intro-version-strong:#087fa2;
	--intro-shadow:rgba(4,44,73,.26);
	--intro-logo-font:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Trebuchet MS",system-ui,sans-serif;
	--intro-copy-font:ui-rounded,"SF Pro Rounded","Segoe UI Variable Text",system-ui,sans-serif;
	--intro-logo-weight:950;
	--intro-logo-spacing:-.045em;
	--intro-copy-weight:760;
	position:absolute;inset:0;z-index:1000;overflow:hidden;isolation:isolate;
	display:block;pointer-events:auto;opacity:0;color:var(--intro-text);
	font-family:var(--intro-copy-font);
	background:var(--intro-background);
	transition:opacity .34s ease;contain:layout paint style;
}
.mq-entry-intro { z-index:900; }

/* Habillages de l'entrée : un seul moteur de mouvement, six directions artistiques isolées. */
.mq-shell[data-skin="jade"] .mq-app-intro,
.mq-shell[data-skin="jade"] .mq-entry-intro {
	color-scheme:light;
}
.mq-shell[data-skin="ocean"] .mq-app-intro,
.mq-shell[data-skin="ocean"] .mq-entry-intro {
	--intro-background:
		radial-gradient(circle at 50% -5%,rgba(216,255,255,.74) 0%,rgba(58,206,225,.28) 24%,transparent 48%),
		linear-gradient(180deg,#1fb8d1 0%,#087b9f 34%,#075273 67%,#032f4c 100%);
	--intro-particles:
		radial-gradient(circle at 17% 18%,rgba(224,255,255,.74) 0 1px,transparent 2px),
		radial-gradient(circle at 79% 12%,rgba(206,252,255,.64) 0 1.4px,transparent 2.2px),
		radial-gradient(circle at 70% 58%,rgba(89,231,235,.42) 0 1px,transparent 2px),
		radial-gradient(circle at 25% 72%,rgba(206,252,255,.34) 0 1.2px,transparent 2px);
	--intro-halo:radial-gradient(circle,rgba(230,255,255,.48) 0%,rgba(44,224,225,.20) 31%,rgba(21,111,171,.10) 52%,transparent 70%);
	--intro-text:#f5fdff;--intro-loading-text:#f5fdff;--intro-muted:#c4edf3;--intro-logo-memo:#66f2f0;--intro-logo-quest:#ffffff;
	--intro-accent:#52e9e6;--intro-accent-soft:rgba(82,233,230,.22);--intro-accent-faint:rgba(79,169,243,.12);--intro-accent-2:#4fa9f3;--intro-line:#70f2ef;--intro-border:#eaffff;
	--intro-card-back:linear-gradient(145deg,#22d7d7 0%,#1477be 100%);--intro-card-front:#063653;
	--intro-label-bg:rgba(1,26,42,.76);--intro-universe-bg:#063c5b;--intro-universe-border:rgba(153,248,250,.22);
	--intro-universe-opacity:.19;--intro-universe-active-opacity:.34;--intro-universe-filter:saturate(.8) brightness(.74);
	--intro-universe-active-filter:saturate(1) brightness(.9);--intro-universe-overlay:linear-gradient(180deg,rgba(0,23,40,.04),rgba(0,24,42,.76));
	--intro-universe-caption:rgba(225,251,255,.88);--intro-track-bg:rgba(1,28,48,.66);--intro-track-border:rgba(112,242,239,.78);
	--intro-progress:linear-gradient(90deg,#17a8d1 0%,#42e4e1 52%,#bafcff 100%);--intro-progress-glow:rgba(62,228,226,.52);
	--intro-version:#c4edf3;--intro-version-strong:#69f2ef;--intro-shadow:rgba(0,22,41,.44);
	--intro-logo-font:"Avenir Next","Segoe UI Variable Display","Helvetica Neue",system-ui,sans-serif;
}
.mq-shell[data-skin="grenat"] .mq-app-intro,
.mq-shell[data-skin="grenat"] .mq-entry-intro {
	--intro-background:
		radial-gradient(circle at 50% 19%,rgba(255,237,216,.22) 0%,rgba(178,67,91,.18) 29%,transparent 56%),
		linear-gradient(180deg,#3a0c18 0%,#66182d 34%,#3d0d1c 69%,#1c0810 100%);
	--intro-particles:
		radial-gradient(circle at 16% 15%,rgba(255,226,194,.70) 0 1px,transparent 2px),
		radial-gradient(circle at 82% 17%,rgba(244,189,166,.52) 0 1.2px,transparent 2px),
		radial-gradient(circle at 72% 66%,rgba(255,238,218,.26) 0 1px,transparent 1.8px),
		radial-gradient(circle at 22% 74%,rgba(206,101,119,.34) 0 1px,transparent 2px);
	--intro-halo:radial-gradient(circle,rgba(255,242,219,.30) 0%,rgba(202,81,105,.18) 30%,rgba(96,19,40,.10) 52%,transparent 70%);
	--intro-text:#fff5e9;--intro-loading-text:#fff5e9;--intro-muted:#e8c7bb;--intro-logo-memo:#d39b72;--intro-logo-quest:#fff7ec;
	--intro-accent:#c34f69;--intro-accent-soft:rgba(195,79,105,.22);--intro-accent-faint:rgba(141,38,63,.12);--intro-accent-2:#8d263f;--intro-line:#e0aa82;--intro-border:#fff1df;
	--intro-card-back:linear-gradient(145deg,#b84460 0%,#68172e 100%);--intro-card-front:#35101c;
	--intro-label-bg:rgba(35,5,14,.78);--intro-universe-bg:#35101c;--intro-universe-border:rgba(248,210,177,.20);
	--intro-universe-opacity:.18;--intro-universe-active-opacity:.33;--intro-universe-filter:saturate(.72) brightness(.70);
	--intro-universe-active-filter:saturate(.94) brightness(.88);--intro-universe-overlay:linear-gradient(180deg,rgba(37,4,12,.02),rgba(30,4,11,.78));
	--intro-universe-caption:rgba(255,239,224,.88);--intro-track-bg:rgba(29,5,12,.74);--intro-track-border:rgba(224,170,130,.78);
	--intro-progress:linear-gradient(90deg,#84213a 0%,#c75670 52%,#e4b180 100%);--intro-progress-glow:rgba(205,88,111,.46);
	--intro-version:#e3c0b4;--intro-version-strong:#e5ae82;--intro-shadow:rgba(25,2,8,.50);
	--intro-logo-font:ui-serif,Georgia,"Times New Roman",serif;--intro-copy-font:"Avenir Next","Segoe UI Variable Text",system-ui,sans-serif;
	--intro-logo-weight:800;--intro-logo-spacing:-.035em;--intro-copy-weight:680;
}
.mq-shell[data-skin="ardoise"] .mq-app-intro,
.mq-shell[data-skin="ardoise"] .mq-entry-intro {
	--intro-background:
		radial-gradient(circle at 50% 21%,rgba(142,232,255,.16) 0%,rgba(67,93,119,.12) 30%,transparent 56%),
		linear-gradient(180deg,#15242e 0%,#1d2c36 36%,#111b22 70%,#091016 100%);
	--intro-particles:
		radial-gradient(circle at 13% 16%,rgba(220,245,255,.54) 0 1px,transparent 2px),
		radial-gradient(circle at 84% 13%,rgba(126,225,244,.46) 0 1.2px,transparent 2px),
		radial-gradient(circle at 73% 64%,rgba(195,225,236,.25) 0 1px,transparent 1.8px),
		radial-gradient(circle at 24% 75%,rgba(100,198,218,.28) 0 1px,transparent 2px);
	--intro-halo:radial-gradient(circle,rgba(224,249,255,.31) 0%,rgba(95,213,234,.16) 31%,rgba(58,89,112,.10) 52%,transparent 70%);
	--intro-text:#f3f8fb;--intro-loading-text:#f3f8fb;--intro-muted:#bdcbd3;--intro-logo-memo:#7ee8f4;--intro-logo-quest:#f7fbfd;
	--intro-accent:#73ddea;--intro-accent-soft:rgba(115,221,234,.22);--intro-accent-faint:rgba(79,143,172,.12);--intro-accent-2:#4f8fac;--intro-line:#83e6f1;--intro-border:#dce9ee;
	--intro-card-back:linear-gradient(145deg,#344b59 0%,#15252f 100%);--intro-card-front:#111e27;
	--intro-label-bg:rgba(5,15,21,.78);--intro-universe-bg:#15252e;--intro-universe-border:rgba(180,215,228,.18);
	--intro-universe-opacity:.17;--intro-universe-active-opacity:.31;--intro-universe-filter:saturate(.58) brightness(.68);
	--intro-universe-active-filter:saturate(.78) brightness(.84);--intro-universe-overlay:linear-gradient(180deg,rgba(5,16,23,.03),rgba(6,17,23,.78));
	--intro-universe-caption:rgba(224,238,244,.86);--intro-track-bg:rgba(5,14,20,.72);--intro-track-border:rgba(125,225,237,.72);
	--intro-progress:linear-gradient(90deg,#39768d 0%,#73ddea 52%,#d1f9ff 100%);--intro-progress-glow:rgba(103,219,233,.42);
	--intro-version:#b9cbd3;--intro-version-strong:#82e4ef;--intro-shadow:rgba(0,0,0,.50);
	--intro-logo-font:"Segoe UI Variable Display","Helvetica Neue",Arial,system-ui,sans-serif;--intro-copy-font:"Segoe UI Variable Text",system-ui,sans-serif;
	--intro-logo-weight:880;--intro-logo-spacing:-.04em;
}
.mq-shell[data-skin="ambre"] .mq-app-intro,
.mq-shell[data-skin="ambre"] .mq-entry-intro {
	--intro-background:
		radial-gradient(circle at 50% 18%,rgba(255,250,218,.76) 0%,rgba(255,183,70,.31) 29%,transparent 55%),
		linear-gradient(180deg,#f6a843 0%,#f5c477 31%,#ffe8bc 62%,#7a3518 100%);
	--intro-particles:
		radial-gradient(circle at 14% 16%,rgba(255,255,239,.78) 0 1px,transparent 2px),
		radial-gradient(circle at 82% 13%,rgba(255,239,187,.66) 0 1.2px,transparent 2px),
		radial-gradient(circle at 72% 64%,rgba(255,255,241,.34) 0 1px,transparent 1.8px),
		radial-gradient(circle at 23% 73%,rgba(255,188,77,.30) 0 1px,transparent 2px);
	--intro-halo:radial-gradient(circle,rgba(255,255,230,.66) 0%,rgba(255,177,60,.23) 33%,rgba(178,76,20,.10) 54%,transparent 70%);
	--intro-text:#4f2413;--intro-loading-text:#fff4df;--intro-muted:#6d3a22;--intro-logo-memo:#d75f16;--intro-logo-quest:#6a2d13;
	--intro-accent:#ed7a24;--intro-accent-soft:rgba(237,122,36,.22);--intro-accent-faint:rgba(189,78,18,.12);--intro-accent-2:#bd4e12;--intro-line:#f9b94d;--intro-border:#fff7df;
	--intro-card-back:linear-gradient(145deg,#ffad3e 0%,#d45d18 100%);--intro-card-front:#502411;
	--intro-label-bg:rgba(60,24,8,.74);--intro-universe-bg:#7a3518;--intro-universe-border:rgba(255,244,211,.28);
	--intro-universe-opacity:.19;--intro-universe-active-opacity:.36;--intro-universe-filter:saturate(.76) brightness(.76);
	--intro-universe-active-filter:saturate(.98) brightness(.92);--intro-universe-overlay:linear-gradient(180deg,rgba(91,35,9,.03),rgba(76,27,7,.68));
	--intro-universe-caption:rgba(255,248,225,.92);--intro-track-bg:rgba(255,248,225,.52);--intro-track-border:rgba(179,75,15,.70);
	--intro-progress:linear-gradient(90deg,#d85f17 0%,#ffa934 52%,#fff0a6 100%);--intro-progress-glow:rgba(237,123,35,.44);
	--intro-version:#f6ddc1;--intro-version-strong:#ffd47a;--intro-shadow:rgba(83,32,8,.32);
	--intro-logo-font:"Trebuchet MS","Avenir Next","Segoe UI Variable Display",system-ui,sans-serif;--intro-copy-font:"Avenir Next","Segoe UI Variable Text",system-ui,sans-serif;
	--intro-logo-weight:900;--intro-logo-spacing:-.04em;--intro-copy-weight:720;
}
.mq-shell[data-skin="nuit"] .mq-app-intro,
.mq-shell[data-skin="nuit"] .mq-entry-intro {
	--intro-background:
		radial-gradient(circle at 50% 18%,rgba(142,218,255,.15) 0%,rgba(82,99,201,.10) 29%,transparent 56%),
		linear-gradient(180deg,#060b16 0%,#0b1427 36%,#101b35 68%,#050912 100%);
	--intro-particles:
		radial-gradient(circle at 12% 15%,rgba(255,255,255,.78) 0 1px,transparent 2px),
		radial-gradient(circle at 84% 12%,rgba(151,233,255,.64) 0 1.2px,transparent 2px),
		radial-gradient(circle at 72% 61%,rgba(255,255,255,.31) 0 1px,transparent 1.8px),
		radial-gradient(circle at 24% 74%,rgba(112,148,255,.34) 0 1px,transparent 2px),
		radial-gradient(circle at 52% 83%,rgba(255,255,255,.22) 0 1px,transparent 1.8px);
	--intro-halo:radial-gradient(circle,rgba(220,247,255,.27) 0%,rgba(112,230,255,.15) 31%,rgba(83,99,207,.11) 53%,transparent 70%);
	--intro-text:#f3f7ff;--intro-loading-text:#f3f7ff;--intro-muted:#b6c3dc;--intro-logo-memo:#8ceaff;--intro-logo-quest:#ffffff;
	--intro-accent:#83e7fb;--intro-accent-soft:rgba(131,231,251,.22);--intro-accent-faint:rgba(100,119,228,.12);--intro-accent-2:#6477e4;--intro-line:#8ceaff;--intro-border:#e2efff;
	--intro-card-back:linear-gradient(145deg,#263759 0%,#111a32 100%);--intro-card-front:#0d1729;
	--intro-label-bg:rgba(3,9,20,.80);--intro-universe-bg:#101a31;--intro-universe-border:rgba(177,210,255,.17);
	--intro-universe-opacity:.16;--intro-universe-active-opacity:.30;--intro-universe-filter:saturate(.66) brightness(.64);
	--intro-universe-active-filter:saturate(.88) brightness(.82);--intro-universe-overlay:linear-gradient(180deg,rgba(4,10,22,.03),rgba(3,8,18,.82));
	--intro-universe-caption:rgba(226,238,255,.84);--intro-track-bg:rgba(3,9,20,.74);--intro-track-border:rgba(139,232,255,.70);
	--intro-progress:linear-gradient(90deg,#5265d1 0%,#83e7fb 52%,#d9f8ff 100%);--intro-progress-glow:rgba(112,226,250,.46);
	--intro-version:#b5c2dc;--intro-version-strong:#8ceaff;--intro-shadow:rgba(0,0,0,.54);
	--intro-logo-font:"Segoe UI Variable Display","SF Pro Display","Helvetica Neue",system-ui,sans-serif;--intro-copy-font:"Segoe UI Variable Text",system-ui,sans-serif;
	--intro-logo-weight:900;--intro-logo-spacing:-.04em;
}
.mq-app-intro.is-visible,
.mq-entry-intro.is-visible { opacity:1; }
.mq-app-intro::before,
.mq-entry-intro::before {
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.8;
	background:var(--intro-particles);
}
.mq-app-intro::after,
.mq-entry-intro::after {
	content:"";position:absolute;left:50%;top:30%;width:min(84vmin,560px);aspect-ratio:1;
	transform:translate(-50%,-50%);border-radius:50%;z-index:1;pointer-events:none;
	background:var(--intro-halo);
	opacity:calc(.48 + var(--cinematic-charge) * .3);
}

.mq-cinematic-universes { position:absolute;inset:0;z-index:1;pointer-events:none; }
.mq-cinematic-universe {
	position:absolute;width:clamp(86px,25vw,138px);aspect-ratio:3/4;margin:0;border-radius:18px;overflow:hidden;
	background:var(--intro-universe-bg);border:1px solid var(--intro-universe-border);opacity:var(--intro-universe-opacity);
	box-shadow:0 12px 30px var(--intro-shadow);filter:var(--intro-universe-filter);
	transform:rotate(var(--u-rotate));transition:opacity .36s ease,filter .36s ease,box-shadow .36s ease;
}
.mq-cinematic-universe img { width:100%;height:100%;object-fit:cover;display:block; }
.mq-cinematic-universe::after { content:"";position:absolute;inset:0;background:var(--intro-universe-overlay); }
.mq-cinematic-universe figcaption {
	position:absolute;left:8px;right:8px;bottom:10px;z-index:2;color:var(--intro-universe-caption);
	font-size:clamp(.55rem,1.7vw,.78rem);font-weight:850;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mq-cinematic-universe.is-u1 { left:-4%;top:3%;--u-rotate:-8deg; }
.mq-cinematic-universe.is-u2 { left:36%;top:1%;--u-rotate:4deg; }
.mq-cinematic-universe.is-u3 { right:-4%;top:3%;--u-rotate:8deg; }
.mq-cinematic-universe.is-u4 { left:-8%;top:40%;--u-rotate:-7deg; }
.mq-cinematic-universe.is-u5 { right:-8%;top:40%;--u-rotate:7deg; }
.mq-cinematic-universe.is-u6 { left:5%;bottom:3%;--u-rotate:-5deg; }
.mq-pair-cinematic[data-intro-category="animaux"] .mq-cinematic-universe[data-intro-universe="animaux"],
.mq-pair-cinematic[data-intro-category="insectes"] .mq-cinematic-universe[data-intro-universe="insectes"],
.mq-pair-cinematic[data-intro-category="drapeaux"] .mq-cinematic-universe[data-intro-universe="drapeaux"],
.mq-pair-cinematic[data-intro-category="culture-generale"] .mq-cinematic-universe[data-intro-universe="culture-generale"],
.mq-pair-cinematic[data-intro-category="metiers"] .mq-cinematic-universe[data-intro-universe="metiers"],
.mq-pair-cinematic[data-intro-category="fruits-legumes"] .mq-cinematic-universe[data-intro-universe="fruits-legumes"] {
	opacity:var(--intro-universe-active-opacity);filter:var(--intro-universe-active-filter);box-shadow:0 12px 34px var(--intro-shadow);
}

.mq-cinematic-aura {
	position:absolute;left:50%;top:30%;width:min(78vmin,520px);aspect-ratio:1;z-index:2;
	transform:translate(-50%,-50%) scale(.82);border-radius:50%;pointer-events:none;opacity:0;
	background:radial-gradient(circle,rgba(255,255,255,.72) 0 5%,var(--intro-accent-soft) 22%,var(--intro-accent-faint) 43%,transparent 69%);
	transition:opacity .42s ease,transform .82s cubic-bezier(.2,.78,.2,1);
}
.mq-pair-cinematic.is-magnetizing .mq-cinematic-aura { opacity:1;transform:translate(-50%,-50%) scale(1); }

.mq-cinematic-pair {
	position:absolute;left:50%;top:30%;width:min(98vw,720px);height:clamp(270px,44vh,420px);
	transform:translate(-50%,-50%);perspective:1400px;z-index:6;
}
.mq-cinematic-card {
	position:absolute;left:50%;top:50%;width:var(--cinematic-card-w);aspect-ratio:3/4;z-index:4;
	transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;
	transition:transform .92s cubic-bezier(.18,.8,.2,1),filter .3s ease,opacity .3s ease;
}
.mq-pair-cinematic.is-progress-moving .mq-cinematic-card { transition:filter .3s ease,opacity .3s ease; }
.mq-cinematic-card.is-left { transform:translate3d(calc(-50% - min(62vw,390px)),-50%,0) rotate(-4deg) scale(.9); }
.mq-cinematic-card.is-right { transform:translate3d(calc(-50% + min(62vw,390px)),-50%,0) rotate(4deg) scale(.9); }
.mq-pair-cinematic.is-magnetizing .mq-cinematic-card.is-left {
	transform:translate3d(calc(-50% - var(--cinematic-card-half) - var(--cinematic-gap) / 2),-50%,0) rotate(-.7deg) scale(1);
}
.mq-pair-cinematic.is-magnetizing .mq-cinematic-card.is-right {
	transform:translate3d(calc(-50% + var(--cinematic-card-half) + var(--cinematic-gap) / 2),-50%,0) rotate(.7deg) scale(1);
}
.mq-pair-cinematic.is-confirmed .mq-cinematic-card { filter:drop-shadow(0 0 16px rgba(91,230,112,.42)); }
.mq-cinematic-card-inner {
	position:absolute;inset:0;border-radius:clamp(14px,3.6vmin,25px);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
	transition:transform .48s cubic-bezier(.26,.72,.22,1);box-shadow:0 18px 36px rgba(0,0,0,.34);will-change:transform;
}
.mq-pair-cinematic.is-open-left .mq-cinematic-card.is-left .mq-cinematic-card-inner,
.mq-pair-cinematic.is-open-right .mq-cinematic-card.is-right .mq-cinematic-card-inner { transform:rotateY(180deg); }
.mq-cinematic-face {
	position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
	border:clamp(3px,.72vmin,5px) solid var(--intro-border);
}
.mq-cinematic-back {
	transform:rotateY(0deg) translateZ(.2px);background:var(--intro-card-back);
	box-shadow:inset 0 -18px 28px rgba(12,39,79,.2),inset 0 1px 0 rgba(255,255,255,.28);
}
.mq-cinematic-back::before {
	content:"";position:absolute;inset:0;background:no-repeat center/46% auto
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 7 38.4 23.2 56 24.3 42.4 35.6 46.8 53 32 43.4 17.2 53l4.4-17.4L8 24.3l17.6-1.1L32 7Z' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='6.5' fill='%23fff' opacity='.28'/%3E%3C/svg%3E");
	filter:drop-shadow(0 4px 8px rgba(15,43,83,.22));
}
.mq-cinematic-back::after {
	content:"";position:absolute;inset:-25% 48% -25% -35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
	transform:translateX(-170%) rotate(15deg);
}
.mq-pair-cinematic.is-charged .mq-cinematic-back::after { animation:mq-cinematic-card-charge .82s ease-out both; }
@keyframes mq-cinematic-card-charge { to { transform:translateX(440%) rotate(15deg); } }
.mq-cinematic-front { transform:rotateY(180deg) translateZ(.2px);background:var(--intro-card-front);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.mq-cinematic-front img { width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .2s ease; }
.mq-pair-cinematic.is-image-ready .mq-cinematic-front img { opacity:1; }
.mq-cinematic-card-name {
	position:absolute;left:7%;right:7%;bottom:6%;z-index:2;padding:5px 8px;border-radius:999px;
	background:var(--intro-label-bg);color:var(--intro-label-text);font-size:clamp(.64rem,2.1vmin,.9rem);font-weight:900;text-align:center;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.72);
}

/* La ligne de charge reste derrière les deux cartes. */
.mq-cinematic-magnet {
	position:absolute;left:50%;top:50%;width:clamp(126px,38vw,250px);height:18px;z-index:1;
	transform:translate(-50%,-50%) scaleX(.12);transform-origin:center;opacity:0;border-radius:999px;pointer-events:none;
	background:linear-gradient(90deg,transparent,var(--intro-accent-soft) 19%,rgba(255,255,255,.22) 50%,var(--intro-accent-soft) 81%,transparent);
	box-shadow:0 0 16px rgba(44,206,216,.12),0 0 32px rgba(53,105,220,.08);
	transition:transform 1.06s cubic-bezier(.2,.78,.2,1),opacity .26s ease;
}
.mq-cinematic-magnet::before {
	content:"";position:absolute;left:50%;top:50%;width:0;height:4px;border-radius:999px;transform:translate(-50%,-50%);
	background:linear-gradient(90deg,transparent,var(--intro-line) 18%,#fff 50%,var(--intro-line) 82%,transparent);
	box-shadow:0 0 12px rgba(255,255,255,.48),0 0 20px rgba(77,220,220,.32);opacity:.15;
}
.mq-pair-cinematic.is-charging .mq-cinematic-magnet,
.mq-pair-cinematic.is-magnetizing .mq-cinematic-magnet { opacity:.9;transform:translate(-50%,-50%) scaleX(1); }
.mq-pair-cinematic.is-charging .mq-cinematic-magnet::before { animation:mq-cinematic-load-in 1.08s cubic-bezier(.2,.78,.2,1) both; }
@keyframes mq-cinematic-load-in { 0%{width:0;opacity:.15} 56%{opacity:1} 100%{width:100%;opacity:.98} }
.mq-cinematic-magnet i,.mq-cinematic-magnet b { position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%); }
.mq-cinematic-magnet i { width:clamp(22px,5.8vmin,36px);aspect-ratio:1;background:#fff;box-shadow:0 0 0 8px rgba(75,225,207,.12),0 0 26px rgba(255,255,255,.72); }
.mq-cinematic-magnet b { width:clamp(8px,2.3vmin,14px);aspect-ratio:1;background:var(--intro-accent);box-shadow:0 0 12px rgba(255,255,255,.64); }
.mq-pair-cinematic.is-confirmed .mq-cinematic-magnet { opacity:0;transition:opacity .24s ease; }

/* Validation au centre exact de la paire, au-dessus des cartes. */
.mq-cinematic-success {
	position:absolute;left:50%;top:50%;z-index:8;width:clamp(50px,14vmin,82px);aspect-ratio:1;
	transform:translate(-50%,-50%) scale(.2) rotate(-18deg);opacity:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
	color:#123d2b;background:radial-gradient(circle at 34% 24%,#d9ffb5 0%,#7ce95a 44%,#39b934 77%,#239424 100%);
	border:clamp(3px,.8vmin,5px) solid rgba(255,255,255,.98);
	box-shadow:0 12px 24px rgba(27,124,50,.3),0 0 30px rgba(92,238,99,.3),inset 0 -6px 9px rgba(14,105,34,.2),inset 0 4px 8px rgba(255,255,255,.48);
	transition:opacity .18s ease,transform .48s cubic-bezier(.16,.86,.22,1.16);
}
.mq-cinematic-success svg { width:58%;height:58%;stroke-width:3.4; }
.mq-pair-cinematic.is-confirmed .mq-cinematic-success { opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);animation:mq-cinematic-check-in .58s ease-out both; }
@keyframes mq-cinematic-check-in { 55%{transform:translate(-50%,-50%) scale(1.1) rotate(1deg)} }

.mq-cinematic-brand {
	position:absolute;left:50%;top:57%;z-index:12;width:96%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;
	font-family:var(--intro-logo-font);font-size:clamp(2.3rem,11vmin,5rem);font-weight:var(--intro-logo-weight);line-height:1;letter-spacing:var(--intro-logo-spacing);
	filter:drop-shadow(0 10px 18px var(--intro-shadow));
}
.mq-cinematic-letter { display:inline-block;opacity:0;transform:translateY(18px) scale(.9); }
.mq-cinematic-letter.is-memo { color:var(--intro-logo-memo); }
.mq-cinematic-letter.is-quest { color:var(--intro-logo-quest); }
.mq-pair-cinematic.is-branded .mq-cinematic-letter { animation:mq-cinematic-wave-in .68s cubic-bezier(.16,.86,.22,1.12) both;animation-delay:calc(var(--letter-i) * 38ms); }
@keyframes mq-cinematic-wave-in { 0%{opacity:0;transform:translateY(18px) scale(.9)} 56%{opacity:1;transform:translateY(-6px) scale(1.035)} 100%{opacity:1;transform:none} }
.mq-cinematic-caption {
	position:absolute;left:50%;top:65%;z-index:12;transform:translateX(-50%);margin:0;padding:0 clamp(42px,12vw,92px);
	max-width:96%;color:var(--intro-muted);font-family:var(--intro-copy-font);font-size:clamp(.78rem,2.5vmin,1.08rem);font-weight:var(--intro-copy-weight);letter-spacing:.01em;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .32s ease .18s;
}
.mq-cinematic-caption::before,.mq-cinematic-caption::after { content:"";position:absolute;top:50%;width:clamp(24px,8vw,64px);height:2px;background:linear-gradient(90deg,transparent,var(--intro-line)); }
.mq-cinematic-caption::before { left:0; }
.mq-cinematic-caption::after { right:0;transform:scaleX(-1); }
.mq-pair-cinematic.is-branded .mq-cinematic-caption { opacity:1; }

.mq-cinematic-loading {
	position:absolute;left:50%;bottom:max(3.2vh,22px);z-index:12;width:min(76vw,560px);transform:translateX(-50%);
	display:grid;gap:9px;justify-items:center;color:var(--intro-text);font-family:var(--intro-copy-font);font-variant-numeric:tabular-nums;
}
.mq-cinematic-loading-label { color:var(--intro-loading-text);font-size:clamp(.72rem,2.2vmin,.98rem);font-weight:var(--intro-copy-weight);text-align:center;text-shadow:0 2px 8px var(--intro-shadow); }
.mq-cinematic-loading-track {
	position:relative;width:100%;height:clamp(15px,3.8vmin,24px);padding:3px;border-radius:999px;overflow:hidden;
	background:var(--intro-track-bg);border:1px solid var(--intro-track-border);box-shadow:0 0 18px var(--intro-progress-glow),inset 0 0 10px var(--intro-shadow);
}
.mq-cinematic-loading-track i {
	display:block;width:100%;height:100%;border-radius:inherit;transform:scaleX(var(--cinematic-charge));transform-origin:left center;
	background:var(--intro-progress);box-shadow:0 0 13px var(--intro-progress-glow);
	transition:transform .42s cubic-bezier(.2,.74,.2,1);
}
.mq-cinematic-loading-track i::after { content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,rgba(255,255,255,.18) 0 8px,transparent 8px 16px); }
.mq-cinematic-version { display:flex;align-items:center;gap:6px;color:var(--intro-version);font-size:clamp(.68rem,2vmin,.9rem); }
.mq-cinematic-version::before,.mq-cinematic-version::after { content:"";width:clamp(28px,9vw,70px);height:1px;background:linear-gradient(90deg,transparent,var(--intro-line)); }
.mq-cinematic-version::after { transform:scaleX(-1); }
.mq-cinematic-version b { color:var(--intro-version-strong);font-weight:850; }

.mq-cinematic-flare {
	position:absolute;left:50%;top:30%;z-index:5;width:22px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
	background:#fff;box-shadow:0 0 62px 28px rgba(255,255,255,.58),0 0 112px 54px rgba(74,217,203,.22);
}
.mq-pair-cinematic.is-confirmed .mq-cinematic-flare { animation:mq-cinematic-flare .58s ease-out both; }
@keyframes mq-cinematic-flare { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 36%{opacity:.72} 100%{opacity:0;transform:translate(-50%,-50%) scale(6)} }

.mq-app-intro.is-exiting,.mq-entry-intro.is-exiting { opacity:0;pointer-events:none;transition:opacity .56s ease; }
.mq-view[data-view="plateau"].is-awaiting-intro { opacity:0;pointer-events:none;transition:opacity .52s ease; }
.mq-pair-cinematic.is-paused *,.mq-pair-cinematic.is-paused::before,.mq-pair-cinematic.is-paused::after { animation-play-state:paused!important; }
.mq-pair-cinematic.is-reduced * { animation-duration:.18s!important;transition-duration:.18s!important; }
.mq-pair-cinematic.is-reduced .mq-cinematic-flare,.mq-pair-cinematic.is-reduced .mq-cinematic-back::after { display:none; }
@media (prefers-reduced-motion:reduce) {
	.mq-pair-cinematic * { animation-duration:.18s!important;transition-duration:.18s!important; }
	.mq-pair-cinematic .mq-cinematic-flare,.mq-pair-cinematic .mq-cinematic-back::after { display:none; }
}
@media (max-width:480px), (max-height:700px) {
	.mq-app-intro,.mq-entry-intro { --cinematic-card-w:clamp(92px,27vh,132px); }
	.mq-cinematic-pair,.mq-cinematic-aura,.mq-cinematic-flare { top:28%; }
	.mq-cinematic-brand { top:54%;font-size:clamp(1.9rem,9.5vmin,3.4rem); }
	.mq-cinematic-caption { top:63%; }
	.mq-cinematic-loading { bottom:max(2.2vh,14px);gap:6px; }
	.mq-cinematic-universe { width:clamp(68px,20vw,104px); }
}
@media (min-width:700px) {
	.mq-app-intro,.mq-entry-intro { --cinematic-card-w:min(20vmin,184px); }
	.mq-cinematic-loading { width:min(56vw,620px); }
}

/* =========================================================================
   PLATEAU
   ========================================================================= */
.mq-view[data-view="plateau"] { gap: clamp(3px, .7vmin, 6px); }
.mq-view[data-view="plateau"] > .mq-board-wrap { flex: 1 1 auto; min-height: 0; }
.mq-view[data-view="plateau"] > .mq-board-bottom {
	flex: 0 0 auto; min-height: 0;
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: clamp(3px, .7vmin, 6px);
	padding: clamp(2px, .4vmin, 4px) 0 max(1px, env(safe-area-inset-bottom));
}
.mq-gamebar {
	position: relative;
	display: grid; grid-template-columns: clamp(54px, 14vw, 76px) minmax(92px, 1fr) clamp(54px, 14vw, 76px);
	align-items: center; gap: 6px;
	min-height: 42px; padding: 2px 3px;
}
.mq-score-chip {
	position: relative; width: 100%; height: 42px; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	border: 1px solid rgba(255,255,255,.75); border-radius: 13px;
	background: rgba(255,255,255,.88); box-shadow: 0 2px 9px rgba(21,60,122,.11);
	transition: border-color .25s, box-shadow .25s, background .25s;
	contain: layout paint;
}
.mq-score-chip small {
	display: block; width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: clamp(.48rem, 1.65vmin, .62rem); line-height: 1; font-weight: 900;
	letter-spacing: .045em; text-transform: uppercase; text-align: center; color: var(--encre-2);
}
.mq-score-chip .mq-player-name { text-transform:none;letter-spacing:0;font-size:clamp(.55rem,1.9vmin,.72rem);font-weight:950; }
.mq-score-chip strong {
	display: block; width: 100%; text-align: center;
	font-size: clamp(.95rem, 3vmin, 1.18rem); line-height: 1; font-weight: 950;
	font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
	color: var(--encre); white-space: nowrap;
}
.mq-score-avatar { width:24px;height:24px;flex:0 0 24px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.78);box-shadow:0 2px 5px rgba(22,54,90,.16); }
.mq-score-chip.is-placeholder { visibility: hidden; pointer-events: none; }
.mq-turn-dot {
	position: absolute; top: 4px; right: 5px; width: 6px; height: 6px;
	border-radius: 50%; opacity: 0; background: #35c85a;
	box-shadow: 0 0 0 3px rgba(53,200,90,.14), 0 0 8px rgba(53,200,90,.7);
}
.mq-score-chip.is-turn {
	border-color: rgba(53,200,90,.78);
	background: rgba(246,255,249,.94);
	box-shadow: 0 0 0 2px rgba(53,200,90,.14), 0 3px 12px rgba(28,139,70,.18);
	animation: mq-tour-actif 2.5s ease-in-out infinite;
}
.mq-score-chip.is-turn .mq-turn-dot { opacity: 1; animation: mq-tour-point 1.6s ease-in-out infinite; }
/* battement sans repeinture : transform seul (l'ombre reste statique) */
@keyframes mq-tour-actif { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes mq-tour-point { 0%,100% { transform: scale(.82); opacity: .72; } 50% { transform: scale(1.12); opacity: 1; } }
.mq-game-actions { min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.4vw, 14px); }
.mq-game-action {
	width: 40px; height: 40px; flex: 0 0 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 13px !important; background: rgba(255,255,255,.9) !important;
	box-shadow: 0 2px 9px rgba(21,60,122,.12);
	transition: transform .16s var(--ressort), box-shadow .2s, background .2s;
}
.mq-game-action svg { width: 20px; height: 20px; stroke-width: 2.35; color: var(--encre); }
.mq-game-action:active { transform: scale(.92); box-shadow: 0 1px 4px rgba(21,60,122,.12); }

.mq-shell[data-motion="calme"] .mq-score-chip.is-turn,
.mq-shell[data-motion="calme"] .mq-score-chip.is-turn .mq-turn-dot { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.mq-score-chip.is-turn, .mq-score-chip.is-turn .mq-turn-dot { animation: none; }
}
.mq-sr-only {
	position: absolute !important; width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important; overflow: hidden !important;
	clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

.mq-board-wrap { display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
.mq-online-activity-wait {
	position:absolute; z-index:30; left:50%; top:8px; transform:translateX(-50%);
	max-width:min(92%,430px); min-height:34px; padding:6px 9px 6px 11px;
	display:flex; align-items:center; justify-content:center; gap:9px;
	border:1px solid color-mix(in srgb,var(--turq) 34%,rgba(255,255,255,.82)); border-radius:999px;
	background:color-mix(in srgb,var(--blanc) 92%,var(--past-menthe) 8%); color:var(--encre);
	box-shadow:0 7px 18px rgba(21,60,122,.16); pointer-events:none;
	font-size:clamp(.66rem,2.5vw,.80rem); line-height:1.1; text-align:center;
}
.mq-online-activity-wait > span { min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-online-activity-wait > span svg { width:16px; height:16px; flex:0 0 16px; color:var(--turq-2); }
.mq-online-activity-wait > span b { max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mq-online-activity-wait > strong { flex:0 0 auto; min-width:38px; padding:4px 7px; border-radius:999px; background:var(--past-menthe); color:var(--turq-2); font-variant-numeric:tabular-nums; }
.mq-online-activity-wait.is-urgent > strong { background:#fff0ed; color:#b62d28; }
.mq-board { display: grid; gap: clamp(4px, 1.1vmin, 11px); perspective: 1400px; }
.mq-card-slot { position: relative; aspect-ratio: 3 / 4; visibility: hidden; pointer-events: none; }

/* ---------- La carte ---------- */
.mq-card {
	position: relative; aspect-ratio: 3 / 4; min-width: 0; min-height: 0;
	transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
	transition: transform .46s var(--ease);
	border-radius: clamp(9px, 2vmin, 18px);
	will-change: transform;
}

.mq-board[data-compact-touch="true"] .mq-card { aspect-ratio: 5 / 6; }
.mq-board.is-dealing .mq-card { animation: mq-distribue .48s var(--sortie) backwards; animation-delay: calc(var(--i, 0) * 20ms); }
@keyframes mq-distribue { from { opacity: 0; transform: translateY(-40px) rotate(-9deg) scale(.7); } }
.mq-card.is-open, .mq-card.is-done { transform: rotateY(180deg); }
.mq-card.is-done { animation: mq-scelle .76s var(--sortie) .05s both; }
.mq-card.is-wrong { animation: mq-refus .5s var(--ease) .04s; }
@keyframes mq-scelle {
	0% { transform: rotateY(180deg) scale(1); }
	32% { transform: rotateY(180deg) translateZ(32px) scale(1.13) rotate(2deg); }
	60% { transform: rotateY(180deg) translateZ(6px) scale(.96) rotate(-1deg); }
	100% { transform: rotateY(180deg) scale(1); }
}
@keyframes mq-refus {
	15% { transform: rotateY(180deg) translateX(-8%) rotate(-3deg); }
	40% { transform: rotateY(180deg) translateX(8%) rotate(3deg); }
	68% { transform: rotateY(180deg) translateX(-4%) rotate(-1.5deg); }
	100% { transform: rotateY(180deg); }
}
.mq-card.is-hint .mq-back { animation: mq-clignote .5s var(--ease) 3; }
@keyframes mq-clignote { 50% { filter: brightness(1.4); } }

.mq-face {
	position: absolute; inset: 0; border-radius: inherit;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	border: 3px solid #fff;
}
.mq-back {
	transform: rotateY(0deg) translateZ(.1px);
	background: linear-gradient(168deg, #62e0da 0%, #35b8ea 52%, #2e86e0 100%);
	box-shadow: inset 0 -10px 20px rgba(21, 60, 122, .16), 0 3px 8px rgba(21, 60, 122, .22);
}
.mq-back::before {
	content: ""; position: absolute; inset: 0;
	background: no-repeat center / 46% auto
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.4c.4 0 .8.25 1 .63l2.5 5.06 5.6.82c.9.13 1.26 1.24.6 1.87l-4.05 3.94.96 5.57c.15.9-.8 1.58-1.6 1.15L12 18.82l-5 2.63c-.8.43-1.75-.25-1.6-1.15l.96-5.57-4.05-3.94c-.66-.63-.3-1.74.6-1.87l5.6-.82L11 3.03c.2-.38.6-.63 1-.63Z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 3px 4px rgba(21, 60, 122, .28));
}
.mq-front {
	transform: rotateY(180deg) translateZ(.1px);
	background: linear-gradient(168deg, #f4fbff 0%, #e2f2fb 100%);
	box-shadow: 0 3px 8px rgba(21, 60, 122, .22);
	flex-direction: column; padding: 6%; gap: 2%;
}
.mq-front img { flex: 1 1 auto; min-height: 0; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(21, 60, 122, .18)); }
.mq-front .mq-card-name { flex: 0 0 auto; max-width: 100%; font-size: clamp(7px, 1.5vmin, 12px); font-weight: 900; text-align: center; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-front .mq-card-fallback { display: none; position: absolute; inset: 8%; align-items: center; justify-content: center; padding: 8%; border-radius: inherit; text-align: center; font-weight: 900; font-size: clamp(8px, 1.55vmin, 13px); color: #fff; background: linear-gradient(160deg, #145d7d, #0d4565); }
.mq-board[data-category="animaux"] .mq-front { padding: 0; gap: 0; background: #0d4565; }
.mq-board[data-category="animaux"] .mq-front img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; }
.mq-board[data-category="animaux"] .mq-front > .mq-card-name { display: none; }
.mq-front.is-image-error img { display: none; }
.mq-front.is-image-error > .mq-card-fallback { display: flex; }
.mq-board[data-category="animaux"] .mq-front.is-image-error > .mq-card-fallback { display: flex; inset: 0; border-radius: 0; }
/* Aperçu x1,5 réel : calque indépendant, ancré à la carte ouverte. */
.mq-card-preview-layer {
	position: fixed; z-index: 2147483000; pointer-events: none;
	opacity: 0; transform: translate3d(0,0,0) scale(.94); transform-origin: 50% 50%;
	transition: transform .34s cubic-bezier(.34, 1.56, .5, 1), opacity .18s ease-out;
	will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mq-card-preview-layer.is-active {
	opacity: 1;
	transform: translate3d(var(--mq-preview-x, 0), var(--mq-preview-y, 0), 0) scale(1.5);
}
.mq-card-preview-layer.is-leaving {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}
.mq-card-preview-surface {
	position: absolute; inset: 0; overflow: hidden;
	border-radius: clamp(9px, 2vmin, 18px); border: 3px solid #fff;
	background: #0d4565;
	box-shadow: 0 18px 38px rgba(13,69,101,.38), 0 0 0 3px rgba(98,224,218,.2);
}
.mq-card-preview-surface img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mq-card-preview-surface > span { display: none; }
.mq-card-preview-surface.is-image-error img { display: none; }
.mq-card-preview-surface.is-image-error > .mq-card-fallback { display: flex; inset: 0; border-radius: 0; }
.mq-card-preview-layer.is-calm { transition-duration: .12s; }
/* Pendant le zoom, la carte doit rester une image propre, sans nom ni
 * fallback textuel. Le !important neutralise les variantes de thème. */
.mq-card-preview-surface.mq-preview-image-only > .mq-card-name,
.mq-card-preview-surface.mq-preview-image-only > .mq-card-fallback { display: none !important; }
.mq-card.is-previewing .mq-card-name { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) {
	.mq-card-preview-layer { transition-duration: .12s; }
}
.mq-card.is-done .mq-front { background: linear-gradient(168deg, #eafbf3, #d6f5e8); }
.mq-card.is-done .mq-face { border-color: #7fe3b6; }
.mq-card.is-wrong .mq-face { border-color: #ffb3ab; }

.mq-game-progress {
	display: block; flex: 0 0 3px; width: 100%; height: 3px;
	border-radius: 99px; overflow: hidden;
	background: rgba(255,255,255,.36);
}
.mq-game-progress i {
	display: block; width: 0; height: 100%; border-radius: inherit;
	background: linear-gradient(90deg, #28c873, #39d6b0);
	box-shadow: 0 0 8px rgba(40,200,115,.35);
	transition: width .38s var(--sortie);
}

/* ---------- Océan : surfaces lisibles hors partie ---------- */
.mq-shell[data-skin="ocean"] .mq-view[data-view="online"] .mq-online-head .mq-title {
	color:#f9feff;text-shadow:0 2px 8px rgba(0,46,88,.28);
}
.mq-shell[data-skin="ocean"] .mq-view[data-view="online"] .mq-online-head .mq-eyebrow {
	color:#a9fff4;text-shadow:0 1px 6px rgba(0,62,84,.24);
}
.mq-shell[data-skin="ocean"] .mq-view[data-view="online"] .mq-online-head .mq-setup-back {
	color:#0d4e86;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(226,248,252,.92));
	border:1px solid rgba(211,246,251,.92);box-shadow:0 8px 20px rgba(0,45,83,.2),inset 0 1px 0 #fff;
}

.mq-shell[data-skin="ocean"] .mq-competitive-card {
	border-color:rgba(226,250,253,.98);
}
.mq-shell[data-skin="ocean"] .mq-competitive-card::after { opacity:.55; }

/* ---------- Océan : barre de jeu, plateau et cartes ---------- */
.mq-shell[data-skin="ocean"] .mq-gamebar { padding-top:5px; }
.mq-shell[data-skin="ocean"] .mq-score-chip {
	overflow:visible;
	border-color:rgba(215,249,255,.86);
	background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(232,249,252,.94));
	box-shadow:0 4px 14px rgba(0,36,81,.23), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(85,190,212,.13);
}
.mq-shell[data-skin="ocean"] .mq-score-chip::before {
	content:""; position:absolute; width:24px; height:15px; left:50%; top:-8px; translate:-50% 0;
	background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2048%22%3E%3Cpath%20d%3D%22M8%2042C12%2018%2024%206%2040%206s28%2012%2032%2036H8Z%22%20fill%3D%22%23f6fdff%22%20stroke%3D%22%23a9dbe8%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M40%208v32M26%2011l8%2029M54%2011l-8%2029M16%2022l13%2018M64%2022%2051%2040%22%20fill%3D%22none%22%20stroke%3D%22%23b5e3ec%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.96; pointer-events:none;
}
.mq-shell[data-skin="ocean"] .mq-score-chip::after {
	content:""; position:absolute; width:8px; height:8px; right:5px; bottom:4px; border-radius:50%;
	background:radial-gradient(circle at 35% 28%,#fff 0 22%,#d8f6fb 42%,#98cfda 100%);
	box-shadow:0 1px 4px rgba(4,71,100,.25); opacity:.88;
}
.mq-shell[data-skin="ocean"] .mq-score-chip.is-turn {
	border-color:rgba(85,235,184,.9);
	background:linear-gradient(180deg,#fbfffe,#e9fff5);
	box-shadow:0 0 0 2px rgba(67,222,166,.18),0 5px 18px rgba(0,72,95,.25),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="ocean"] .mq-game-action {
	border:1px solid rgba(202,247,255,.78) !important;
	background:linear-gradient(180deg,rgba(74,218,240,.96),rgba(20,123,211,.96)) !important;
	box-shadow:0 5px 14px rgba(0,42,96,.27),inset 0 1px 0 rgba(255,255,255,.66),inset 0 -2px 0 rgba(0,48,120,.17);
}
.mq-shell[data-skin="ocean"] .mq-game-action svg { color:#fff; filter:drop-shadow(0 2px 2px rgba(0,50,115,.22)); }
.mq-shell[data-skin="ocean"] .mq-board-wrap { isolation:isolate; border-radius:clamp(14px,2.5vmin,24px); }
.mq-shell[data-skin="ocean"] .mq-board-wrap::before {
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
	border:1px solid rgba(128,229,242,.36);
	background:linear-gradient(180deg,rgba(1,48,88,.16),rgba(1,29,64,.24));
	box-shadow:inset 0 0 28px rgba(40,217,231,.12),0 10px 28px rgba(0,28,69,.18);
}
.mq-shell[data-skin="ocean"] .mq-board { position:relative; z-index:1; }
.mq-shell[data-skin="ocean"] .mq-card {
	border-radius:clamp(9px,2vmin,18px);
	transition:transform .5s cubic-bezier(.2,.82,.2,1),filter .28s ease;
}
.mq-shell[data-skin="ocean"] .mq-face {
	border-color:rgba(248,254,255,.98);
	box-shadow:0 4px 11px rgba(0,35,82,.28),inset 0 1px 0 rgba(255,255,255,.9);
}
.mq-shell[data-skin="ocean"] .mq-back {
	background:
		radial-gradient(circle at 28% 17%,rgba(255,255,255,.28),transparent 31%),
		linear-gradient(166deg,#49dce1 0%,#20b7e5 46%,#0968c8 100%);
	box-shadow:inset 0 -14px 24px rgba(0,43,112,.22),inset 0 1px 0 rgba(255,255,255,.52),0 4px 11px rgba(0,35,82,.3);
}
.mq-shell[data-skin="ocean"] .mq-back::before {
	content:""; position:absolute; inset:21%; z-index:2;
	background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d8f7ff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M60%208c6%200%209%2022%2012%2030%208-4%2028-15%2032-10%204%205-13%2022-19%2029%208%205%2028%2014%2026%2021-2%207-27%202-36%201-2%209-7%2033-15%2033s-13-24-15-33c-9%201-34%206-36-1-2-7%2018-16%2026-21-6-7-23-24-19-29%204-5%2024%206%2032%2010%203-8%206-30%2012-30Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2257%22%20r%3D%227%22%20fill%3D%22%23bcecff%22%20opacity%3D%22.85%22%2F%3E%3Cg%20fill%3D%22%2383d7ef%22%20opacity%3D%22.8%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2231%22%20r%3D%222.7%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2248%22%20r%3D%222.7%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2248%22%20r%3D%222.7%22%2F%3E%3Ccircle%20cx%3D%2247%22%20cy%3D%2275%22%20r%3D%222.7%22%2F%3E%3Ccircle%20cx%3D%2273%22%20cy%3D%2275%22%20r%3D%222.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
	filter:drop-shadow(0 4px 5px rgba(0,55,120,.25));
}
.mq-shell[data-skin="ocean"] .mq-back::after {
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:
		radial-gradient(circle at 17% 24%,transparent 0 2px,rgba(232,255,255,.32) 2.5px 3.2px,transparent 3.8px),
		radial-gradient(circle at 78% 37%,transparent 0 1.5px,rgba(232,255,255,.28) 2px 2.8px,transparent 3.2px),
		radial-gradient(circle at 67% 17%,transparent 0 1px,rgba(232,255,255,.3) 1.6px 2.3px,transparent 2.8px),
		linear-gradient(0deg,rgba(2,58,127,.3),transparent 42%);
	opacity:.9;
}
.mq-shell[data-skin="ocean"] .mq-front {
	border-color:#f6fdff;
	background:linear-gradient(168deg,#f9feff 0%,#e6f8fb 100%);
	box-shadow:0 5px 13px rgba(0,35,82,.3),inset 0 0 0 1px rgba(133,220,235,.25);
}
.mq-shell[data-skin="ocean"] .mq-front .mq-card-name {
	color:#073b70;
	text-shadow:0 1px 0 #fff;
}
.mq-shell[data-skin="ocean"] .mq-board:not([data-category="animaux"]) .mq-front .mq-card-name {
	max-width:94%; padding:.12em .48em; border-radius:999px;
	background:rgba(238,252,255,.9); box-shadow:0 1px 5px rgba(0,58,92,.12);
}
.mq-shell[data-skin="ocean"] .mq-board[data-category="animaux"] .mq-front { background:#073f69; }
.mq-shell[data-skin="ocean"] .mq-card.is-open:not(.is-done) .mq-front::after {
	content:""; position:absolute; inset:-35% -90%; pointer-events:none;
	background:linear-gradient(105deg,transparent 38%,rgba(214,254,255,.58) 49%,rgba(255,255,255,.84) 52%,rgba(193,247,255,.4) 56%,transparent 68%);
	transform:translateX(-48%) rotate(4deg); animation:mq-ocean-reveal .72s ease-out both;
}
.mq-shell[data-skin="ocean"] .mq-card.is-done .mq-front {
	border-color:#78efd0;
	background:linear-gradient(168deg,#f0fffb,#d9f8ee);
	box-shadow:0 0 0 2px rgba(91,235,193,.22),0 0 18px rgba(58,225,204,.46),0 5px 13px rgba(0,35,82,.26);
}
.mq-shell[data-skin="ocean"] .mq-card.is-done .mq-front::before {
	content:""; position:absolute; inset:-30%; pointer-events:none;
	background:radial-gradient(circle,rgba(174,255,232,.52) 0 18%,transparent 48%);
	animation:mq-ocean-match-wave .86s ease-out both;
}
.mq-shell[data-skin="ocean"] .mq-card.is-wrong .mq-face { border-color:#ff9f92; box-shadow:0 0 0 2px rgba(255,112,95,.14),0 5px 13px rgba(0,35,82,.26); }
.mq-shell[data-skin="ocean"] .mq-card.is-hint .mq-back { animation:mq-ocean-hint .7s ease-in-out 3; }
.mq-shell[data-skin="ocean"] .mq-game-progress { background:rgba(212,249,255,.22); box-shadow:inset 0 1px 3px rgba(0,20,58,.16); }
.mq-shell[data-skin="ocean"] .mq-game-progress i { background:linear-gradient(90deg,#53e6cc,#33d7db,#43efb2); box-shadow:0 0 10px rgba(58,235,211,.58); }
.mq-card-preview-layer[data-skin="ocean"] .mq-card-preview-surface {
	border-color:#f6fdff; background:#073f69;
	box-shadow:0 20px 45px rgba(0,27,65,.46),0 0 0 3px rgba(71,220,228,.24),0 0 28px rgba(50,211,224,.22);
}
@keyframes mq-ocean-reveal { from { transform:translateX(-55%) rotate(4deg); opacity:0; } 30% { opacity:1; } to { transform:translateX(55%) rotate(4deg); opacity:0; } }
@keyframes mq-ocean-match-wave { from { transform:scale(.48); opacity:0; } 28% { opacity:1; } to { transform:scale(1.2); opacity:0; } }
@keyframes mq-ocean-hint { 50% { filter:brightness(1.22) saturate(1.12); box-shadow:0 0 20px rgba(137,248,255,.72),inset 0 -14px 24px rgba(0,43,112,.18); } }
.mq-shell[data-skin="ocean"][data-motion="calme"] .mq-ambiance::before,
.mq-shell[data-skin="ocean"][data-motion="calme"] .mq-ambiance i,
.mq-shell[data-skin="ocean"][data-motion="calme"] .mq-ocean-fish,
.mq-shell[data-skin="ocean"][data-motion="calme"] .mq-card.is-open .mq-front::after,
.mq-shell[data-skin="ocean"][data-motion="calme"] .mq-card.is-done .mq-front::before { animation:none !important; }
@media (prefers-reduced-motion:reduce) {
	.mq-shell[data-skin="ocean"] .mq-ambiance::before,
	.mq-shell[data-skin="ocean"] .mq-ambiance i,
	.mq-shell[data-skin="ocean"] .mq-ocean-fish,
	.mq-shell[data-skin="ocean"] .mq-card.is-open .mq-front::after,
	.mq-shell[data-skin="ocean"] .mq-card.is-done .mq-front::before { animation:none !important; }
}

/* ---------- Effets de partie : voir le bloc IMPACT SYSTEM en fin de feuille ---------- */

/* =========================================================================
   PANNEAUX MODAUX
   ========================================================================= */
.mq-sheet-layer {
	position: absolute; inset: 0; z-index: 30;
	display: flex; align-items: center; justify-content: center; padding: var(--pad);
	background: rgba(21, 60, 122, .42);
	/* pas de flou d'arrière-plan : il obligeait à refiltrer tout l'écran à chaque image (saccade à l'ouverture) */
	animation: mq-fade .24s var(--sortie);
}
@keyframes mq-fade { from { opacity: 0; } }
.mq-sheet {
	width: min(520px, 100%); max-height: 100%;
	display: flex; flex-direction: column; gap: 12px;
	padding: clamp(14px, 2.6vmin, 24px);
	border-radius: var(--r-xl); background: var(--blanc);
	box-shadow: 0 20px 50px rgba(21, 60, 122, .38);
	animation: mq-monte .4s var(--ressort);
	overflow: hidden;
}
.mq-sheet > *:nth-child(1), .mq-sheet > *:nth-child(3) { flex: 0 0 auto; }
.mq-sheet > *:nth-child(2) { flex: 1 1 auto; min-height: 0; }
@keyframes mq-monte { from { opacity: 0; transform: translateY(26px) scale(.93); } }

.mq-sheet-head { display: flex; align-items: center; gap: 12px; }
.mq-sheet-thumb {
	width: 60px; height: 60px; border-radius: var(--r-m); padding: 7px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(165deg, #f2fbff, #ddeffa); color: var(--bleu);
}
.mq-sheet-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mq-sheet-thumb svg { width: 56%; height: 56%; }
.mq-sheet-body { display: flex; flex-direction: column; gap: 11px; }

.mq-question { font-size: 1.02rem; font-weight: 900; margin: 0; color: var(--encre); }
.mq-fact { margin: 0; color: var(--encre-2); font-weight: 700; }
.mq-fact strong { color: var(--bleu); background: var(--past-bleu); padding: 1px 5px; border-radius: 5px; }

.mq-answers { display: grid; gap: 8px; }
.mq-answers.is-duo { grid-template-columns: 1fr 1fr; }
.mq-answer {
	display: flex; align-items: center; gap: 11px; text-align: left;
	padding: 12px 14px; border-radius: var(--r-m); color: var(--encre); font-weight: 800;
	background: #f5f9fd; border: 2px solid #e2ecf6;
	transition: transform .15s var(--ressort), background .2s, border-color .2s;
}
.mq-answer:active { transform: scale(.98); }
.mq-answer b { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--bleu); font-size: .82rem; box-shadow: var(--ombre); }
.mq-answer.is-right { border-color: var(--vert); background: #eefbe9; }
.mq-answer.is-right b { background: var(--vert); color: #fff; }
.mq-answer.is-wrong { border-color: var(--rouge); background: #fdeceb; }
.mq-answer.is-wrong b { background: var(--rouge); color: #fff; }

.mq-verdict { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-m); border: 2px solid; }
.mq-verdict.is-right { background: #eefbe9; border-color: var(--vert); }
.mq-verdict.is-wrong { background: #fdeceb; border-color: var(--rouge); }
.mq-verdict strong { font-weight: 900; font-size: 1rem; }
.mq-verdict p { margin: 0; font-size: .86rem; color: var(--encre-2); font-weight: 700; }
.mq-verdict span { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--or-2); }

.mq-input { width: 100%; padding: 13px 15px; border-radius: var(--r-m); font: inherit; font-weight: 800; color: var(--encre); background: #f5f9fd; border: 2px solid #e2ecf6; }
.mq-input::placeholder { color: var(--encre-3); }
.mq-hintbar { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 900; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.mq-hintbar b { color: var(--or-2); }

/* ---------- Victoire ---------- */
.mq-victoire { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mq-victoire h3 { font-size: clamp(1.4rem, 5vmin, 2.2rem); font-weight: 900; letter-spacing: -.045em; margin: 0; }
.mq-victoire p { margin: 0; color: var(--encre-2); font-weight: 800; font-size: .86rem; }
.mq-recompense { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-radius: var(--r-l); background: #f5f9fd; }
.mq-recompense span { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 34% 28%, #ffe08a, var(--or) 52%, var(--or-2)); color: #7a4a00; }
.mq-recompense span svg { width: 22px; height: 22px; stroke-width: 3; }
.mq-recompense b { font-size: clamp(1.4rem, 4.6vmin, 2.1rem); font-weight: 900; color: var(--encre); font-variant-numeric: tabular-nums; }
.mq-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mq-result-grid div { padding: 10px 6px; border-radius: var(--r-m); text-align: center; background: #f5f9fd; }
.mq-result-grid small { display: block; font-size: .6rem; color: var(--encre-2); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mq-result-grid strong { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--bleu); }
.mq-ruban { align-self: center; padding: 7px 22px; border-radius: var(--r-pill); background: var(--degrade); color: #fff; font-weight: 900; font-size: .82rem; letter-spacing: .08em; box-shadow: var(--ombre-forte); animation: mq-ruban .6s var(--ressort) both; }
@keyframes mq-ruban { from { opacity: 0; transform: scale(.5) rotate(-5deg); } }

.mq-confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 35; }
.mq-confettis i { position: absolute; top: -8%; width: 9px; height: 14px; border-radius: 3px; left: var(--x); background: var(--c); animation: mq-chute var(--d) linear var(--r) forwards; will-change: transform, opacity; }
.mq-confettis .mq-fx-burst { position: absolute; left: 50%; top: 38%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--c); animation: mq-fx-burst .9s var(--sortie) forwards; will-change: transform, opacity; }
@keyframes mq-fx-burst { 0% { transform: rotate(calc(var(--a) * 1deg)) translateY(0) scale(1.4); opacity: 1; } 100% { transform: rotate(calc(var(--a) * 1deg)) translateY(-150px) scale(.2); opacity: 0; } }
@keyframes mq-chute { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: .05; transform: translateY(115vh) rotate(820deg); } }

/* =========================================================================
   HISTOIRE V2 — parcours serpentin qui occupe toute la hauteur
   ========================================================================= */
.mq-histoire-tete { display: flex; flex-direction: column; gap: 7px; }
.mq-histoire-titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mq-histoire-total {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 12px; border-radius: var(--r-pill);
	background: var(--blanc); box-shadow: var(--ombre);
	font-weight: 900; font-size: .82rem; color: var(--or-2); font-variant-numeric: tabular-nums;
}

/* Pastilles de chapitre, compactes */
.mq-chapters { display: flex; gap: 7px; overflow-x: auto; padding: 3px 2px 5px; scrollbar-width: none; }
.mq-chapters::-webkit-scrollbar { display: none; }
.mq-chapter {
	flex: 0 0 auto; width: clamp(56px, 13vmin, 74px);
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 7px 4px; border-radius: var(--r-m);
	background: var(--blanc); box-shadow: var(--ombre); border: 2px solid transparent;
	transition: transform .2s var(--ressort), border-color .2s, box-shadow .22s;
	animation: mq-chapitre-in .42s var(--sortie) backwards;
	animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes mq-chapitre-in { from { opacity: 0; transform: translateY(-12px) scale(.8); } }
.mq-chapter b {
	width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: #eef4fa; color: var(--encre-2); font-size: .8rem; font-weight: 900;
}
.mq-chapter small { font-size: .62rem; font-weight: 900; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.mq-chapter[aria-current="true"] {
	border-color: var(--turq); transform: translateY(-3px);
	box-shadow: 0 0 0 3px rgba(22, 196, 206, .16), var(--ombre-forte);
}
.mq-chapter[aria-current="true"] b { background: var(--degrade); color: #fff; }
.mq-chapter[aria-current="true"] small { color: var(--turq-2); }
.mq-chapter.is-locked { opacity: .5; }
.mq-chapter.is-locked b { background: #e3eaf3; }

/* Le parcours */
.mq-chemin {
	position: relative; min-height: 0;
	display: grid; grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(0, 1fr); gap: clamp(2px, .8vmin, 8px) clamp(10px, 3vmin, 26px);
	padding: 2px 0;
}
.mq-chemin::before {
	content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 5px;
	transform: translateX(-50%); border-radius: 99px;
	background: repeating-linear-gradient(180deg, rgba(21, 60, 122, .14) 0 7px, transparent 7px 16px);
}
.mq-chemin-trace {
	position: absolute; left: 50%; top: 4%; width: 5px; transform: translateX(-50%);
	border-radius: 99px; background: linear-gradient(180deg, var(--turq), #3ad8ac);
	box-shadow: 0 0 12px rgba(22, 196, 206, .6);
	transition: height .9s var(--sortie);
}

.mq-jalon {
	position: relative; z-index: 1; min-width: 0;
	display: flex; align-items: center; gap: clamp(6px, 1.6vmin, 12px);
	padding: 4px 6px; border-radius: var(--r-l);
	animation: mq-jalon-in .5s var(--ressort) backwards;
	animation-delay: calc(var(--d, 0) * 1ms);
	transition: transform .18s var(--ressort);
}
@keyframes mq-jalon-in { from { opacity: 0; transform: translateY(18px) scale(.65); } }
.mq-jalon:nth-child(even) { flex-direction: row-reverse; text-align: right; }
.mq-jalon:active { transform: scale(.94); }

.mq-jalon-pastille {
	position: relative; flex: 0 0 auto;
	width: clamp(42px, 9.5vmin, 64px); height: clamp(42px, 9.5vmin, 64px);
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: #d9e4f0; color: #fff;
	font-size: clamp(.9rem, 2.4vmin, 1.25rem); font-weight: 900; font-variant-numeric: tabular-nums;
	border: 3px solid #fff; box-shadow: var(--ombre);
}
.mq-jalon-pastille svg { width: 46%; height: 46%; stroke-width: 3; }
.mq-jalon-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mq-jalon-txt strong {
	font-size: clamp(.68rem, 1.8vmin, .88rem); font-weight: 900; color: var(--encre);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mq-jalon-etoiles { display: flex; gap: 2px; }
.mq-jalon:nth-child(even) .mq-jalon-etoiles { justify-content: flex-end; }

.mq-jalon.is-open .mq-jalon-pastille { background: var(--degrade); box-shadow: 0 4px 10px rgba(31, 106, 192, .34); }
.mq-jalon.is-done .mq-jalon-pastille { background: linear-gradient(150deg, #5fd94f, var(--vert-2)); }
.mq-jalon.is-boss .mq-jalon-pastille { background: linear-gradient(150deg, #ffd45e, var(--or-2)); color: #6b3f00; }
.mq-jalon.is-locked { opacity: .55; pointer-events: none; }
.mq-jalon.is-duel .mq-jalon-pastille::after {
	content: "IA"; position: absolute; top: -6px; right: -8px;
	padding: 2px 6px; border-radius: 99px; font-size: .52rem; font-weight: 900; color: #fff;
	background: linear-gradient(150deg, #a97cf8, #7c4ddb); border: 2px solid #fff;
}

/* Niveau courant : halo qui respire */
.mq-jalon.is-current .mq-jalon-pastille { position: relative; box-shadow: 0 4px 10px rgba(31, 106, 192, .34); }
.mq-jalon.is-current .mq-jalon-pastille::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid rgba(22, 196, 206, .55); animation: mq-halo 2s var(--ease) infinite; pointer-events: none; }
@keyframes mq-halo { 0% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.55); } }

/* Tampon de validation au retour d'un niveau réussi */
.mq-jalon.is-stamping .mq-jalon-pastille { animation: mq-tampon-jalon .7s var(--ressort) both; }
@keyframes mq-tampon-jalon {
	0% { transform: scale(2.4) rotate(-30deg); opacity: 0; }
	55% { transform: scale(.85) rotate(6deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* Déverrouillage du niveau suivant */
.mq-jalon.is-unlocking .mq-jalon-pastille { animation: mq-ouverture .8s var(--ressort) .5s both; }
@keyframes mq-ouverture {
	0% { transform: scale(.5); filter: grayscale(1) brightness(1.6); }
	60% { transform: scale(1.22); filter: none; }
	100% { transform: scale(1); filter: none; }
}
.mq-jalon.is-unlocking::before {
	content: ""; position: absolute; left: var(--ox, 8%); top: 50%; width: 30px; height: 30px;
	margin: -15px 0 0 -15px; border-radius: 50%; border: 4px solid var(--turq);
	animation: mq-onde-jalon .9s var(--sortie) .5s both;
}
@keyframes mq-onde-jalon { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(4.5); } }

/* Carte de mission : titre, mesures, bouton pleine largeur */
.mq-mission {
	display: flex; flex-direction: column; gap: 9px;
	padding: 12px 14px; border-radius: var(--r-xl);
	background: var(--blanc); box-shadow: var(--ombre-forte);
	animation: mq-mission-in .45s var(--sortie) both;
}
@keyframes mq-mission-in { from { opacity: 0; transform: translateY(22px); } }
.mq-mission-tete { display: flex; align-items: center; gap: 11px; }
.mq-mission-num {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--degrade); color: #fff; font-weight: 900; font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}
.mq-mission-tete > div { flex: 1 1 auto; min-width: 0; }
.mq-mission-tete small { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); font-weight: 900; }
.mq-mission-tete strong { display: block; font-size: 1rem; font-weight: 900; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-mission-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.mq-mission .mq-btn { width: 100%; }
.mq-tag {
	display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill);
	font-size: .7rem; font-weight: 900; background: #f0f6fc; color: var(--encre);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mq-tag svg { width: 12px; height: 12px; color: var(--turq-2); stroke-width: 2.6; }

/* =========================================================================
   ÉTOILES — une seule pièce, trois tailles
   ========================================================================= */
.mq-etoile { position: relative; flex: 0 0 auto; display: inline-block; line-height: 0; overflow: visible; }
.mq-etoile svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* Étoile bijou : or radial, ombrage, liseré, reflet, socle cuivré ; vide en verre givré. */
.mq-etoile .e-vide { fill: url(#mq-st-empty); stroke: rgba(21, 60, 122, .16); stroke-width: .8; stroke-linejoin: round; }
.mq-etoile .e-plein { clip-path: inset(-20% calc(100% - var(--f, 0%)) -20% -20%); }
.mq-etoile .e-socle { fill: #b8650a; opacity: .9; }
.mq-etoile .e-corps { fill: url(#mq-st-core); }
.mq-etoile .e-ombre { fill: url(#mq-st-shade); }
.mq-etoile .e-liseret { fill: none; stroke: url(#mq-st-rim); stroke-width: 1.1; stroke-linejoin: round; }
.mq-etoile .e-lueur { fill: url(#mq-st-gloss); opacity: .85; }
.mq-etoile .e-point { fill: #fff; opacity: .9; }
.mq-etoile.is-full svg { filter: drop-shadow(0 0 3px rgba(255, 190, 60, .5)) drop-shadow(0 4px 7px rgba(214, 124, 14, .3)); }
.mq-shell[data-skin="nuit"] .mq-etoile .e-vide, .mq-shell[data-skin="grenat"] .mq-etoile .e-vide, .mq-shell[data-skin="ardoise"] .mq-etoile .e-vide { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .22); }
.mq-etoile-mini { width: clamp(9px, 2.1vmin, 14px); height: clamp(9px, 2.1vmin, 14px); }
.mq-etoile-moyen { width: clamp(16px, 3.6vmin, 24px); height: clamp(16px, 3.6vmin, 24px); }
.mq-etoile-geant { width: clamp(44px, 11vmin, 82px); height: clamp(44px, 11vmin, 82px); }

.mq-stars { display: flex; gap: clamp(5px, 1.6vmin, 12px); justify-content: center; align-items: center; padding: 4px 0; }
.mq-stars .mq-etoile-geant:nth-child(2) { width: clamp(52px, 13vmin, 96px); height: clamp(52px, 13vmin, 96px); }
.mq-stars .mq-etoile { opacity: 0; transform: scale(.2) rotate(-40deg); }
.mq-stars .mq-etoile.is-lit { animation: mq-star-in .6s cubic-bezier(.22, 1.6, .36, 1) both; }
@keyframes mq-star-in { to { opacity: 1; transform: none; } }
.mq-stars .mq-etoile .e-plein { transition: clip-path .55s var(--ease); }
.mq-stars .mq-etoile:not(.is-lit) .e-plein { clip-path: inset(-20% 100% -20% -20%); }
.mq-stars .mq-etoile.is-full.is-lit svg { animation: mq-star-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes mq-star-breathe { 50% { transform: scale(1.05); } }
.mq-star-spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 10px var(--or); animation: mq-star-spark .7s var(--sortie) forwards; pointer-events: none; }
@keyframes mq-star-spark { 0% { transform: rotate(calc(var(--a) * 1deg)) translateY(0) scale(1.4); opacity: 1; } 100% { transform: rotate(calc(var(--a) * 1deg)) translateY(-26px) scale(.2); opacity: 0; } }
.mq-star-flash { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 180, .9), transparent 65%); animation: mq-star-flash .5s var(--sortie) forwards; pointer-events: none; }
@keyframes mq-star-flash { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }
.mq-shell[data-motion="calme"] .mq-stars .mq-etoile { opacity: 1; transform: none; animation: none !important; }
.mq-shell[data-motion="calme"] .mq-stars .mq-etoile svg { animation: none !important; }
.mq-shell[data-motion="calme"] .mq-star-spark, .mq-shell[data-motion="calme"] .mq-star-flash { display: none; }

/* ---------- Réglages ---------- */
.mq-rows { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; }
.mq-row { display: flex; align-items: center; gap: 13px; text-align: left; padding: 13px 15px; border-radius: var(--r-l); background: var(--blanc); box-shadow: var(--ombre); }
.mq-row > span:first-child { flex: 1 1 auto; min-width: 0; }
.mq-row strong { display: block; font-weight: 900; }
.mq-row small { display: block; color: var(--encre-2); font-size: .78rem; font-weight: 700; }
.mq-switch { width: 50px; height: 29px; border-radius: 99px; flex: 0 0 auto; position: relative; background: #dbe5f0; transition: background .25s var(--ease); }
.mq-switch i { position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(21, 60, 122, .3); transition: transform .3s var(--ressort); }
.mq-row[aria-pressed="true"] .mq-switch { background: linear-gradient(120deg, var(--turq), #3ad8ac); }
.mq-row[aria-pressed="true"] .mq-switch i { transform: translateX(21px); }
.mq-range { width: 100%; accent-color: var(--turq); }

/* ---------- Message flottant ---------- */
.mq-toast {
	position: absolute; left: 50%; bottom: calc(var(--pad) + 10px);
	transform: translateX(-50%) translateY(20px);
	padding: 11px 20px; border-radius: var(--r-pill); z-index: 40; pointer-events: none;
	max-width: calc(100% - 2 * var(--pad)); text-align: center;
	color: #fff; font-weight: 900; font-size: .86rem;
	background: var(--degrade); box-shadow: var(--ombre-forte);
	opacity: 0; transition: opacity .22s var(--ease), transform .36s var(--ressort);
}
.mq-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
   MemoQuest 6.31.0 — Histoire et révélation Apprentissage
   ========================================================================= */

/* Les trois zones du mode Histoire occupent exactement la hauteur utile : la
   carte de mission et son action ne peuvent plus être repoussées sous l'écran. */
.mq-view[data-view="histoire"] {
	display:grid;
	grid-template-rows:auto minmax(0,1fr) auto;
	overflow:hidden;
}
.mq-view[data-view="histoire"] .mq-chemin { overflow:hidden; }
.mq-view[data-view="histoire"] .mq-mission {
	position:relative;
	z-index:4;
	flex:0 0 auto;
	padding:clamp(9px,1.45vh,13px) clamp(12px,3.6vw,16px);
	border:1px solid rgba(255,255,255,.92);
	box-shadow:0 14px 34px rgba(21,60,122,.2),inset 0 1px 0 #fff;
}
.mq-view[data-view="histoire"] .mq-mission .mq-btn-primary {
	min-height:clamp(48px,6.8vh,58px);
	border:1px solid rgba(255,255,255,.5);
	background:linear-gradient(112deg,#087de2 0%,#1768d4 52%,#1859bb 100%);
	box-shadow:0 7px 0 #0a479e,0 13px 23px rgba(10,79,174,.24),inset 0 1px 0 rgba(255,255,255,.35);
	letter-spacing:.01em;
}
.mq-view[data-view="histoire"] .mq-mission .mq-btn-primary:active {
	transform:translateY(4px);
	box-shadow:0 3px 0 #0a479e,0 7px 13px rgba(10,79,174,.2),inset 0 1px 0 rgba(255,255,255,.28);
}

/* Présentation du Commandant du Conseil. */
.mq-council-layer {
	position:absolute;inset:0;z-index:90;display:grid;place-items:center;
	padding:max(14px,env(safe-area-inset-top)) var(--pad) max(14px,env(safe-area-inset-bottom));
	background:radial-gradient(circle at 50% 18%,rgba(40,202,204,.24),transparent 34%),rgba(3,22,43,.86);
	animation:mq-council-layer-in .35s ease-out both;
}
.mq-council-layer.is-leaving { animation:mq-council-layer-out .25s ease-in both;pointer-events:none; }
@keyframes mq-council-layer-in { from{opacity:0} }
@keyframes mq-council-layer-out { to{opacity:0;transform:scale(1.015)} }
.mq-council-card {
	position:relative;width:min(430px,100%);max-height:100%;overflow:hidden;
	display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.7vh,16px);
	padding:clamp(15px,2.7vh,24px);border-radius:30px;
	background:linear-gradient(165deg,#faffff 0%,#edfafa 62%,#fff8e7 100%);
	border:1px solid rgba(255,255,255,.96);
	box-shadow:0 28px 70px rgba(0,9,27,.48),0 0 0 1px rgba(61,213,210,.18),inset 0 1px 0 #fff;
	animation:mq-council-card-in .68s cubic-bezier(.2,1.16,.3,1) both;
}
@keyframes mq-council-card-in { from{opacity:0;transform:translateY(34px) scale(.9)} }
.mq-council-card>header { width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#0d6075;font-size:.67rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase; }
.mq-council-steps { display:flex;gap:5px; }
.mq-council-steps i { width:7px;height:7px;border-radius:99px;background:#c7dde4;transition:width .3s,background .3s; }
.mq-council-steps i.is-on { width:22px;background:linear-gradient(90deg,#17c6c4,#237cda); }
.mq-council-portrait { position:relative;width:min(48%,178px);aspect-ratio:1;display:grid;place-items:center;margin-top:2px; }
.mq-council-portrait img { position:relative;z-index:2;width:82%;height:82%;object-fit:cover;border-radius:50%;border:5px solid #fff;box-shadow:0 14px 30px rgba(9,64,93,.22),0 0 0 3px #e9bd4d; }
.mq-council-portrait b { position:absolute;z-index:3;left:50%;bottom:-2px;transform:translateX(-50%);width:max-content;max-width:180%;padding:6px 12px;border-radius:999px;background:#0b526d;color:#fff;border:2px solid #fff;font-size:.66rem;font-weight:950;box-shadow:0 6px 14px rgba(7,50,75,.22); }
.mq-council-orbit { position:absolute;inset:1%;border:1px solid rgba(17,183,189,.35);border-radius:50%;animation:mq-council-orbit 8s linear infinite; }
.mq-council-orbit:before,.mq-council-orbit:after { content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#e9bd4d;box-shadow:0 0 14px rgba(233,189,77,.8); }
.mq-council-orbit:before { left:8%;top:18%; }.mq-council-orbit:after { right:4%;bottom:24%; }
@keyframes mq-council-orbit { to{transform:rotate(360deg)} }
.mq-council-message { width:100%;min-height:126px;padding:17px 18px;border-radius:22px;text-align:center;background:#fff;border:1px solid #d9ecef;box-shadow:0 10px 25px rgba(15,84,111,.1); }
.mq-council-message.is-changing { animation:mq-council-copy .42s cubic-bezier(.2,.85,.3,1) both; }
@keyframes mq-council-copy { from{opacity:.15;transform:translateX(14px)} }
.mq-council-message small { color:#13a3a9;font-weight:950;letter-spacing:.08em;text-transform:uppercase; }
.mq-council-message h3 { margin:7px 0 6px;color:#103b69;font-size:clamp(1.18rem,5vw,1.55rem);line-height:1.05;font-weight:950; }
.mq-council-message p { margin:0;color:#516d82;font-size:clamp(.78rem,3.1vw,.94rem);line-height:1.42;font-weight:760; }
.mq-council-next { width:100%;min-height:52px;background:linear-gradient(110deg,#087de2,#1859bb)!important;box-shadow:0 6px 0 #0a479e,0 12px 20px rgba(10,79,174,.22)!important; }

/* Révélation d'une paire en mode Apprentissage. */
.mq-learning-reveal { position:absolute;inset:0;z-index:95;overflow:hidden;isolation:isolate; }
.mq-learning-shade { position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(43,209,203,.2),transparent 31%),rgba(3,20,40,.82);animation:mq-learning-fade .28s ease-out both; }
@keyframes mq-learning-fade { from{opacity:0} }
.mq-learning-stage { position:absolute;inset:0; }
.mq-learning-pair { position:absolute;inset:0; }
.mq-learning-card {
	position:absolute;z-index:3;overflow:hidden;border-radius:clamp(15px,4vw,22px);
	background:#0d4565;border:4px solid #fff;
	box-shadow:0 18px 40px rgba(0,9,25,.42),0 0 0 2px rgba(238,191,70,.82);
	transition:left .72s cubic-bezier(.16,.92,.28,1),top .72s cubic-bezier(.16,.92,.28,1),width .72s cubic-bezier(.16,.92,.28,1),height .72s cubic-bezier(.16,.92,.28,1),transform .25s ease,opacity .25s ease;
	will-change:left,top,width,height;
}
.mq-learning-card img { width:100%;height:100%;display:block;object-fit:cover; }
.mq-learning-card>span { width:100%;height:100%;display:grid;place-items:center;padding:8px;color:#fff;font-weight:900;text-align:center; }
.mq-learning-reveal.is-gathered .mq-learning-card:first-child { transform:rotate(-2.5deg); }
.mq-learning-reveal.is-gathered .mq-learning-card:nth-child(2) { transform:rotate(2.5deg); }
.mq-learning-link { position:absolute;z-index:4;left:50%;top:calc(max(54px,min(17vh,138px)) + 34px);width:0;height:4px;transform:translateX(-50%);border-radius:99px;background:linear-gradient(90deg,#f5ca55,#fff4b8,#f5ca55);box-shadow:0 0 16px rgba(245,202,85,.82);opacity:0; }
.mq-learning-reveal.is-gathered .mq-learning-link { animation:mq-learning-link .42s ease-out .55s forwards; }
@keyframes mq-learning-link { to{width:35%;opacity:1} }
.mq-learning-check { position:absolute;z-index:8;left:50%;top:calc(max(54px,min(17vh,138px)) + 54px);width:55px;height:55px;display:grid;place-items:center;transform:translate(-50%,-50%) scale(.25) rotate(-18deg);border-radius:50%;background:linear-gradient(145deg,#36d88c,#159e66);color:#fff;border:4px solid #f4c84d;box-shadow:0 10px 24px rgba(0,55,51,.34),0 0 0 5px rgba(255,255,255,.92);font-size:30px;font-weight:950;opacity:0; }
.mq-learning-reveal.is-gathered .mq-learning-check { animation:mq-learning-check .52s cubic-bezier(.18,1.45,.35,1) .62s forwards; }
@keyframes mq-learning-check { to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)} }
.mq-learning-bubble {
	position:absolute;z-index:7;left:clamp(18px,7vw,38px);right:clamp(18px,7vw,38px);top:min(49vh,405px);
	min-height:112px;display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:12px;
	padding:19px 15px 18px 20px;border-radius:23px;background:#fff;border:2px solid #ccebea;
	box-shadow:0 20px 48px rgba(0,8,24,.36);opacity:0;transform:translateY(-18px) scale(.82);transform-origin:50% -24px;
}
.mq-learning-bubble:before { content:"";position:absolute;left:50%;top:-14px;width:25px;height:25px;transform:translateX(-50%) rotate(45deg);border-left:2px solid #ccebea;border-top:2px solid #ccebea;background:#fff;border-radius:6px 0 0; }
.mq-learning-reveal.is-gathered .mq-learning-bubble { animation:mq-learning-bubble .58s cubic-bezier(.2,1.2,.3,1) .82s forwards; }
@keyframes mq-learning-bubble { to{opacity:1;transform:none} }
.mq-learning-bubble p { margin:0;color:#153c5a;font-size:clamp(1rem,4.1vw,1.24rem);line-height:1.36;font-weight:850;letter-spacing:-.015em;opacity:0;transform:translateY(8px); }
.mq-learning-reveal.is-gathered .mq-learning-bubble p { animation:mq-learning-copy .48s ease-out 1.15s forwards; }
@keyframes mq-learning-copy { to{opacity:1;transform:none} }
.mq-learning-bubble p strong { position:relative;color:#078d92;background:none;padding:0;font-weight:950; }
.mq-learning-bubble p strong:after { content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:99px;background:#efbd3d;transform:scaleX(0);transform-origin:left; }
.mq-learning-reveal.is-gathered .mq-learning-bubble p strong:after { animation:mq-learning-underline .45s ease-out 1.5s forwards; }
@keyframes mq-learning-underline { to{transform:scaleX(1)} }
.mq-learning-next {
	position:relative;z-index:2;width:48px;height:48px;display:grid;place-items:center;padding:0;
	border-radius:16px;border:1px solid rgba(255,255,255,.62);
	background:linear-gradient(145deg,#148be8,#0b66ca 58%,#0754ae);color:#fff;
	box-shadow:0 5px 0 #06458f,0 10px 18px rgba(7,83,175,.25),inset 0 1px 0 rgba(255,255,255,.38);
	font:900 1.65rem/1 ui-rounded,system-ui,sans-serif;opacity:0;transform:translateX(-8px) scale(.78);
	transition:transform .14s ease,box-shadow .14s ease;
}
.mq-learning-reveal.is-gathered .mq-learning-next { animation:mq-learning-next .4s cubic-bezier(.2,1.25,.3,1) 1.58s forwards; }
@keyframes mq-learning-next { to{opacity:1;transform:none} }
.mq-learning-next:active { transform:translateY(3px)!important;box-shadow:0 2px 0 #06458f,0 5px 10px rgba(7,83,175,.2); }
.mq-learning-next:focus-visible { outline:3px solid rgba(35,184,223,.42);outline-offset:3px; }
.mq-learning-reveal.is-leaving .mq-learning-card,.mq-learning-reveal.is-leaving .mq-learning-bubble,.mq-learning-reveal.is-leaving .mq-learning-check { opacity:0!important;transform:translateY(-8px) scale(.94)!important; }
.mq-learning-reveal.is-leaving .mq-learning-shade { opacity:0;transition:opacity .25s; }

@media (max-height:720px) {
	.mq-view[data-view="histoire"] .mq-mission-meta { display:none; }
	.mq-view[data-view="histoire"] .mq-mission { gap:7px;padding-block:8px; }
	.mq-council-card { gap:8px;padding:13px; }
	.mq-council-portrait { width:min(36%,132px); }
	.mq-council-message { min-height:108px;padding:13px 15px; }
	.mq-learning-bubble { top:min(52vh,340px);min-height:96px;padding-block:14px; }
}
@media (prefers-reduced-motion:reduce) {
	.mq-council-orbit{animation:none}.mq-learning-card{transition-duration:.12s}
}
.mq-shell[data-motion="calme"] .mq-council-orbit { animation:none; }
.mq-shell[data-motion="calme"] .mq-learning-card { transition-duration:.12s; }
.mq-shell[data-motion="calme"] .mq-learning-link,.mq-shell[data-motion="calme"] .mq-learning-check,.mq-shell[data-motion="calme"] .mq-learning-bubble,.mq-shell[data-motion="calme"] .mq-learning-bubble p,.mq-shell[data-motion="calme"] .mq-learning-next { animation-delay:0s!important;animation-duration:.12s!important; }

/* ---------- Navigation basse ---------- */
.mq-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: var(--r-xl); background: var(--blanc); box-shadow: var(--ombre-forte); }
.mq-nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px 9px; border-radius: var(--r-m); color: var(--encre-3); position: relative; transition: color .2s, background .22s, transform .18s var(--ressort); }
.mq-nav button svg { width: 21px; height: 21px; stroke-width: 2.4; }
.mq-nav button small { font-size: .62rem; font-weight: 900; }
.mq-nav button.is-on { color: var(--turq-2); background: var(--past-ciel); }
.mq-nav button.is-on::after { content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 99px; background: var(--turq); }
.mq-nav button:active { transform: scale(.93); }
.mq-nav .mq-badge { position: absolute; top: 1px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: flex; align-items: center; justify-content: center; background: var(--rouge); color: #fff; font-size: .6rem; font-weight: 900; border: 2px solid #fff; animation: mq-badge 1.8s var(--ease) infinite; }

/* =========================================================================
   ADAPTATIONS DE HAUTEUR — le contenu se comprime avant de disparaître
   ========================================================================= */
@media (max-height: 780px) {
	.mq-tuile small { display: none; }
	.mq-lede { display: none; }
}
@media (max-height: 680px) {
	
	.mq-nav button small { font-size: .58rem; }
}
@media (max-height: 600px) {
	.mq-demo { height: clamp(40px, 8vmin, 62px); }
	.mq-wordmark { font-size: clamp(1.25rem, 5vmin, 1.8rem); }
	.mq-vignette strong { display: none; }
}
@media (max-width: 380px) {
	.mq-profil-info strong { display: none; }
	.mq-answers.is-duo { grid-template-columns: 1fr; }
	.mq-stat small { font-size: .52rem; }
}
@media (min-width: 700px) {
	.mq-app { max-width: 560px; margin: 0 auto; width: 100%; }
	.mq-sheet-layer { left:50%; right:auto; width:min(560px,100%); transform:translateX(-50%); }
}

@media (max-height: 720px) {
	.mq-view[data-view="accueil"] .mq-demo { height: clamp(62px, 13vmin, 110px); }
	.mq-view[data-view="accueil"] .mq-wordmark { font-size: clamp(1.8rem, 7.2vmin, 3rem); }
	
	.mq-view[data-view="accueil"] .mq-play { min-height: 54px; }
}
@media (max-width: 430px) {
	.mq-top { gap: 5px; padding-inline: 7px; }
	.mq-profil-info strong { display: none; }
	.mq-play { width: 82%; }
}

/* Animations réduites */
.mq-shell[data-motion="calme"] *,
.mq-shell[data-motion="calme"] *::before,
.mq-shell[data-motion="calme"] *::after {
	animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .1s !important;
}
.mq-shell[data-motion="calme"] .mq-card { transition-duration: .22s !important; }
.mq-shell[data-motion="calme"] .mq-ambiance,
.mq-shell[data-motion="calme"] .mq-confettis,
.mq-shell[data-motion="calme"] .mq-fx-dot,
.mq-shell[data-motion="calme"] .mq-fx-rays,
.mq-shell[data-motion="calme"] .mq-fx-ring,
.mq-shell[data-motion="calme"] .mq-fx-ember,
.mq-shell[data-motion="calme"] .mq-fx-fly,
.mq-shell[data-motion="calme"] .mq-fx-flash,
.mq-shell[data-motion="calme"] .mq-fx-heat,
.mq-shell[data-motion="calme"] .mq-fx-aura,
.mq-shell[data-motion="calme"] .mq-fx-sweep,
.mq-shell[data-motion="calme"] .mq-fx-burst { display: none; }
.mq-shell[data-motion="calme"] .mq-fx-gain,
.mq-shell[data-motion="calme"] .mq-fx-combo { animation: mq-fx-calm .8s var(--sortie) forwards !important; }
.mq-shell[data-motion="calme"] .mq-board { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.mq-shell *, .mq-shell *::before, .mq-shell *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important;
	}
	.mq-shell .mq-ambiance, .mq-shell .mq-confettis, .mq-shell .mq-fx-dot, .mq-shell .mq-fx-rays,
	.mq-shell .mq-fx-ring, .mq-shell .mq-fx-ember, .mq-shell .mq-fx-fly, .mq-shell .mq-fx-flash,
	.mq-shell .mq-fx-heat, .mq-shell .mq-fx-aura, .mq-shell .mq-fx-sweep, .mq-shell .mq-fx-burst { display: none; }
	.mq-shell .mq-fx-gain, .mq-shell .mq-fx-combo { animation: mq-fx-calm .8s var(--sortie) forwards !important; }
	.mq-shell .mq-board { animation: none !important; }
}

/* =========================================================================
   ACCUEIL 6.1.6 — composition fidèle à la maquette de référence
   Ce bloc est volontairement limité à l'écran Accueil afin de ne pas
   modifier la géométrie des écrans Histoire, Boutique et Réglages.
   ========================================================================= */
.mq-shell[data-screen="accueil"] {
	--home-blue-1: #20b8ee;
	--home-blue-2: #78d7f5;
	--home-blue-3: #d8f1fb;
	--home-cream: #fff1d2;
	background:
		radial-gradient(circle at 12% 24%, rgba(255,255,255,.32) 0 1px, transparent 2px),
		radial-gradient(circle at 86% 30%, rgba(255,255,255,.42) 0 1.4px, transparent 2.5px),
		linear-gradient(180deg, var(--home-blue-1) 0%, var(--home-blue-2) 24%, var(--home-blue-3) 53%, #eef8f1 72%, var(--home-cream) 100%);
	background-size: 128px 128px, 176px 176px, auto;
}
.mq-shell[data-screen="accueil"] .mq-ambiance i:nth-child(1) {
	width: 96vmax; height: 48vmax; left: -30vmax; top: -18vmax;
	background: radial-gradient(ellipse, rgba(255,255,255,.55) 0%, transparent 67%);
}
.mq-shell[data-screen="accueil"] .mq-ambiance i:nth-child(2) {
	right: -30vmax; top: 32vmax;
	background: radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 66%);
}
.mq-shell[data-screen="accueil"] .mq-ambiance i:nth-child(3) {
	left: -22vmax; bottom: -18vmax;
	background: radial-gradient(ellipse, rgba(255,218,137,.24) 0%, transparent 66%);
}

.mq-shell[data-screen="accueil"] .mq-app {
	gap: clamp(10px, 1.35vh, 15px);
	padding:
		max(clamp(14px, 2.25vh, 24px), env(safe-area-inset-top))
		clamp(11px, 3.05vw, 25px)
		max(clamp(12px, 1.8vh, 22px), env(safe-area-inset-bottom));
}

/* Bandeau supérieur : mêmes masses visuelles et même lecture que la capture. */
.mq-shell[data-screen="accueil"] .mq-top {
	min-height: 0;
	height: clamp(68px, 9.55vh, 92px);
	padding: clamp(7px, 1.05vh, 10px) clamp(9px, 2.2vw, 16px);
	gap: clamp(5px, 1.55vw, 11px);
	border: 1px solid rgba(255,255,255,.92);
	border-radius: clamp(26px, 7vw, 38px);
	background: rgba(255,255,255,.97);
	box-shadow: inset 0 1px 0 #fff, 0 7px 20px rgba(21,60,122,.15);
}
.mq-shell[data-screen="accueil"] .mq-avatar {
	width: clamp(48px, 6.5vh, 60px);
	height: clamp(48px, 6.5vh, 60px);
	font-size: clamp(1.18rem, 3.25vh, 1.65rem);
	border-width: 3px;
	box-shadow: 0 0 0 3px rgba(22,196,206,.23), inset 0 1px 0 rgba(255,255,255,.35);
}
.mq-shell[data-screen="accueil"] .mq-avatar b {
	right: -5px; bottom: -4px;
	min-width: clamp(21px, 2.8vh, 26px);
	height: clamp(21px, 2.8vh, 26px);
	font-size: clamp(.64rem, 1.45vh, .8rem);
	border-width: 2px;
}
.mq-shell[data-screen="accueil"] .mq-profil-info {
	justify-content: center;
	gap: 0;
	min-width: 40px;
}
.mq-shell[data-screen="accueil"] .mq-profil-info strong { display: none; }
.mq-shell[data-screen="accueil"] .mq-xp {
	height: clamp(8px, 1.25vh, 11px);
	background: #e5edf5;
	box-shadow: inset 0 1px 2px rgba(21,60,122,.08);
}
.mq-shell[data-screen="accueil"] .mq-xp i {
	background: linear-gradient(90deg, #16b8c7 0%, #34d0bd 100%);
}
.mq-shell[data-screen="accueil"] .mq-chip {
	gap: clamp(5px, 1.2vw, 9px);
	padding: 0;
	background: transparent;
	font-size: clamp(.95rem, 2.45vh, 1.28rem);
}
.mq-shell[data-screen="accueil"] .mq-chip .mq-coin {
	width: clamp(34px, 4.9vh, 45px);
	height: clamp(34px, 4.9vh, 45px);
	box-shadow: 0 3px 0 #d98816, 0 6px 12px rgba(232,149,28,.26), inset 0 2px 0 rgba(255,255,255,.5);
}
.mq-shell[data-screen="accueil"] .mq-chip .mq-coin svg { width: 45%; height: 45%; }
.mq-shell[data-screen="accueil"] .mq-chip b { min-width: 1.55em; text-align: center; }
.mq-shell[data-screen="accueil"] .mq-chip .mq-plus {
	width: clamp(32px, 4.45vh, 41px);
	height: clamp(32px, 4.45vh, 41px);
	font-size: clamp(1.1rem, 2.65vh, 1.45rem);
	box-shadow: 0 4px 10px rgba(15,163,180,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
.mq-shell[data-screen="accueil"] .mq-icon-btn {
	width: clamp(37px, 4.8vh, 45px);
	height: clamp(37px, 4.8vh, 45px);
	background: transparent;
	box-shadow: none;
}
.mq-shell[data-screen="accueil"] .mq-icon-btn svg { width: 66%; height: 66%; stroke-width: 2.45; }

/* Zone centrale : logo vertical, grille compacte et bouton principal. */
.mq-shell[data-screen="accueil"] .mq-view[data-view="accueil"] {
	gap: clamp(9px, 1.2vh, 14px);
	overflow: visible;
}
.mq-shell[data-screen="accueil"] .mq-logo {
	flex: 0 0 clamp(245px, 31.7vh, 292px);
	justify-content: center;
	gap: clamp(3px, .55vh, 6px);
	padding-top: clamp(5px, .8vh, 9px);
}
.mq-shell[data-screen="accueil"] .mq-demo {
	height: clamp(112px, 14.7vh, 138px);
	gap: clamp(3px, .8vw, 7px);
	filter: drop-shadow(0 10px 16px rgba(21,60,122,.21));
}
.mq-shell[data-screen="accueil"] .mq-demo-card {
	height: 100%;
	transform: none;
	transform-origin: center;
	will-change: transform;
}
.mq-shell[data-screen="accueil"] .mq-demo-card.is-left,
.mq-shell[data-screen="accueil"] .mq-demo-card.is-right {
	transform: none;
	animation: mq-home-card-float 3.6s var(--ease) infinite alternate;
}
.mq-shell[data-screen="accueil"] .mq-demo-card.is-right {
	animation-delay: -.9s;
	z-index: 1;
}
@keyframes mq-home-card-float {
	from { transform: translateY(1px); }
	to { transform: translateY(-3px); }
}
.mq-shell[data-screen="accueil"] .mq-demo-face {
	border-radius: clamp(17px, 4vw, 24px);
	border-width: clamp(4px, .65vh, 6px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -12px 18px rgba(21,60,122,.12), 0 6px 14px rgba(21,60,122,.10);
}
.mq-shell[data-screen="accueil"] .mq-demo-face svg { width: 43%; height: 43%; }
.mq-shell[data-screen="accueil"] .mq-demo-seal {
	top: 70%;
	width: clamp(45px, 6.3vh, 58px);
	opacity: 1;
	animation: mq-home-seal 2.8s ease-in-out infinite;
	box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 7px 14px rgba(21,60,122,.25), inset 0 2px 1px rgba(255,255,255,.55);
}
@keyframes mq-home-seal {
	0%,100% { transform: translate(-50%, -50%) scale(.97); }
	50% { transform: translate(-50%, -53%) scale(1.03); }
}
.mq-shell[data-screen="accueil"] .mq-wordmark {
	font-size: clamp(2.15rem, 5.25vh, 3.2rem);
	line-height: .98;
	margin-top: clamp(4px, .65vh, 7px);
	text-shadow: 0 2px 5px rgba(21,60,122,.06);
}

.mq-shell[data-screen="accueil"] .mq-play {
	width: min(75%, 590px);
	min-height: 0;
	height: clamp(66px, 8.75vh, 82px);
	font-size: clamp(1.28rem, 3.7vh, 1.9rem);
	gap: clamp(12px, 3vw, 20px);
	border-radius: 999px;
	box-shadow: 0 6px 0 #1768c0, 0 13px 26px rgba(31,106,192,.34);
}
.mq-shell[data-screen="accueil"] .mq-play svg { width: 1.05em; height: 1.05em; }

/* Navigation basse : grande, lisible et stable comme sur la référence. */
.mq-shell[data-screen="accueil"] .mq-nav {
	height: clamp(78px, 10.7vh, 98px);
	padding: clamp(7px, 1.05vh, 10px);
	gap: clamp(3px, 1vw, 8px);
	border: 1px solid rgba(255,255,255,.92);
	border-radius: clamp(27px, 7vw, 38px);
	background: rgba(255,255,255,.97);
	box-shadow: inset 0 1px 0 #fff, 0 8px 21px rgba(21,60,122,.15);
}
.mq-shell[data-screen="accueil"] .mq-nav button {
	gap: clamp(3px, .55vh, 6px);
	padding: clamp(7px, 1vh, 10px) 3px clamp(9px, 1.2vh, 12px);
	border-radius: clamp(18px, 4.7vw, 25px);
}
.mq-shell[data-screen="accueil"] .mq-nav button svg {
	width: clamp(25px, 3.5vh, 33px);
	height: clamp(25px, 3.5vh, 33px);
	stroke-width: 2.25;
}
.mq-shell[data-screen="accueil"] .mq-nav button small {
	font-size: clamp(.65rem, 1.55vh, .82rem);
	line-height: 1;
}
.mq-shell[data-screen="accueil"] .mq-nav button.is-on {
	background: linear-gradient(155deg, #e8f7ff 0%, #ddecfb 100%);
}
.mq-shell[data-screen="accueil"] .mq-nav button.is-on::after {
	bottom: clamp(5px, .65vh, 7px);
	width: clamp(22px, 6vw, 33px);
	height: 4px;
}

/* Téléphones étroits : préserver la hiérarchie sans écraser les commandes. */
@media (max-width: 370px) {
	.mq-shell[data-screen="accueil"] .mq-top { gap: 4px; padding-inline: 7px; }
	.mq-shell[data-screen="accueil"] .mq-avatar { width: 46px; height: 46px; }
	.mq-shell[data-screen="accueil"] .mq-chip { gap: 3px; }
	.mq-shell[data-screen="accueil"] .mq-chip .mq-coin { width: 32px; height: 32px; }
	.mq-shell[data-screen="accueil"] .mq-chip .mq-plus { width: 30px; height: 30px; }
	.mq-shell[data-screen="accueil"] .mq-icon-btn { width: 34px; height: 34px; }
	.mq-shell[data-screen="accueil"] .mq-logo { flex-basis: clamp(225px, 31vh, 250px); }
	.mq-shell[data-screen="accueil"] .mq-play { width: 79%; }
}

/* Écrans bas : réduire les espacements avant les éléments eux-mêmes. */
@media (max-height: 700px) {
	.mq-shell[data-screen="accueil"] .mq-app { gap: 7px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
	.mq-shell[data-screen="accueil"] .mq-top { height: 62px; }
	.mq-shell[data-screen="accueil"] .mq-logo { flex-basis: 205px; }
	.mq-shell[data-screen="accueil"] .mq-demo { height: 92px; }
	.mq-shell[data-screen="accueil"] .mq-wordmark { font-size: 2rem; }
	.mq-shell[data-screen="accueil"] .mq-tagline { font-size: .84rem; }
	.mq-shell[data-screen="accueil"] .mq-tuile span { width: 37px; height: 37px; }
	.mq-shell[data-screen="accueil"] .mq-tuile strong { font-size: .8rem; }
	.mq-shell[data-screen="accueil"] .mq-play { height: 56px; }
	.mq-shell[data-screen="accueil"] .mq-nav { height: 66px; }
}

@media (min-width: 600px) {
	
}

@media (max-height: 650px) {
	.mq-shell[data-screen="accueil"] .mq-app {
		gap: 5px;
		padding-top: max(6px, env(safe-area-inset-top));
		padding-bottom: max(6px, env(safe-area-inset-bottom));
	}
	.mq-shell[data-screen="accueil"] .mq-top { height: 56px; }
	.mq-shell[data-screen="accueil"] .mq-avatar { width: 42px; height: 42px; font-size: 1rem; }
	.mq-shell[data-screen="accueil"] .mq-avatar b { min-width: 19px; height: 19px; }
	.mq-shell[data-screen="accueil"] .mq-chip .mq-coin { width: 29px; height: 29px; }
	.mq-shell[data-screen="accueil"] .mq-chip .mq-plus { width: 28px; height: 28px; }
	.mq-shell[data-screen="accueil"] .mq-icon-btn { width: 31px; height: 31px; }
	.mq-shell[data-screen="accueil"] .mq-view[data-view="accueil"] { gap: 6px; }
	.mq-shell[data-screen="accueil"] .mq-logo { flex-basis: 174px; padding-top: 0; gap: 2px; }
	.mq-shell[data-screen="accueil"] .mq-demo { height: 76px; }
	.mq-shell[data-screen="accueil"] .mq-demo-seal { width: 35px; }
	.mq-shell[data-screen="accueil"] .mq-wordmark { font-size: 1.75rem; margin-top: 2px; }
	
	
	
	
	
	
	.mq-shell[data-screen="accueil"] .mq-play { height: 50px; min-height: 50px; font-size: 1.08rem; }
	.mq-shell[data-screen="accueil"] .mq-nav { height: 58px; padding: 5px; }
	.mq-shell[data-screen="accueil"] .mq-nav button { padding: 4px 2px 7px; gap: 1px; border-radius: 14px; }
	.mq-shell[data-screen="accueil"] .mq-nav button svg { width: 20px; height: 20px; }
	.mq-shell[data-screen="accueil"] .mq-nav button small { font-size: .56rem; }
	.mq-shell[data-screen="accueil"] .mq-nav button.is-on::after { bottom: 3px; height: 3px; }
}

/* L'accueil de référence reste bleu, même lorsqu'un autre habillage est choisi pour le jeu. */
.mq-shell[data-screen="accueil"] .mq-avatar {
	background: linear-gradient(145deg, #16c4ce 0%, #2e86e0 100%);
}
.mq-shell[data-screen="accueil"] .mq-avatar b,
.mq-shell[data-screen="accueil"] .mq-chip .mq-plus {
	background: #16c4ce;
}
.mq-shell[data-screen="accueil"] .mq-wordmark span { color: #16c4ce; }
.mq-shell[data-screen="accueil"] .mq-wordmark b { color: #153c7a; }
.mq-shell[data-screen="accueil"] .mq-play {
	color: #fff;
	background-color: #2287dd;
	background-image: linear-gradient(105deg, #16c4ce 0%, #2e86e0 100%);
	box-shadow: 0 6px 0 #1768c0, 0 13px 26px rgba(31,106,192,.34);
}
.mq-shell[data-screen="accueil"] .mq-nav button.is-on { color: #0fa3b4; }
.mq-shell[data-screen="accueil"] .mq-nav button.is-on::after { background: #16c4ce; }

/* Bandeau et navigation du parcours : proportions des maquettes 9:16. */
.mq-shell:not([data-screen="accueil"]) .mq-top {
	min-height:clamp(62px,8.7vh,78px);
	padding:clamp(7px,1.1vh,11px) clamp(10px,2.6vw,15px);
	gap:clamp(6px,1.8vw,10px);
	border-radius:clamp(24px,7vw,34px);
	box-shadow:inset 0 2px 1px rgba(255,255,255,.96),0 10px 25px rgba(21,60,122,.14);
}
.mq-shell:not([data-screen="accueil"]) .mq-avatar { width:clamp(49px,13vw,58px);height:clamp(49px,13vw,58px);font-size:clamp(1.12rem,5vw,1.45rem);border-width:3px; }
.mq-shell:not([data-screen="accueil"]) .mq-avatar b { min-width:22px;height:22px;font-size:.68rem; }
.mq-shell:not([data-screen="accueil"]) .mq-profil-info strong { display:none; }
.mq-shell:not([data-screen="accueil"]) .mq-profil-info { justify-content:center; }
.mq-shell:not([data-screen="accueil"]) .mq-xp { height:clamp(8px,1.15vh,11px); }
.mq-shell:not([data-screen="accueil"]) .mq-chip { font-size:clamp(.95rem,4vw,1.18rem);gap:6px;background:transparent;padding-inline:2px; }
.mq-shell:not([data-screen="accueil"]) .mq-chip .mq-coin { width:clamp(36px,9.5vw,43px);height:clamp(36px,9.5vw,43px); }
.mq-shell:not([data-screen="accueil"]) .mq-chip .mq-plus { width:clamp(34px,9vw,40px);height:clamp(34px,9vw,40px);font-size:1.35em; }
.mq-shell:not([data-screen="accueil"]) .mq-icon-btn { width:clamp(38px,9.8vw,44px);height:clamp(38px,9.8vw,44px);background:transparent; }
.mq-shell:not([data-screen="accueil"]) .mq-icon-btn svg { width:62%;height:62%;stroke-width:2.5; }
.mq-shell[data-screen="miseEnPlace"] .mq-app { gap:clamp(8px,1.05vh,11px);padding:max(10px,env(safe-area-inset-top)) clamp(10px,2.6vw,16px) max(10px,env(safe-area-inset-bottom)); }
.mq-shell[data-screen="miseEnPlace"] .mq-nav { min-height:clamp(70px,9.2vh,82px);padding:clamp(6px,.8vh,9px);border-radius:clamp(25px,7vw,34px);box-shadow:0 12px 28px rgba(21,60,122,.16); }
.mq-shell[data-screen="miseEnPlace"] .mq-nav button { gap:3px;padding:clamp(7px,.8vh,10px) 3px clamp(10px,1.2vh,13px);border-radius:clamp(17px,4.8vw,23px); }
.mq-shell[data-screen="miseEnPlace"] .mq-nav button svg { width:clamp(25px,6.8vw,31px);height:clamp(25px,6.8vw,31px);stroke-width:2.45; }
.mq-shell[data-screen="miseEnPlace"] .mq-nav button small { font-size:clamp(.68rem,2.8vw,.86rem); }
.mq-shell[data-screen="miseEnPlace"] .mq-nav button.is-on::after { width:clamp(23px,6vw,29px);height:4px;bottom:4px; }

/* Ajustement final de fidélité visuelle aux captures validées. */
.mq-view[data-view="miseEnPlace"] > .mq-setup-head { flex:0 0 96px; }

.mq-view[data-view="miseEnPlace"] > .mq-setup-foot { flex:0 0 auto; }

.mq-view[data-view="miseEnPlace"] .mq-carreau { background:linear-gradient(145deg,#fff 0%,#f7fbff 100%); }
.mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] { background:linear-gradient(145deg,#fff 0%,#effefd 100%); }

.mq-view[data-view="miseEnPlace"] .mq-format-card strong { font-size:clamp(1rem,4.2vw,1.32rem); }
.mq-view[data-view="miseEnPlace"] .mq-format-card small { font-size:clamp(.7rem,2.8vw,.9rem); }
.mq-view[data-view="miseEnPlace"] .mq-mini-grille { padding:clamp(9px,2.65vw,12px); }
.mq-view[data-view="miseEnPlace"] .mq-mini-grille i { width:clamp(8px,2.35vw,11px); }

@media (max-width:480px), (max-height:700px) {
  .mq-view[data-view="miseEnPlace"] > .mq-setup-head { flex-basis:76px; }
  
  
  
  
}

/* Structure verticale exacte des maquettes : retour, titre, puis progression. */
.mq-view[data-view="miseEnPlace"] .mq-setup-head {
  grid-template-columns:1fr;
  grid-template-areas:"back" "copy" "steps";
  align-items:start;
  row-gap:clamp(7px,1vh,11px);
  padding-inline:clamp(8px,2vw,12px);
}
.mq-view[data-view="miseEnPlace"] > .mq-setup-head { flex-basis:122px; }

.mq-view[data-view="miseEnPlace"] .mq-setup-back { align-self:start; }
.mq-view[data-view="miseEnPlace"] .mq-setup-copy { align-self:start;padding-left:clamp(2px,.6vw,4px); }
.mq-view[data-view="miseEnPlace"] .mq-setup-steps { padding-left:clamp(2px,.6vw,4px); }
.mq-view[data-view="miseEnPlace"] .mq-setup-copy .mq-title { font-size:clamp(1.92rem,7.8vw,2.38rem); }

.mq-shell[data-screen="miseEnPlace"] .mq-avatar { width:clamp(54px,14vw,60px);height:clamp(54px,14vw,60px); }
.mq-shell[data-screen="miseEnPlace"] .mq-profil-info { min-width:62px; }
.mq-shell[data-screen="miseEnPlace"] .mq-chip .mq-coin { width:clamp(38px,10vw,44px);height:clamp(38px,10vw,44px); }
.mq-shell[data-screen="miseEnPlace"] .mq-chip .mq-plus { width:clamp(36px,9.5vw,42px);height:clamp(36px,9.5vw,42px); }
@media (max-width:480px), (max-height:700px) {
  .mq-view[data-view="miseEnPlace"] > .mq-setup-head { flex-basis:88px; }
  
  .mq-view[data-view="miseEnPlace"] .mq-setup-head { row-gap:4px; }
  .mq-view[data-view="miseEnPlace"] .mq-setup-back { width:38px;height:38px; }
  .mq-view[data-view="miseEnPlace"] .mq-setup-copy .mq-title { font-size:1.52rem; }
  
}

@media (max-width:480px), (max-height:700px) {
  
  
}

/* =========================================================================
   PATCH 6.3.2 — netteté de la section "mise en place"
   Objectif: supprimer l'effet flou/perlé de cette section uniquement.
   ========================================================================= */
.mq-view[data-view="miseEnPlace"]::before {
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(155deg, transparent 0 40%, rgba(255,255,255,.06) 40.4% 40.8%, transparent 41.2% 100%);
}
.mq-view[data-view="miseEnPlace"] .mq-setup-back {
  background: #fff;
  border-color: rgba(235,244,250,.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 16px rgba(21,60,122,.10);
}
.mq-view[data-view="miseEnPlace"] .mq-carreau {
  background: #fff;
  border-color: rgba(236,244,249,.98);
  box-shadow: 0 10px 24px rgba(21,60,122,.11), 0 2px 4px rgba(21,60,122,.05);
}
.mq-view[data-view="miseEnPlace"] .mq-carreau::before {
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 42%);
  opacity: .45;
}
.mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  box-shadow: 0 0 0 2px rgba(22,196,206,.20), 0 12px 26px rgba(15,163,180,.16);
}

.mq-view[data-view="miseEnPlace"] .mq-setup-grid,
.mq-view[data-view="miseEnPlace"] .mq-setup-head,
.mq-view[data-view="miseEnPlace"] .mq-setup-foot {
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================================
   PARAMÈTRES PREMIUM 6.3.3 — reproduction fonctionnelle de la maquette
   ========================================================================= */
.mq-view[data-view="reglages"] {
	gap: clamp(8px, 1.05vh, 12px);
	overflow: hidden;
}
.mq-settings-head {
	padding: clamp(3px, .55vh, 7px) clamp(5px, 1.4vw, 10px) 0;
}
.mq-settings-head .mq-eyebrow {
	margin: 0 0 clamp(4px, .6vh, 7px);
	font-size: clamp(.74rem, 3vw, .92rem);
	letter-spacing: .16em;
	color: #0fa3b4;
}
.mq-settings-head .mq-title {
	margin: 0;
	font-size: clamp(1.7rem, 7.2vw, 2.25rem);
	line-height: 1;
	letter-spacing: -.045em;
	color: #153c7a;
}
.mq-settings-scroll {
	padding: 1px 3px 5px;
	scrollbar-width: none;
}
.mq-settings-scroll::-webkit-scrollbar { display: none; }
.mq-settings-list {
	display: flex;
	flex-direction: column;
	gap: clamp(7px, .9vh, 10px);
	padding: 1px 0 5px;
}
.mq-settings-row,
.mq-theme-panel {
	position: relative;
	flex: 0 0 auto;
	border-radius: clamp(21px, 5.7vw, 28px);
	background: #fff;
	border: 1px solid rgba(234,243,249,.98);
	box-shadow: 0 8px 20px rgba(21,60,122,.10), 0 2px 4px rgba(21,60,122,.04);
}
.mq-settings-row {
	display: grid;
	grid-template-columns: clamp(42px, 11.5vw, 54px) minmax(0,1fr) auto;
	align-items: center;
	gap: clamp(10px, 2.8vw, 15px);
	min-height: clamp(66px, 8.9vh, 82px);
	padding: clamp(9px, 1.25vh, 13px) clamp(12px, 3.4vw, 18px);
	text-align: left;
}
button.mq-settings-row:active { transform: scale(.99); }
.mq-settings-icon {
	width: clamp(40px, 10.7vw, 50px);
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #13b9c5;
	background: linear-gradient(145deg,#f6fcfe,#e7f3f7);
	box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(21,60,122,.07);
}
.mq-settings-icon svg { width: 50%; height: 50%; stroke-width: 2.45; }
.mq-settings-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mq-settings-copy strong {
	font-size: clamp(.96rem, 3.9vw, 1.22rem);
	font-weight: 950;
	line-height: 1.05;
	color: #153c7a;
}
.mq-settings-copy small {
	font-size: clamp(.68rem, 2.75vw, .87rem);
	font-weight: 760;
	line-height: 1.16;
	color: #55719c;
}
.mq-settings-open {
	width: clamp(34px, 9vw, 42px);
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2e86e0;
	background: #eef7fc;
}
.mq-settings-open svg { width: 45%; height: 45%; stroke-width: 3; }
.mq-privacy-center { display:grid;gap:8px; }
.mq-privacy-center > p { margin:0 0 2px;color:var(--encre-2);font-size:.73rem;line-height:1.45;font-weight:720; }
.mq-privacy-center > button { width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 28px;align-items:center;gap:10px;padding:10px;border:1px solid rgba(61,142,199,.16);border-radius:16px;background:#f4f9fd;color:var(--encre);text-align:left; }
.mq-privacy-center > button > span { width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#eaf8ff,#d9edf9);color:var(--bleu); }
.mq-privacy-center > button > span svg { width:22px;height:22px; }
.mq-privacy-center > button > b { min-width:0;display:grid;gap:3px;font-weight:inherit; }
.mq-privacy-center > button strong { font-size:.75rem;font-weight:950; }
.mq-privacy-center > button small { color:var(--encre-2);font-size:.58rem;line-height:1.3;font-weight:720; }
.mq-privacy-center > button > i { display:grid;place-items:center;color:var(--encre-2); }
.mq-privacy-center > button > i svg { width:17px;height:17px; }
.mq-privacy-center > button.is-danger { border-color:rgba(178,54,76,.18);background:#fff7f8; }
.mq-privacy-center > button.is-danger > span,.mq-privacy-center > button.is-danger > i { color:#a43145; }
.mq-delete-online-copy { display:grid;gap:10px; }
.mq-delete-online-copy p { margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.5;font-weight:720; }
.mq-delete-online-copy strong { color:var(--encre); }
.mq-view[data-view="reglages"] .mq-switch {
	width: clamp(48px, 13vw, 58px);
	height: clamp(28px, 7.4vw, 34px);
	background: #dfe7ef;
	box-shadow: inset 0 2px 4px rgba(21,60,122,.08);
}
.mq-view[data-view="reglages"] .mq-switch i {
	top: 3px;
	left: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	max-width: clamp(22px, 6.3vw, 28px);
	box-shadow: 0 3px 7px rgba(21,60,122,.22);
}
.mq-view[data-view="reglages"] .mq-settings-row[aria-pressed="true"] .mq-switch {
	background: linear-gradient(115deg,#11c8cf,#24bfae);
}
.mq-view[data-view="reglages"] .mq-settings-row[aria-pressed="true"] .mq-switch i {
	transform: translateX(clamp(20px, 5.5vw, 25px));
}
.mq-volume-row { grid-template-columns: clamp(42px, 11.5vw, 54px) minmax(0,1fr) auto; }
.mq-volume-copy { gap: clamp(6px, .8vh, 9px); }
.mq-volume-value {
	min-width: 46px;
	text-align: right;
	font-size: clamp(.95rem, 3.8vw, 1.18rem);
	font-weight: 950;
	font-variant-numeric: tabular-nums;
	color: #153c7a;
}
.mq-view[data-view="reglages"] .mq-range {
	width: 100%;
	height: 18px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
}
.mq-view[data-view="reglages"] .mq-range::-webkit-slider-runnable-track {
	height: 7px;
	border-radius: 999px;
	background: linear-gradient(90deg,#18c5cb 0 var(--range),#dfe7ef var(--range) 100%);
	box-shadow: inset 0 1px 2px rgba(21,60,122,.08);
}
.mq-view[data-view="reglages"] .mq-range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -7.5px;
	border: 0;
	border-radius: 50%;
	background: #19bdc8;
	box-shadow: 0 3px 7px rgba(15,163,180,.28);
}
.mq-view[data-view="reglages"] .mq-range::-moz-range-track {
	height: 7px;
	border-radius: 999px;
	background: #dfe7ef;
}
.mq-view[data-view="reglages"] .mq-range::-moz-range-progress {
	height: 7px;
	border-radius: 999px;
	background: #18c5cb;
}
.mq-view[data-view="reglages"] .mq-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: #19bdc8;
	box-shadow: 0 3px 7px rgba(15,163,180,.28);
}
.mq-theme-panel { padding: clamp(11px, 1.45vh, 15px) clamp(10px, 2.8vw, 15px) clamp(10px, 1.4vh, 14px); }
.mq-theme-heading {
	display: grid;
	grid-template-columns: clamp(42px, 11.5vw, 54px) minmax(0,1fr);
	align-items: center;
	gap: clamp(10px, 2.8vw, 15px);
	margin-bottom: clamp(9px, 1.2vh, 13px);
}
.mq-theme-grid {
	display: grid;
	grid-template-columns: repeat(6,minmax(0,1fr));
	gap: clamp(4px, 1.3vw, 7px);
	align-items: stretch;
}
.mq-theme-option {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, .55vh, 6px);
	align-items: center;
	padding: clamp(3px, .8vw, 5px) clamp(2px, .55vw, 4px) clamp(6px, .75vh, 8px);
	border-radius: clamp(12px, 3.4vw, 17px);
	background: #fff;
	border: 2px solid #edf2f6;
	box-shadow: 0 4px 10px rgba(21,60,122,.09);
	transition: transform .18s var(--ressort), border-color .2s, box-shadow .2s;
}
.mq-theme-option:active { transform: scale(.96); }
.mq-theme-option.is-active {
	border-color: #16c4ce;
	box-shadow: 0 0 0 2px rgba(22,196,206,.16), 0 6px 14px rgba(15,163,180,.17);
}
.mq-theme-option.is-active::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -5px;
	width: clamp(20px, 5.4vw, 26px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #16c4ce url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center/58% no-repeat;
	box-shadow: 0 4px 9px rgba(15,163,180,.30);
	z-index: 3;
}
.mq-theme-image {
	width: 100%;
	aspect-ratio: 4/5;
	border-radius: clamp(8px, 2.3vw, 12px);
	overflow: hidden;
	background: #dcecf7;
}
.mq-theme-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mq-theme-option strong {
	max-width: 100%;
	font-size: clamp(.54rem, 2.1vw, .72rem);
	font-weight: 900;
	line-height: 1;
	color: #153c7a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mq-reset-row { min-height: clamp(70px, 9.4vh, 86px); }
.mq-danger-icon { color: #ef4545; background: linear-gradient(145deg,#fff8f8,#ffeaea); }
.mq-reset-button {
	min-width: clamp(74px, 19vw, 94px);
	min-height: 38px;
	padding: 7px 13px !important;
	border: 2px solid var(--mq-error) !important;
	border-radius: 999px;
	color: var(--mq-error) !important;
	background: var(--mq-surface-raised) !important;
	font-size: clamp(.76rem, 2.9vw, .94rem) !important;
	font-weight: 900 !important;
}
.mq-settings-foot {
	display: grid;
	grid-template-columns: 1fr minmax(150px,1.45fr) 1fr;
	align-items: center;
	gap: 8px;
	padding: 0 3px 2px;
}
.mq-settings-foot > small {
	grid-column: 1;
	font-size: clamp(.63rem, 2.35vw, .78rem);
	font-weight: 850;
	color: #153c7a;
	white-space: nowrap;
}
.mq-settings-back {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: clamp(48px, 6.4vh, 58px);
	padding: 9px 22px !important;
	border-radius: 999px;
	background: var(--mq-surface-raised) !important;
	box-shadow: var(--mq-shadow-soft) !important;
	font-size: clamp(1rem, 3.9vw, 1.25rem) !important;
	font-weight: 950 !important;
	color: var(--mq-text) !important;
}
.mq-settings-back svg { width: 22px; height: 22px; stroke-width: 2.8; }

@media (max-height: 720px) {
	.mq-settings-head .mq-title { font-size: 1.45rem; }
	.mq-settings-row { min-height: 58px; padding-block: 7px; }
	.mq-settings-copy strong { font-size: .9rem; }
	.mq-settings-copy small { font-size: .64rem; }
	.mq-settings-icon { width: 38px; }
	.mq-theme-panel { padding-block: 8px; }
	.mq-theme-heading { margin-bottom: 7px; }
	.mq-settings-foot { grid-template-columns: .9fr 1.35fr .9fr; }
	.mq-settings-back { min-height: 44px; }
}
@media (max-width: 350px) {
	.mq-settings-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; padding-inline: 10px; }
	.mq-settings-icon { width: 36px; }
	.mq-settings-copy small { font-size: .61rem; }
	.mq-theme-option { border-width: 1.5px; padding-inline: 1px; }
	.mq-theme-option strong { font-size: .5rem; }
	.mq-reset-button { min-width: 66px; padding-inline: 9px !important; }
}

/* =========================================================================
   MemoQuest 6.4.0 — légende premium sur chaque carte retournée
   ========================================================================= */
.mq-board .mq-front,
.mq-board[data-category="animaux"] .mq-front {
  padding: 0;
  gap: 0;
  background: #0d4565;
  overflow: hidden;
}
.mq-board .mq-front img,
.mq-board[data-category="animaux"] .mq-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: none;
}
.mq-board .mq-front > .mq-card-name,
.mq-board[data-category="animaux"] .mq-front > .mq-card-name,
.mq-card-preview-surface > .mq-card-name {
  position: absolute;
  z-index: 3;
  left: 4%;
  right: 4%;
  bottom: 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 17%;
  max-height: 39%;
  padding: clamp(2px, .42vmin, 5px) clamp(3px, .65vmin, 7px);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: clamp(5px, 1.1vmin, 10px);
  background: linear-gradient(180deg, rgba(4,25,49,.54), rgba(4,25,49,.86));
  color: #fff;
  font-size: clamp(6px, 1.32vmin, 12px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: -.018em;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 7px rgba(0,0,0,.24);
}
.mq-board .mq-card-name.is-long,
.mq-card-preview-surface .mq-card-name.is-long { font-size: clamp(5.5px, 1.12vmin, 10px); }
.mq-board .mq-card-name.is-very-long,
.mq-card-preview-surface .mq-card-name.is-very-long { font-size: clamp(5px, .98vmin, 9px); line-height: 1; }
.mq-card-preview-surface img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mq-card-preview-surface .mq-card-fallback { display:none; }
.mq-card-preview-surface.is-image-error .mq-card-fallback { display:flex; }

/* =========================================================================
   MemoQuest 6.4.1 — nom de carte léger et lisible
   Suppression du bandeau sombre : texte directement sur l'image avec une
   ombre discrète, sans masquer le visuel de la carte.
   ========================================================================= */
.mq-board .mq-front > .mq-card-name,
.mq-board[data-category="animaux"] .mq-front > .mq-card-name,
.mq-card-preview-surface > .mq-card-name {
  left: 5%;
  right: 5%;
  bottom: 4%;
  min-height: 0;
  max-height: 31%;
  padding: 0 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: clamp(6.5px, 1.38vmin, 12px);
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: -.014em;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 2px rgba(0,0,0,.45);
}
.mq-board .mq-card-name.is-long,
.mq-card-preview-surface .mq-card-name.is-long {
  font-size: clamp(6px, 1.2vmin, 10.5px);
}
.mq-board .mq-card-name.is-very-long,
.mq-card-preview-surface .mq-card-name.is-very-long {
  font-size: clamp(5.5px, 1.06vmin, 9.5px);
  line-height: 1.02;
}

/* Audio 6.5.0 — ligne musique intégrée sans modifier la hiérarchie visuelle. */
@media (max-height: 700px) {
  .mq-settings-list { gap: clamp(6px, .8vh, 9px); }
  .mq-settings-row[data-toggle="music"] { min-height: 62px; }
}

/* =========================================================================
   MemoQuest 6.5.2 — volumes audio indépendants
   ========================================================================= */
.mq-view[data-view="reglages"] .mq-audio-volume-row {
  min-height: clamp(62px, 8.3vh, 76px);
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.mq-view[data-view="reglages"] .mq-audio-volume-row.is-disabled {
  opacity: .55;
  filter: saturate(.45);
}
.mq-view[data-view="reglages"] .mq-audio-volume-row.is-disabled .mq-range {
  cursor: not-allowed;
}
@media (max-height: 720px) {
  .mq-view[data-view="reglages"] .mq-audio-volume-row { min-height: 54px; }
}

/* =========================================================================
   MULTIJOUEUR EN LIGNE 6.6.1 — parcours premium stabilisé
   ========================================================================= */
.mq-view[data-view="online"] {
	gap: clamp(7px, 1.05vh, 12px);
	overflow: hidden;
}
.mq-online-head {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: clamp(44px, 11vw, 56px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(9px, 2.5vw, 15px);
	padding: 2px 4px 0;
}
.mq-online-head .mq-setup-back { grid-area: auto; }
.mq-online-head .mq-title { margin: 2px 0 0; font-size: clamp(1.48rem, 6.2vw, 2.15rem); line-height: 1.02; }
.mq-online-center { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mq-online-hub,
.mq-online-form { flex: 1 1 auto; min-height: 0; display: grid; align-content: center; gap: clamp(9px, 1.25vh, 14px); padding: 2px 3px; }

.mq-online-resume { min-height:76px;grid-template-columns:44px minmax(0,1fr) 23px;border-color:rgba(22,196,206,.48);background:linear-gradient(100deg,#f1fffc,#fff); }
.mq-online-resume > span { width:42px; }

.mq-online-age-card,
.mq-online-form-card,
.mq-waiting-card,
.mq-room-preview,
.mq-launch-error {
	width:100%;
	padding:clamp(17px,3vh,28px) clamp(15px,4.2vw,27px);
	border-radius:clamp(24px,6.2vw,33px);
	background:rgba(255,255,255,.975);
	border:2px solid rgba(235,245,250,.98);
	box-shadow:0 15px 34px rgba(21,60,122,.135),inset 0 1px 0 #fff;
}
.mq-online-age-card { display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.5vh,15px); }
.mq-online-age-card h3 { margin:0;font-size:clamp(1.22rem,5.1vw,1.66rem);font-weight:950;color:#153c7a; }
.mq-online-age-card p { margin:0;color:#55719c;font-size:clamp(.75rem,2.9vw,.93rem);max-width:36rem; }
.mq-online-hero-icon { width:clamp(66px,18vw,86px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--degrade);border:4px solid #fff;box-shadow:0 10px 22px rgba(21,60,122,.2),0 0 0 3px rgba(22,196,206,.15); }
.mq-online-hero-icon svg { width:48%;height:48%;stroke-width:2.3; }
.mq-dob-field { width:min(100%,380px);display:grid;gap:7px;text-align:left; }
.mq-dob-field > span,.mq-premium-field > span,.mq-code-field > span { color:#55719c;font-size:.74rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase; }
.mq-dob-field input,
.mq-premium-field input,
.mq-premium-field select {
	width:100%;height:clamp(51px,7vh,61px);border:2px solid #dceaf4;border-radius:17px;background:#f8fcff;color:#153c7a;
	padding:0 15px;font:900 clamp(.98rem,3.9vw,1.22rem)/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;outline:0;
	box-shadow:inset 0 2px 4px rgba(21,60,122,.04);transition:border-color .2s,box-shadow .2s,background .2s;
}
.mq-dob-field input { text-align:center;letter-spacing:.16em;font-size:clamp(1.32rem,5.8vw,1.8rem); }
.mq-dob-field input:focus,.mq-premium-field input:focus,.mq-premium-field select:focus { border-color:#16c4ce;background:#fff;box-shadow:0 0 0 4px rgba(22,196,206,.13); }
.mq-form-error { min-height:18px;margin:0;color:#d63f4f;font-size:.74rem;font-weight:850;text-align:center; }

.mq-online-form-card { display:grid;gap:clamp(11px,1.55vh,15px);align-content:center; }
.mq-online-form-card > .mq-online-hero-icon { margin:0 auto 2px; }
.mq-online-form-card.is-compact { padding-block:clamp(13px,1.9vh,20px);gap:10px; }
.mq-premium-field { min-width:0;display:grid;gap:6px;text-align:left; }
.mq-premium-field select { appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6681a7 50%),linear-gradient(135deg,#6681a7 50%,transparent 50%);background-position:calc(100% - 18px) 48%,calc(100% - 12px) 48%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px;font-size:clamp(.86rem,3.3vw,1.03rem); }
.mq-online-name-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.mq-consent-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px; }
.mq-privacy-check { position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;min-height:44px;color:#55719c;font-size:clamp(.71rem,2.7vw,.87rem);line-height:1.25;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation; }
.mq-privacy-check input { position:absolute;left:0;top:50%;width:36px;height:36px;margin:0;transform:translateY(-50%);opacity:.001;pointer-events:auto;cursor:pointer;z-index:2; }
.mq-privacy-check i { width:28px;height:28px;border-radius:9px;border:2px solid #cfe0ed;background:#f7fbfe;color:transparent;display:flex;align-items:center;justify-content:center;transition:transform .16s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;pointer-events:none; }
.mq-privacy-check i svg { width:18px;height:18px;stroke-width:3; }
.mq-privacy-check input:focus-visible + i { outline:3px solid rgba(46,134,224,.28);outline-offset:2px; }
.mq-privacy-check input:checked + i { background:#16c4ce;border-color:#16c4ce;color:#fff;box-shadow:0 5px 12px rgba(22,196,206,.25);transform:scale(1.04); }
.mq-consent-link { min-width:44px;min-height:44px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:#0e91ad;background:rgba(14,145,173,.07);font-size:.72rem;font-weight:900;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.mq-consent-link:active { transform:scale(.97); }

/* Un seul véritable champ numérique pilote les six cases visuelles. Cette
   architecture évite les sauts de focus constatés sur les claviers Android. */
.mq-code-field { display:grid;gap:8px; }
.mq-code-entry { position:relative;min-height:clamp(54px,7.4vh,65px); }
.mq-code-input { position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:.015;color:transparent;background:transparent;border:0;outline:0;caret-color:transparent;font-size:16px; }
.mq-code-cells { position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(5px,1.45vw,9px);pointer-events:none; }
.mq-code-cells i { min-width:0;display:flex;align-items:center;justify-content:center;border:2px solid #dceaf4;border-radius:14px;background:#f8fcff;color:#153c7a;font:950 clamp(1.32rem,5.8vw,1.78rem)/1 ui-rounded,system-ui;box-shadow:inset 0 2px 4px rgba(21,60,122,.035);transition:border-color .16s,box-shadow .16s,transform .16s,background .16s; }
.mq-code-cells i.is-filled { background:#fff;border-color:#bcdce9; }
.mq-code-cells i.is-active { border-color:#16c4ce;box-shadow:0 0 0 3px rgba(22,196,206,.13);transform:translateY(-1px); }
.mq-btn.is-loading::before { content:"";width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:mq-spin .75s linear infinite; }
@keyframes mq-spin { to { transform:rotate(360deg); } }

/* Recherche / salle d’attente */
.mq-waiting-card { text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(11px,1.7vh,18px);overflow:hidden; }
.mq-waiting-card.is-premium { background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(247,253,255,.97)); }
.mq-search-scene { position:relative;width:min(100%,430px);height:clamp(150px,22vh,205px);display:grid;grid-template-columns:1fr clamp(78px,22vw,110px) 1fr;align-items:center;gap:7px; }
.mq-search-scene::before { content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#88e6e3,#fff,#91b7f6,transparent);filter:drop-shadow(0 0 8px rgba(22,196,206,.65));animation:mq-search-beam 1.7s ease-in-out infinite; }
@keyframes mq-search-beam { 0%,100%{opacity:.35;transform:scaleX(.72)} 50%{opacity:1;transform:scaleX(1)} }
.mq-search-player { position:relative;z-index:2;display:grid;justify-items:center;gap:7px; }
.mq-search-player > span { width:clamp(58px,16vw,78px);aspect-ratio:1;border-radius:24px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(1.45rem,6vw,2.1rem);font-weight:950;background:linear-gradient(145deg,#53ddd6,#1d8fd0);border:4px solid #fff;box-shadow:0 11px 24px rgba(21,60,122,.18); }
.mq-search-player > span img { width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit; }
.mq-search-player.is-guest > span { color:#84a0bd;background:linear-gradient(145deg,#f4f9fc,#dceaf3);animation:mq-guest-pulse 1.9s ease-in-out infinite; }
@keyframes mq-guest-pulse { 50%{transform:translateY(-4px);box-shadow:0 14px 30px rgba(22,196,206,.22)} }
.mq-search-player small { max-width:110px;color:#365a88;font-size:.72rem;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mq-search-core { position:relative;z-index:3;width:clamp(78px,22vw,110px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#32d7d3,#247fd3);color:#fff;border:5px solid rgba(255,255,255,.95);box-shadow:0 16px 32px rgba(21,60,122,.22),0 0 0 8px rgba(22,196,206,.08); }
.mq-search-core b { width:48%;height:48%;display:flex;align-items:center;justify-content:center; }
.mq-search-core b svg { width:100%;height:100%;stroke-width:2; }
.mq-search-core i { position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(22,196,206,.35);animation:mq-orbit 2.2s linear infinite; }
.mq-search-core i:nth-child(2){inset:-20px;border-style:dashed;animation-duration:3.2s;animation-direction:reverse}.mq-search-core i:nth-child(3){inset:8px;border-color:rgba(255,255,255,.42);animation-duration:1.55s}
.mq-search-core em { position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;animation:mq-scan-dot 1.5s linear infinite; }
@keyframes mq-orbit { to { transform:rotate(360deg); } }
@keyframes mq-scan-dot { from{transform:rotate(0deg) translateX(52px)} to{transform:rotate(360deg) translateX(52px)} }
.mq-search-card { position:absolute;width:28px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#43dcd7,#2385d4);color:#fff;border:2px solid #fff;box-shadow:0 7px 16px rgba(21,60,122,.18);font-size:.8rem; }
.mq-search-card.c1{left:24%;top:13%;animation:mq-card-float 2.5s ease-in-out infinite}.mq-search-card.c2{right:22%;bottom:12%;animation:mq-card-float 2.5s ease-in-out .7s infinite}.mq-search-card.c3{left:50%;bottom:1%;animation:mq-card-float 2.5s ease-in-out 1.3s infinite}
@keyframes mq-card-float { 50%{transform:translateY(-9px) rotate(5deg)} }
.mq-wait-status { width:min(100%,420px);display:grid;grid-template-columns:13px minmax(0,1fr);align-items:center;gap:10px;text-align:left;padding:10px 14px;border-radius:18px;background:linear-gradient(110deg,#effffc,#f3f8ff);border:1.5px solid rgba(22,196,206,.22); }
.mq-live-dot { width:10px;height:10px;border-radius:50%;background:#39d58a;box-shadow:0 0 0 5px rgba(57,213,138,.12);animation:mq-live 1.35s ease-in-out infinite; }
@keyframes mq-live { 50%{box-shadow:0 0 0 9px rgba(57,213,138,0);transform:scale(.88)} }
.mq-wait-status div { display:grid;gap:2px; }
.mq-wait-status strong { color:#153c7a;font-size:.82rem;font-weight:950; }
.mq-wait-status small { color:#6681a7;font-size:.69rem;font-weight:750; }
.mq-room-code { width:min(100%,400px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;padding:12px 14px;border-radius:21px;background:linear-gradient(120deg,#effffc,#f5f9ff);border:2px solid rgba(22,196,206,.32); }
.mq-room-code small { grid-column:1/-1;text-transform:uppercase;letter-spacing:.12em;color:#0fa3b4;font-size:.66rem;font-weight:950; }
.mq-room-code strong { font-size:clamp(1.95rem,8.7vw,2.9rem);letter-spacing:.15em;color:#153c7a;font-variant-numeric:tabular-nums; }
.mq-room-code button { display:flex;align-items:center;gap:6px;color:#0fa3b4;background:#fff;border-radius:999px;padding:9px 12px;box-shadow:0 4px 10px rgba(21,60,122,.09);font-weight:900; }
.mq-room-code button svg { width:17px;height:17px; }
.mq-wait-help { margin:0;color:#6681a7;max-width:34rem;font-size:clamp(.7rem,2.65vw,.88rem);line-height:1.3; }
.mq-room-summary { display:flex;flex-wrap:wrap;justify-content:center;gap:7px; }
.mq-room-summary span { display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;background:#eef7fd;color:#3f628f;font-size:.72rem;font-weight:900; }
.mq-room-summary span i { width:14px;height:14px;display:flex; }
.mq-room-summary span i svg { width:100%;height:100%;stroke-width:2.2; }
.mq-room-summary span b { font:inherit; }
.mq-room-summary.is-detailed { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%; }
.mq-room-summary.is-detailed span { justify-content:flex-start;border-radius:16px;padding:11px 12px;background:linear-gradient(130deg,#f3fbff,#f0f6fb); }

/* Confirmation de la configuration */
.mq-room-preview { display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.5vh,16px);overflow:hidden; }
.mq-room-preview-hero { display:grid;justify-items:center;text-align:center;gap:4px; }
.mq-room-preview-hero > span { width:62px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--degrade);border:4px solid #fff;box-shadow:0 10px 20px rgba(21,60,122,.18); }
.mq-room-preview-hero > span svg { width:34px;height:34px; }
.mq-room-preview-hero small { color:#0fa3b4;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem; }
.mq-room-preview-hero h3 { margin:0;color:#153c7a;font-size:clamp(1.35rem,5.5vw,1.85rem);font-weight:950; }
.mq-room-preview-hero p { margin:0;color:#6681a7;font-size:.78rem; }
.mq-preview-players { width:100%;display:grid;gap:7px; }
.mq-preview-players > div { display:grid;grid-template-columns:43px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;border-radius:17px;background:#f4f9fd;border:1px solid #e4eff6;text-align:left; }
.mq-preview-players i { width:41px;aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#52dcd6,#218fd0);font-style:normal;font-weight:950; }
.mq-preview-players i img { width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit; }
.mq-preview-players span { display:grid;gap:1px;min-width:0; }
.mq-preview-players small { color:#7890ac;font-size:.59rem;text-transform:uppercase;font-weight:900;letter-spacing:.05em; }
.mq-preview-players strong { color:#153c7a;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mq-preview-players b { padding:5px 8px;border-radius:999px;background:#e4fbf1;color:#1c9a68;font-size:.62rem;font-weight:950; }
.mq-preview-players b.is-pending { background:#fff4df;color:#c47e15; }
.mq-ready-button { width:100%; }
.mq-ready-wait { width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border-radius:18px;background:#effafc;color:#28658a; }
.mq-ready-wait span { width:18px;height:18px;border-radius:50%;border:3px solid #bfe7ea;border-top-color:#16c4ce;animation:mq-spin .75s linear infinite; }
.mq-ready-wait strong { font-size:.75rem; }

/* Rencontre VS */
.mq-match-screen { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(17px,3vh,28px);padding:clamp(18px,4vw,34px);overflow:hidden; }
.mq-match-screen::before { content:"";position:absolute;width:125%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.72),rgba(124,225,235,.12) 43%,transparent 69%);animation:mq-arena-breathe 2.1s ease-in-out infinite; }
@keyframes mq-arena-breathe { 50%{transform:scale(1.07);opacity:.76} }
.mq-match-stars { position:absolute;inset:0;pointer-events:none; }
.mq-match-stars i { position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(22,196,206,.8);animation:mq-star-twinkle 1.7s ease-in-out infinite; }
.mq-match-stars i:nth-child(1){left:12%;top:18%}.mq-match-stars i:nth-child(2){left:81%;top:22%;animation-delay:.3s}.mq-match-stars i:nth-child(3){left:22%;top:72%;animation-delay:.7s}.mq-match-stars i:nth-child(4){left:72%;top:78%;animation-delay:1s}.mq-match-stars i:nth-child(5){left:46%;top:12%;animation-delay:.5s}.mq-match-stars i:nth-child(6){left:53%;bottom:10%;animation-delay:1.2s}
@keyframes mq-star-twinkle { 50%{transform:scale(2);opacity:.25} }
.mq-match-title { position:relative;z-index:3;display:grid;justify-items:center;gap:4px;text-align:center;animation:mq-match-title .55s ease both; }
.mq-match-title small { color:#0ea3b3;font-size:.64rem;letter-spacing:.14em;font-weight:950; }
.mq-match-title strong { color:#153c7a;font-size:clamp(1.15rem,4.8vw,1.6rem);font-weight:950; }
@keyframes mq-match-title { from{opacity:0;transform:translateY(-16px)} }
.mq-match-arena { position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(7px,2.2vw,18px); }
.mq-match-player { display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0; }
.mq-match-player.is-a { animation:mq-player-left .95s var(--sortie) .12s forwards; }
.mq-match-player.is-b { animation:mq-player-right .95s var(--sortie) .12s forwards; }
@keyframes mq-player-left { from { opacity:0;transform:translateX(-110px) scale(.72) rotate(-7deg); } 70%{transform:translateX(7px) scale(1.03)} to { opacity:1;transform:none; } }
@keyframes mq-player-right { from { opacity:0;transform:translateX(110px) scale(.72) rotate(7deg); } 70%{transform:translateX(-7px) scale(1.03)} to { opacity:1;transform:none; } }
.mq-match-player em { padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.8);color:#6d85a5;font-size:.56rem;font-style:normal;font-weight:950;text-transform:uppercase;letter-spacing:.06em; }
.mq-match-player > span { position:relative;width:clamp(86px,25vw,136px);aspect-ratio:1;border-radius:30%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#54dfd6,#208bd4);color:#fff;border:6px solid #fff;box-shadow:0 19px 38px rgba(21,60,122,.22),0 0 0 6px rgba(22,196,206,.1); }
.mq-match-player.is-b > span { background:linear-gradient(145deg,#829fff,#554bd5);box-shadow:0 19px 38px rgba(54,61,142,.22),0 0 0 6px rgba(103,90,222,.1); }
.mq-match-player > span::after { content:"";position:absolute;inset:9px;border-radius:24%;border:1.5px solid rgba(255,255,255,.34); }
.mq-match-player > span img { width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit; }
.mq-match-player span b { font-size:clamp(2rem,9vw,3.8rem);font-weight:950; }
.mq-match-player strong { max-width:34vw;text-align:center;font-size:clamp(.9rem,3.8vw,1.28rem);color:#153c7a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mq-match-player > small { color:#2ca278;font-size:.62rem;font-weight:900; }
.mq-match-vs { position:relative;display:flex;flex-direction:column;align-items:center;gap:8px; }
.mq-match-vs i { position:absolute;width:clamp(114px,34vw,180px);height:5px;top:38%;left:50%;transform:translate(-50%,-50%) scaleX(0);border-radius:99px;background:linear-gradient(90deg,#16c4ce,#fff,#675ade);box-shadow:0 0 18px rgba(255,255,255,.9);animation:mq-vs-line .72s ease .78s forwards; }
@keyframes mq-vs-line { to { transform:translate(-50%,-50%) scaleX(1); } }
.mq-match-vs b { position:relative;display:flex;align-items:center;justify-content:center;width:clamp(61px,16vw,82px);aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#fff,#eff8ff);color:#153c7a;border:4px solid #fff;font-size:clamp(1.25rem,5.6vw,1.9rem);box-shadow:0 11px 27px rgba(21,60,122,.2);animation:mq-vs-pop .58s var(--ressort) .78s both; }
@keyframes mq-vs-pop { from { opacity:0;transform:scale(.12) rotate(-25deg); } }
.mq-match-vs small { max-width:96px;color:#0fa3b4;font-size:.57rem;text-transform:uppercase;letter-spacing:.075em;text-align:center;font-weight:950; }
.mq-match-progress { position:relative;z-index:3;width:min(86%,380px);display:grid;gap:6px;justify-items:center; }
.mq-match-progress::before { content:"";width:100%;height:7px;border-radius:99px;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 3px rgba(21,60,122,.1); }
.mq-match-progress i { position:absolute;left:0;top:0;width:0;height:7px;border-radius:99px;background:linear-gradient(90deg,#22cfba,#4a9ee9,#725ce1);animation:mq-match-load 2.55s ease .2s forwards; }
@keyframes mq-match-load { to{width:100%} }
.mq-match-progress span { color:#55719c;font-size:.68rem;font-weight:850; }

/* Préparation et erreur : aucun écran blanc n’est possible. */
.mq-online-preparing { flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.7vh,17px);text-align:center;padding:10px; }
.mq-prepare-mark { position:relative;width:clamp(92px,25vw,124px);aspect-ratio:1;border-radius:32%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#45ddd6,#288bd6);color:#fff;border:5px solid #fff;box-shadow:0 16px 34px rgba(21,60,122,.2); }
.mq-prepare-mark span { width:45%;height:45%;display:flex; }
.mq-prepare-mark span svg { width:100%;height:100%; }
.mq-prepare-mark i { position:absolute;inset:-11px;border-radius:38%;border:2px solid rgba(22,196,206,.3);animation:mq-prepare-ring 1.8s linear infinite; }.mq-prepare-mark i:last-child{inset:-22px;border-style:dashed;animation-direction:reverse;animation-duration:2.7s}
@keyframes mq-prepare-ring { to{transform:rotate(360deg)} }
.mq-online-preparing h2 { margin:0;color:#153c7a;font-size:clamp(1.45rem,6vw,2rem);font-weight:950; }
.mq-online-preparing > p:not(.mq-eyebrow) { margin:0;color:#6681a7;font-size:.8rem;font-weight:750; }
.mq-prepare-bar { width:min(80%,360px);height:8px;border-radius:99px;background:rgba(255,255,255,.72);overflow:hidden;box-shadow:inset 0 1px 3px rgba(21,60,122,.1); }
.mq-prepare-bar i { display:block;width:42%;height:100%;border-radius:99px;background:linear-gradient(90deg,#21d2bd,#438fdf);animation:mq-prepare-scan 1.25s ease-in-out infinite; }
@keyframes mq-prepare-scan { 0%{transform:translateX(-110%)} 100%{transform:translateX(280%)} }
.mq-launch-error { display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px; }
.mq-launch-error > span { width:66px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff1f2;color:#d94757; }
.mq-launch-error > span svg { width:34px;height:34px;stroke-width:2.3; }
.mq-launch-error h3 { margin:0;color:#153c7a;font-size:1.25rem;font-weight:950; }
.mq-launch-error p { margin:0;color:#6681a7;font-size:.8rem;line-height:1.35; }
.mq-launch-error > div { width:100%;display:grid;gap:8px; }

.mq-online-result { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;text-align:center; }
.mq-online-result div { padding:16px 8px;border-radius:20px;background:#f3f9fd;display:grid;gap:4px; }
.mq-online-result small { color:#55719c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mq-online-result strong { color:#153c7a;font-size:2rem;font-variant-numeric:tabular-nums; }
.mq-online-result b { color:#16c4ce;font-size:1.15rem; }
.mq-game-action.is-disabled { opacity:.34;pointer-events:none; }
.mq-card.is-sending { transform:scale(.97);filter:brightness(1.04); }

/* Quatrième choix dans l’étape Comment jouer. */
.mq-setup-grid.is-experience { grid-template-rows:repeat(4,minmax(80px,1fr)); }

@media (max-width:350px) {
	.mq-online-name-grid { grid-template-columns:1fr; }
	
	
	.mq-code-cells { gap:4px; }
	.mq-room-code strong { letter-spacing:.09em; }
	.mq-search-scene { grid-template-columns:1fr 72px 1fr; }
	.mq-search-core { width:72px; }
	.mq-search-player > span { width:54px;border-radius:18px; }
	.mq-match-player > span { border-width:4px;border-radius:25%; }
	.mq-match-player strong { font-size:.78rem; }
	.mq-match-vs b { width:52px; }
}

@media (max-width:480px), (max-height:700px) {
	.mq-view[data-view="online"] { gap:5px; }
	.mq-online-head { grid-template-columns:38px minmax(0,1fr);gap:7px;padding-top:0; }
	.mq-online-head .mq-setup-back { width:38px;height:38px;border-radius:12px; }
	.mq-online-head .mq-eyebrow { font-size:.55rem;margin:0 0 2px; }
	.mq-online-head .mq-title { font-size:1.17rem; }
	.mq-online-form,.mq-online-hub { align-content:start;overflow-y:auto;overscroll-behavior:contain;padding:1px 3px 4px;scrollbar-width:none; }
	.mq-online-form::-webkit-scrollbar,.mq-online-hub::-webkit-scrollbar { display:none; }
	
	
	.mq-online-age-card,.mq-online-form-card,.mq-waiting-card,.mq-room-preview,.mq-launch-error { padding:9px 11px;gap:7px;border-radius:20px; }
	.mq-online-hero-icon { width:50px; }
	.mq-dob-field input,.mq-premium-field input,.mq-premium-field select { height:35px;border-radius:11px;font-size:.75rem;padding-inline:10px; }
	.mq-online-form-card.is-compact { padding:7px 9px;gap:5px;border-radius:20px; }
	.mq-premium-field { gap:3px; }
	.mq-premium-field > span,.mq-code-field > span { font-size:.56rem; }
	.mq-online-name-grid { gap:5px; }
	.mq-code-entry { min-height:37px; }
	.mq-code-cells i { border-radius:10px;font-size:1rem; }
	.mq-consent-row { gap:5px; }
	.mq-privacy-check { grid-template-columns:25px minmax(0,1fr);gap:6px;min-height:40px;font-size:.57rem; }
	.mq-privacy-check input { width:32px;height:32px; }
	.mq-privacy-check i { width:23px;height:23px;border-radius:7px; }
	.mq-privacy-check i svg { width:14px;height:14px; }
	.mq-consent-link { min-width:40px;min-height:40px;padding:0 6px;font-size:.58rem; }
	.mq-setup-foot .mq-btn { min-height:42px;font-size:.88rem; }
	.mq-form-error { min-height:9px;font-size:.57rem; }
	.mq-search-scene { height:112px; }
	.mq-search-core { width:66px; }
	.mq-search-player > span { width:48px;border-width:3px;border-radius:16px;font-size:1.25rem; }
	.mq-search-player small { font-size:.56rem; }
	.mq-search-card { display:none; }
	.mq-wait-status { padding:7px 10px; }
	.mq-room-code { padding:8px 10px;border-radius:16px; }
	.mq-room-code strong { font-size:1.65rem; }
	.mq-room-code button { padding:7px 9px;font-size:.65rem; }
	.mq-room-summary span { padding:5px 8px;font-size:.59rem; }
	.mq-wait-help { font-size:.58rem; }
	.mq-room-preview-hero > span { width:48px; }
	.mq-room-preview-hero h3 { font-size:1.1rem; }
	.mq-room-preview-hero p { font-size:.61rem; }
	.mq-room-summary.is-detailed span { padding:7px 8px; }
	.mq-preview-players > div { padding:5px 7px;grid-template-columns:34px minmax(0,1fr) auto; }
	.mq-preview-players i { width:32px;border-radius:10px; }
	.mq-match-screen { gap:11px;padding:12px; }
	.mq-match-title strong { font-size:1rem; }
	.mq-match-player > span { width:72px;border-width:4px; }
	.mq-match-player strong { font-size:.72rem; }
	.mq-match-player em,.mq-match-player > small { font-size:.49rem; }
	.mq-match-vs b { width:50px;font-size:1.05rem; }
	.mq-match-vs small { font-size:.45rem; }
	.mq-online-preparing { gap:8px; }
	.mq-prepare-mark { width:72px;border-radius:24%; }
	.mq-online-preparing h2 { font-size:1.25rem; }
	.mq-setup-grid.is-experience { grid-template-rows:repeat(4,minmax(67px,1fr));gap:6px; }
	
	
	
}

@media (max-width:350px), (max-width:480px), (max-height:700px) {
	
	
}

/* ======================================================================
   MemoQuest 6.7.0 — classement compétitif et trophées de Recherche rapide
   ====================================================================== */
.mq-competitive-card {
	position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;
	min-height:102px;padding:13px 14px;border-radius:25px;overflow:hidden;
	background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(238,249,255,.97));
	border:1px solid rgba(93,187,222,.23);box-shadow:0 14px 30px rgba(31,74,132,.12),inset 0 1px 0 rgba(255,255,255,.88);
}
.mq-competitive-card::before { content:"";position:absolute;width:150px;height:150px;right:-66px;top:-88px;border-radius:50%;background:radial-gradient(circle,rgba(255,209,82,.22),rgba(255,209,82,0) 68%);pointer-events:none; }
.mq-competitive-card::after { content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.52) 43%,transparent 62%);transform:translateX(-130%);animation:mq-trophy-sheen 5.4s ease-in-out infinite;pointer-events:none; }
@keyframes mq-trophy-sheen { 0%,68%{transform:translateX(-130%)} 86%,100%{transform:translateX(130%)} }
.mq-trophy-orb { position:relative;z-index:1;width:58px;aspect-ratio:1;border-radius:19px;display:grid;place-items:center;color:#fff7d6;background:linear-gradient(145deg,#ffd95f,#ee9d21);border:3px solid #fff;box-shadow:0 10px 20px rgba(211,142,20,.24),0 0 0 5px rgba(255,193,44,.1); }
.mq-trophy-orb svg { width:31px;height:31px;stroke-width:1.9;filter:drop-shadow(0 2px 3px rgba(112,62,0,.22)); }
.mq-trophy-orb i { position:absolute;inset:-7px;border-radius:23px;border:1.5px solid rgba(255,190,29,.28);animation:mq-trophy-orbit 3.8s linear infinite; }
@keyframes mq-trophy-orbit { to{transform:rotate(360deg)} }
.mq-competitive-copy { position:relative;z-index:1;min-width:0;display:grid;gap:2px; }
.mq-competitive-copy > small { color:#13a9b6;font-size:.56rem;font-weight:950;letter-spacing:.085em; }
.mq-competitive-copy > strong { color:#153c7a;font-size:clamp(1.05rem,4.25vw,1.35rem);font-weight:950;line-height:1.05;font-variant-numeric:tabular-nums; }
.mq-competitive-copy > strong b { font-size:1.12em; }
.mq-competitive-copy p { margin:1px 0 0;color:#617da6;font-size:.65rem;font-weight:780; }
.mq-competitive-copy p em { color:#155a96;font-style:normal;font-weight:950; }
.mq-competitive-copy > span { color:#6f86a6;font-size:.55rem;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mq-trophy-progress { height:6px;margin:3px 0 1px;border-radius:99px;overflow:hidden;background:#dcecf5;box-shadow:inset 0 1px 2px rgba(26,72,126,.1); }
.mq-trophy-progress i { display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#18c9ba,#2b9dd7,#f4bf39);box-shadow:0 0 9px rgba(31,180,194,.3);transition:width .72s cubic-bezier(.2,.8,.2,1); }
.mq-grid-badge { position:relative;z-index:1;min-width:54px;padding:9px 8px;border-radius:16px;text-align:center;color:#fff;background:linear-gradient(145deg,#184f94,#1fb7c0);border:2px solid rgba(255,255,255,.84);box-shadow:0 8px 16px rgba(30,98,159,.2);font-size:.78rem;font-weight:950;white-space:nowrap; }
.mq-competitive-card.is-compact { min-height:84px;padding:10px 11px;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;border-radius:21px;background:linear-gradient(135deg,#f7fdff,#eaf7fd);box-shadow:inset 0 0 0 1px rgba(48,167,198,.08); }
.mq-competitive-card.is-compact .mq-trophy-orb { width:48px;border-radius:16px; }
.mq-competitive-card.is-compact .mq-trophy-orb svg { width:25px;height:25px; }
.mq-competitive-card.is-compact .mq-grid-badge { min-width:49px;padding:8px 6px;font-size:.7rem;border-radius:14px; }
.mq-competitive-card.is-compact .mq-competitive-copy > strong { font-size:.98rem; }
.mq-quick-rule { margin:0;padding:8px 10px;border-radius:13px;background:rgba(26,168,186,.08);color:#55759b;font-size:.62rem;line-height:1.3;font-weight:750;text-align:center; }

.mq-search-player > b { display:inline-flex;align-items:center;justify-content:center;gap:3px;max-width:100%;padding:4px 7px;border-radius:99px;color:#8a650b;background:#fff7dc;border:1px solid rgba(233,180,45,.26);font-size:.54rem;font-weight:950;text-decoration:none;white-space:nowrap; }
.mq-search-player > b svg { width:11px;height:11px;stroke-width:2.1; }
.mq-match-player > u { display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border-radius:99px;background:rgba(255,244,198,.9);color:#8e6606;font-size:.54rem;font-weight:950;text-decoration:none;box-shadow:0 3px 9px rgba(146,101,5,.1); }
.mq-match-player > u svg { width:11px;height:11px; }

.mq-trophy-result { position:relative;margin-top:12px;padding:15px 14px 13px;border-radius:24px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;overflow:hidden;background:linear-gradient(135deg,#f8fdff,#eaf8fc);border:1px solid rgba(31,172,191,.2);box-shadow:0 15px 28px rgba(25,78,133,.11); }
.mq-trophy-result::before { content:"";position:absolute;inset:auto -45px -70px auto;width:145px;height:145px;border-radius:50%;background:radial-gradient(circle,rgba(47,200,189,.2),transparent 67%); }
.mq-trophy-result.is-win { background:linear-gradient(135deg,#fffdf5,#effcf9);border-color:rgba(239,179,40,.28); }
.mq-trophy-result.is-loss { background:linear-gradient(135deg,#fffafa,#f2f7fd);border-color:rgba(210,91,111,.18); }
.mq-trophy-result-orb { position:relative;width:64px;aspect-ratio:1;border-radius:21px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,#ffd65a,#e99b1c);border:3px solid #fff;box-shadow:0 12px 24px rgba(199,126,12,.23);animation:mq-trophy-result-pop .62s cubic-bezier(.18,1.28,.35,1) both; }
.mq-trophy-result.is-loss .mq-trophy-result-orb { background:linear-gradient(145deg,#7897c4,#38598d);box-shadow:0 12px 24px rgba(43,78,128,.2); }
@keyframes mq-trophy-result-pop { from{opacity:0;transform:scale(.3) rotate(-18deg)} }
.mq-trophy-result-orb svg { width:34px;height:34px;filter:drop-shadow(0 2px 3px rgba(86,47,0,.2)); }
.mq-trophy-result-orb i { position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd24f;box-shadow:22px -15px 0 #24c8ba,-20px -18px 0 #5a8fe2,20px 19px 0 #ff8b71,-23px 17px 0 #f4c44c;animation:mq-trophy-spark 1.25s ease-in-out infinite alternate; }
.mq-trophy-result-orb i:last-child { transform:rotate(45deg) scale(.72);animation-delay:.35s; }
@keyframes mq-trophy-spark { to{transform:rotate(35deg) scale(1.14)} }
.mq-trophy-result > div:nth-child(2) { min-width:0;display:grid;align-content:center;gap:1px; }
.mq-trophy-result > div:nth-child(2) small { color:#199fac;font-size:.56rem;font-weight:950;letter-spacing:.08em; }
.mq-trophy-result > div:nth-child(2) strong { color:#153c7a;font-size:2.05rem;line-height:1;font-weight:1000;font-variant-numeric:tabular-nums; }
.mq-trophy-result.is-loss > div:nth-child(2) strong { color:#395f92; }
.mq-trophy-result > div:nth-child(2) p { margin:2px 0 0;color:#627c9f;font-size:.66rem;font-weight:760; }
.mq-trophy-result > div:nth-child(2) p b { color:#153c7a;font-variant-numeric:tabular-nums; }
.mq-result-progress { grid-column:1/-1;height:7px;border-radius:99px;overflow:hidden;background:#dbeaf3; }
.mq-result-progress i { display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#1cc7b9,#3997d8,#f0bd3c);animation:mq-result-fill .95s cubic-bezier(.2,.8,.2,1) .2s both;transform-origin:left; }
@keyframes mq-result-fill { from{transform:scaleX(0)} }
.mq-trophy-result > span { grid-column:1/-1;color:#627c9f;font-size:.62rem;font-weight:780;text-align:center; }
.mq-trophy-result > span b { color:#174f8e;font-weight:950; }
.mq-format-unlocked { grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border-radius:14px;background:linear-gradient(90deg,#ddfbf5,#fff8d9);color:#176b76;font-style:normal;font-size:.66rem;font-weight:900;animation:mq-format-arrive .65s cubic-bezier(.18,1.15,.36,1) .45s both; }
.mq-format-unlocked svg { width:18px;height:18px;color:#12b99f; }
.mq-format-unlocked b { color:#155a96; }
@keyframes mq-format-arrive { from{opacity:0;transform:translateY(12px) scale(.96)} }

[data-motion="calme"] .mq-competitive-card::after,[data-motion="calme"] .mq-trophy-orb i,[data-motion="calme"] .mq-trophy-result-orb,[data-motion="calme"] .mq-trophy-result-orb i,[data-motion="calme"] .mq-result-progress i,[data-motion="calme"] .mq-format-unlocked { animation:none!important; }

@media (max-width:350px) {
	.mq-competitive-card { grid-template-columns:49px minmax(0,1fr) auto;gap:8px;padding:10px;min-height:88px;border-radius:21px; }
	.mq-trophy-orb { width:49px;border-radius:16px; }
	.mq-trophy-orb svg { width:25px;height:25px; }
	.mq-grid-badge { min-width:46px;padding:7px 5px;font-size:.65rem;border-radius:13px; }
	.mq-competitive-copy > strong { font-size:.9rem; }
	.mq-competitive-copy > span,.mq-competitive-copy p { font-size:.52rem; }
	.mq-trophy-result { grid-template-columns:55px minmax(0,1fr);gap:9px;padding:12px 11px;border-radius:20px; }
	.mq-trophy-result-orb { width:55px;border-radius:18px; }
	.mq-trophy-result > div:nth-child(2) strong { font-size:1.75rem; }
}

@media (max-width:480px), (max-height:700px) {
	.mq-competitive-card { min-height:78px;padding:8px 10px;border-radius:19px;grid-template-columns:44px minmax(0,1fr) auto;gap:8px; }
	.mq-trophy-orb { width:44px;border-radius:14px;border-width:2px; }
	.mq-trophy-orb svg { width:23px;height:23px; }
	.mq-grid-badge { min-width:45px;padding:6px 5px;border-radius:12px;font-size:.63rem; }
	.mq-competitive-copy > small { font-size:.46rem; }
	.mq-competitive-copy > strong { font-size:.86rem; }
	.mq-competitive-copy p,.mq-competitive-copy > span { font-size:.48rem; }
	.mq-trophy-progress { height:5px;margin:2px 0 0; }
	.mq-competitive-card.is-compact { min-height:70px; }
	.mq-quick-rule { padding:6px 8px;font-size:.54rem; }
}

/* =========================================================================
   MemoQuest 6.7.1 — résultat multijoueur personnel
   Chaque appareil affiche uniquement la performance de son propre joueur.
   ========================================================================= */
.mq-personal-result-layer {
	background:
		radial-gradient(circle at 50% 10%, rgba(82,221,227,.28), transparent 34%),
		linear-gradient(180deg, rgba(20,64,123,.30), rgba(20,64,123,.18));
}
.mq-personal-result-layer .mq-sheet {
	width:min(470px,100%);
	gap:10px;
	padding:clamp(12px,2.2vmin,20px);
	border:1px solid rgba(255,255,255,.9);
	background:linear-gradient(170deg,rgba(255,255,255,.99),rgba(247,253,255,.98));
	box-shadow:0 24px 58px rgba(21,60,122,.34),0 0 0 1px rgba(30,199,202,.08);
}
.mq-personal-result-layer .mq-sheet-body { gap:0; }

.mq-personal-result-head {
	position:relative;
	display:grid;
	grid-template-columns:64px minmax(0,1fr);
	align-items:center;
	gap:12px;
	padding:4px 3px 2px;
}
.mq-personal-result-head::after {
	content:"";
	position:absolute;
	left:76px;right:0;bottom:-4px;height:1px;
	background:linear-gradient(90deg,rgba(27,198,194,.38),transparent);
}
.mq-personal-result-seal {
	position:relative;
	width:64px;aspect-ratio:1;
	display:grid;place-items:center;
	border-radius:22px;
	color:#fff;
	background:linear-gradient(145deg,#1cd0c2,#168bd4);
	border:3px solid #fff;
	box-shadow:0 12px 28px rgba(29,153,188,.27),0 0 0 5px rgba(42,202,202,.10);
	animation:mq-personal-seal-in .65s cubic-bezier(.16,1.32,.35,1) both;
}
.mq-personal-result-head.is-win .mq-personal-result-seal {
	color:#fff7d6;
	background:linear-gradient(145deg,#ffd95d,#e79a18);
	box-shadow:0 12px 28px rgba(207,137,22,.28),0 0 0 5px rgba(255,194,45,.12);
}
.mq-personal-result-head.is-loss .mq-personal-result-seal {
	background:linear-gradient(145deg,#7898c6,#355887);
	box-shadow:0 12px 28px rgba(48,82,131,.23),0 0 0 5px rgba(71,109,163,.10);
}
.mq-personal-result-seal svg { width:34px;height:34px;filter:drop-shadow(0 2px 3px rgba(18,48,89,.22)); }
.mq-personal-result-seal i {
	position:absolute;inset:-8px;border-radius:27px;
	border:1.5px solid rgba(38,199,200,.28);
	animation:mq-personal-orbit 4.4s linear infinite;
}
.mq-personal-result-head.is-win .mq-personal-result-seal i { border-color:rgba(239,174,31,.34); }
@keyframes mq-personal-seal-in { from{opacity:0;transform:scale(.35) rotate(-18deg)} }
@keyframes mq-personal-orbit { to{transform:rotate(360deg)} }
.mq-personal-result-head > div { min-width:0; }
.mq-personal-result-head small {
	display:block;margin-bottom:1px;
	color:#18aeb6;font-size:.58rem;font-weight:1000;letter-spacing:.13em;
}
.mq-personal-result-head.is-win small { color:#c98b17; }
.mq-personal-result-head.is-loss small { color:#607fa9; }
.mq-personal-result-head h3 {
	margin:0;color:#153c7a;font-size:clamp(1.45rem,5.8vw,2rem);line-height:1;font-weight:1000;
}
.mq-personal-result-head p {
	margin:5px 0 0;color:#637c9e;font-size:.69rem;line-height:1.32;font-weight:740;
}

.mq-personal-result-card {
	position:relative;
	isolation:isolate;
	overflow:hidden;
	padding:14px;
	border-radius:27px;
	background:
		radial-gradient(circle at 90% 4%,rgba(45,208,201,.15),transparent 31%),
		linear-gradient(155deg,#fbfeff,#eff9fc);
	border:1px solid rgba(29,178,193,.20);
	box-shadow:0 16px 32px rgba(23,72,125,.12),inset 0 1px 0 rgba(255,255,255,.95);
	animation:mq-personal-card-in .58s cubic-bezier(.2,.9,.25,1) .08s both;
}
.mq-personal-result-card::before {
	content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-90px;top:-104px;
	background:radial-gradient(circle,rgba(38,206,197,.20),transparent 67%);
}
.mq-personal-result-card.is-win {
	background:radial-gradient(circle at 88% 4%,rgba(255,202,66,.17),transparent 31%),linear-gradient(155deg,#fffefa,#effcf8);
	border-color:rgba(224,167,35,.24);
}
.mq-personal-result-card.is-loss {
	background:radial-gradient(circle at 88% 4%,rgba(103,139,188,.16),transparent 31%),linear-gradient(155deg,#fbfdff,#f1f6fc);
	border-color:rgba(89,125,175,.18);
}
@keyframes mq-personal-card-in { from{opacity:0;transform:translateY(18px) scale(.97)} }

.mq-personal-player { display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(73,117,162,.12); }
.mq-personal-avatar {
	width:43px;aspect-ratio:1;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;
	color:#fff;font-size:1.28rem;font-weight:1000;
	background:linear-gradient(145deg,#18c9c0,#168bcf);
	border:2px solid #fff;box-shadow:0 8px 18px rgba(30,142,180,.22);
}
.mq-personal-result-card.is-win .mq-personal-avatar { background:linear-gradient(145deg,#22cda8,#159f7e); }
.mq-personal-player div { min-width:0; }
.mq-personal-player small { display:block;color:#6b82a0;font-size:.52rem;font-weight:950;letter-spacing:.11em; }
.mq-personal-player strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#173d79;font-size:1rem;font-weight:1000; }

.mq-personal-score {
	display:grid;grid-template-columns:1fr auto;align-items:end;
	padding:12px 4px 8px;
}
.mq-personal-score small { grid-column:1/-1;color:#67809f;font-size:.56rem;font-weight:950;letter-spacing:.10em; }
.mq-personal-score strong {
	color:#153c7a;font-size:clamp(2.65rem,12vw,4rem);line-height:.9;font-weight:1000;font-variant-numeric:tabular-nums;
	text-shadow:0 5px 16px rgba(28,80,137,.12);
}
.mq-personal-result-card.is-win .mq-personal-score strong { color:#119878; }
.mq-personal-result-card.is-loss .mq-personal-score strong { color:#426993; }
.mq-personal-score span { padding-bottom:4px;color:#6c84a2;font-size:.68rem;font-weight:850; }

.mq-personal-rating {
	display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;
	padding:9px 10px;border-radius:18px;
	background:rgba(255,255,255,.74);border:1px solid rgba(51,126,172,.12);
}
.mq-personal-rating > span { color:#587497;font-size:.66rem;font-weight:850; }
.mq-personal-rating > b { color:#174a84;font-size:.68rem;font-weight:950; }
.mq-personal-stars { display:flex;justify-content:flex-end;align-items:center;gap:1px; }
.mq-personal-stars .mq-etoile-geant { width:20px;height:20px; }
.mq-personal-stars .mq-etoile.is-lit { animation:mq-star-in .55s var(--ressort) both; }

.mq-personal-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px; }
.mq-personal-stats > div {
	min-width:0;padding:10px;border-radius:18px;
	display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;
	background:rgba(255,255,255,.78);border:1px solid rgba(58,127,169,.12);
}
.mq-personal-stats > div > span {
	grid-row:1/3;width:34px;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;
	color:#1e9cb7;background:linear-gradient(145deg,#eaf9fb,#dff0fa);
}
.mq-personal-stats > div:last-child > span { color:#ed8d24;background:linear-gradient(145deg,#fff6e9,#ffead2); }
.mq-personal-stats svg { width:19px;height:19px; }
.mq-personal-stats small { color:#6a809d;font-size:.55rem;font-weight:850;line-height:1.1; }
.mq-personal-stats strong { color:#153c7a;font-size:1.05rem;font-weight:1000;line-height:1.05; }
.mq-personal-stats strong em { color:#6d82a0;font-size:.53rem;font-style:normal;font-weight:800; }

.mq-personal-trophies {
	position:relative;overflow:hidden;
	display:grid;grid-template-columns:52px minmax(0,1fr);gap:9px;
	margin-top:8px;padding:10px;border-radius:20px;
	background:linear-gradient(135deg,#f9fdff,#eaf8fc);border:1px solid rgba(35,171,188,.17);
}
.mq-personal-trophies.is-win { background:linear-gradient(135deg,#fffdf6,#eefcf8);border-color:rgba(227,168,31,.24); }
.mq-personal-trophies.is-loss { background:linear-gradient(135deg,#fffafa,#f1f6fc);border-color:rgba(103,126,164,.16); }
.mq-personal-trophies.is-private { align-items:center;background:linear-gradient(135deg,#f8fbfe,#eef5fa); }
.mq-personal-trophy-icon {
	position:relative;grid-row:1/3;width:52px;aspect-ratio:1;border-radius:17px;display:grid;place-items:center;
	color:#fff;background:linear-gradient(145deg,#ffd55a,#e7971b);border:2px solid #fff;box-shadow:0 8px 18px rgba(196,127,18,.21);
}
.mq-personal-trophies.is-loss .mq-personal-trophy-icon { background:linear-gradient(145deg,#7695c0,#395a88);box-shadow:0 8px 18px rgba(48,79,122,.18); }
.mq-personal-trophies.is-private .mq-personal-trophy-icon { background:linear-gradient(145deg,#2dcac1,#218fc4);box-shadow:0 8px 18px rgba(30,139,178,.18); }
.mq-personal-trophy-icon svg { width:28px;height:28px; }
.mq-personal-trophy-icon i { position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd354;box-shadow:17px -11px 0 #2ccbbb,-16px -13px 0 #6499dc,15px 15px 0 #ff8b71;animation:mq-personal-spark 1.2s ease-in-out infinite alternate; }
@keyframes mq-personal-spark { to{transform:rotate(38deg) scale(1.13)} }
.mq-personal-trophies > div { min-width:0;display:grid;align-content:center; }
.mq-personal-trophies small { color:#199ba9;font-size:.51rem;font-weight:1000;letter-spacing:.09em; }
.mq-personal-trophies strong { color:#153c7a;font-size:1.75rem;line-height:1;font-weight:1000;font-variant-numeric:tabular-nums; }
.mq-personal-trophies.is-loss strong { color:#42658f; }
.mq-personal-trophies.is-private strong { font-size:1.05rem; }
.mq-personal-trophies p { margin:2px 0 0;color:#6a809d;font-size:.58rem;font-weight:750; }
.mq-personal-trophies p b { color:#164783; }
.mq-personal-trophy-progress { grid-column:1/-1;height:6px;border-radius:99px;overflow:hidden;background:#dceaf3; }
.mq-personal-trophy-progress i { display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#1bc7b9,#3a96d7,#f0bd3d);transform-origin:left;animation:mq-personal-fill 1s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes mq-personal-fill { from{transform:scaleX(0)} }
.mq-personal-trophies > span:not(.mq-personal-trophy-icon) { grid-column:1/-1;color:#6a809d;font-size:.57rem;font-weight:800;text-align:center; }
.mq-personal-trophies > span b { color:#174c86; }
.mq-personal-trophies > em {
	grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 8px;border-radius:13px;
	color:#118e77;background:#e2faf3;font-size:.58rem;font-style:normal;animation:mq-personal-unlock .7s cubic-bezier(.2,1.2,.3,1) .5s both;
}
.mq-personal-trophies > em svg { width:16px;height:16px; }
@keyframes mq-personal-unlock { from{opacity:0;transform:scale(.75)} }

.mq-personal-result-layer .mq-sheet > div:last-child { gap:7px!important; }
.mq-result-find {
	position:relative;overflow:hidden;min-height:50px;
	box-shadow:0 11px 24px rgba(19,160,187,.24),inset 0 1px 0 rgba(255,255,255,.35);
}
.mq-result-find::after {
	content:"";position:absolute;inset:-40% auto -40% -35%;width:34%;transform:skewX(-18deg);
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.43),transparent);
	animation:mq-result-button-sheen 3.8s ease-in-out infinite;
}
@keyframes mq-result-button-sheen { 0%,65%{left:-40%} 88%,100%{left:125%} }
.mq-result-find svg:first-child { width:22px;height:22px; }
.mq-result-home {
	min-height:46px;color:#17447f;background:linear-gradient(180deg,#fff,#edf6fc);
	border:1px solid rgba(44,106,160,.18);box-shadow:0 8px 18px rgba(33,82,130,.10);
}
.mq-result-home svg { width:20px;height:20px; }

[data-motion="calme"] .mq-personal-result-seal,
[data-motion="calme"] .mq-personal-result-seal i,
[data-motion="calme"] .mq-personal-result-card,
[data-motion="calme"] .mq-personal-trophy-icon i,
[data-motion="calme"] .mq-personal-trophy-progress i,
[data-motion="calme"] .mq-personal-trophies > em,
[data-motion="calme"] .mq-result-find::after { animation:none!important; }

@media (max-width:370px), (max-height:690px) {
	.mq-personal-result-layer .mq-sheet { gap:7px;padding:10px;border-radius:23px; }
	.mq-personal-result-head { grid-template-columns:52px minmax(0,1fr);gap:9px; }
	.mq-personal-result-seal { width:52px;border-radius:17px; }
	.mq-personal-result-seal svg { width:28px;height:28px; }
	.mq-personal-result-head::after { left:61px; }
	.mq-personal-result-head h3 { font-size:1.42rem; }
	.mq-personal-result-head p { font-size:.61rem;margin-top:3px; }
	.mq-personal-result-card { padding:10px;border-radius:22px; }
	.mq-personal-player { padding-bottom:7px; }
	.mq-personal-avatar { width:37px;border-radius:12px;font-size:1.05rem; }
	.mq-personal-score { padding:8px 3px 5px; }
	.mq-personal-score strong { font-size:2.45rem; }
	.mq-personal-rating { padding:7px 8px;border-radius:15px; }
	.mq-personal-stars .mq-etoile-geant { width:17px;height:17px; }
	.mq-personal-stats { gap:6px;margin-top:6px; }
	.mq-personal-stats > div { padding:7px;grid-template-columns:29px minmax(0,1fr);column-gap:6px;border-radius:15px; }
	.mq-personal-stats > div > span { width:29px;border-radius:10px; }
	.mq-personal-stats strong { font-size:.92rem; }
	.mq-personal-trophies { grid-template-columns:43px minmax(0,1fr);gap:7px;margin-top:6px;padding:8px;border-radius:17px; }
	.mq-personal-trophy-icon { width:43px;border-radius:14px; }
	.mq-personal-trophy-icon svg { width:23px;height:23px; }
	.mq-personal-trophies strong { font-size:1.45rem; }
	.mq-result-find { min-height:45px; }
	.mq-result-home { min-height:42px; }
}

/* =========================================================================
   MemoQuest 6.19.0 — couche Android locale et sécurisation multijoueur
   L'écran de résultat est une vraie vue, jamais une surcouche dépendante du
   plateau. Cela élimine les fins de match figées après la dernière paire.
   ========================================================================= */
.mq-view[data-view="online"] .mq-personal-result-page {
	width:min(520px,100%);
	margin:0 auto;
	padding:clamp(10px,2.4vmin,20px) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
	display:grid;
	gap:10px;
	min-height:100%;
	align-content:center;
	animation:mq-result-page-in .46s var(--ressort);
}
@keyframes mq-result-page-in {
	from { opacity:0; transform:translateY(18px) scale(.975); }
}
.mq-view[data-view="online"] .mq-personal-result-page::before {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 50% 10%,rgba(66,217,224,.22),transparent 31%),
		radial-gradient(circle at 85% 82%,rgba(255,215,106,.18),transparent 28%);
}
.mq-view[data-view="online"] .mq-personal-result-page > * { position:relative; z-index:1; }
.mq-personal-result-actions {
	display:grid;
	gap:8px;
	padding:0 2px;
}
.mq-personal-result-actions .mq-btn {
	min-height:52px;
	border-radius:20px;
	font-weight:900;
	letter-spacing:-.02em;
	box-shadow:0 12px 24px rgba(21,60,122,.16);
}
.mq-personal-result-actions .mq-result-find {
	background:linear-gradient(135deg,#16cfc1,#168ddd);
	box-shadow:0 14px 30px rgba(17,170,199,.28),inset 0 1px 0 rgba(255,255,255,.55);
}
.mq-personal-result-actions .mq-result-home {
	background:rgba(255,255,255,.93);
	color:#173f77;
	border:1px solid rgba(108,157,202,.25);
}
.mq-result-fallback .mq-personal-result-card { text-align:center; }
[data-motion="calme"] .mq-view[data-view="online"] .mq-personal-result-page { animation:none; }
@media (max-width:480px), (max-height:700px) {
	.mq-view[data-view="online"] .mq-personal-result-page { align-content:start;gap:7px;padding-top:8px; }
	.mq-personal-result-actions .mq-btn { min-height:46px; }
}

/* =========================================================================
   MemoQuest 6.19.0 — écrans de résultat premium compacts sans bloc supérieur
   Recherche rapide : trophées. IA : pièces. Salle privée : aucun trophée.
   ========================================================================= */
.mq-shell[data-result-screen] .mq-app {
	gap:0;
	padding:0;
	background:
		radial-gradient(circle at 50% -10%,rgba(255,255,255,.92),transparent 35%),
		linear-gradient(180deg,#49c9f4 0%,#a7e8fb 31%,#e8faff 70%,#f7fcff 100%);
}
.mq-shell[data-result-screen] .mq-top,
.mq-shell[data-result-screen] .mq-nav,
.mq-shell[data-result-screen] .mq-ambiance { display:none!important; }
.mq-shell[data-result-screen] .mq-stage { min-height:100%; }
.mq-shell[data-result-screen] .mq-view.is-active {
	overflow-x:hidden;
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
}
.mq-shell[data-result-screen="solo"] .mq-view.is-active { overflow-y:hidden; }
.mq-final-result-page {
	--result-accent:#18bfc8;
	--result-accent-2:#208fe7;
	--result-deep:#123c7d;
	--result-soft:#eaf9ff;
	position:relative;
	isolation:isolate;
	width:min(620px,100%);
	min-height:100%;
	margin:0 auto;
	padding:max(10px,env(safe-area-inset-top)) clamp(10px,2.4vw,16px) max(12px,env(safe-area-inset-bottom));
	display:grid;
	gap:clamp(6px,.9vh,10px);
	align-content:start;
	color:var(--result-deep);
	font-variant-numeric:tabular-nums;
	background:
		radial-gradient(circle at 50% 2%,rgba(255,255,255,.98),transparent 23%),
		radial-gradient(circle at 10% 25%,rgba(0,195,217,.16),transparent 22%),
		radial-gradient(circle at 90% 34%,rgba(37,137,245,.14),transparent 24%),
		linear-gradient(180deg,rgba(75,200,244,.94),rgba(184,238,252,.97) 34%,rgba(237,250,255,.99) 76%,#f9fdff);
}
.mq-final-result-page.is-loss {
	--result-accent:#f04f63;
	--result-accent-2:#e22d4d;
	--result-soft:#fff0f3;
}
.mq-final-result-page.is-draw {
	--result-accent:#875fd8;
	--result-accent-2:#5d7de2;
	--result-soft:#f3efff;
}
.mq-final-result-page::before {
	content:"";
	position:absolute;z-index:-2;inset:0;
	background:
		repeating-linear-gradient(112deg,transparent 0 8%,rgba(255,255,255,.15) 8.3%,transparent 8.8% 16%),
		radial-gradient(ellipse at 50% 8%,rgba(255,255,255,.86),transparent 32%);
	pointer-events:none;
}
.mq-final-result-page::after {
	content:"";
	position:absolute;z-index:-1;left:5%;right:5%;top:7%;height:34%;
	border-radius:50%;
	background:radial-gradient(ellipse,rgba(255,255,255,.66),transparent 70%);
	filter:blur(22px);
	pointer-events:none;
}
.mq-final-particles { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6; }
.mq-final-particles i {
	--x:calc((var(--i) * 43 + 11) % 97);
	position:absolute;
	left:calc(var(--x) * 1%);
	top:calc(1% + ((var(--i) * 29) % 48) * 1%);
	width:clamp(5px,1.6vw,10px);height:clamp(8px,2.2vw,15px);
	border-radius:2px;
	background:hsl(calc(185 + (var(--i) * 29)),82%,56%);
	box-shadow:0 0 12px rgba(255,255,255,.9);
	transform:rotate(calc(var(--i) * 31deg));
	animation:mq-final-float calc(4.2s + var(--i) * .13s) ease-in-out infinite alternate;
	opacity:.86;
}
.mq-final-result-page.is-loss .mq-final-particles i:nth-child(3n+1) { background:#ff4864; }
.mq-final-result-page.is-loss .mq-final-particles i:nth-child(3n+2) { background:#ff7a83; }
@keyframes mq-final-float { to{transform:translate3d(7px,18px,0) rotate(calc(var(--i) * 31deg + 110deg));opacity:.38} }

@keyframes mq-final-rays { to{transform:rotate(360deg)} }
@keyframes mq-final-emblem-in { from{opacity:0;transform:translate(-50%,-42%) scale(.32) rotate(-18deg)} }

.mq-final-reward {
	position:relative;z-index:2;overflow:hidden;
	display:grid;grid-template-columns:clamp(52px,13vw,74px) minmax(0,1fr) clamp(56px,15vw,90px);align-items:center;gap:clamp(8px,2vw,14px);
	padding:clamp(10px,2.1vw,14px);
	border-radius:clamp(25px,5vw,38px);
	background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(244,252,255,.97));
	border:1px solid rgba(255,255,255,.98);
	box-shadow:0 18px 38px rgba(30,86,146,.14),inset 0 1px 0 #fff;
}
.mq-final-reward.is-trophies-loss,.mq-final-reward.is-coins-zero { background:linear-gradient(145deg,#fffdfd,#fff1f4);border-color:rgba(255,94,117,.22); }
.mq-final-reward.is-private { grid-template-columns:clamp(58px,15vw,88px) minmax(0,1fr);background:linear-gradient(145deg,#fff,#edfaff); }
.mq-final-reward.is-private .mq-final-reward-art { display:none; }
.mq-final-reward-icon { position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#fff6cf;background:linear-gradient(145deg,#ffda55,#ed9c16);border:4px solid #fff;box-shadow:0 10px 24px rgba(210,142,24,.25),0 0 0 5px rgba(255,201,48,.12); }
.mq-final-reward.is-trophies-loss .mq-final-reward-icon,.mq-final-reward.is-coins-zero .mq-final-reward-icon { color:#fff;background:linear-gradient(145deg,#ff7180,#e83354);box-shadow:0 10px 24px rgba(207,49,78,.22),0 0 0 5px rgba(255,79,106,.1); }
.mq-final-reward.is-private .mq-final-reward-icon { background:linear-gradient(145deg,#31d1ce,#2a82e6);box-shadow:0 10px 24px rgba(33,126,195,.23),0 0 0 5px rgba(49,200,222,.11); }
.mq-final-reward-icon svg { width:52%;height:52%; }
.mq-final-reward-icon i { position:absolute;inset:-9px;border:1px solid rgba(255,196,52,.44);border-radius:50%;animation:mq-final-pulse 1.8s ease-in-out infinite; }
@keyframes mq-final-pulse { 50%{transform:scale(1.08);opacity:.35} }
.mq-final-reward-copy { min-width:0;display:grid;align-content:center; }
.mq-final-reward-copy small { color:#13a4b3;font-size:clamp(.58rem,2.5vw,.8rem);font-weight:1000;letter-spacing:.09em; }
.mq-final-reward.is-trophies-loss small,.mq-final-reward.is-coins-zero small { color:#df3855; }
.mq-final-reward-copy strong { margin-top:2px;color:#123a7a;font-size:clamp(1.05rem,4.5vw,1.7rem);line-height:1.02;font-weight:1000;letter-spacing:-.035em; }
.mq-final-reward.is-trophies-loss .mq-final-reward-copy strong,.mq-final-reward.is-coins-zero .mq-final-reward-copy strong { color:#df2f4d; }
.mq-final-reward-copy p { margin:5px 0 0;color:#58739a;font-size:clamp(.61rem,2.7vw,.86rem);line-height:1.28;font-weight:700; }
.mq-final-reward-total,.mq-final-reward-format { margin-top:4px;color:#55739a;font-size:clamp(.54rem,2.25vw,.7rem);font-weight:800; }
.mq-final-reward-total b,.mq-final-reward-format b { color:#153e7d; }
.mq-final-reward-art { position:relative;width:100%;height:58px; }
.mq-final-reward-art i { position:absolute;bottom:6px;width:38px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff5aa 0 8%,#ffd143 10% 54%,#e69a18 56% 68%,#ffc12e 70%);border:3px solid #fff0a1;box-shadow:0 5px 12px rgba(177,111,12,.25); }
.mq-final-reward-art i::before { content:"★";position:absolute;inset:0;display:grid;place-items:center;color:#fff5b7;font-size:1.1rem;text-shadow:0 2px 2px rgba(161,100,15,.3); }
.mq-final-reward-art i:nth-child(1){left:3%;bottom:5px}.mq-final-reward-art i:nth-child(2){left:30%;bottom:24px}.mq-final-reward-art i:nth-child(3){right:2%;bottom:8px}
.mq-final-reward.is-trophies-loss .mq-final-reward-art i,.mq-final-reward.is-coins-zero .mq-final-reward-art i { background:radial-gradient(circle at 35% 28%,#ffc3c9 0 8%,#ff6678 10% 54%,#dc294b 56% 68%,#f34a65 70%);border-color:#ffb4bd; }

.mq-final-actions { position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:clamp(8px,1.7vw,12px);padding-bottom:1px; }
.mq-final-actions .mq-btn { min-height:clamp(44px,5.8vh,54px);border-radius:clamp(20px,4vw,30px);display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(.68rem,2.6vw,.84rem);font-weight:950;box-shadow:0 14px 28px rgba(28,91,159,.17); }
.mq-final-actions svg { width:clamp(18px,4.4vw,25px);height:clamp(18px,4.4vw,25px); }
.mq-final-replay { color:#fff!important;background:linear-gradient(135deg,#16cdd0 0%,#1ba5e5 52%,#326be5 100%)!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:0 7px 0 #126ab9,0 15px 30px rgba(23,117,196,.29),inset 0 1px 0 rgba(255,255,255,.56)!important; }
.mq-final-result-page.is-loss .mq-final-replay { background:linear-gradient(135deg,#ff5b6d,#ea3157)!important;box-shadow:0 7px 0 #b92243,0 15px 30px rgba(211,45,76,.25),inset 0 1px 0 rgba(255,255,255,.5)!important; }
.mq-final-home { color:#173e7b!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(96,151,207,.23)!important; }

@media (min-width:700px) {
	.mq-final-result-page { padding-inline:28px; }
	
}
@media (max-width:390px) {
	.mq-final-result-page { padding-inline:10px;gap:8px; }
	
	
	
	
	.mq-final-reward { grid-template-columns:52px minmax(0,1fr) 57px;gap:8px;padding:11px;border-radius:23px; }
	.mq-final-reward-art { height:58px; }
	.mq-final-reward-art i { width:34px; }
	
	
	
	
	
	
	
	.mq-final-actions { grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);gap:7px; }
}
@media (max-height:760px) and (min-width:360px) {
	.mq-final-result-page { gap:7px;padding-top:max(18px,env(safe-area-inset-top)); }
	
	
	
	
	
	
	.mq-final-reward { padding:9px 12px; }
	
	
	
	.mq-final-actions .mq-btn { min-height:48px; }
}

/* =========================================================================
   MemoQuest 6.19.0 — résultat compact, scroll fiable et revanche privée
   ========================================================================= */
.mq-shell[data-result-screen] .mq-stage,
.mq-shell[data-result-screen] .mq-view.is-active {
	height:100%;
	min-height:0;
}
.mq-shell[data-result-screen] .mq-view.is-active {
	display:block;
	overflow-y:auto!important;
	overflow-x:hidden!important;
	scrollbar-width:thin;
	scrollbar-color:rgba(34,128,195,.36) transparent;
	padding:0!important;
}
.mq-shell[data-result-screen] .mq-view.is-active::-webkit-scrollbar { width:5px; }
.mq-shell[data-result-screen] .mq-view.is-active::-webkit-scrollbar-thumb { background:rgba(34,128,195,.34);border-radius:99px; }
.mq-final-result-page { font-size:14px; padding-bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px)); }
.mq-final-actions.is-single { grid-template-columns:1fr; }
.mq-final-actions.is-single .mq-final-replay { width:100%; }
.mq-final-replay.is-waiting { filter:saturate(.72);opacity:.82; }
.mq-final-replay.is-loading::after,.mq-rematch-launch.is-loading::after,.mq-rematch-accept.is-loading::after {
	content:"";width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mq-rematch-spin .7s linear infinite;
}
@keyframes mq-rematch-spin { to{transform:rotate(360deg)} }
.mq-rematch-status {
	position:relative;z-index:4;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:10px;
	padding:10px 12px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(236,249,255,.96));
	border:1px solid rgba(47,151,205,.19);box-shadow:0 12px 25px rgba(29,87,143,.12);
}
.mq-rematch-status[hidden] { display:none!important; }
.mq-rematch-status > span { width:38px;aspect-ratio:1;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#20c8c5,#2584e3);box-shadow:0 7px 16px rgba(31,132,199,.2); }
.mq-rematch-status > span svg { width:24px;height:24px; }
.mq-rematch-status strong { display:block;color:#153c7a;font-size:.82rem;font-weight:950; }
.mq-rematch-status small { display:block;margin-top:2px;color:#617b9f;font-size:.64rem;line-height:1.25;font-weight:720; }
.mq-rematch-status.is-declined > span { background:linear-gradient(145deg,#ff6f7e,#dc3452); }
.mq-rematch-status.is-accepted > span { background:linear-gradient(145deg,#42d39f,#149b78); }
.mq-rematch-dialog-layer { position:fixed;z-index:80;inset:0;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));display:grid;place-items:center;background:rgba(16,48,91,.42);animation:mq-rematch-layer-in .22s ease-out; }
@keyframes mq-rematch-layer-in { from{opacity:0} }
.mq-rematch-dialog { width:min(430px,100%);padding:24px 18px 18px;border-radius:30px;text-align:center;background:linear-gradient(160deg,#fff,#eefaff);border:2px solid rgba(255,255,255,.98);box-shadow:0 28px 70px rgba(17,55,105,.34);animation:mq-rematch-dialog-in .42s cubic-bezier(.18,1.25,.35,1); }
@keyframes mq-rematch-dialog-in { from{opacity:0;transform:translateY(24px) scale(.91)} }
.mq-rematch-dialog-icon { position:relative;width:70px;aspect-ratio:1;margin:-54px auto 12px;border-radius:24px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#20d0c6,#247fe4);border:4px solid #fff;box-shadow:0 13px 30px rgba(28,132,199,.29); }
.mq-rematch-dialog-icon svg { width:34px;height:34px; }
.mq-rematch-dialog-icon i { position:absolute;inset:-9px;border:1px solid rgba(40,188,210,.34);border-radius:30px;animation:mq-personal-orbit 4s linear infinite; }
.mq-rematch-dialog > small { color:#12a5b5;font-size:.58rem;font-weight:1000;letter-spacing:.12em; }
.mq-rematch-dialog h3 { margin:5px 0 0;color:#153c7a;font-size:1.1rem;line-height:1.05;font-weight:1000; }
.mq-rematch-dialog p { margin:8px auto 16px;max-width:330px;color:#5c769b;font-size:.72rem;line-height:1.35;font-weight:720; }
.mq-rematch-dialog > div { display:grid;grid-template-columns:1.2fr .8fr;gap:8px; }
.mq-rematch-dialog .mq-btn { min-height:48px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.75rem;font-weight:950; }
.mq-rematch-accept { color:#fff!important;background:linear-gradient(135deg,#19c9c1,#2584e4)!important;box-shadow:0 10px 22px rgba(28,133,198,.24)!important; }
.mq-rematch-decline { color:#5f7899!important;background:#eef5fa!important;border:1px solid rgba(75,124,171,.16)!important; }
.mq-rematch-config { position:relative;z-index:4;padding:14px;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.99),rgba(239,250,255,.98));border:1px solid rgba(255,255,255,.98);box-shadow:0 14px 30px rgba(27,83,139,.14); }
.mq-rematch-config header { display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px;margin-bottom:6px; }
.mq-rematch-config header > span { width:44px;aspect-ratio:1;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#20c9c3,#2683e4); }
.mq-rematch-config header svg { width:23px;height:23px; }
.mq-rematch-config header small { display:block;color:#12a5b5;font-size:.52rem;font-weight:1000;letter-spacing:.1em; }
.mq-rematch-config header strong { display:block;color:#153c7a;font-size:.84rem;font-weight:1000; }
.mq-rematch-fields { display:grid;grid-template-columns:1.15fr .85fr .95fr;gap:8px; }
.mq-rematch-fields .mq-premium-field { gap:4px; }
.mq-rematch-fields .mq-premium-field > span { font-size:.56rem; }
.mq-rematch-fields .mq-premium-field select { min-height:43px;padding:8px 28px 8px 9px;border-radius:13px;font-size:.68rem; }
.mq-rematch-launch { width:100%;min-height:48px;margin-top:10px;border-radius:17px!important;display:flex!important;align-items:center;justify-content:center;gap:8px;color:#fff!important;background:linear-gradient(135deg,#19c9c1,#2584e4)!important;box-shadow:0 10px 22px rgba(28,133,198,.22)!important;font-size:.76rem!important;font-weight:950!important; }
.mq-rematch-config > p { min-height:1.2em;margin:6px 2px 0;color:#db3954;font-size:.62rem;font-weight:780;text-align:center; }
.mq-quick-restart { width:min(430px,100%);margin:auto;padding:24px 18px;border-radius:30px;text-align:center;background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.98);box-shadow:0 20px 48px rgba(28,85,145,.17); }
.mq-quick-restart > span { position:relative;width:72px;aspect-ratio:1;margin:0 auto 12px;border-radius:24px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#20cec5,#2780e2);border:4px solid #fff;box-shadow:0 13px 28px rgba(30,135,199,.27); }
.mq-quick-restart > span svg { width:35px;height:35px; }
.mq-quick-restart > span i { position:absolute;inset:-10px;border-radius:30px;border:1px solid rgba(29,181,206,.32);animation:mq-personal-orbit 4s linear infinite; }
.mq-quick-restart h3 { margin:0;color:#153c7a;font-size:1.2rem;font-weight:1000; }
.mq-quick-restart p { margin:6px 0 14px;color:#607a9e;font-size:.72rem;font-weight:720; }
@media (max-width:430px) {
	.mq-final-result-page { font-size:13px; }
	.mq-rematch-fields { grid-template-columns:1fr 1fr; }
	.mq-rematch-fields label:first-child { grid-column:1/-1; }
}
@media (max-height:690px) {
	.mq-final-result-page { font-size:12.5px;gap:6px; }
	
	
	
	.mq-final-reward { padding-block:8px; }
	
	
}

/* =========================================================================
   MemoQuest 6.19.0 — résultat SOLO compact sans en-tête, ajusté sans scroll
   ========================================================================= */
.mq-solo-result-page {
	--solo-deep:#123f83;
	--solo-teal:#0fb7c2;
	--solo-blue:#1478eb;
	min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	gap:clamp(8px,1vh,12px);
	padding-inline:clamp(10px,2.8vw,18px);
	padding-top:max(14px,env(safe-area-inset-top));
	padding-bottom:max(14px,env(safe-area-inset-bottom));
	grid-template-rows:auto auto auto 1fr auto;
	background:
		radial-gradient(circle at 50% 1%,rgba(255,255,255,.98),transparent 24%),
		radial-gradient(circle at 8% 30%,rgba(29,201,214,.19),transparent 25%),
		radial-gradient(circle at 92% 45%,rgba(28,123,235,.15),transparent 26%),
		linear-gradient(180deg,#4ccaf4 0%,#aeeafb 34%,#edfaff 76%,#fbfdff 100%);
}
.mq-solo-result-page .mq-final-particles i { width:5px;height:5px;border-radius:50%;background:#fff;opacity:.42;box-shadow:0 0 12px #fff; }
.mq-solo-hero {
	display:none;
	position:relative;z-index:2;
	min-height:clamp(215px,29vh,292px);
	padding:clamp(72px,9vh,94px) clamp(14px,3vw,24px) clamp(20px,2.8vh,30px);
	display:flex;align-items:flex-end;justify-content:center;
	border-radius:clamp(31px,6vw,47px);
	background:linear-gradient(155deg,rgba(255,255,255,.995),rgba(246,252,255,.975));
	border:1px solid rgba(255,255,255,.99);
	box-shadow:0 22px 54px rgba(31,91,153,.18),inset 0 1px 0 #fff;
	overflow:visible;
}

.mq-solo-score-card {
	position:relative;z-index:2;overflow:visible;
	min-height:clamp(238px,31vh,305px);
	padding:clamp(38px,4.5vh,52px) clamp(12px,3vw,24px) clamp(12px,2vh,18px);
	display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
	border-radius:clamp(28px,5.4vw,42px);
	background:
		radial-gradient(circle at 15% 5%,rgba(100,255,237,.25),transparent 34%),
		linear-gradient(135deg,#17c8cd 0%,#199de6 50%,#176ae8 100%);
	border:4px solid rgba(255,255,255,.93);
	box-shadow:0 19px 44px rgba(21,91,179,.25),inset 0 0 0 2px rgba(36,230,226,.24),inset 0 2px 0 rgba(255,255,255,.45);
	color:#fff;
}
.mq-solo-score-card::after {
	content:"★";position:absolute;right:3%;top:17%;font-size:clamp(100px,28vw,178px);line-height:1;color:rgba(255,255,255,.12);transform:rotate(-4deg);pointer-events:none;
}
.mq-solo-winner {
	position:absolute;z-index:3;left:50%;top:0;transform:translate(-50%,-38%);
	min-width:clamp(190px,49vw,280px);min-height:clamp(46px,6vh,59px);
	padding:8px 20px;display:flex;align-items:center;justify-content:center;gap:9px;
	border-radius:999px;color:#fff;font-size:clamp(.72rem,3vw,1rem);font-weight:1000;letter-spacing:.035em;
	background:linear-gradient(145deg,#16d0c4,#0aa9ca 55%,#178de5);
	border:4px solid #fff;box-shadow:0 12px 26px rgba(10,123,185,.31),inset 0 1px 0 rgba(255,255,255,.55);
}
.mq-solo-winner svg { width:clamp(21px,5.5vw,29px);height:clamp(21px,5.5vw,29px);color:#ffd33e;filter:drop-shadow(0 2px 3px rgba(135,93,8,.24)); }
.mq-solo-score-copy { position:relative;z-index:2;display:grid;justify-items:center;text-align:center;line-height:1; }
.mq-solo-score-copy small { color:#fff;font-size:clamp(.92rem,3.7vw,1.25rem);font-weight:950; }
.mq-solo-score-copy strong { margin-top:5px;color:#fff;font-size:clamp(3.9rem,17vw,6rem);line-height:.82;font-weight:1000;letter-spacing:-.075em;text-shadow:0 8px 18px rgba(14,75,169,.19);font-variant-numeric:tabular-nums; }
.mq-solo-score-copy span { margin-top:6px;color:#fff;font-size:clamp(.86rem,3.3vw,1.12rem);font-weight:950; }
.mq-solo-rating {
	position:relative;z-index:2;width:min(88%,510px);margin-top:auto;padding:clamp(10px,1.6vh,16px) clamp(12px,3vw,23px);
	display:grid;justify-items:center;gap:6px;text-align:center;
	border-radius:clamp(22px,4.5vw,34px);background:linear-gradient(150deg,#fff,#f5fbff);border:1px solid rgba(255,255,255,.99);
	box-shadow:0 14px 31px rgba(11,72,156,.19),inset 0 1px 0 #fff;
}
.mq-solo-rating > strong { color:#1360c8;font-size:clamp(.69rem,2.9vw,.92rem);font-weight:1000; }
.mq-solo-stars { display:flex;align-items:center;justify-content:center;gap:clamp(2px,.8vw,6px); }
.mq-solo-stars .mq-etoile-geant { width:clamp(25px,6.6vw,39px);height:clamp(25px,6.6vw,39px);filter:drop-shadow(0 5px 5px rgba(185,112,3,.25)); }
.mq-solo-rating > b { color:#1762cc;font-size:clamp(1.05rem,4vw,1.45rem);line-height:1;font-weight:1000; }
.mq-solo-stats {
	position:relative;z-index:2;padding:clamp(12px,2.3vw,18px) clamp(12px,3vw,24px) clamp(10px,2vw,16px);
	border-radius:clamp(28px,5vw,40px);background:linear-gradient(150deg,rgba(255,255,255,.995),rgba(247,252,255,.985));
	border:1px solid rgba(255,255,255,.99);box-shadow:0 18px 40px rgba(31,86,145,.15),inset 0 1px 0 #fff;
}
.mq-solo-stats > header { display:grid;place-items:center;margin-bottom:4px;text-align:center; }
.mq-solo-stats > header strong { position:relative;padding-inline:20px;color:#0da5b6;font-size:clamp(.75rem,3.25vw,1.06rem);font-weight:1000;letter-spacing:.055em; }
.mq-solo-stats > header strong::before,.mq-solo-stats > header strong::after { content:"";position:absolute;top:50%;width:clamp(28px,9vw,75px);height:1px;background:linear-gradient(90deg,transparent,rgba(57,129,195,.28)); }
.mq-solo-stats > header strong::before { right:100%; }
.mq-solo-stats > header strong::after { left:100%;transform:scaleX(-1); }
.mq-solo-stats-list {
	width:min(100%,520px);margin:0 auto;padding:clamp(6px,1vw,10px) clamp(10px,2.4vw,18px);
	border-radius:clamp(20px,4vw,30px);background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(247,252,255,.86));
	border:1px solid rgba(74,145,207,.16);box-shadow:inset 0 1px 0 #fff;
}
.mq-solo-stat-row {
	width:100%;min-height:clamp(31px,4.2vh,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
	padding:4px clamp(4px,1.8vw,11px);border-bottom:1px solid rgba(55,121,184,.15);font-variant-numeric:tabular-nums;
}
.mq-solo-stat-row:last-child { border-bottom:0; }
.mq-solo-stat-label { min-width:0;display:grid;grid-template-columns:clamp(25px,6vw,34px) minmax(0,1fr);align-items:center;gap:clamp(8px,2.4vw,15px);color:#153e7d; }
.mq-solo-stat-label svg { width:clamp(20px,4.8vw,26px);height:clamp(20px,4.8vw,26px);color:#5d8fd3;stroke-width:1.9; }
.mq-solo-stat-label em { overflow:hidden;text-overflow:ellipsis;color:#17417e;font-size:clamp(.64rem,2.55vw,.82rem);font-style:normal;font-weight:850;white-space:nowrap; }
.mq-solo-stat-row > b { min-width:clamp(50px,14vw,76px);color:#0aa7b4;font-size:clamp(.78rem,3vw,.98rem);font-weight:1000;text-align:right; }
.mq-solo-result-page .mq-final-actions { margin-top:0; }
@media (max-width:390px) {
	.mq-solo-hero { min-height:205px;padding-bottom:18px; }
	.mq-solo-score-card { min-height:300px;padding-inline:9px; }
	.mq-solo-rating { width:92%; }
	.mq-solo-stats { padding-inline:9px; }
	.mq-solo-stat-label { grid-template-columns:24px minmax(0,1fr);gap:8px; }
	.mq-solo-stat-row > b { min-width:54px; }
}
@media (max-width:480px), (max-height:700px) {
	.mq-solo-result-page { gap:6px; }
	.mq-solo-score-card { min-height:228px;padding-top:36px;padding-bottom:8px; }
	.mq-solo-score-copy strong { font-size:3.7rem; }
	.mq-solo-rating { padding-block:8px; }
	.mq-solo-stat-row { min-height:30px; }
}
[data-motion="calme"] .mq-solo-score-card,.mq-shell[data-motion="calme"] .mq-solo-winner { animation:none!important; }

@media (max-height:760px) {
	.mq-final-result-page { gap:5px; padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:max(10px,env(safe-area-inset-bottom)); }
	
	.mq-final-reward { padding:8px 10px; }
	
	
	
	
	.mq-final-actions .mq-btn { min-height:42px; }
}

/* Récapitulatif premium affiché une seule fois après la première victoire du niveau 100. */
.mq-adventure-summary {
	position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,20px);
	padding:clamp(13px,3vw,20px);border-radius:clamp(24px,5vw,36px);overflow:hidden;
	background:linear-gradient(135deg,rgba(19,71,163,.98),rgba(22,159,195,.96) 58%,rgba(54,211,190,.96));
	border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 42px rgba(11,72,143,.25),inset 0 1px 0 rgba(255,255,255,.38);color:#fff;
}
.mq-adventure-summary::after { content:"";position:absolute;inset:-50% -10% auto 42%;height:180%;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 62%);pointer-events:none; }
.mq-adventure-emblem { position:relative;display:grid;place-items:center;width:clamp(62px,16vw,88px);aspect-ratio:1;border-radius:28%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 24px rgba(7,55,124,.18); }
.mq-adventure-emblem svg { width:52%;height:52%;color:#fff;filter:drop-shadow(0 4px 8px rgba(0,46,107,.25)); }
.mq-adventure-emblem i { position:absolute;inset:-5px;border-radius:31%;border:2px solid rgba(255,218,74,.88);animation:mqAdventurePulse 1.8s ease-in-out infinite; }
.mq-adventure-summary > div { min-width:0;position:relative;z-index:2;display:grid;gap:4px; }
.mq-adventure-summary small { font-size:clamp(.6rem,2.4vw,.78rem);font-weight:1000;letter-spacing:.09em;color:#dffcff; }
.mq-adventure-summary strong { font-size:clamp(1.18rem,4.7vw,1.8rem);line-height:1.05;font-weight:1000; }
.mq-adventure-summary p { margin:0;font-size:clamp(.7rem,2.8vw,.9rem);line-height:1.35;font-weight:700;color:rgba(255,255,255,.9); }
.mq-adventure-stats { display:flex;flex-wrap:wrap;gap:6px;margin-top:4px; }
.mq-adventure-stats b { padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);font-size:clamp(.58rem,2.2vw,.73rem);font-weight:950;white-space:nowrap; }
.mq-final-result-page.is-story-finale { animation:mqFinaleReveal .7s cubic-bezier(.2,.9,.25,1) both; }
@keyframes mqAdventurePulse { 0%,100%{transform:scale(.98);opacity:.62} 50%{transform:scale(1.08);opacity:1} }
@keyframes mqFinaleReveal { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
[data-motion="calme"] .mq-adventure-emblem i,.mq-shell[data-motion="calme"] .mq-adventure-emblem i,[data-motion="calme"] .mq-final-result-page.is-story-finale,[data-motion="calme"] .mq-final-particles i,[data-motion="calme"] .mq-final-reward-icon i { animation:none!important; }
@media (max-width:390px) { .mq-adventure-summary { grid-template-columns:54px minmax(0,1fr);gap:10px;padding:12px; } .mq-adventure-emblem { width:54px; } }

/* =========================================================================
   MemoQuest 6.19.0 — tableau de bord Profil joueur
   Écran réel, données dynamiques, structure flexible avec défilement interne.
   ========================================================================= */
.mq-shell[data-screen="profil"] {
	--profile-border: rgba(255,255,255,.92);
	--profile-line: #dfe9f4;
	background:
		radial-gradient(circle at 12% 21%, rgba(255,255,255,.42) 0 1.4px, transparent 2.6px),
		radial-gradient(circle at 88% 28%, rgba(255,255,255,.52) 0 1.2px, transparent 2.5px),
		linear-gradient(180deg, #27bbed 0%, #7bd8f5 24%, #d9f1fb 50%, #f2f8f0 72%, #fff0d1 100%);
	background-size: 136px 136px, 184px 184px, auto;
}
.mq-shell[data-screen="profil"] .mq-app {
	gap: clamp(8px, 1.2vh, 13px);
	padding:
		max(clamp(10px, 1.7vh, 18px), env(safe-area-inset-top))
		clamp(10px, 2.8vw, 22px)
		max(clamp(9px, 1.4vh, 16px), env(safe-area-inset-bottom));
}
.mq-shell[data-screen="profil"] .mq-top {
	min-height: 0;
	height: clamp(66px, 9.1vh, 88px);
	padding: clamp(7px, 1vh, 10px) clamp(9px, 2.2vw, 16px);
	gap: clamp(5px, 1.45vw, 11px);
	border: 1px solid var(--profile-border);
	border-radius: clamp(25px, 7vw, 37px);
	background: rgba(255,255,255,.97);
	box-shadow: inset 0 1px 0 #fff, 0 7px 20px rgba(21,60,122,.15);
}
.mq-shell[data-screen="profil"] .mq-avatar {
	overflow:visible; padding:0; background:#fff;
	width: clamp(47px, 6.35vh, 59px);
	height: clamp(47px, 6.35vh, 59px);
	font-size: clamp(1.16rem, 3.1vh, 1.62rem);
	border-width: 3px;
	box-shadow: 0 0 0 3px rgba(22,196,206,.23), inset 0 1px 0 rgba(255,255,255,.35);
	transition: transform .18s var(--ressort), box-shadow .2s;
}
.mq-shell[data-screen="profil"] .mq-avatar > img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; }
.mq-shell[data-screen="profil"] .mq-avatar.is-on {
	transform: scale(1.04);
	box-shadow: 0 0 0 5px rgba(255,255,255,.72), 0 0 0 8px rgba(22,196,206,.30), 0 8px 15px rgba(21,60,122,.18);
}
.mq-shell[data-screen="profil"] .mq-avatar b {
	right: -5px; bottom: -4px;
	min-width: clamp(21px, 2.8vh, 26px); height: clamp(21px, 2.8vh, 26px);
	font-size: clamp(.64rem, 1.4vh, .78rem); border-width: 2px;
}
.mq-shell[data-screen="profil"] .mq-profil-info { justify-content:center; gap:0; min-width:40px; }
.mq-shell[data-screen="profil"] .mq-profil-info strong { display:none; }
.mq-shell[data-screen="profil"] .mq-xp { height:clamp(8px,1.2vh,11px); background:#e5edf5; box-shadow:inset 0 1px 2px rgba(21,60,122,.08); }
.mq-shell[data-screen="profil"] .mq-xp i { background:linear-gradient(90deg,#16b8c7,#34d0bd); }
.mq-shell[data-screen="profil"] .mq-chip { gap:clamp(5px,1.2vw,9px); padding:0; background:transparent; font-size:clamp(.95rem,2.35vh,1.25rem); }
.mq-shell[data-screen="profil"] .mq-chip .mq-coin { width:clamp(34px,4.75vh,44px); height:clamp(34px,4.75vh,44px); box-shadow:0 3px 0 #d98816,0 6px 12px rgba(232,149,28,.26),inset 0 2px 0 rgba(255,255,255,.5); }
.mq-shell[data-screen="profil"] .mq-chip .mq-coin svg { width:45%; height:45%; }
.mq-shell[data-screen="profil"] .mq-chip b { min-width:1.55em; text-align:center; }
.mq-shell[data-screen="profil"] .mq-chip .mq-plus { width:clamp(32px,4.35vh,40px); height:clamp(32px,4.35vh,40px); font-size:clamp(1.1rem,2.55vh,1.42rem); box-shadow:0 4px 10px rgba(15,163,180,.24),inset 0 1px 0 rgba(255,255,255,.45); }
.mq-shell[data-screen="profil"] .mq-icon-btn { width:clamp(36px,4.7vh,44px); height:clamp(36px,4.7vh,44px); background:transparent; box-shadow:none; }
.mq-shell[data-screen="profil"] .mq-icon-btn svg { width:66%; height:66%; stroke-width:2.45; }

.mq-shell[data-screen="profil"] .mq-view[data-view="profil"] { gap:0; overflow:hidden; }
.mq-profile-screen { height:100%; min-height:0; display:flex; flex-direction:column; gap:clamp(7px,1vh,11px); }
.mq-profile-heading { flex:0 0 auto; display:grid; grid-template-columns:42px 1fr 42px; align-items:center; min-height:clamp(42px,5.7vh,54px); }
.mq-profile-heading button { width:clamp(36px,4.7vh,44px); height:clamp(36px,4.7vh,44px); border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.94); color:var(--encre); box-shadow:var(--ombre); }
.mq-profile-heading button svg { width:48%; height:48%; stroke-width:2.6; }
.mq-profile-heading h1 { margin:0; text-align:center; color:var(--encre); font-size:clamp(1.35rem,3vh,2rem); line-height:1; font-weight:950; letter-spacing:-.035em; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.mq-profile-scroll { flex:1 1 auto; min-height:0; overflow:auto; padding:1px 2px 8px; scrollbar-width:none; overscroll-behavior:contain; }
.mq-profile-scroll::-webkit-scrollbar { display:none; }
.mq-profile-content { width:min(100%,760px); margin-inline:auto; display:flex; flex-direction:column; gap:clamp(8px,1.15vh,12px); padding-bottom:2px; }

.mq-profile-identity,
.mq-profile-panel,
.mq-profile-metric {
	border:1px solid var(--profile-border);
	background:rgba(255,255,255,.97);
	box-shadow:inset 0 1px 0 #fff,0 6px 17px rgba(21,60,122,.11);
}
.mq-profile-identity { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(10px,2.6vw,20px); padding:clamp(11px,1.7vh,18px); border-radius:clamp(21px,5.3vw,30px); }
.mq-profile-avatar-large { position:relative; width:clamp(76px,11.3vh,104px); height:clamp(76px,11.3vh,104px); flex:0 0 auto; border-radius:50%; padding:4px; background:#fff; box-shadow:0 0 0 3px rgba(22,196,206,.24),0 8px 18px rgba(21,60,122,.17); }
.mq-profile-avatar-large > img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.mq-profile-avatar-large > button { position:absolute; right:-3px; bottom:-2px; width:clamp(29px,4vh,37px); height:clamp(29px,4vh,37px); display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:var(--degrade); border:3px solid #fff; box-shadow:0 4px 9px rgba(15,163,180,.28); }
.mq-profile-avatar-large > button svg { width:49%; height:49%; stroke-width:2.5; }
.mq-profile-identity-copy { min-width:0; }
.mq-profile-identity-copy h2 { margin:0; color:var(--encre); font-size:clamp(1.18rem,2.8vh,1.75rem); line-height:1.04; font-weight:950; letter-spacing:-.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-profile-identity-copy > p { margin:4px 0 7px; color:#8093b2; font-size:clamp(.68rem,1.55vh,.9rem); font-weight:800; }
.mq-profile-level-line { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.mq-profile-level-line > b { padding:4px 10px; border-radius:999px; color:#fff; background:linear-gradient(100deg,var(--turq),var(--bleu)); box-shadow:0 3px 8px rgba(15,163,180,.22); font-size:clamp(.67rem,1.55vh,.88rem); white-space:nowrap; }
.mq-profile-level-line > span { color:#7d8fae; font-size:clamp(.64rem,1.4vh,.82rem); white-space:nowrap; }
.mq-profile-level-line > span strong { color:var(--turq-2); }
.mq-profile-xp { display:block; height:clamp(7px,1vh,10px); overflow:hidden; border-radius:999px; background:#e5edf5; box-shadow:inset 0 1px 2px rgba(21,60,122,.08); }
.mq-profile-xp i { display:block; width:var(--p); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--turq),#34d0bd); transition:width .5s var(--sortie); }
.mq-profile-edit { min-width:clamp(82px,19vw,126px); height:clamp(38px,5.1vh,48px); padding:0 13px!important; display:flex; align-items:center; justify-content:center; gap:6px; border:2px solid var(--mq-border-active)!important; border-radius:999px; color:var(--mq-accent-strong)!important; background:var(--mq-surface-raised)!important; box-shadow:0 4px 11px rgba(21,60,122,.08); font-size:clamp(.7rem,1.55vh,.9rem)!important; font-weight:900!important; }
.mq-profile-edit svg { width:18px; height:18px; stroke-width:2.4; }

.mq-profile-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(6px,1.7vw,10px); }
.mq-profile-metric { min-width:0; min-height:clamp(66px,8.7vh,84px); padding:clamp(8px,1.25vh,12px) clamp(7px,1.6vw,11px); border-radius:clamp(17px,4.3vw,24px); display:flex; align-items:center; gap:clamp(6px,1.3vw,10px); }
.mq-profile-metric > span { width:clamp(34px,4.8vh,45px); height:clamp(34px,4.8vh,45px); flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--past-ciel); color:var(--bleu); }
.mq-profile-metric > span svg { width:54%; height:54%; stroke-width:2.2; }
.mq-profile-metric.is-coins > span { color:#805100; background:radial-gradient(circle at 34% 28%,#ffe78f,#ffc02e 54%,#e8951c); box-shadow:0 3px 7px rgba(232,149,28,.25); }
.mq-profile-metric.is-trophies > span { color:#d99b00; background:#fff3ca; }
.mq-profile-metric.is-stars > span { color:#eba900; background:#fff3ca; }
.mq-profile-metric.is-streak > span { color:#43bd3a; background:#e8fae8; }
.mq-profile-metric > div { min-width:0; }
.mq-profile-metric small { display:block; margin-bottom:1px; color:#7f91af; font-size:clamp(.57rem,1.28vh,.75rem); white-space:nowrap; }
.mq-profile-metric strong { display:block; color:var(--encre); font-size:clamp(.9rem,2.1vh,1.24rem); line-height:1; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }

.mq-profile-columns { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(8px,2vw,12px); align-items:stretch; }
.mq-profile-panel { min-width:0; padding:clamp(10px,1.45vh,14px); border-radius:clamp(20px,4.8vw,27px); }
.mq-profile-panel > h3 { margin:0 0 clamp(7px,1vh,10px); display:flex; align-items:center; gap:7px; color:var(--encre); font-size:clamp(.79rem,1.75vh,1rem); font-weight:950; }
.mq-profile-panel > h3 svg { width:19px; height:19px; color:#63acec; stroke-width:2.4; }
.mq-profile-panel-body { display:grid; gap:5px; }
.mq-profile-progress-row { display:grid; grid-template-columns:31px minmax(0,1fr); align-items:center; gap:7px; padding:5px 7px; border:1px solid #e3ebf4; border-radius:12px; background:#fbfdff; }
.mq-profile-row-icon { width:27px; height:27px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#46aee6; background:#eaf7ff; }
.mq-profile-row-icon svg { width:61%; height:61%; stroke-width:2.2; }
.mq-profile-progress-row:nth-child(2) .mq-profile-row-icon { color:#58c95c; background:#ecfaed; }
.mq-profile-progress-row:nth-child(3) .mq-profile-row-icon { color:#8f5ddd; background:#f2ebff; }
.mq-profile-progress-row:nth-child(4) .mq-profile-row-icon { color:#398fd4; background:#e7f3ff; }
.mq-profile-progress-row > div { min-width:0; }
.mq-profile-progress-row p { margin:0 0 4px; display:flex; align-items:baseline; justify-content:space-between; gap:6px; min-width:0; color:var(--encre); font-size:clamp(.57rem,1.22vh,.72rem); }
.mq-profile-progress-row p span { min-width:0; white-space:normal; line-height:1.08; }
.mq-profile-progress-row p b { flex:0 0 auto; color:var(--turq-2); font-size:clamp(.56rem,1.18vh,.7rem); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mq-profile-meter { display:block; height:5px; border-radius:999px; background:#e6edf5; overflow:hidden; }
.mq-profile-meter i { display:block; width:var(--p); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--turq),#32cbb0); }
.mq-profile-performance dl { margin:0; display:grid; }
.mq-profile-performance dl > div { min-height:clamp(30px,4vh,38px); display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--profile-line); }
.mq-profile-performance dl > div:last-child { border-bottom:0; }
.mq-profile-performance dt { min-width:0; color:var(--encre); font-size:clamp(.61rem,1.35vh,.78rem); font-weight:800; }
.mq-profile-performance dd { margin:0; color:var(--turq-2); font-size:clamp(.72rem,1.65vh,.95rem); font-weight:950; font-variant-numeric:tabular-nums; white-space:nowrap; }

.mq-profile-success { padding-bottom:clamp(11px,1.5vh,15px); }
.mq-profile-achievements { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(5px,1.4vw,10px); }
.mq-profile-achievement { min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.mq-profile-achievement > span { width:clamp(49px,7.2vh,67px); height:clamp(55px,7.9vh,74px); display:flex; align-items:center; justify-content:center; color:#fff; clip-path:polygon(50% 0,91% 17%,91% 69%,50% 100%,9% 69%,9% 17%); background:linear-gradient(145deg,#13ac91,#087c72); border:4px solid #edbe42; filter:drop-shadow(0 4px 4px rgba(21,60,122,.16)); }
.mq-profile-achievement > span svg { width:45%; height:45%; stroke-width:2.4; }
.mq-profile-achievement.is-five > span { background:linear-gradient(145deg,#9d4dd8,#6337a5); border-color:#f0a349; color:#ffe05a; }
.mq-profile-achievement.is-explorer > span { background:linear-gradient(145deg,#18aebf,#116d92); border-color:#eaa83d; color:#fff4bc; }
.mq-profile-achievement.is-guardian > span { background:linear-gradient(145deg,#2a9dc8,#164b86); border-color:#ffd34d; }
.mq-profile-achievement.is-locked { opacity:.58; filter:grayscale(.78); }
.mq-profile-achievement.is-locked > span { background:linear-gradient(145deg,#8e99a7,#596576); border-color:#a8b0ba; }
.mq-profile-achievement small { color:var(--encre); font-size:clamp(.54rem,1.2vh,.72rem); line-height:1.12; font-weight:800; }

.mq-profile-preferences > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.mq-profile-preferences article { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; column-gap:7px; align-items:center; padding:8px; border:1px solid #dce7f2; border-radius:13px; background:#fbfdff; }
.mq-profile-preferences article > span { grid-row:1 / 3; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(145deg,#68cbed,#388fde); }
.mq-profile-preferences article > span svg { width:55%; height:55%; stroke-width:2.2; }
.mq-profile-preferences small { min-width:0; color:#7f91af; font-size:clamp(.52rem,1.1vh,.67rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-profile-preferences strong { min-width:0; color:var(--encre); font-size:clamp(.65rem,1.4vh,.84rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mq-profile-actions { flex:0 0 auto; width:min(86%,650px); margin-inline:auto; display:grid; gap:clamp(6px,.8vh,8px); }
.mq-profile-actions .mq-btn { min-height:clamp(43px,5.7vh,54px); border-radius:999px; font-size:clamp(.78rem,1.8vh,1.02rem); }
.mq-profile-actions .mq-btn-primary { display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 5px 0 #1767b8,0 10px 18px rgba(21,60,122,.18); }
.mq-profile-actions .mq-btn-primary svg { width:20px; height:20px; }
.mq-profile-actions .mq-btn-ghost { min-height:clamp(39px,5vh,48px); background:rgba(255,255,255,.95); border:2px solid var(--turq); color:var(--turq-2); }

.mq-profile-field { display:grid; gap:6px; color:var(--encre); font-weight:900; }
.mq-profile-field input { width:100%; height:48px; padding:0 14px; border:2px solid #d8e6f2; border-radius:14px; color:var(--encre); background:#f8fbfe; font:inherit; outline:0; }
.mq-profile-field input:focus { border-color:var(--turq); box-shadow:0 0 0 4px rgba(22,196,206,.12); }
.mq-profile-field small { color:var(--encre-2); font-size:.72rem; }
.mq-profile-sheet-avatar { padding:2px; border-radius:50%; }
.mq-profile-sheet-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }

.mq-avatar-picker { display:grid; gap:9px; }
.mq-avatar-picker-title { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.mq-avatar-picker-title h4 { margin:1px 0 0; color:var(--encre); font-size:1rem; line-height:1; font-weight:950; }
.mq-avatar-picker-title > span { min-width:72px; height:34px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:999px; color:#704800; background:linear-gradient(145deg,#fff6d0,#ffd756); box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(217,139,20,.15); font-weight:950; }
.mq-avatar-picker-title > span svg { width:17px; height:17px; }
.mq-avatar-picker-note { margin:0; color:#6d82a3; font-size:.7rem; line-height:1.35; font-weight:750; }
.mq-avatar-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mq-avatar-option { position:relative; min-width:0; min-height:88px; padding:7px; display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:7px; border:2px solid #e1eaf3; border-radius:18px; background:linear-gradient(145deg,#fff,#f6faff); box-shadow:0 4px 12px rgba(21,60,122,.08); text-align:left; transition:transform .16s var(--ressort),border-color .18s,box-shadow .18s; overflow:hidden; }
.mq-avatar-option:active { transform:scale(.975); }
.mq-avatar-option.is-selected { border-color:#12bdc8; box-shadow:0 0 0 3px rgba(18,189,200,.14),0 7px 16px rgba(21,60,122,.12); background:linear-gradient(145deg,#f7ffff,#e9fbfc); }
.mq-avatar-option.is-locked { background:linear-gradient(145deg,#fbfcfe,#eff3f7); }
.mq-avatar-option-art { position:relative; width:68px; height:68px; border-radius:50%; padding:2px; background:#fff; box-shadow:0 0 0 2px rgba(26,190,201,.2),0 5px 12px rgba(21,60,122,.13); }
.mq-avatar-option-art img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; }
.mq-avatar-option-art i { position:absolute; right:-2px; bottom:-2px; width:23px; height:23px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#15c8c4,#188ce0); border:2px solid #fff; box-shadow:0 3px 7px rgba(21,60,122,.19); }
.mq-avatar-option.is-locked .mq-avatar-option-art i { background:linear-gradient(145deg,#6c7d92,#425268); }
.mq-avatar-option-art i svg { width:52%; height:52%; stroke-width:2.6; }
.mq-avatar-option-copy { min-width:0; display:grid; gap:4px; }
.mq-avatar-option-copy strong { min-width:0; color:var(--encre); font-size:.78rem; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-avatar-option-copy small { min-width:0; display:flex; align-items:center; gap:4px; color:#7488a8; font-size:.62rem; font-weight:850; white-space:nowrap; }
.mq-avatar-option.is-selected small { color:#0b9ba8; }
.mq-avatar-option-copy small svg { width:15px; height:15px; color:#d08a00; }
.mq-avatar-option-copy small b { color:#8a5b00; }
.mq-avatar-purchase-summary { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:13px; padding:12px; border-radius:20px; background:linear-gradient(145deg,#f1fdff,#edf5fb); border:1px solid #d9eaf3; }
.mq-avatar-purchase-summary > img { width:104px; height:104px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 8px 12px rgba(21,60,122,.18)); }
.mq-avatar-purchase-summary p { margin:0 0 7px; color:var(--encre); font-size:.86rem; line-height:1.3; font-weight:850; }
.mq-avatar-purchase-summary strong { display:flex; align-items:center; gap:5px; color:#8a5b00; font-size:1rem; }
.mq-avatar-purchase-summary strong svg { width:19px; height:19px; }
.mq-avatar-purchase-summary small { display:block; margin-top:4px; color:#7386a3; font-size:.68rem; font-weight:750; }
@media (min-width:560px) { .mq-avatar-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:370px) { .mq-avatar-option { grid-template-columns:58px minmax(0,1fr); min-height:76px; padding:6px; } .mq-avatar-option-art { width:58px; height:58px; } .mq-avatar-option-copy strong { font-size:.7rem; } .mq-avatar-option-copy small { font-size:.56rem; } }

.mq-profile-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mq-profile-detail-grid .mq-profile-metric { min-height:70px; box-shadow:none; border-color:#e1eaf4; background:#f9fcff; }

@media (min-width: 600px) {
	.mq-profile-content { width:min(100%,760px); }
	.mq-profile-actions { width:min(78%,620px); }
}
@media (max-width: 390px) {
	.mq-profile-identity { grid-template-columns:auto minmax(0,1fr); }
	.mq-profile-edit { grid-column:1 / 3; width:100%; height:36px; }
	.mq-profile-metric { flex-direction:column; justify-content:center; text-align:center; gap:4px; padding-inline:4px; }
	.mq-profile-metric > span { width:32px; height:32px; }
	.mq-profile-metric small { font-size:.52rem; }
	.mq-profile-columns { grid-template-columns:1fr; }
	.mq-profile-preferences article { grid-template-columns:29px minmax(0,1fr); padding:6px; }
	.mq-profile-preferences article > span { width:28px; height:28px; }
}
@media (max-height: 760px) {
	.mq-shell[data-screen="profil"] .mq-app { gap:6px; padding-top:max(7px,env(safe-area-inset-top)); padding-bottom:max(7px,env(safe-area-inset-bottom)); }
	.mq-shell[data-screen="profil"] .mq-top { height:58px; }
	.mq-shell[data-screen="profil"] .mq-avatar { width:42px; height:42px; font-size:1rem; }
	.mq-shell[data-screen="profil"] .mq-avatar b { min-width:19px; height:19px; }
	.mq-shell[data-screen="profil"] .mq-chip .mq-coin { width:29px; height:29px; }
	.mq-shell[data-screen="profil"] .mq-chip .mq-plus { width:28px; height:28px; }
	.mq-shell[data-screen="profil"] .mq-icon-btn { width:31px; height:31px; }
	.mq-profile-heading { min-height:37px; }
	.mq-profile-identity { padding:9px; }
	.mq-profile-avatar-large { width:68px; height:68px; }
	.mq-profile-metric { min-height:59px; }
	.mq-profile-panel { padding:9px; }
}

/* Ajustement de densité mobile : reproduit les proportions de la maquette 9:16
   sans masquer les libellés ni imposer un second écran. */
@media (max-width: 500px) {
	.mq-profile-screen { gap:6px; }
	.mq-profile-heading { min-height:38px; grid-template-columns:36px 1fr 36px; }
	.mq-profile-heading button { width:34px; height:34px; }
	.mq-profile-heading h1 { font-size:1.35rem; }
	.mq-profile-content { gap:7px; }
	.mq-profile-identity { min-height:99px; grid-template-columns:76px minmax(0,1fr) 84px; gap:8px; padding:8px 10px; border-radius:22px; }
	.mq-profile-avatar-large { width:72px; height:72px; padding:3px; }
	.mq-profile-avatar-large > button { width:28px; height:28px; border-width:2px; }
	.mq-profile-identity-copy h2 { font-size:1.12rem; }
	.mq-profile-identity-copy > p { margin:2px 0 4px; font-size:.62rem; }
	.mq-profile-level-line { gap:4px; margin-bottom:3px; }
	.mq-profile-level-line > b { padding:3px 7px; font-size:.59rem; }
	.mq-profile-level-line > span { font-size:.56rem; }
	.mq-profile-xp { height:6px; }
	.mq-profile-edit { min-width:0; width:84px; height:34px; padding:0 8px!important; gap:4px; font-size:.64rem!important; }
	.mq-profile-edit svg { width:14px; height:14px; }

	.mq-profile-metrics { gap:5px; }
	.mq-profile-metric { min-height:61px; padding:5px 3px; border-radius:17px; flex-direction:column; justify-content:center; text-align:center; gap:2px; }
	.mq-profile-metric > span { width:28px; height:28px; }
	.mq-profile-metric small { margin:0; font-size:.51rem; line-height:1; }
	.mq-profile-metric strong { font-size:.82rem; line-height:1; max-width:100%; }

	.mq-profile-columns { gap:7px; }
	.mq-profile-panel { padding:8px; border-radius:19px; }
	.mq-profile-panel > h3 { margin-bottom:5px; gap:5px; font-size:.74rem; }
	.mq-profile-panel > h3 svg { width:16px; height:16px; }
	.mq-profile-panel-body { gap:3px; }
	.mq-profile-progress-row { grid-template-columns:24px minmax(0,1fr); gap:5px; padding:3px 5px; border-radius:9px; }
	.mq-profile-row-icon { width:22px; height:22px; border-radius:7px; }
	.mq-profile-progress-row p { margin-bottom:2px; font-size:.48rem; }
	.mq-profile-progress-row p b { font-size:.47rem; }
	.mq-profile-meter { height:4px; }
	.mq-profile-performance dl > div { min-height:25px; }
	.mq-profile-performance dt { font-size:.53rem; }
	.mq-profile-performance dd { font-size:.65rem; }

	.mq-profile-success { padding-bottom:8px; }
	.mq-profile-achievements { gap:3px; }
	.mq-profile-achievement { gap:3px; }
	.mq-profile-achievement > span { width:42px; height:47px; border-width:3px; }
	.mq-profile-achievement small { font-size:.47rem; line-height:1.05; }

	.mq-profile-preferences > div { gap:4px; }
	.mq-profile-preferences article { grid-template-columns:25px minmax(0,1fr); column-gap:4px; padding:5px; border-radius:10px; }
	.mq-profile-preferences article > span { width:24px; height:24px; }
	.mq-profile-preferences small { font-size:.43rem; }
	.mq-profile-preferences strong { font-size:.56rem; }

	.mq-profile-actions { width:86%; gap:5px; }
	.mq-profile-actions .mq-btn { min-height:39px; font-size:.72rem; }
	.mq-profile-actions .mq-btn-ghost { min-height:35px; }
}

/* Calibration finale sur téléphone 9:16 : exploite l’espace disponible pour
   garder les statistiques lisibles tout en laissant les actions stables. */
@media (min-width: 391px) and (max-width: 500px) and (min-height: 800px) {
	.mq-profile-identity { min-height:108px; grid-template-columns:82px minmax(0,1fr) 88px; padding:10px 11px; }
	.mq-profile-avatar-large { width:78px; height:78px; }
	.mq-profile-identity-copy h2 { font-size:1.2rem; }
	.mq-profile-identity-copy > p { font-size:.66rem; }
	.mq-profile-edit { width:88px; height:36px; font-size:.68rem!important; }
	.mq-profile-metric { min-height:68px; }
	.mq-profile-metric > span { width:31px; height:31px; }
	.mq-profile-metric small { font-size:.55rem; }
	.mq-profile-metric strong { font-size:.9rem; }
	.mq-profile-panel { padding:9px; }
	.mq-profile-panel > h3 { font-size:.79rem; margin-bottom:6px; }
	.mq-profile-progress-row { grid-template-columns:27px minmax(0,1fr); padding:4px 6px; }
	.mq-profile-row-icon { width:25px; height:25px; }
	.mq-profile-progress-row p { font-size:.52rem; margin-bottom:3px; }
	.mq-profile-progress-row p b { font-size:.51rem; }
	.mq-profile-performance dl > div { min-height:29px; }
	.mq-profile-performance dt { font-size:.57rem; }
	.mq-profile-performance dd { font-size:.7rem; }
	.mq-profile-achievement > span { width:49px; height:55px; }
	.mq-profile-achievement small { font-size:.51rem; }
	.mq-profile-preferences article { padding:7px; grid-template-columns:29px minmax(0,1fr); }
	.mq-profile-preferences article > span { width:28px; height:28px; }
	.mq-profile-preferences small { font-size:.47rem; }
	.mq-profile-preferences strong { font-size:.62rem; }
}

/* ------------------------------------------------------------------
   MemoQuest 6.19.0 — Code promo premium, isolé en bas de la Boutique
   ------------------------------------------------------------------ */
.mq-promo-card {
	position:relative;isolation:isolate;overflow:hidden;display:grid;gap:13px;padding:16px;border-radius:26px;
	background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(236,251,255,.96));
	border:1px solid rgba(73,205,224,.3);box-shadow:0 14px 34px rgba(12,72,139,.14),inset 0 1px 0 #fff;
}
.mq-promo-aura { pointer-events:none;position:absolute;z-index:-2;inset:-55%;background:conic-gradient(from 20deg,transparent,rgba(32,211,218,.22),transparent 30%,rgba(69,139,242,.18),transparent 62%,rgba(255,197,63,.18),transparent);animation:mq-promo-aura 14s linear infinite; }
.mq-promo-shine { pointer-events:none;position:absolute;z-index:-1;top:-80%;left:-35%;width:48%;height:260%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:mq-promo-shine 6.5s ease-in-out infinite; }
.mq-promo-head { position:relative;z-index:1;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:12px; }
.mq-promo-focus { width:100%;text-align:left;cursor:text;border-radius:18px;touch-action:manipulation; }
.mq-promo-focus:active { transform:none; }
.mq-promo-icon { width:58px;aspect-ratio:1;display:grid;place-items:center;border-radius:19px;color:#fff;background:linear-gradient(145deg,#20d6d8,#2d83e8);border:3px solid #fff;box-shadow:0 9px 20px rgba(24,135,201,.24),0 0 0 4px rgba(34,205,218,.09); }
.mq-promo-icon svg { width:31px;height:31px; }
.mq-promo-head h3 { margin:0;color:#123c80;font-size:1.2rem;line-height:1;font-weight:1000;letter-spacing:-.035em; }
.mq-promo-head small { display:block;margin-top:5px;color:#627c9f;font-size:.73rem;line-height:1.3;font-weight:750; }
.mq-promo-form { position:relative;z-index:1;display:grid;gap:7px; }
.mq-promo-form > label { color:#24558b;font-size:.69rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase; }
.mq-promo-entry { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }
.mq-promo-entry input { position:relative;z-index:2;pointer-events:auto;touch-action:auto;-webkit-user-select:text;user-select:text;caret-color:#123d80;min-width:0;height:52px;padding:0 15px;border-radius:17px;border:2px solid #d5e7ef;background:rgba(255,255,255,.94);color:#123d80;font:1000 1.05rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;text-align:center;outline:none;box-shadow:inset 0 2px 7px rgba(17,72,126,.05);transition:border-color .2s,box-shadow .2s,transform .2s; }
.mq-promo-entry input::placeholder { color:#a7b9cb;letter-spacing:.15em; }
.mq-promo-entry input:focus { border-color:#26cbd5;box-shadow:0 0 0 4px rgba(38,203,213,.12),inset 0 2px 7px rgba(17,72,126,.04); }
.mq-promo-entry button { position:relative;z-index:2;pointer-events:auto;touch-action:manipulation;min-width:116px;height:52px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;border:0;border-radius:17px;color:#fff;background:linear-gradient(145deg,#20d6d1,#267fe6);font-family:inherit;font-size:.83rem;line-height:1;font-weight:950;box-shadow:0 9px 19px rgba(29,131,202,.24),inset 0 1px 0 rgba(255,255,255,.42);cursor:pointer;transition:transform .16s,filter .16s; }
.mq-promo-entry button:active { transform:scale(.97); }
.mq-promo-entry button svg { width:21px;height:21px; }
.mq-promo-form > small { color:#7286a2;font-size:.66rem;font-weight:750; }
.mq-promo-card.is-error { animation:mq-promo-error .42s ease both; }
.mq-promo-card.is-error .mq-promo-entry input { border-color:#f15a70;box-shadow:0 0 0 4px rgba(241,90,112,.1); }
.mq-promo-card.is-error .mq-promo-form > small { color:#dd3f58; }
.mq-promo-card.is-used { background:linear-gradient(145deg,#f7fffb,#ebfbf5);border-color:rgba(54,194,115,.25); }
.mq-promo-card.is-used .mq-promo-icon { background:linear-gradient(145deg,#62ea7b,#1aa655); }
.mq-promo-used { position:relative;z-index:1;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;column-gap:10px;padding:11px 12px;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid rgba(44,178,104,.18); }
.mq-promo-used > span { grid-row:1/3;width:38px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#5de977,#1ba958);box-shadow:0 5px 12px rgba(25,155,81,.2); }
.mq-promo-used svg { width:23px;height:23px; }
.mq-promo-used strong { color:#177544;font-size:.87rem;font-weight:950; }
.mq-promo-used small { color:#5d8a73;font-size:.66rem;font-weight:750; }
.mq-promo-celebration { position:absolute;z-index:9999;inset:0;display:grid;place-items:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .34s ease; }
.mq-promo-celebration.is-on { opacity:1;pointer-events:auto; }
.mq-promo-backdrop { position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(12,134,194,.36),rgba(3,21,61,.72));saturate(1.1);saturate(1.1); }
.mq-promo-reward { position:relative;z-index:3;width:min(88vw,360px);display:grid;justify-items:center;overflow:hidden;padding:28px 24px 22px;border-radius:34px;background:linear-gradient(155deg,#fff,#edfcff 58%,#e7f7ff);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 80px rgba(0,32,93,.36),inset 0 1px 0 #fff;transform:translateY(28px) scale(.82);opacity:0; }
.mq-promo-celebration.is-on .mq-promo-reward { animation:mq-promo-reward-in .78s cubic-bezier(.18,1.25,.28,1) forwards; }
.mq-promo-reward-rays { position:absolute;inset:-60%;z-index:-1;background:repeating-conic-gradient(from 0deg,rgba(34,210,215,.18) 0 7deg,transparent 7deg 18deg);animation:mq-promo-aura 12s linear infinite; }
.mq-promo-reward-coin { width:94px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#fff3a2;background:radial-gradient(circle at 35% 28%,#fff3a2 0 8%,#ffd34d 12% 52%,#e89d18 55% 70%,#ffc12e 72%);border:6px solid #fff6bb;box-shadow:0 0 0 7px rgba(255,203,53,.13),0 14px 30px rgba(188,118,14,.28),inset 0 2px 5px rgba(255,255,255,.65);animation:mq-promo-coin-float 1.4s ease-in-out infinite alternate; }
.mq-promo-reward-coin svg { width:52px;height:52px; }
.mq-promo-reward p { margin:16px 0 1px;color:#17a9b4;font-size:.7rem;font-weight:1000;letter-spacing:.12em; }
.mq-promo-reward > strong { color:#113d81;font-size:clamp(2.4rem,13vw,4rem);line-height:1;font-weight:1000;letter-spacing:-.055em;text-shadow:0 2px 0 #fff; }
.mq-promo-reward h3 { margin:1px 0 8px;color:#123d80;font-size:1.12rem;font-weight:950; }
.mq-promo-reward small { color:#627d9e;font-size:.76rem;font-weight:800; }
.mq-promo-reward small b { color:#123d80; }
.mq-promo-reward button { margin-top:18px;min-width:160px;height:46px;border:0;border-radius:16px;color:#fff;background:linear-gradient(145deg,#22d4d1,#287fe4);font-family:inherit;font-size:.88rem;line-height:1;font-weight:950;box-shadow:0 9px 20px rgba(29,129,198,.23);cursor:pointer; }
.mq-promo-particle { position:absolute;z-index:2;left:50%;top:50%;width:12px;aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle at 34% 28%,#fff8b3,#ffd03d 55%,#e89916 58%);box-shadow:0 0 10px rgba(255,216,72,.8);transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.2); }
.mq-promo-celebration.is-on .mq-promo-particle { animation:mq-promo-particle 1.25s cubic-bezier(.16,.8,.2,1) calc(var(--i) * 17ms) both; }
@keyframes mq-promo-aura { to { transform:rotate(360deg); } }
@keyframes mq-promo-shine { 0%,55% { transform:translateX(-80%) rotate(22deg);opacity:0 } 66% { opacity:.8 } 85%,100% { transform:translateX(340%) rotate(22deg);opacity:0 } }
@keyframes mq-promo-error { 0%,100%{transform:translateX(0)} 22%{transform:translateX(-7px)} 44%{transform:translateX(6px)} 66%{transform:translateX(-4px)} 84%{transform:translateX(2px)} }
@keyframes mq-promo-reward-in { 0%{opacity:0;transform:translateY(28px) scale(.82)} 70%{opacity:1;transform:translateY(-5px) scale(1.03)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes mq-promo-coin-float { to { transform:translateY(-6px) rotate(3deg) } }
@keyframes mq-promo-particle { 0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.2)} 18%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1)} }
[data-motion="calme"] .mq-promo-aura,[data-motion="calme"] .mq-promo-shine,[data-motion="calme"] .mq-promo-reward-rays,[data-motion="calme"] .mq-promo-reward-coin,[data-motion="calme"] .mq-promo-particle { animation:none!important; }
@media (max-width:390px) { .mq-promo-card{padding:14px;border-radius:23px}.mq-promo-entry{grid-template-columns:minmax(0,1fr) 104px}.mq-promo-entry button{min-width:104px;padding-inline:10px}.mq-promo-entry button span{font-size:.75rem} }

/* =========================================================================
   THÈME GRENAT 6.26.0 — calme, premium et strictement isolé
   Aucun sélecteur de ce bloc n'agit hors data-skin="grenat".
   ========================================================================= */
.mq-shell[data-skin="grenat"] {
  --ciel-1:#4a2029; --ciel-2:#642d39; --ciel-3:#4c202a; --ciel-4:#36161e; --sable:#241015;
  --blanc:#fff8f3; --encre:#4a1720; --encre-2:#7d5960; --encre-3:#ae8d90;
  --turq:#a92f4d; --turq-2:#7e2138; --bleu:#9d2b48; --bleu-2:#681a2d;
  --degrade:linear-gradient(112deg,#b33b59 0%,#8d263f 54%,#671a2d 100%);
  --past-menthe:#f8ece7; --past-bleu:#f7e9e5; --past-lilas:#f3e4e7;
  --past-creme:#fff5ed; --past-rose:#f9e6e7; --past-ciel:#faefeb;
  --ombre:0 2px 4px rgba(55,15,24,.05),0 8px 20px rgba(55,15,24,.14);
  --ombre-forte:0 5px 12px rgba(42,10,17,.10),0 18px 42px rgba(42,10,17,.22);
  --mq-grenat-ivory:#fff8f3; --mq-grenat-ivory-2:#f7eae4;
  --mq-grenat-wine:#6a1c30; --mq-grenat-ruby:#9d2b48; --mq-grenat-rose:#c45a70;
  --mq-grenat-champagne:#d9ae7d; --mq-grenat-line:#e7c7a9; --mq-grenat-ink:#481620;
  background:
    radial-gradient(ellipse at 50% -8%,rgba(218,116,132,.24) 0%,rgba(133,45,63,.10) 35%,transparent 62%),
    radial-gradient(ellipse at 50% 54%,rgba(126,48,62,.18) 0%,transparent 58%),
    linear-gradient(180deg,#4a2029 0%,#5a2733 31%,#431b25 68%,#281118 100%);
}

.mq-ambiance > .mq-grenat-shards { display:none; }
.mq-ambiance > .mq-night-moon,
.mq-ambiance > .mq-night-stars,
.mq-ambiance > .mq-night-constellations,
.mq-ambiance > .mq-night-haze { display:none; }
.mq-shell[data-skin="grenat"] .mq-ambiance {
  contain:strict;
  background:
    radial-gradient(circle at 50% 14%,rgba(255,213,202,.08),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(24,5,10,.18));
}
.mq-shell[data-skin="grenat"] .mq-ambiance::before {
  content:""; position:absolute; inset:-12%; opacity:.30; pointer-events:none;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,210,198,.42) 0 1px,transparent 2px),
    radial-gradient(circle at 80% 26%,rgba(255,210,198,.34) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 24% 70%,rgba(233,139,154,.31) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 78%,rgba(255,210,198,.30) 0 1.3px,transparent 2.4px),
    radial-gradient(circle at 48% 45%,rgba(255,225,208,.24) 0 1px,transparent 2px);
  background-size:180px 170px,230px 210px,260px 240px,310px 280px,360px 330px;
  animation:mq-grenat-dust 24s linear infinite;
  will-change:transform;
}
.mq-shell[data-skin="grenat"] .mq-ambiance::after {
  content:""; position:absolute; inset:auto 0 0; height:25%; opacity:.25; pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(25,7,12,.32)),
    radial-gradient(ellipse at 12% 100%,rgba(158,48,73,.38),transparent 34%),
    radial-gradient(ellipse at 88% 100%,rgba(158,48,73,.34),transparent 36%);
}
.mq-shell[data-skin="grenat"] .mq-ambiance i { border-radius:50%; }
.mq-shell[data-skin="grenat"] .mq-ambiance i:nth-child(1) {
  width:78%;height:35%;left:11%;top:-5%;
  background:linear-gradient(103deg,transparent 12%,rgba(255,224,211,.12) 36%,transparent 54%),linear-gradient(77deg,transparent 28%,rgba(255,217,207,.08) 46%,transparent 63%);
  filter:blur(8px);transform-origin:50% 0;animation:mq-grenat-rays 15s ease-in-out infinite alternate;
}
.mq-shell[data-skin="grenat"] .mq-ambiance i:nth-child(2) {
  width:58vmax;height:58vmax;right:-24vmax;top:20vmax;
  background:radial-gradient(circle,rgba(196,77,99,.13),transparent 64%);
  animation:mq-grenat-orb 28s ease-in-out infinite alternate;
}
.mq-shell[data-skin="grenat"] .mq-ambiance i:nth-child(3) {
  width:52vmax;height:42vmax;left:-20vmax;bottom:-12vmax;
  background:radial-gradient(ellipse,rgba(220,132,135,.10),transparent 65%);
  animation:mq-grenat-orb-b 34s ease-in-out infinite alternate;
}
.mq-shell[data-skin="grenat"] .mq-ambiance > .mq-grenat-shards {
  display:block;position:absolute;pointer-events:none;z-index:1;opacity:.16;will-change:transform;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 220'%3E%3Cg fill='none' stroke='%23efb6ad' stroke-width='1.2' opacity='.9'%3E%3Cpath d='M24 198 67 101l39 97Z'/%3E%3Cpath d='m67 101-8 55 47 42M24 198l35-42 8-55'/%3E%3Cpath d='M244 196 283 120l35 76Z'/%3E%3Cpath d='m283 120-6 44 41 32M244 196l33-32 6-44'/%3E%3Cpath d='M151 210 177 156l24 54Z'/%3E%3C/g%3E%3C/svg%3E");
}
.mq-shell[data-skin="grenat"] .mq-grenat-shards-a { width:clamp(180px,42vw,420px);aspect-ratio:340/220;left:-5%;bottom:-1%;animation:mq-grenat-shards-a 18s ease-in-out infinite alternate; }
.mq-shell[data-skin="grenat"] .mq-grenat-shards-b { width:clamp(155px,34vw,360px);aspect-ratio:340/220;right:-7%;bottom:4%;transform:scaleX(-1);animation:mq-grenat-shards-b 22s ease-in-out infinite alternate; }
@keyframes mq-grenat-dust { to { transform:translate3d(0,-35px,0); } }
@keyframes mq-grenat-rays { to { transform:skewX(4deg) scaleX(1.08);opacity:.72; } }
@keyframes mq-grenat-orb { to { transform:translate3d(-7vmax,-4vmax,0) scale(1.1); } }
@keyframes mq-grenat-orb-b { to { transform:translate3d(6vmax,-3vmax,0) scale(1.08); } }
@keyframes mq-grenat-shards-a { to { transform:translate3d(1.5vmax,-1vmax,0);opacity:.21; } }
@keyframes mq-grenat-shards-b { to { transform:translate3d(-1.5vmax,-.7vmax,0) scaleX(-1);opacity:.20; } }

/* Bandeau et navigation */
.mq-shell[data-skin="grenat"] .mq-top,
.mq-shell[data-skin="grenat"] .mq-nav {
  background:linear-gradient(160deg,rgba(255,250,246,.98),rgba(247,234,228,.97));
  border:1px solid rgba(225,187,151,.75);
  box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(36,7,14,.18);
}
.mq-shell[data-skin="grenat"] .mq-top { color:var(--mq-grenat-ink); }
.mq-shell[data-skin="grenat"] .mq-avatar { background:linear-gradient(145deg,#fff7f0,#ead3c7);border-color:#fff7ef;box-shadow:0 0 0 2px rgba(216,169,124,.58),0 6px 16px rgba(79,16,29,.16); }
.mq-shell[data-skin="grenat"] .mq-avatar b { background:linear-gradient(145deg,#b13b58,#7b1f35);border-color:#fff7ef; }
.mq-shell[data-skin="grenat"] .mq-xp { background:#eaded8; }
.mq-shell[data-skin="grenat"] .mq-xp i { background:linear-gradient(90deg,#8d263f,#c55c70); }
.mq-shell[data-skin="grenat"] .mq-chip,
.mq-shell[data-skin="grenat"] .mq-icon-btn { background:rgba(255,250,246,.72);color:var(--mq-grenat-wine); }
.mq-shell[data-skin="grenat"] .mq-chip .mq-plus { background:linear-gradient(145deg,#b33a57,#7b1f35); }
.mq-shell[data-skin="grenat"] .mq-icon-btn:active,
.mq-shell[data-skin="grenat"] .mq-chip:active { background:#f3ded8; }
.mq-shell[data-skin="grenat"] .mq-nav button { color:#a27e79; }
.mq-shell[data-skin="grenat"] .mq-nav button.is-on { color:#8d263f;background:linear-gradient(180deg,#f9e9e6,#f3dcd8); }
.mq-shell[data-skin="grenat"] .mq-nav button.is-on::after { background:#a82f4d; }

/* En-têtes sur le fond sombre */
.mq-shell[data-skin="grenat"] .mq-view[data-view="boutique"] > div:first-child .mq-title,
.mq-shell[data-skin="grenat"] .mq-view[data-view="boutique"] > div:first-child .mq-lede,
.mq-shell[data-skin="grenat"] .mq-settings-head .mq-title,
.mq-shell[data-skin="grenat"] .mq-online-head .mq-title,
.mq-shell[data-skin="grenat"] .mq-setup-copy .mq-title,
.mq-shell[data-skin="grenat"] .mq-histoire-titre,
.mq-shell[data-skin="grenat"] .mq-profile-heading h1 { color:#fff5ee;text-shadow:0 2px 12px rgba(26,4,10,.30); }
.mq-shell[data-skin="grenat"] .mq-view[data-view="boutique"] > div:first-child .mq-lede,
.mq-shell[data-skin="grenat"] .mq-online-head .mq-eyebrow,
.mq-shell[data-skin="grenat"] .mq-settings-head .mq-eyebrow,
.mq-shell[data-skin="grenat"] .mq-setup-copy .mq-eyebrow { color:#e8b5aa; }
.mq-shell[data-skin="grenat"] .mq-degrade-texte { background:linear-gradient(100deg,#fff6ef,#f3d1c8 55%,#e4ac9d);-webkit-background-clip:text;background-clip:text;color:transparent; }

/* Accueil apaisé */
.mq-shell[data-skin="grenat"] .mq-wordmark span { color:#d8a27f; }
.mq-shell[data-skin="grenat"] .mq-wordmark b { color:#fff3ea; }

.mq-shell[data-skin="grenat"] .mq-demo-card { border-color:#f4d1bd;background:linear-gradient(155deg,#8f2a45,#571a2a);box-shadow:0 9px 24px rgba(32,5,11,.25); }
.mq-shell[data-skin="grenat"] .mq-demo-seal { background:linear-gradient(145deg,#c36b73,#7f263b);border-color:#fff3e9;box-shadow:0 5px 16px rgba(57,10,19,.28); }

.mq-shell[data-skin="grenat"] .mq-btn-primary,
.mq-shell[data-skin="grenat"] .mq-play {
  color:#fff8f2;background-color:#8d263f;background-image:linear-gradient(112deg,#b33b59,#8d263f 56%,#671a2d);
  border:1px solid rgba(232,184,143,.72);box-shadow:0 4px 0 #5d1728,0 10px 24px rgba(46,8,16,.30);text-shadow:0 1px 2px rgba(36,5,11,.28);
}
.mq-shell[data-skin="grenat"] .mq-btn-primary:active { box-shadow:0 1px 0 #5d1728; }
.mq-shell[data-skin="grenat"] .mq-btn-ghost,
.mq-shell[data-skin="grenat"] .mq-foot .mq-btn { background:rgba(255,249,245,.94);color:#672033;border:1px solid rgba(226,190,161,.72); }

/* Boutique, code promo et réglages */
.mq-shell[data-skin="grenat"] .mq-view[data-view="boutique"] .mq-scroll,
.mq-shell[data-skin="grenat"] .mq-settings-scroll { scrollbar-color:rgba(220,174,143,.55) transparent; }
.mq-shell[data-skin="grenat"] .mq-opt.is-on,
.mq-shell[data-skin="grenat"] .mq-theme-option.is-active { border-color:#b23a56;box-shadow:0 0 0 3px rgba(177,55,82,.14),0 10px 26px rgba(61,12,22,.16); }
.mq-shell[data-skin="grenat"] .mq-skin-grenat {
  --a:#7d2438 !important;--b:#3d151f !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,217,196,.28),transparent 28%),
    linear-gradient(145deg,#8c2c45,#561c2c 58%,#2f1118) !important;
}
.mq-shell[data-skin="grenat"] .mq-skin-grenat::after { content:"◇";color:#e8bd90;text-shadow:0 2px 6px rgba(47,7,14,.32); }
.mq-shell[data-skin="grenat"] .mq-promo-card,
.mq-shell[data-skin="grenat"] .mq-theme-panel,
.mq-shell[data-skin="grenat"] .mq-settings-row,
.mq-shell[data-skin="grenat"] .mq-reset-row {
  background:linear-gradient(155deg,rgba(255,250,246,.99),rgba(247,235,229,.98));
  border:1px solid rgba(225,190,160,.72);box-shadow:0 9px 24px rgba(48,9,17,.13);
}
.mq-shell[data-skin="grenat"] .mq-promo-icon,
.mq-shell[data-skin="grenat"] .mq-settings-icon { background:linear-gradient(145deg,#f7e7e2,#ead2cc);color:#982d48; }
.mq-shell[data-skin="grenat"] .mq-promo-entry,
.mq-shell[data-skin="grenat"] .mq-input,
.mq-shell[data-skin="grenat"] .mq-premium-field { background:#fffaf7;border-color:#dfc3b4;color:#4a1720; }
.mq-shell[data-skin="grenat"] .mq-range { --range-color:#a62f4c; }
.mq-shell[data-skin="grenat"] .mq-switch { background:#e3d4cf; }
.mq-shell[data-skin="grenat"] .mq-view[data-view="reglages"] .mq-settings-row[aria-pressed="true"] .mq-switch { background:linear-gradient(105deg,#bd5268,#8d263f); }
.mq-shell[data-skin="grenat"] .mq-settings-back { background:linear-gradient(155deg,#fff9f5,#f2e2dc);border:1px solid rgba(226,190,161,.72);color:#5b1a2a; }

/* Profil */
.mq-shell[data-skin="grenat"] .mq-profile-heading button { background:rgba(255,248,243,.92);color:#6d2032;border:1px solid rgba(225,188,156,.72); }
.mq-shell[data-skin="grenat"] .mq-profile-identity,
.mq-shell[data-skin="grenat"] .mq-profile-metric,
.mq-shell[data-skin="grenat"] .mq-profile-panel,
.mq-shell[data-skin="grenat"] .mq-avatar-picker {
  background:linear-gradient(155deg,rgba(255,250,246,.99),rgba(247,235,229,.98));
  border:1px solid rgba(225,190,160,.72);box-shadow:0 10px 28px rgba(45,8,15,.14);
}
.mq-shell[data-skin="grenat"] .mq-profile-actions {
  background:transparent;
  border:0;
  box-shadow:none;
}
.mq-shell[data-skin="grenat"] .mq-profile-avatar-large { box-shadow:0 0 0 3px #f6ddcd,0 0 0 5px #b23a56,0 11px 26px rgba(50,9,17,.20); }
.mq-shell[data-skin="grenat"] .mq-profile-meter,
.mq-shell[data-skin="grenat"] .mq-profile-xp { background:#eadbd5; }
.mq-shell[data-skin="grenat"] .mq-profile-meter i,
.mq-shell[data-skin="grenat"] .mq-profile-xp i { background:linear-gradient(90deg,#8d263f,#c35c70); }
.mq-shell[data-skin="grenat"] .mq-profile-edit { background:linear-gradient(110deg,#a5324e,#7a2035);color:#fff7f1;border-color:#dfae7b; }
.mq-shell[data-skin="grenat"] .mq-avatar-option.is-selected { border-color:#b23a56;box-shadow:0 0 0 3px rgba(178,58,86,.16),0 10px 24px rgba(61,12,22,.16); }

/* Multijoueur */
.mq-shell[data-skin="grenat"] .mq-online-head .mq-setup-back { background:rgba(255,248,243,.92);color:#6f2033;border:1px solid rgba(225,188,156,.7); }

.mq-shell[data-skin="grenat"] .mq-online-hero-icon,
.mq-shell[data-skin="grenat"] .mq-competitive-card > span:first-child { background:linear-gradient(145deg,#a93853,#721d32);color:#fff8f0;border-color:#e1b27f; }

/* Plateau et cartes */
.mq-shell[data-skin="grenat"] .mq-board-wrap { isolation:isolate;border-radius:clamp(14px,2.5vmin,24px); }
.mq-shell[data-skin="grenat"] .mq-board-wrap::before {
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(129,44,58,.22),rgba(35,8,14,.08) 70%,transparent 100%);
}
.mq-shell[data-skin="grenat"] .mq-score-chip,
.mq-shell[data-skin="grenat"] .mq-game-action {
  background:linear-gradient(155deg,rgba(255,250,246,.96),rgba(244,230,224,.95)) !important;
  border-color:rgba(224,188,155,.72);box-shadow:0 4px 14px rgba(40,7,14,.18);
}
.mq-shell[data-skin="grenat"] .mq-score-chip small,
.mq-shell[data-skin="grenat"] .mq-score-chip strong,
.mq-shell[data-skin="grenat"] .mq-game-action svg { color:#551927; }
.mq-shell[data-skin="grenat"] .mq-score-chip.is-turn { border-color:#c79654;background:linear-gradient(155deg,#fffaf5,#f5e6dd)!important;box-shadow:0 0 0 2px rgba(199,150,84,.16),0 6px 18px rgba(55,10,20,.18); }
.mq-shell[data-skin="grenat"] .mq-turn-dot { background:#b23b57;box-shadow:0 0 0 3px rgba(178,59,87,.14),0 0 8px rgba(178,59,87,.65); }
.mq-shell[data-skin="grenat"] .mq-card { border-radius:clamp(9px,2vmin,18px); }
.mq-shell[data-skin="grenat"] .mq-face { border-color:#e8c49e; }
.mq-shell[data-skin="grenat"] .mq-back {
  background:
    radial-gradient(circle at 26% 16%,rgba(255,244,232,.24),transparent 24%),
    radial-gradient(circle at 74% 82%,rgba(255,205,168,.09),transparent 28%),
    linear-gradient(152deg,#a63a55 0%,#812b43 42%,#5c1d31 76%,#471625 100%);
  box-shadow:inset 0 0 0 1px rgba(255,245,232,.18),inset 0 -10px 18px rgba(35,7,15,.18),0 6px 14px rgba(30,6,13,.22);
}
.mq-shell[data-skin="grenat"] .mq-back::before {
  inset:0;background:no-repeat center/48% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e8bd8e' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M32 8 50 25 32 56 14 25Z'/%3E%3Cpath d='m14 25 18 8 18-8M32 8v25M22 17l10 16 10-16M32 33v23'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 3px 5px rgba(30,5,12,.26));opacity:.98;
}
.mq-shell[data-skin="grenat"] .mq-back::after {
  content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;opacity:.38;
  background:linear-gradient(112deg,transparent 0 36%,rgba(255,244,231,.42) 48%,transparent 60% 100%);transform:translateX(-120%);
}
.mq-shell[data-skin="grenat"] .mq-card.is-open .mq-back::after { animation:mq-grenat-card-shimmer .72s ease-out; }
.mq-shell[data-skin="grenat"] .mq-front {
  background:linear-gradient(165deg,#fffaf6 0%,#f3e5df 100%);box-shadow:0 4px 10px rgba(42,7,15,.20);color:#4a1720;
}
.mq-shell[data-skin="grenat"] .mq-board[data-category="animaux"] .mq-front { background:#3b151e; }
.mq-shell[data-skin="grenat"] .mq-front .mq-card-name { color:#fff9f4; text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 4px rgba(0,0,0,.52); }
.mq-shell[data-skin="grenat"] .mq-view[data-view="histoire"] .mq-degrade-texte { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff4ed; text-shadow:0 2px 12px rgba(18,2,7,.32); }
.mq-shell[data-skin="grenat"] .mq-view[data-view="histoire"] .mq-histoire-titre .mq-title,
.mq-shell[data-skin="grenat"] .mq-view[data-view="histoire"] .mq-histoire-titre .mq-eyebrow,
.mq-shell[data-skin="grenat"] .mq-view[data-view="histoire"] .mq-jalon-txt strong { color:#fff6f0; text-shadow:0 2px 10px rgba(18,2,7,.26); }
.mq-shell[data-skin="grenat"] .mq-view[data-view="histoire"] .mq-jalon.is-locked .mq-jalon-txt strong { color:rgba(255,246,240,.72); }
.mq-shell[data-skin="grenat"] .mq-card.is-done .mq-front { background:linear-gradient(165deg,#fff8f0,#f4e4d8); }
.mq-shell[data-skin="grenat"] .mq-card.is-done .mq-face { border-color:#dfb36f;box-shadow:0 0 0 2px rgba(219,167,99,.15),0 0 20px rgba(221,157,106,.32); }
.mq-shell[data-skin="grenat"] .mq-card.is-done .mq-front::before {
  content:"";position:absolute;inset:-15%;border-radius:50%;pointer-events:none;
  border:2px solid rgba(224,174,111,.55);animation:mq-grenat-match-ring .85s ease-out both;
}
.mq-shell[data-skin="grenat"] .mq-card.is-wrong .mq-face { border-color:#d8787d;box-shadow:0 0 0 2px rgba(201,80,91,.13),0 4px 12px rgba(42,7,15,.22); }
.mq-shell[data-skin="grenat"] .mq-card.is-hint .mq-back { animation:mq-grenat-hint .72s ease-in-out 3; }
.mq-card-preview-layer[data-skin="grenat"] .mq-card-preview-surface { border-color:#e7c39d;background:linear-gradient(152deg,#a63a55 0%,#812b43 42%,#5c1d31 76%,#471625 100%);box-shadow:0 18px 40px rgba(36,5,12,.32),0 0 0 3px rgba(207,143,103,.18); }
@keyframes mq-grenat-card-shimmer { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
@keyframes mq-grenat-match-ring { 0% { opacity:0;transform:scale(.75); } 30% { opacity:.8; } 100% { opacity:0;transform:scale(1.2); } }
@keyframes mq-grenat-hint { 50% { filter:brightness(1.25) saturate(1.08);box-shadow:0 0 0 3px rgba(226,175,113,.28),0 0 18px rgba(226,175,113,.40); } }

/* Résultats */
.mq-shell[data-skin="grenat"] .mq-final-result-page,
.mq-shell[data-skin="grenat"] .mq-solo-result-page { background:linear-gradient(180deg,rgba(72,23,34,.88),rgba(38,10,17,.94)); }

.mq-shell[data-skin="grenat"] .mq-final-replay,
.mq-shell[data-skin="grenat"] .mq-final-home { border-color:rgba(226,190,158,.75); }
.mq-shell[data-skin="grenat"] .mq-solo-score-card {
  background:
    radial-gradient(circle at 18% 10%,rgba(255,243,234,.72),transparent 28%),
    linear-gradient(160deg,#fffaf6 0%,#f7ece6 54%,#f2e1da 100%);
  color:#521824;
  box-shadow:0 20px 42px rgba(43,8,17,.22),inset 0 0 0 2px rgba(225,190,156,.20),inset 0 1px 0 rgba(255,255,255,.72);
}
.mq-shell[data-skin="grenat"] .mq-solo-score-card::after { color:rgba(151,59,83,.08); }
.mq-shell[data-skin="grenat"] .mq-solo-score-copy small { color:#8f3450; text-shadow:none; }
.mq-shell[data-skin="grenat"] .mq-solo-score-copy strong {
  color:#5a1a2a;
  text-shadow:0 8px 18px rgba(119,37,59,.12);
}
.mq-shell[data-skin="grenat"] .mq-solo-score-copy span { color:#9c6b45; text-shadow:none; }
.mq-shell[data-skin="grenat"] .mq-solo-rating {
  background:linear-gradient(150deg,#fffdfa,#fbf1eb);
  border-color:rgba(230,196,165,.85);
  box-shadow:0 14px 28px rgba(47,9,18,.10),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="grenat"] .mq-solo-rating > strong,
.mq-shell[data-skin="grenat"] .mq-stars-value { color:#6f2033; }

/* Réduction de mouvement : aucune animation décorative continue. */
.mq-shell[data-skin="grenat"][data-motion="calme"] .mq-ambiance::before,
.mq-shell[data-skin="grenat"][data-motion="calme"] .mq-ambiance i,
.mq-shell[data-skin="grenat"][data-motion="calme"] .mq-grenat-shards,
.mq-shell[data-skin="grenat"][data-motion="calme"] .mq-card.is-open .mq-back::after,
.mq-shell[data-skin="grenat"][data-motion="calme"] .mq-card.is-done .mq-front::before { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="grenat"] .mq-ambiance::before,
  .mq-shell[data-skin="grenat"] .mq-ambiance i,
  .mq-shell[data-skin="grenat"] .mq-grenat-shards,
  .mq-shell[data-skin="grenat"] .mq-card.is-open .mq-back::after,
  .mq-shell[data-skin="grenat"] .mq-card.is-done .mq-front::before { animation:none; }
}

/* Mise en place Grenat : sélection cohérente sans héritage turquoise. */
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-setup-steps i {
  background:rgba(119,41,57,.16);
  box-shadow:inset 0 1px 2px rgba(69,16,27,.10);
}
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-setup-steps i.is-on {
  background:linear-gradient(100deg,#b84c64,#81243a);
  box-shadow:0 2px 8px rgba(129,36,58,.24);
}
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  background:linear-gradient(145deg,#fffaf7 0%,#f3e3dd 100%);
  border-color:#aa3550;
  box-shadow:inset 0 2px 2px #fff,0 0 0 2px rgba(170,53,80,.18),0 12px 27px rgba(83,18,34,.18);
}
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 24%,#d97d90 0%,#aa3550 48%,#711e32 100%);
  border-color:#fff8f1;
  box-shadow:0 6px 14px rgba(83,18,34,.24),0 0 0 3px rgba(170,53,80,.13);
}

.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-mini-grille {
  background:linear-gradient(145deg,#fffaf7,#f0dfd8);
  box-shadow:inset 0 2px 2px #fff,0 5px 12px rgba(74,16,28,.10);
}
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-mini-grille i {
  background:linear-gradient(145deg,#c75d72,#8b273f);
  box-shadow:inset 0 1px 0 rgba(255,242,233,.55);
}

/* =========================================================================
   THÈME ARDOISE 6.26.0 — minéral, premium, animé et strictement isolé
   Tous les sélecteurs restent limités à data-skin="ardoise".
   ========================================================================= */
.mq-shell[data-skin="ardoise"] {
  --ciel-1:#111b23; --ciel-2:#182630; --ciel-3:#1d2a34; --ciel-4:#111a21; --sable:#0b1218;
  --blanc:#1d2a34; --encre:#f4f8fb; --encre-2:#b7c4cf; --encre-3:#748795;
  --turq:#58dfe9; --turq-2:#29b8c8; --bleu:#4fb6db; --bleu-2:#2488ac;
  --degrade:linear-gradient(110deg,#6debf1 0%,#45cddd 48%,#2a91b5 100%);
  --past-menthe:#1a2a31; --past-bleu:#1b2935; --past-lilas:#222a38;
  --past-creme:#242b31; --past-rose:#27252d; --past-ciel:#172832;
  --ombre:0 2px 4px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.28);
  --ombre-forte:0 5px 12px rgba(0,0,0,.18),0 18px 42px rgba(0,0,0,.42);
  --mq-slate-deep:#0b1319; --mq-slate:#17232c; --mq-slate-2:#22313b;
  --mq-slate-panel:rgba(28,42,52,.94); --mq-slate-panel-2:rgba(18,29,37,.96);
  --mq-slate-line:rgba(176,201,216,.34); --mq-slate-silver:#d7e1e8;
  --mq-slate-cyan:#61e4ee; --mq-slate-cyan-deep:#2695b2;
  background:
    radial-gradient(ellipse at 48% -10%,rgba(119,178,199,.18) 0%,rgba(41,76,92,.08) 34%,transparent 63%),
    radial-gradient(ellipse at 50% 56%,rgba(57,97,112,.12) 0%,transparent 62%),
    linear-gradient(180deg,#101a22 0%,#17242d 32%,#111c24 69%,#091117 100%);
}

.mq-shell[data-skin="ardoise"] .mq-ambiance {
  contain:strict;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.18)),
    radial-gradient(circle at 50% 18%,rgba(103,210,224,.05),transparent 34%);
}
.mq-shell[data-skin="ardoise"] .mq-ambiance::before {
  content:"";position:absolute;inset:-10%;pointer-events:none;opacity:.32;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1400'%3E%3Cg fill='none' stroke='%239db2bf' stroke-width='1.15' opacity='.46'%3E%3Cpath d='M84 0l44 128-28 109 93 94-48 126 92 113-42 150 109 119-65 147 89 122-40 212'/%3E%3Cpath d='M806 0l-52 136 31 112-103 86 57 128-84 109 35 149-105 123 61 143-88 126 42 288'/%3E%3Cpath d='M334 0l21 156-47 123 61 128-32 145 57 126-30 165 58 140-39 166 37 251'/%3E%3Cpath d='M565 0l-18 180 42 111-57 130 31 143-51 136 29 156-51 143 37 159-32 242'/%3E%3Cpath d='M0 374l163 38 115-54 122 66 127-40 136 58 126-35 111 45'/%3E%3Cpath d='M0 980l172-42 113 56 126-62 120 44 134-53 117 47 118-38'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 16% 18%,rgba(124,227,237,.35) 0 1px,transparent 2px),
    radial-gradient(circle at 79% 28%,rgba(124,227,237,.25) 0 1px,transparent 2px),
    radial-gradient(circle at 64% 72%,rgba(124,227,237,.20) 0 1px,transparent 2px);
  background-size:100% 100%,220px 210px,260px 240px,310px 290px;
  animation:mq-ardoise-drift 28s linear infinite;
  will-change:transform;
}
.mq-shell[data-skin="ardoise"] .mq-ambiance::after {
  content:"";position:absolute;inset:auto 0 0;height:28%;pointer-events:none;opacity:.35;
  background:
    linear-gradient(180deg,transparent,rgba(1,8,12,.54)),
    radial-gradient(ellipse at 18% 100%,rgba(75,140,156,.15),transparent 36%),
    radial-gradient(ellipse at 82% 100%,rgba(75,140,156,.13),transparent 38%);
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i { border-radius:0; }
.mq-shell[data-skin="ardoise"] .mq-ambiance i:nth-child(1) {
  width:76%;height:40%;left:12%;top:-5%;
  background:linear-gradient(105deg,transparent 15%,rgba(150,230,238,.10) 37%,transparent 56%),linear-gradient(75deg,transparent 28%,rgba(118,198,213,.08) 47%,transparent 64%);
  filter:blur(7px);transform-origin:50% 0;animation:mq-ardoise-rays 18s ease-in-out infinite alternate;
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i:nth-child(2) {
  width:56vmax;height:56vmax;right:-24vmax;top:18vmax;
  background:radial-gradient(circle,rgba(62,145,166,.11),transparent 65%);
  animation:mq-ardoise-orb-a 32s ease-in-out infinite alternate;
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i:nth-child(3) {
  width:52vmax;height:40vmax;left:-20vmax;bottom:-10vmax;
  background:radial-gradient(ellipse,rgba(64,125,142,.10),transparent 66%);
  animation:mq-ardoise-orb-b 38s ease-in-out infinite alternate;
}
@keyframes mq-ardoise-drift { to { transform:translate3d(0,-26px,0); } }
@keyframes mq-ardoise-rays { to { transform:skewX(3deg) scaleX(1.06);opacity:.72; } }
@keyframes mq-ardoise-orb-a { to { transform:translate3d(-6vmax,-4vmax,0) scale(1.08); } }
@keyframes mq-ardoise-orb-b { to { transform:translate3d(5vmax,-3vmax,0) scale(1.06); } }

/* Bandeau supérieur et navigation */
.mq-shell[data-skin="ardoise"] .mq-top,
.mq-shell[data-skin="ardoise"] .mq-nav {
  background:linear-gradient(155deg,rgba(38,54,65,.97),rgba(21,33,42,.98));
  border:1px solid rgba(176,201,216,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 30px rgba(0,0,0,.35);
  color:#f3f8fb;
}
.mq-shell[data-skin="ardoise"] .mq-avatar { background:linear-gradient(145deg,#2a3a45,#111b22);border-color:#b9ccd7;box-shadow:0 0 0 2px rgba(91,219,229,.28),0 6px 16px rgba(0,0,0,.30); }
.mq-shell[data-skin="ardoise"] .mq-avatar b { background:linear-gradient(145deg,#496373,#263845);border-color:#d5e2e8; }
.mq-shell[data-skin="ardoise"] .mq-xp { background:#34444f; }
.mq-shell[data-skin="ardoise"] .mq-xp i { background:linear-gradient(90deg,#65e8ef,#2ea7bd); }
.mq-shell[data-skin="ardoise"] .mq-chip,
.mq-shell[data-skin="ardoise"] .mq-icon-btn { background:rgba(255,255,255,.055);color:#f6fafc;border:1px solid rgba(195,216,227,.20); }
.mq-shell[data-skin="ardoise"] .mq-chip .mq-plus { background:linear-gradient(145deg,#42c9d6,#247f9e);color:#071219; }
.mq-shell[data-skin="ardoise"] .mq-icon-btn:active,
.mq-shell[data-skin="ardoise"] .mq-chip:active { background:rgba(95,218,230,.13); }
.mq-shell[data-skin="ardoise"] .mq-nav button { color:#899ba8; }
.mq-shell[data-skin="ardoise"] .mq-nav button.is-on { color:#63e1eb;background:linear-gradient(180deg,rgba(82,201,213,.13),rgba(47,119,138,.08)); }
.mq-shell[data-skin="ardoise"] .mq-nav button.is-on::after { background:#58dfe9;box-shadow:0 0 12px rgba(88,223,233,.60); }

/* En-têtes et identité */
.mq-shell[data-skin="ardoise"] .mq-title,
.mq-shell[data-skin="ardoise"] .mq-histoire-titre,
.mq-shell[data-skin="ardoise"] .mq-profile-heading h1 { color:#f6f9fb;text-shadow:0 2px 12px rgba(0,0,0,.35); }
.mq-shell[data-skin="ardoise"] .mq-eyebrow { color:#67dce7; }

.mq-shell[data-skin="ardoise"] .mq-degrade-texte { background:linear-gradient(100deg,#f7fbfd 0%,#bcebf0 55%,#67dce7 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.mq-shell[data-skin="ardoise"] .mq-wordmark span { color:#62d8e3; }
.mq-shell[data-skin="ardoise"] .mq-wordmark b { color:#f4f8fa; }
.mq-shell[data-skin="ardoise"] .mq-demo-card { border-color:#a8c0cc;background:linear-gradient(155deg,#2d3d47,#111b22);box-shadow:0 9px 24px rgba(0,0,0,.35); }
.mq-shell[data-skin="ardoise"] .mq-demo-seal { background:linear-gradient(145deg,#58d8e3,#267f99);border-color:#d8f4f6;color:#081319;box-shadow:0 5px 16px rgba(0,0,0,.35); }

.mq-shell[data-skin="ardoise"] .mq-btn-primary,
.mq-shell[data-skin="ardoise"] .mq-play {
  background:linear-gradient(110deg,#65e8ef 0%,#42cbd8 48%,#2c96b3 100%);
  color:#07151c;box-shadow:0 4px 0 #1b708b,0 10px 22px rgba(34,160,181,.34);
}
.mq-shell[data-skin="ardoise"] .mq-btn-ghost,
.mq-shell[data-skin="ardoise"] .mq-foot .mq-btn,
.mq-shell[data-skin="ardoise"] .mq-settings-back,
.mq-shell[data-skin="ardoise"] .mq-profile-heading button,
.mq-shell[data-skin="ardoise"] .mq-online-head .mq-setup-back {
  background:linear-gradient(155deg,rgba(37,53,64,.96),rgba(21,32,41,.98));
  color:#eaf1f5;border:1px solid rgba(180,202,214,.30);
}
.mq-shell[data-skin="ardoise"] .mq-opt.is-on,
.mq-shell[data-skin="ardoise"] .mq-theme-option.is-active,
.mq-shell[data-skin="ardoise"] .mq-carreau[aria-checked="true"] {
  border-color:#6ce5ee;box-shadow:0 0 0 3px rgba(88,223,233,.16),0 0 24px rgba(88,223,233,.22),0 10px 26px rgba(0,0,0,.32);
}
.mq-shell[data-skin="ardoise"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  background:linear-gradient(145deg,#ffffff 0%,#eef6f8 100%);
  color:#0d1820;
  border-color:#72e4ec;
  box-shadow:0 0 0 3px rgba(88,223,233,.18),0 0 24px rgba(88,223,233,.22),0 12px 28px rgba(0,0,0,.30);
}

.mq-shell[data-skin="ardoise"] .mq-view[data-view="miseEnPlace"] .mq-setup-steps i { background:rgba(129,157,172,.16); }
.mq-shell[data-skin="ardoise"] .mq-view[data-view="miseEnPlace"] .mq-setup-steps i.is-on { background:linear-gradient(90deg,#65e8ef,#2b98b4);box-shadow:0 2px 9px rgba(77,214,226,.32); }
.mq-shell[data-skin="ardoise"] .mq-skin-ardoise { background:linear-gradient(152deg,#344550 0%,#202f38 50%,#111a20 100%);border-color:#b9ccd6; }
.mq-shell[data-skin="ardoise"] .mq-skin-ardoise::before { background:no-repeat center/52% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%236ce5ee' stroke-width='2.1'%3E%3Cpath d='M32 8 49 32 32 56 15 32Z'/%3E%3Cpath d='M15 32h34M32 8v48M21 22l11 10 11-10M21 42l11-10 11 10'/%3E%3C/g%3E%3C/svg%3E"); }

/* En-têtes Ardoise : le contenu garde sa hauteur naturelle et ne chevauche jamais la liste. */
.mq-shell[data-skin="ardoise"] .mq-view[data-view="boutique"] {
  gap:clamp(10px,1.25vh,14px);
}
.mq-shell[data-skin="ardoise"] .mq-view[data-view="boutique"] > div:first-child {
  flex:0 0 auto;
  min-height:max-content;
  overflow:visible;
  padding:2px 4px 4px;
}
.mq-shell[data-skin="ardoise"] .mq-view[data-view="boutique"] > div:first-child .mq-title {
  line-height:1.04;
}
.mq-shell[data-skin="ardoise"] .mq-view[data-view="boutique"] > div:first-child .mq-lede {
  margin-top:6px;
  color:#c2ced6;
  line-height:1.35;
  overflow:visible;
}
.mq-shell[data-skin="ardoise"] .mq-view[data-view="boutique"] .mq-scroll {
  padding-top:2px;
}
.mq-shell[data-skin="ardoise"] .mq-settings-head {
  flex:0 0 auto;
  min-height:max-content;
  overflow:visible;
  padding-bottom:4px;
}
.mq-shell[data-skin="ardoise"] .mq-settings-head .mq-title {
  line-height:1.04;
}

/* Champs, curseurs et interrupteurs */
.mq-shell[data-skin="ardoise"] .mq-promo-entry,
.mq-shell[data-skin="ardoise"] .mq-input,
.mq-shell[data-skin="ardoise"] .mq-premium-field {
  background:#111b22;border-color:#445966;color:#f5f8fa;box-shadow:inset 0 1px 4px rgba(0,0,0,.34);
}
.mq-shell[data-skin="ardoise"] .mq-range { --range-color:#5bdce7; }
.mq-shell[data-skin="ardoise"] .mq-switch { background:#3c4d58; }
.mq-shell[data-skin="ardoise"] .mq-view[data-view="reglages"] .mq-settings-row[aria-pressed="true"] .mq-switch { background:linear-gradient(105deg,#69e7ee,#2d94b1); }
.mq-shell[data-skin="ardoise"] .mq-reset-button { color:#ff9aa3;border-color:rgba(255,125,137,.55); }
.mq-shell[data-skin="ardoise"] .mq-profile-meter,
.mq-shell[data-skin="ardoise"] .mq-profile-xp { background:#33444f; }
.mq-shell[data-skin="ardoise"] .mq-profile-meter i,
.mq-shell[data-skin="ardoise"] .mq-profile-xp i { background:linear-gradient(90deg,#67e8ef,#2d9bb5); }
.mq-shell[data-skin="ardoise"] .mq-profile-avatar-large { box-shadow:0 0 0 3px #2a3b46,0 0 0 5px #65dce7,0 11px 26px rgba(0,0,0,.30); }
.mq-shell[data-skin="ardoise"] .mq-profile-edit { background:linear-gradient(110deg,#5ddce6,#2b8ea9);color:#07151b;border-color:#c9e9ed; }
.mq-shell[data-skin="ardoise"] .mq-avatar-option.is-selected { border-color:#63e0e9;box-shadow:0 0 0 3px rgba(88,223,233,.16),0 10px 24px rgba(0,0,0,.28); }

/* Mode Histoire */
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-degrade-texte { background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#f6f9fb;text-shadow:0 2px 12px rgba(0,0,0,.35); }
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-histoire-titre .mq-title,
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-histoire-titre .mq-eyebrow,
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-jalon-txt strong { color:#f6f9fb;text-shadow:0 2px 10px rgba(0,0,0,.30); }
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-jalon.is-locked .mq-jalon-txt strong { color:rgba(235,243,247,.55); }
.mq-shell[data-skin="ardoise"] .mq-histoire-total { background:linear-gradient(155deg,#263742,#14212a);color:#f1f5f7;border:1px solid rgba(178,201,214,.28); }
.mq-shell[data-skin="ardoise"] .mq-chapter b { background:#344650;color:#dce7ed; }
.mq-shell[data-skin="ardoise"] .mq-chapter small { color:#a8b7c2; }
.mq-shell[data-skin="ardoise"] .mq-chapter[aria-current="true"] { border-color:#65e5ee;box-shadow:0 0 0 3px rgba(88,223,233,.14),0 10px 24px rgba(0,0,0,.28); }
.mq-shell[data-skin="ardoise"] .mq-chapter[aria-current="true"] b { background:linear-gradient(145deg,#64e3eb,#2b95af);color:#07151b; }
.mq-shell[data-skin="ardoise"] .mq-chapter[aria-current="true"] small { color:#67e0e9; }
.mq-shell[data-skin="ardoise"] .mq-jalon-pastille { background:linear-gradient(145deg,#334650,#17242d);border-color:#c5d5de;color:#f3f7f9;box-shadow:0 6px 16px rgba(0,0,0,.30); }
.mq-shell[data-skin="ardoise"] .mq-jalon.is-open .mq-jalon-pastille { background:linear-gradient(145deg,#5fe1ea,#2d96b1);color:#07151b;box-shadow:0 0 0 3px rgba(88,223,233,.16),0 0 22px rgba(88,223,233,.34); }
.mq-shell[data-skin="ardoise"] .mq-jalon.is-done .mq-jalon-pastille { background:linear-gradient(145deg,#74dbb2,#2e9f73); }
.mq-shell[data-skin="ardoise"] .mq-jalon.is-boss .mq-jalon-pastille { background:linear-gradient(145deg,#ffd96c,#c48a22);color:#4a3200; }
.mq-shell[data-skin="ardoise"] .mq-chemin::before { background:repeating-linear-gradient(180deg,rgba(173,198,212,.25) 0 7px,transparent 7px 16px); }
.mq-shell[data-skin="ardoise"] .mq-chemin-trace { background:linear-gradient(180deg,#68e5ed,#2b94af);box-shadow:0 0 12px rgba(88,223,233,.55); }
.mq-shell[data-skin="ardoise"] .mq-tag { background:#18262f;color:#f1f5f7;border:1px solid rgba(176,201,215,.20); }
.mq-shell[data-skin="ardoise"] .mq-tag svg { color:#5fdce6; }

/* Plateau et cartes */
.mq-shell[data-skin="ardoise"] .mq-board-wrap { isolation:isolate;border-radius:clamp(14px,2.5vmin,24px); }
.mq-shell[data-skin="ardoise"] .mq-board-wrap::before {
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(58,115,132,.15),rgba(3,10,14,.15) 72%,transparent 100%);
}
.mq-shell[data-skin="ardoise"] .mq-score-chip,
.mq-shell[data-skin="ardoise"] .mq-game-action {
  background:linear-gradient(155deg,rgba(37,52,62,.96),rgba(18,29,37,.98)) !important;
  border-color:rgba(181,203,214,.32);box-shadow:0 4px 14px rgba(0,0,0,.30);
}
.mq-shell[data-skin="ardoise"] .mq-score-chip small,
.mq-shell[data-skin="ardoise"] .mq-score-chip strong,
.mq-shell[data-skin="ardoise"] .mq-game-action svg { color:#f2f6f8; }
.mq-shell[data-skin="ardoise"] .mq-score-chip.is-turn { border-color:#6de4ec;background:linear-gradient(155deg,#2e4551,#172730)!important;box-shadow:0 0 0 2px rgba(88,223,233,.16),0 0 18px rgba(88,223,233,.24); }
.mq-shell[data-skin="ardoise"] .mq-turn-dot { background:#63e0e9;box-shadow:0 0 0 3px rgba(88,223,233,.14),0 0 10px rgba(88,223,233,.75); }
.mq-shell[data-skin="ardoise"] .mq-card { border-radius:clamp(9px,2vmin,18px); }
.mq-shell[data-skin="ardoise"] .mq-face { border-color:#aebfca; }
.mq-shell[data-skin="ardoise"] .mq-back {
  background:
    radial-gradient(circle at 26% 16%,rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 74% 82%,rgba(78,211,224,.06),transparent 28%),
    linear-gradient(152deg,#344650 0%,#23333d 44%,#17232b 76%,#0d151b 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -10px 18px rgba(0,0,0,.24),0 6px 14px rgba(0,0,0,.30);
}
.mq-shell[data-skin="ardoise"] .mq-back::before {
  inset:0;background:no-repeat center/48% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%236ce5ee' stroke-width='2.1' stroke-linejoin='round'%3E%3Cpath d='M32 8 49 32 32 56 15 32Z'/%3E%3Cpath d='M15 32h34M32 8v48M21 22l11 10 11-10M21 42l11-10 11 10'/%3E%3Ccircle cx='32' cy='32' r='3.3' fill='%236ce5ee'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 0 7px rgba(88,223,233,.28));opacity:.96;
}
.mq-shell[data-skin="ardoise"] .mq-back::after {
  content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;opacity:.34;
  background:linear-gradient(112deg,transparent 0 36%,rgba(210,245,248,.28) 48%,transparent 60% 100%);transform:translateX(-120%);
}
.mq-shell[data-skin="ardoise"] .mq-card.is-open .mq-back::after { animation:mq-ardoise-card-shimmer .72s ease-out; }
.mq-shell[data-skin="ardoise"] .mq-front { background:linear-gradient(165deg,#243640 0%,#111d24 100%);box-shadow:0 4px 10px rgba(0,0,0,.28);color:#f4f7f9; }
.mq-shell[data-skin="ardoise"] .mq-board[data-category="animaux"] .mq-front { background:#0f1b22; }
.mq-shell[data-skin="ardoise"] .mq-front .mq-card-name { color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.62); }
.mq-shell[data-skin="ardoise"] .mq-card.is-done .mq-front { background:linear-gradient(165deg,#263e45,#13272e); }
.mq-shell[data-skin="ardoise"] .mq-card.is-done .mq-face { border-color:#6de4ec;box-shadow:0 0 0 2px rgba(88,223,233,.17),0 0 22px rgba(88,223,233,.38); }
.mq-shell[data-skin="ardoise"] .mq-card.is-done .mq-front::before {
  content:"";position:absolute;inset:-15%;border-radius:50%;pointer-events:none;border:2px solid rgba(98,226,235,.65);animation:mq-ardoise-match-ring .85s ease-out both;
}
.mq-shell[data-skin="ardoise"] .mq-card.is-wrong .mq-face { border-color:#ff7f8c;box-shadow:0 0 0 2px rgba(255,92,109,.15),0 4px 12px rgba(0,0,0,.28); }
.mq-shell[data-skin="ardoise"] .mq-card.is-hint .mq-back { animation:mq-ardoise-hint .72s ease-in-out 3; }
.mq-card-preview-layer[data-skin="ardoise"] .mq-card-preview-surface { border-color:#b6c8d2;background:linear-gradient(152deg,#344650 0%,#23333d 44%,#17232b 76%,#0d151b 100%);box-shadow:0 18px 40px rgba(0,0,0,.44),0 0 0 3px rgba(88,223,233,.14); }
@keyframes mq-ardoise-card-shimmer { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
@keyframes mq-ardoise-match-ring { 0% { opacity:0;transform:scale(.75); } 30% { opacity:.82; } 100% { opacity:0;transform:scale(1.2); } }
@keyframes mq-ardoise-hint { 50% { filter:brightness(1.2) saturate(1.08);box-shadow:0 0 0 3px rgba(88,223,233,.26),0 0 20px rgba(88,223,233,.42); } }

/* Résultats */
.mq-shell[data-skin="ardoise"] .mq-final-result-page,
.mq-shell[data-skin="ardoise"] .mq-solo-result-page { background:linear-gradient(180deg,rgba(17,27,35,.94),rgba(6,12,17,.98)); }

.mq-shell[data-skin="ardoise"] .mq-solo-score-card::after { color:rgba(107,226,235,.08); }

.mq-shell[data-skin="ardoise"] .mq-final-replay {
  background:linear-gradient(155deg,#334752 0%,#1d2c35 58%,#121d24 100%)!important;
  color:#f7fafb!important;
  border-color:#8198a5!important;
  box-shadow:0 5px 0 #0b141a,0 14px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.36);
}
.mq-shell[data-skin="ardoise"] .mq-final-replay:active {
  box-shadow:0 2px 0 #0b141a,0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.mq-shell[data-skin="ardoise"] .mq-final-home {
  background:linear-gradient(155deg,#2a3c47,#15232c)!important;
  color:#f5f8fa!important;
  border-color:#617783!important;
}

/* Mouvement réduit */
.mq-shell[data-skin="ardoise"][data-motion="calme"] .mq-ambiance::before,
.mq-shell[data-skin="ardoise"][data-motion="calme"] .mq-ambiance i,
.mq-shell[data-skin="ardoise"][data-motion="calme"] .mq-card.is-open .mq-back::after,
.mq-shell[data-skin="ardoise"][data-motion="calme"] .mq-card.is-done .mq-front::before { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="ardoise"] .mq-ambiance::before,
  .mq-shell[data-skin="ardoise"] .mq-ambiance i,
  .mq-shell[data-skin="ardoise"] .mq-card.is-open .mq-back::after,
  .mq-shell[data-skin="ardoise"] .mq-card.is-done .mq-front::before { animation:none; }
}
.mq-shell[data-skin="ardoise"] .mq-theme-panel .mq-settings-copy strong { color:#f5f8fa; }
.mq-shell[data-skin="ardoise"] .mq-theme-panel .mq-settings-copy small { color:#aebcc7; }
.mq-shell[data-skin="ardoise"] .mq-jalon.is-locked { opacity:.74; }
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-jalon.is-locked .mq-jalon-txt strong { color:rgba(242,247,249,.78); }
.mq-shell[data-skin="ardoise"] .mq-view[data-view="histoire"] .mq-jalon.is-locked .mq-jalon-etoiles { opacity:.72; }

/* =========================================================================
   THÈME NUIT 6.26.0 — premium stable, lisible et strictement isolé
   Aucun mouvement de grande couche : animations limitées aux petits décors.
   ========================================================================= */
.mq-shell[data-skin="nuit"] {
  --night-bg-0:#070b14;
  --night-bg-1:#0b1220;
  --night-bg-2:#111b2c;
  --night-panel:#121c2c;
  --night-panel-2:#172338;
  --night-line:#35455f;
  --night-line-soft:#26354c;
  --night-text:#f4f7fb;
  --night-muted:#b7c2d5;
  --night-subtle:#8492aa;
  --night-cyan:#83dcf6;
  --night-indigo:#7587ef;
  --night-gold:#f4c96b;
  --night-selected:#f7f9fc;
  --night-selected-text:#121a28;
  color-scheme:dark;
  color:var(--night-text);
  background:
    radial-gradient(circle at 50% -14%,rgba(118,143,239,.16) 0%,transparent 42%),
    radial-gradient(circle at 92% 16%,rgba(91,207,241,.08) 0%,transparent 26%),
    linear-gradient(180deg,var(--night-bg-0) 0%,var(--night-bg-1) 30%,#0d1626 62%,#080d17 100%);
}

/* ---------- Décor stable ---------- */
.mq-shell[data-skin="nuit"] .mq-ambiance {
  contain:paint;
  background:none;
}
.mq-shell[data-skin="nuit"] .mq-ambiance i {
  animation:none!important;
  transform:none!important;
  will-change:auto;
  filter:none;
  border-radius:50%;
}
.mq-shell[data-skin="nuit"] .mq-ambiance i:nth-child(1) {
  width:44vmax;height:44vmax;right:-18vmax;top:-20vmax;left:auto;
  background:radial-gradient(circle,rgba(126,150,238,.13) 0%,transparent 68%);
}
.mq-shell[data-skin="nuit"] .mq-ambiance i:nth-child(2) {
  width:34vmax;height:34vmax;left:-16vmax;top:28%;right:auto;
  background:radial-gradient(circle,rgba(93,214,242,.07) 0%,transparent 70%);
}
.mq-shell[data-skin="nuit"] .mq-ambiance i:nth-child(3) {
  width:48vmax;height:26vmax;left:25%;bottom:-14vmax;top:auto;
  background:radial-gradient(ellipse,rgba(111,129,225,.09) 0%,transparent 72%);
}
.mq-shell[data-skin="nuit"] .mq-ambiance::before {
  content:"";position:absolute;inset:0;opacity:.78;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.92) 0 1px,transparent 1.7px),
    radial-gradient(circle at 19% 20%,rgba(155,224,248,.80) 0 1px,transparent 1.8px),
    radial-gradient(circle at 29% 8%,rgba(255,255,255,.76) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 43% 16%,rgba(148,213,245,.74) 0 1px,transparent 1.8px),
    radial-gradient(circle at 58% 8%,rgba(255,255,255,.86) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 18%,rgba(160,226,250,.75) 0 1.1px,transparent 1.9px),
    radial-gradient(circle at 86% 10%,rgba(255,255,255,.84) 0 1px,transparent 1.7px),
    radial-gradient(circle at 94% 29%,rgba(142,218,246,.72) 0 1px,transparent 1.8px),
    radial-gradient(circle at 14% 42%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 38% 37%,rgba(144,220,247,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 66% 43%,rgba(255,255,255,.58) 0 1px,transparent 1.7px),
    radial-gradient(circle at 82% 51%,rgba(138,214,243,.52) 0 1px,transparent 1.7px);
  animation:mq-night-v2-twinkle 9s ease-in-out infinite alternate;
  will-change:opacity;
}
.mq-shell[data-skin="nuit"] .mq-ambiance::after {
  content:"";position:absolute;inset:auto 0 0;height:32%;opacity:.48;
  background:
    linear-gradient(180deg,transparent 0%,rgba(7,12,22,.28) 44%,rgba(4,7,13,.72) 100%),
    radial-gradient(ellipse at 22% 76%,rgba(109,219,244,.10) 0%,transparent 38%),
    radial-gradient(ellipse at 78% 82%,rgba(120,137,234,.10) 0%,transparent 42%);
  animation:mq-night-v2-breathe 12s ease-in-out infinite alternate;
  will-change:opacity;
}
.mq-shell[data-skin="nuit"] .mq-ambiance > .mq-night-moon,
.mq-shell[data-skin="nuit"] .mq-ambiance > .mq-night-stars,
.mq-shell[data-skin="nuit"] .mq-ambiance > .mq-night-constellations,
.mq-shell[data-skin="nuit"] .mq-ambiance > .mq-night-haze {
  display:block;position:absolute;pointer-events:none;transform:none!important;filter:none;
}
.mq-shell[data-skin="nuit"] .mq-night-moon {
  width:clamp(78px,14vw,132px);aspect-ratio:1;right:6%;top:8%;border-radius:50%;opacity:.78;
  background:radial-gradient(circle at 34% 30%,#fff 0%,#edf6ff 34%,#bdcdef 67%,rgba(120,139,202,.18) 100%);
  box-shadow:0 0 24px rgba(180,224,255,.20),0 0 52px rgba(111,127,224,.12);
  animation:mq-night-v2-moon 11s ease-in-out infinite alternate;
  will-change:opacity,box-shadow;
}
.mq-shell[data-skin="nuit"] .mq-night-stars {
  inset:0;opacity:.20;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%239fdfff' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M170 170 240 140 310 180 388 150'/%3E%3Cpath d='M700 120 770 166 842 140 910 190'/%3E%3Cpath d='M860 350 940 320 1020 354 1092 316'/%3E%3C/g%3E%3Cg fill='%23eaf9ff'%3E%3Ccircle cx='170' cy='170' r='2.4'/%3E%3Ccircle cx='240' cy='140' r='2.2'/%3E%3Ccircle cx='310' cy='180' r='2.2'/%3E%3Ccircle cx='388' cy='150' r='2.3'/%3E%3Ccircle cx='700' cy='120' r='2.3'/%3E%3Ccircle cx='770' cy='166' r='2.2'/%3E%3Ccircle cx='842' cy='140' r='2.2'/%3E%3Ccircle cx='910' cy='190' r='2.3'/%3E%3Ccircle cx='860' cy='350' r='2.2'/%3E%3Ccircle cx='940' cy='320' r='2.3'/%3E%3Ccircle cx='1020' cy='354' r='2.2'/%3E%3Ccircle cx='1092' cy='316' r='2.3'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
.mq-shell[data-skin="nuit"] .mq-night-constellations {
  right:4%;bottom:7%;width:min(38vw,310px);height:min(17vw,118px);opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 140'%3E%3Cg fill='none' stroke='%23ace9ff' stroke-width='1.2'%3E%3Cpath d='M18 104 62 62 114 88 170 34 226 72 286 24 334 50'/%3E%3C/g%3E%3Cg fill='%23effcff'%3E%3Ccircle cx='18' cy='104' r='2.5'/%3E%3Ccircle cx='62' cy='62' r='2.5'/%3E%3Ccircle cx='114' cy='88' r='2.3'/%3E%3Ccircle cx='170' cy='34' r='2.7'/%3E%3Ccircle cx='226' cy='72' r='2.4'/%3E%3Ccircle cx='286' cy='24' r='2.6'/%3E%3Ccircle cx='334' cy='50' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.mq-shell[data-skin="nuit"] .mq-night-haze { inset:auto 0 0;height:24%;opacity:.24;background:linear-gradient(180deg,transparent,rgba(84,107,191,.12));animation:mq-night-v2-breathe 13s ease-in-out infinite alternate;will-change:opacity; }
@keyframes mq-night-v2-twinkle { from{opacity:.62} to{opacity:.86} }
@keyframes mq-night-v2-breathe { from{opacity:.34} to{opacity:.52} }
@keyframes mq-night-v2-moon { from{opacity:.70;box-shadow:0 0 20px rgba(180,224,255,.16),0 0 44px rgba(111,127,224,.10)} to{opacity:.84;box-shadow:0 0 28px rgba(180,224,255,.24),0 0 58px rgba(111,127,224,.14)} }

/* ---------- Barre haute et navigation ---------- */
.mq-shell[data-skin="nuit"] .mq-top,
.mq-shell[data-skin="nuit"] .mq-nav {
  background:linear-gradient(160deg,#131d2e 0%,#0b1321 100%);
  border:1px solid var(--night-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.32);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--night-text);
}
.mq-shell[data-skin="nuit"] .mq-avatar { background:#101a2a;border-color:#d9e7f5;box-shadow:0 0 0 2px rgba(131,220,246,.14),0 6px 16px rgba(0,0,0,.30); }
.mq-shell[data-skin="nuit"] .mq-avatar b { background:linear-gradient(145deg,#6272dd,#364391);border-color:#f7fbff;color:#fff; }
.mq-shell[data-skin="nuit"] .mq-xp { background:#26344b; }
.mq-shell[data-skin="nuit"] .mq-xp i { background:linear-gradient(90deg,var(--night-cyan),var(--night-indigo)); }
.mq-shell[data-skin="nuit"] .mq-chip,
.mq-shell[data-skin="nuit"] .mq-icon-btn { background:#172338;color:var(--night-text);border:1px solid var(--night-line);box-shadow:none; }
.mq-shell[data-skin="nuit"] .mq-chip .mq-plus { background:linear-gradient(145deg,#92e6fa,#6d7de8);color:#0a1020;box-shadow:0 6px 14px rgba(69,86,181,.23); }
.mq-shell[data-skin="nuit"] .mq-nav button { color:#8e9bb1; }
.mq-shell[data-skin="nuit"] .mq-nav button.is-on { color:var(--night-cyan);background:#17243a;box-shadow:none; }
.mq-shell[data-skin="nuit"] .mq-nav button.is-on::after { background:var(--night-cyan);box-shadow:0 0 10px rgba(131,220,246,.45); }

/* ---------- Typographie ---------- */
.mq-shell[data-skin="nuit"] .mq-title,
.mq-shell[data-skin="nuit"] .mq-histoire-titre,
.mq-shell[data-skin="nuit"] .mq-online-head .mq-title,
.mq-shell[data-skin="nuit"] .mq-setup-copy .mq-title,
.mq-shell[data-skin="nuit"] .mq-profile-heading h1 { color:var(--night-text);text-shadow:0 3px 12px rgba(0,0,0,.34); }
.mq-shell[data-skin="nuit"] .mq-eyebrow,
.mq-shell[data-skin="nuit"] .mq-online-head .mq-eyebrow,
.mq-shell[data-skin="nuit"] .mq-settings-head .mq-eyebrow,
.mq-shell[data-skin="nuit"] .mq-setup-copy .mq-eyebrow,
.mq-shell[data-skin="nuit"] .mq-view[data-view="boutique"] > div:first-child .mq-eyebrow { color:var(--night-cyan); }

.mq-shell[data-skin="nuit"] .mq-degrade-texte { background:linear-gradient(100deg,#fff 0%,#ccecff 52%,#8edff6 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.mq-shell[data-skin="nuit"] .mq-wordmark span { color:var(--night-cyan); }
.mq-shell[data-skin="nuit"] .mq-wordmark b { color:var(--night-text); }

.mq-shell[data-skin="nuit"] .mq-carreau[aria-checked="true"]::after { border-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),linear-gradient(145deg,#8be2f7,#6979e4);box-shadow:0 5px 12px rgba(56,75,167,.22); }

/* ---------- Boutons ---------- */
.mq-shell[data-skin="nuit"] .mq-btn-primary,
.mq-shell[data-skin="nuit"] .mq-play { background:linear-gradient(110deg,#91e5f9 0%,#79cdec 32%,#7486ed 70%,#5868cc 100%);color:#09111f;box-shadow:0 4px 0 #33418e,0 11px 24px rgba(47,62,145,.26); }
.mq-shell[data-skin="nuit"] .mq-btn-primary:active,
.mq-shell[data-skin="nuit"] .mq-play:active { transform:none!important;box-shadow:0 2px 0 #33418e,0 7px 17px rgba(47,62,145,.22); }
.mq-shell[data-skin="nuit"] .mq-btn-ghost,
.mq-shell[data-skin="nuit"] .mq-foot .mq-btn,
.mq-shell[data-skin="nuit"] .mq-settings-back,
.mq-shell[data-skin="nuit"] .mq-profile-heading button,
.mq-shell[data-skin="nuit"] .mq-online-head .mq-setup-back { background:#121d2e;color:var(--night-text);border:1px solid var(--night-line);box-shadow:none; }

/* ---------- Boutique, Réglages, Profil ---------- */
.mq-shell[data-skin="nuit"] .mq-view[data-view="boutique"],
.mq-shell[data-skin="nuit"] .mq-view[data-view="reglages"] { gap:clamp(10px,1.25vh,14px); }
.mq-shell[data-skin="nuit"] .mq-view[data-view="boutique"] > div:first-child,
.mq-shell[data-skin="nuit"] .mq-settings-head { flex:0 0 auto;min-height:max-content;overflow:visible;padding:2px 4px 5px; }
.mq-shell[data-skin="nuit"] .mq-view[data-view="boutique"] > div:first-child .mq-lede,
.mq-shell[data-skin="nuit"] .mq-settings-head .mq-lede { margin-top:6px;max-width:36ch; }
.mq-shell[data-skin="nuit"] .mq-promo-entry,
.mq-shell[data-skin="nuit"] .mq-input,
.mq-shell[data-skin="nuit"] .mq-premium-field { background:#0d1727;border-color:#3a4b67;color:var(--night-text); }
.mq-shell[data-skin="nuit"] .mq-promo-entry::placeholder,
.mq-shell[data-skin="nuit"] .mq-input::placeholder { color:#7e8ca5; }
.mq-shell[data-skin="nuit"] .mq-switch { background:#2d3b59; }
.mq-shell[data-skin="nuit"] .mq-settings-row[aria-pressed="true"] .mq-switch { background:linear-gradient(105deg,#86def5,#6e7fe8); }
.mq-shell[data-skin="nuit"] .mq-profile-actions { background:#101a2a;border-color:var(--night-line); }
.mq-shell[data-skin="nuit"] .mq-profile-avatar-large { box-shadow:0 0 0 3px #dce9f6,0 0 0 5px #5869d3,0 12px 24px rgba(0,0,0,.28); }
.mq-shell[data-skin="nuit"] .mq-profile-meter,
.mq-shell[data-skin="nuit"] .mq-profile-xp { background:#27354c; }
.mq-shell[data-skin="nuit"] .mq-profile-meter i,
.mq-shell[data-skin="nuit"] .mq-profile-xp i { background:linear-gradient(90deg,var(--night-cyan),var(--night-indigo)); }

/* ---------- Histoire et multijoueur ---------- */
.mq-shell[data-skin="nuit"] .mq-jalon-txt strong { color:var(--night-text);text-shadow:0 2px 8px rgba(0,0,0,.28); }
.mq-shell[data-skin="nuit"] .mq-jalon.is-locked { opacity:.74; }
.mq-shell[data-skin="nuit"] .mq-jalon.is-locked .mq-jalon-txt strong { color:#aab6ca; }
.mq-shell[data-skin="nuit"] .mq-jalon.on,
.mq-shell[data-skin="nuit"] .mq-jalon.is-current { box-shadow:0 0 0 4px rgba(131,220,246,.13),0 12px 26px rgba(0,0,0,.26); }
.mq-shell[data-skin="nuit"] .mq-trophy-progress,
.mq-shell[data-skin="nuit"] .mq-result-progress { background:#25344a; }
.mq-shell[data-skin="nuit"] .mq-trophy-progress i,
.mq-shell[data-skin="nuit"] .mq-result-progress i { background:linear-gradient(90deg,var(--night-cyan),var(--night-indigo)); }

/* ---------- Plateau ---------- */
.mq-shell[data-skin="nuit"] .mq-board-wrap { isolation:isolate;border-radius:clamp(14px,2.5vmin,24px); }
.mq-shell[data-skin="nuit"] .mq-board-wrap::before { content:"";position:absolute;inset:-1%;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.04),transparent 30%,rgba(131,220,246,.035));border:1px solid rgba(157,183,221,.12);box-shadow:0 16px 34px rgba(0,0,0,.24); }
.mq-shell[data-skin="nuit"] .mq-score-chip,
.mq-shell[data-skin="nuit"] .mq-game-action { background:#111c2d;border-color:var(--night-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 6px 14px rgba(0,0,0,.24); }
.mq-shell[data-skin="nuit"] .mq-score-chip small,
.mq-shell[data-skin="nuit"] .mq-score-chip strong,
.mq-shell[data-skin="nuit"] .mq-game-action svg { color:var(--night-text); }
.mq-shell[data-skin="nuit"] .mq-score-chip.is-turn { background:linear-gradient(145deg,#fbfdff,#eaf0f8)!important;border-color:var(--night-cyan);box-shadow:0 0 0 2px rgba(131,220,246,.12),0 8px 18px rgba(0,0,0,.20); }
.mq-shell[data-skin="nuit"] .mq-score-chip.is-turn small,
.mq-shell[data-skin="nuit"] .mq-score-chip.is-turn strong { color:#142036; }
.mq-shell[data-skin="nuit"] .mq-turn-dot { background:var(--night-cyan);box-shadow:0 0 0 3px rgba(131,220,246,.12),0 0 8px rgba(131,220,246,.48); }
.mq-shell[data-skin="nuit"] .mq-card { border-radius:clamp(10px,2vmin,18px);backface-visibility:hidden; }

.mq-shell[data-skin="nuit"] .mq-back {
	background:
		radial-gradient(circle at 22% 18%, rgba(152,214,255,.14) 0 2%, transparent 2.6%),
		radial-gradient(circle at 76% 23%, rgba(255,255,255,.16) 0 1.3%, transparent 1.9%),
		radial-gradient(circle at 61% 72%, rgba(140,196,255,.12) 0 1.6%, transparent 2.2%),
		radial-gradient(circle at 31% 67%, rgba(255,255,255,.10) 0 1.1%, transparent 1.8%),
		linear-gradient(165deg,#15233a 0%,#0d1830 52%,#0a1326 100%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -12px 20px rgba(0,0,0,.20), 0 6px 14px rgba(0,0,0,.28);
}
.mq-shell[data-skin="nuit"] .mq-back::before {
	content:"";
	position:absolute;
	inset:0;
	background:
		no-repeat center / 30% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg opacity='0.88' stroke='%23eaf7ff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 18 68 44 94 52 68 60 60 86 52 60 26 52 52 44 60 18Z'/%3E%3Cpath d='M90 24 92.8 33.2 102 36 92.8 38.8 90 48 87.2 38.8 78 36 87.2 33.2 90 24Z' opacity='.8'/%3E%3Cpath d='M31 71 34 80 43 83 34 86 31 95 28 86 19 83 28 80 31 71Z' opacity='.72'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(circle at 18% 26%, rgba(255,255,255,.38) 0 1.1%, transparent 1.6%),
		radial-gradient(circle at 82% 30%, rgba(186,231,255,.34) 0 1.2%, transparent 1.8%),
		radial-gradient(circle at 74% 78%, rgba(255,255,255,.28) 0 1%, transparent 1.7%),
		radial-gradient(circle at 22% 80%, rgba(160,212,255,.26) 0 1.1%, transparent 1.7%);
	filter: drop-shadow(0 0 8px rgba(122,199,255,.18));
	opacity:.92;
}
.mq-shell[data-skin="nuit"] .mq-game-action,
.mq-shell[data-skin="nuit"] .mq-game-actions .mq-game-action,
.mq-shell[data-skin="nuit"] button[data-restart],
.mq-shell[data-skin="nuit"] button[data-quit] {
	background:linear-gradient(180deg,#17253b 0%,#0f1a2d 100%) !important;
	border:1px solid rgba(163,185,214,.28) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.28) !important;
}
.mq-shell[data-skin="nuit"] .mq-game-action svg,
.mq-shell[data-skin="nuit"] .mq-game-actions .mq-game-action svg,
.mq-shell[data-skin="nuit"] button[data-restart] svg,
.mq-shell[data-skin="nuit"] button[data-quit] svg {
	color:#eff5ff !important;
	filter:drop-shadow(0 1px 4px rgba(131,220,246,.18));
}
.mq-shell[data-skin="nuit"] .mq-game-action:active,
.mq-shell[data-skin="nuit"] button[data-restart]:active,
.mq-shell[data-skin="nuit"] button[data-quit]:active {
	background:linear-gradient(180deg,#0f1a2d 0%,#0b1424 100%) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 10px rgba(0,0,0,.24) !important;
}

.mq-shell[data-skin="nuit"] .mq-face { backface-visibility:hidden; }
.mq-shell[data-skin="nuit"] .mq-back { background:linear-gradient(160deg,#1a2740 0%,#111a2d 52%,#0a111e 100%);border-color:#c8d8eb;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.26); }
.mq-shell[data-skin="nuit"] .mq-back::before { content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.065),transparent 34%,transparent 68%,rgba(131,220,246,.055)); }
.mq-shell[data-skin="nuit"] .mq-back::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%2393def3' stroke-width='2.1'%3E%3Cpath d='M20 40c0-10 8-18 18-18 2 0 5 0 7 1-3 1-7 5-7 11 0 7 6 13 13 13 1 0 2 0 3-.3-3.3 5-9 8.3-15 8.3-10.5 0-19-8.4-19-18Z'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3Ccircle cx='45' cy='15' r='1.6'/%3E%3Ccircle cx='48' cy='30' r='1.6'/%3E%3C/g%3E%3C/svg%3E");opacity:.94; }
.mq-shell[data-skin="nuit"] .mq-card.is-open .mq-back::after { animation:mq-night-v2-card-shimmer .65s ease-out; }
.mq-shell[data-skin="nuit"] .mq-front { background:#111b2b;box-shadow:0 4px 10px rgba(0,0,0,.26);color:var(--night-text); }
.mq-shell[data-skin="nuit"] .mq-front .mq-card-name { color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.96),0 0 5px rgba(0,0,0,.58); }
.mq-shell[data-skin="nuit"] .mq-card.is-done .mq-face { border-color:var(--night-cyan);box-shadow:0 0 0 2px rgba(131,220,246,.13),0 0 16px rgba(105,124,225,.28); }
.mq-shell[data-skin="nuit"] .mq-card.is-done .mq-front::before { content:"";position:absolute;inset:-10%;border-radius:50%;pointer-events:none;border:2px solid rgba(131,220,246,.52);animation:mq-night-v2-match .72s ease-out both; }
.mq-shell[data-skin="nuit"] .mq-card.is-wrong .mq-face { border-color:#f48699;box-shadow:0 0 0 2px rgba(244,134,153,.14),0 4px 10px rgba(0,0,0,.24); }
.mq-shell[data-skin="nuit"] .mq-card.is-hint .mq-back { animation:mq-night-v2-hint .62s ease-in-out 3; }
.mq-card-preview-layer[data-skin="nuit"] .mq-card-preview-surface { border-color:#d0deef;background:linear-gradient(155deg,#1a2740,#0b1322);box-shadow:0 16px 34px rgba(0,0,0,.40),0 0 0 3px rgba(131,220,246,.10); }
@keyframes mq-night-v2-card-shimmer { from{opacity:.70} to{opacity:.94} }
@keyframes mq-night-v2-match { 0%{opacity:0;transform:scale(.84)} 35%{opacity:.74} 100%{opacity:0;transform:scale(1.14)} }
@keyframes mq-night-v2-hint { 50%{box-shadow:0 0 0 3px rgba(131,220,246,.18),0 0 16px rgba(111,128,228,.28)} }

/* ---------- Modales pédagogiques ---------- */
.mq-shell[data-skin="nuit"] .mq-sheet-layer { background:rgba(2,5,11,.72);backdrop-filter:none;-webkit-backdrop-filter:none; }
.mq-shell[data-skin="nuit"] .mq-sheet { background:linear-gradient(155deg,#172338,#0e1727);border:1px solid var(--night-line);box-shadow:0 18px 42px rgba(0,0,0,.48); }
.mq-shell[data-skin="nuit"] .mq-sheet-thumb { background:#1b2940;color:var(--night-cyan); }
.mq-shell[data-skin="nuit"] .mq-question { color:var(--night-text); }
.mq-shell[data-skin="nuit"] .mq-fact { color:var(--night-muted); }
.mq-shell[data-skin="nuit"] .mq-fact strong { color:var(--night-cyan);background:#172a40; }
.mq-shell[data-skin="nuit"] .mq-answer { background:#111c2e;border-color:#34455f;color:var(--night-text);transform:none!important; }
.mq-shell[data-skin="nuit"] .mq-answer b { background:#1d2b43;color:var(--night-cyan);box-shadow:none; }
.mq-shell[data-skin="nuit"] .mq-answer.is-right,
.mq-shell[data-skin="nuit"] .mq-verdict.is-right { background:#10291f;border-color:#45bf80;color:#eefcf5; }
.mq-shell[data-skin="nuit"] .mq-answer.is-wrong,
.mq-shell[data-skin="nuit"] .mq-verdict.is-wrong { background:#321722;border-color:#ef7189;color:#fff2f5; }
.mq-shell[data-skin="nuit"] .mq-verdict p { color:var(--night-muted); }
.mq-shell[data-skin="nuit"] .mq-hintbar { color:var(--night-muted); }

/* ---------- Résultats ---------- */
.mq-shell[data-skin="nuit"] .mq-final-result-page,
.mq-shell[data-skin="nuit"] .mq-solo-result-page { background:linear-gradient(180deg,#0a101d,#060a12); }

.mq-shell[data-skin="nuit"] .mq-solo-score-card::after { color:rgba(131,220,246,.06); }

.mq-shell[data-skin="nuit"] .mq-final-replay { background:linear-gradient(155deg,#24334f,#111a2d)!important;color:var(--night-text)!important;border-color:#95aac8!important;box-shadow:0 4px 0 #070d17,0 12px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)!important; }
.mq-shell[data-skin="nuit"] .mq-final-replay:active { transform:none!important;box-shadow:0 2px 0 #070d17,0 7px 16px rgba(0,0,0,.26)!important; }
.mq-shell[data-skin="nuit"] .mq-final-home { background:#152135!important;color:var(--night-text)!important;border-color:#607492!important; }

/* ---------- Réduction des animations ---------- */
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-ambiance::before,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-ambiance::after,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-night-moon,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-night-haze,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-card.is-open .mq-back::after,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-card.is-done .mq-front::before { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="nuit"] .mq-ambiance::before,
  .mq-shell[data-skin="nuit"] .mq-ambiance::after,
  .mq-shell[data-skin="nuit"] .mq-night-moon,
  .mq-shell[data-skin="nuit"] .mq-night-haze,
  .mq-shell[data-skin="nuit"] .mq-card.is-open .mq-back::after,
  .mq-shell[data-skin="nuit"] .mq-card.is-done .mq-front::before { animation:none; }
}

/* ---------- Correctifs finaux de contraste Nuit V2 ---------- */
.mq-shell[data-skin="nuit"] .mq-settings-copy strong,
.mq-shell[data-skin="nuit"] .mq-theme-panel .mq-settings-copy strong { color:var(--night-text); }
.mq-shell[data-skin="nuit"] .mq-settings-copy small,
.mq-shell[data-skin="nuit"] .mq-theme-panel .mq-settings-copy small { color:var(--night-muted); }
.mq-shell[data-skin="nuit"] .mq-histoire-total {
  background:#162238;
  color:var(--night-gold);
  border:1px solid var(--night-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 7px 16px rgba(0,0,0,.22);
}
.mq-shell[data-skin="nuit"] .mq-chapter b { color:var(--night-text); }
.mq-shell[data-skin="nuit"] .mq-chapter small { color:var(--night-muted); }
.mq-shell[data-skin="nuit"] .mq-chapter.is-locked b,
.mq-shell[data-skin="nuit"] .mq-chapter.is-locked small { color:#8794aa; }
.mq-shell[data-skin="nuit"] .mq-tag {
  background:#edf3fa;
  color:#18243a;
  border:1px solid #d2dfed;
}
.mq-shell[data-skin="nuit"] .mq-tag svg { color:#327ea1; }
.mq-shell[data-skin="nuit"] .mq-ready { color:#8de5fa; }
.mq-shell[data-skin="nuit"] .mq-price { color:#f1bc58; }

/* =========================================================================
   MemoQuest 6.26.9 — outils et paramètres intégrés à la partie
   ========================================================================= */
.mq-gamebar { grid-template-columns:clamp(58px,15vw,82px) minmax(126px,1fr) clamp(58px,15vw,82px);gap:clamp(4px,1.3vw,7px); }
.mq-game-actions { gap:clamp(4px,1.5vw,8px); }
.mq-game-action { width:clamp(35px,10.4vw,40px);height:clamp(35px,10.4vw,40px);flex:0 0 clamp(35px,10.4vw,40px); }
.mq-game-action.is-tip { color:#b47b00; }
.mq-game-action.is-tip svg { color:currentColor;filter:drop-shadow(0 2px 4px rgba(243,181,30,.22)); }
.mq-score-chip.is-solo .mq-turn-dot { display:none; }
.mq-score-chip.is-solo strong { font-size:.85rem; }

.mq-game-sheet-layer { z-index:42; }
.mq-game-sheet-layer .mq-sheet { width:min(520px,100%);max-height:min(100%,760px); }
.mq-game-panel-title { font-size:clamp(1.08rem,4.5vw,1.3rem)!important; }
.mq-game-sheet-layer .mq-sheet-thumb { width:54px;height:54px; }
.mq-game-sheet-layer .mq-sheet-thumb svg { width:30px;height:30px; }
.mq-game-note { margin:0;padding:9px 11px;border-radius:13px;background:rgba(32,137,218,.09);color:var(--encre-2);font-size:.67rem;line-height:1.4;font-weight:780;text-align:center; }

.mq-privacy-panel { display:grid;gap:10px; }
.mq-privacy-panel p { margin:0;color:var(--encre-2);font-size:.78rem;line-height:1.52;font-weight:720; }
.mq-privacy-link { display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 14px;border-radius:16px;background:linear-gradient(135deg,var(--bleu),#22bfc2);color:#fff!important;text-decoration:none!important;font-size:.76rem;font-weight:900;box-shadow:0 8px 18px rgba(32,137,218,.22); }
.mq-privacy-link svg { width:21px;height:21px; }

.mq-tip-thumb { color:#d59200!important;background:linear-gradient(155deg,#fff8d5,#ffe8a1)!important; }
.mq-tip-stage { display:grid;gap:10px;min-height:238px; }
.mq-tip-card { position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:16px 14px;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,#fffdf4,#eff9ff);border:1px solid rgba(35,139,207,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(21,60,122,.1); }
.mq-tip-card::after { content:"";position:absolute;width:130px;height:130px;right:-58px;bottom:-74px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,47,.2),transparent 68%);pointer-events:none; }
.mq-tip-number { position:relative;z-index:1;width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#ffd758,#eaa51f);color:#553800;font-size:1rem;font-weight:1000;box-shadow:0 7px 14px rgba(194,130,7,.2); }
.mq-tip-card > div { position:relative;z-index:1;display:grid;align-content:start;gap:5px;min-width:0; }
.mq-tip-card small { color:#169daa;font-size:.52rem;font-weight:1000;letter-spacing:.08em; }
.mq-tip-card h4 { margin:0;color:var(--encre);font-size:1rem;line-height:1.15;font-weight:1000; }
.mq-tip-card p { margin:0;color:var(--encre-2);font-size:.76rem;line-height:1.5;font-weight:750; }
.mq-tip-dots { display:flex;justify-content:center;align-items:center;gap:3px;min-height:10px;overflow:hidden; }
.mq-tip-dots i { width:4px;height:4px;border-radius:99px;background:rgba(84,112,151,.25);transition:width .2s,background .2s; }
.mq-tip-dots i.is-on { width:15px;background:#20adb7; }
.mq-tip-navigation { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.mq-tip-navigation .mq-btn { min-width:0;padding-inline:9px;font-size:.72rem; }
.mq-tip-resume { background:transparent!important;color:var(--encre-2)!important;box-shadow:none!important;min-height:40px!important; }

.mq-game-settings { display:grid;gap:8px; }
.mq-online-safety-entry .mq-settings-open { margin-left:auto; }
.mq-online-safety { display:grid;gap:10px; }
.mq-online-safety > p { margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45;font-weight:720; }
.mq-online-safety-reasons { display:grid;gap:7px; }
.mq-online-safety-reasons button { width:100%;display:grid;gap:3px;padding:11px 12px;border:1px solid rgba(61,142,199,.17);border-radius:15px;background:#f4f9fd;color:var(--encre);text-align:left; }
.mq-online-safety-reasons button strong { font-size:.74rem;font-weight:950; }
.mq-online-safety-reasons button small { color:var(--encre-2);font-size:.59rem;line-height:1.3;font-weight:720; }
.mq-online-safety-reasons button:disabled { opacity:.55; }
.mq-online-block { color:#a43145; }
.mq-online-safety-preview { font-size:.66rem; }
.mq-game-setting-row,.mq-game-volume-row { width:100%;min-height:58px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:17px;background:#f4f9fd;border:1px solid rgba(61,142,199,.13);color:var(--encre);text-align:left; }
.mq-game-setting-row > span,.mq-game-volume-row > span,.mq-game-rules > span { width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#eaf8ff,#d9edf9);color:var(--bleu); }
.mq-game-setting-row svg,.mq-game-volume-row svg,.mq-game-rules svg { width:21px;height:21px; }
.mq-game-setting-row > b,.mq-game-volume-row > b { min-width:0;display:grid;gap:3px;font-weight:inherit; }
.mq-game-setting-row strong,.mq-game-volume-row strong { font-size:.76rem;font-weight:950; }
.mq-game-setting-row small { color:var(--encre-2);font-size:.58rem;line-height:1.25;font-weight:720; }
.mq-game-switch { width:42px;height:24px;border-radius:99px;padding:3px;background:#c9d7e3;transition:background .2s; }
.mq-game-switch u { display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(21,60,122,.22);transition:transform .2s var(--ressort); }
.mq-game-setting-row[aria-pressed="true"] .mq-game-switch { background:linear-gradient(90deg,#1dbab8,#278ddc); }
.mq-game-setting-row[aria-pressed="true"] .mq-game-switch u { transform:translateX(18px); }
.mq-game-volume-row b input { width:100%;height:18px;margin:0;accent-color:#20aeb7;background:transparent; }
.mq-game-volume-row em { min-width:34px;color:var(--encre-2);font-size:.63rem;font-style:normal;font-weight:900;text-align:right; }
.mq-game-volume-row.is-disabled { opacity:.48; }
.mq-game-rules { display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:11px;border-radius:17px;background:linear-gradient(145deg,#f7fbff,#eef7fa);border:1px solid rgba(38,171,181,.15); }
.mq-game-rules > div { min-width:0; }
.mq-game-rules strong { color:var(--encre);font-size:.72rem;font-weight:950; }
.mq-game-rules p { margin:3px 0 0;color:var(--encre-2);font-size:.61rem;line-height:1.38;font-weight:730; }
.mq-game-danger-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.mq-game-danger-actions .mq-btn { min-width:0;padding-inline:8px;font-size:.7rem; }
.mq-game-quit { color:#fff!important;background:linear-gradient(145deg,#e85858,#bb343f)!important;box-shadow:0 5px 0 #8e2530,0 10px 18px rgba(158,41,54,.2)!important; }

.mq-shell[data-skin="nuit"] .mq-tip-card,.mq-shell[data-skin="ardoise"] .mq-tip-card { background:linear-gradient(145deg,rgba(31,47,72,.98),rgba(16,27,43,.98));border-color:rgba(125,205,231,.2); }
.mq-shell[data-skin="nuit"] .mq-tip-card h4,.mq-shell[data-skin="nuit"] .mq-tip-card p,.mq-shell[data-skin="ardoise"] .mq-tip-card h4,.mq-shell[data-skin="ardoise"] .mq-tip-card p { color:#eef6fb; }
.mq-shell[data-skin="nuit"] .mq-game-setting-row,.mq-shell[data-skin="nuit"] .mq-game-volume-row,.mq-shell[data-skin="nuit"] .mq-game-rules,.mq-shell[data-skin="ardoise"] .mq-game-setting-row,.mq-shell[data-skin="ardoise"] .mq-game-volume-row,.mq-shell[data-skin="ardoise"] .mq-game-rules { background:rgba(24,39,58,.92);border-color:rgba(125,205,231,.16);color:#eef6fb; }
.mq-shell[data-skin="nuit"] .mq-game-setting-row small,.mq-shell[data-skin="nuit"] .mq-game-volume-row em,.mq-shell[data-skin="nuit"] .mq-game-rules p,.mq-shell[data-skin="ardoise"] .mq-game-setting-row small,.mq-shell[data-skin="ardoise"] .mq-game-volume-row em,.mq-shell[data-skin="ardoise"] .mq-game-rules p { color:#aebed0; }
.mq-shell[data-skin="nuit"] .mq-game-rules strong,.mq-shell[data-skin="ardoise"] .mq-game-rules strong { color:#eef6fb; }

@media (max-width:370px) {
  .mq-gamebar { grid-template-columns:56px minmax(114px,1fr) 56px;gap:3px;padding-inline:0; }
  .mq-game-actions { gap:3px; }
  .mq-game-action { width:35px;height:35px;flex-basis:35px;border-radius:11px!important; }
  .mq-game-action svg { width:18px;height:18px; }
  .mq-score-chip { height:39px;border-radius:11px; }
  .mq-tip-card { grid-template-columns:36px minmax(0,1fr);padding:13px 11px; }
  .mq-tip-number { width:36px;height:36px;border-radius:12px; }
}
@media (max-width:480px), (max-height:700px) {
  .mq-game-sheet-layer .mq-sheet { gap:8px;padding:11px; }
  .mq-game-sheet-layer .mq-sheet-thumb { width:44px;height:44px; }
  .mq-tip-stage { min-height:190px; }
  .mq-tip-card { padding:11px; }
  .mq-tip-card p { font-size:.68rem;line-height:1.38; }
  .mq-game-setting-row,.mq-game-volume-row { min-height:49px;padding:6px 8px; }
  .mq-game-setting-row > span,.mq-game-volume-row > span,.mq-game-rules > span { width:34px;height:34px; }
  .mq-game-setting-row small { display:none; }
}
/* =========================================================================
   MEMOQUEST 6.26.0 — SYSTÈME VISUEL SÉMANTIQUE MULTI-THÈMES
   Source de vérité pour couleurs, typographies, surfaces et états.
   Les décors historiques restent décoratifs ; les composants consomment
   désormais exclusivement les jetons sémantiques ci-dessous.
   ========================================================================= */
.mq-shell[data-skin] {
  --mq-bg: #eaf8fb;
  --mq-bg-2: #d8f0f5;
  --mq-surface: #ffffff;
  --mq-surface-raised: #f7fcfd;
  --mq-surface-soft: #eaf6f8;
  --mq-surface-selected: #dff4f5;
  --mq-text: #123c4f;
  --mq-text-secondary: #365f70;
  --mq-text-muted: #5b7885;
  --mq-text-on-light: #123c4f;
  --mq-text-on-dark: #ffffff;
  --mq-accent: #087f8c;
  --mq-accent-strong: #096e7d;
  --mq-accent-2: #176db5;
  --mq-border: #c9e2e7;
  --mq-border-active: #087f8c;
  --mq-success: #247a36;
  --mq-error: #bd2f3f;
  --mq-warning: #8a5700;
  --mq-locked: #6b7780;
  --mq-shadow: 0 10px 28px rgba(18,60,79,.14);
  --mq-shadow-soft: 0 4px 14px rgba(18,60,79,.10);
  --mq-glow: 0 0 0 3px rgba(8,127,140,.16);
  --mq-button-bg: linear-gradient(135deg,#0a8993,#176db5);
  --mq-button-edge: #075d6b;
  --mq-button-text: #ffffff;
  --mq-font-body: ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Trebuchet MS",Verdana,system-ui,sans-serif;
  --mq-font-display: var(--mq-font-body);
  --mq-space-1: 4px;
  --mq-space-2: 8px;
  --mq-space-3: 12px;
  --mq-space-4: 16px;
  --mq-space-5: 22px;
  --mq-control-min: 44px;

  /* Compatibilité avec les composants historiques. */
  --blanc: var(--mq-surface);
  --encre: var(--mq-text);
  --encre-2: var(--mq-text-secondary);
  --encre-3: var(--mq-text-muted);
  --turq: var(--mq-accent);
  --turq-2: var(--mq-accent);
  --bleu: var(--mq-accent-2);
  --bleu-2: var(--mq-accent-strong);
  --degrade: var(--mq-button-bg);
  --ombre: var(--mq-shadow-soft);
  --ombre-forte: var(--mq-shadow);
  color: var(--mq-text);
  font-family: var(--mq-font-body);
}

.mq-shell[data-skin="jade"] {
  --mq-bg:#e9f8f4; --mq-bg-2:#d1eee8;
  --mq-surface:#ffffff; --mq-surface-raised:#f7fcfb; --mq-surface-soft:#e3f4f1; --mq-surface-selected:#d8f1ec;
  --mq-text:#143f4c; --mq-text-secondary:#345d67; --mq-text-muted:#587781;
  --mq-text-on-light:#143f4c; --mq-text-on-dark:#ffffff;
  --mq-accent:#087f8c; --mq-accent-strong:#096e7d; --mq-accent-2:#176db5;
  --mq-border:#c6e2df; --mq-border-active:#087f8c;
  --mq-success:#25783a; --mq-error:#bb3042; --mq-warning:#865700; --mq-locked:#687880;
  --mq-shadow:0 12px 30px rgba(17,73,81,.15); --mq-shadow-soft:0 5px 15px rgba(17,73,81,.10);
  --mq-glow:0 0 0 3px rgba(8,127,140,.17);
  --mq-button-bg:linear-gradient(135deg,#087f8c,#176db5); --mq-button-edge:#075d6b;
  color-scheme:light;
}
.mq-shell[data-skin="ocean"] {
  --mq-bg:#063d62; --mq-bg-2:#07577b;
  --mq-surface:#f8fdff; --mq-surface-raised:#ffffff; --mq-surface-soft:#e7f5f8; --mq-surface-selected:#d7f0f3;
  --mq-text:#082f49; --mq-text-secondary:#31566a; --mq-text-muted:#587485;
  --mq-text-on-light:#082f49; --mq-text-on-dark:#ffffff;
  --mq-accent:#056b83; --mq-accent-strong:#05596f; --mq-accent-2:#145ea8;
  --mq-border:#b8dce5; --mq-border-active:#056b83;
  --mq-success:#1d7438; --mq-error:#b42d3e; --mq-warning:#845400; --mq-locked:#627681;
  --mq-shadow:0 14px 34px rgba(0,39,67,.24); --mq-shadow-soft:0 6px 18px rgba(0,45,74,.17);
  --mq-glow:0 0 0 3px rgba(5,107,131,.18);
  --mq-button-bg:linear-gradient(135deg,#056b83,#145ea8); --mq-button-edge:#04475d;
  color-scheme:light;
}
.mq-shell[data-skin="grenat"] {
  --mq-bg:#3d111d; --mq-bg-2:#5c1b2c;
  --mq-surface:#fffaf5; --mq-surface-raised:#ffffff; --mq-surface-soft:#f8eae6; --mq-surface-selected:#f3ded8;
  --mq-text:#4a1726; --mq-text-secondary:#693748; --mq-text-muted:#785b64;
  --mq-text-on-light:#4a1726; --mq-text-on-dark:#fff9ed;
  --mq-accent:#8c2040; --mq-accent-strong:#741832; --mq-accent-2:#a26235;
  --mq-border:#e2c7c5; --mq-border-active:#8c2040;
  --mq-success:#33703e; --mq-error:#a92036; --mq-warning:#7a4d00; --mq-locked:#74666a;
  --mq-shadow:0 14px 34px rgba(55,10,25,.22); --mq-shadow-soft:0 6px 18px rgba(55,10,25,.14);
  --mq-glow:0 0 0 3px rgba(140,32,64,.17);
  --mq-button-bg:linear-gradient(135deg,#9c2947,#741832); --mq-button-edge:#581023;
  --mq-font-display:ui-serif,Georgia,Cambria,"Times New Roman",serif;
  color-scheme:light;
}
.mq-shell[data-skin="ardoise"] {
  --mq-bg:#111b21; --mq-bg-2:#1c2b33;
  --mq-surface:#1b2930; --mq-surface-raised:#24353d; --mq-surface-soft:#2c3d45; --mq-surface-selected:#314b53;
  --mq-text:#f1f6f8; --mq-text-secondary:#c8d5da; --mq-text-muted:#a7b8bf;
  --mq-text-on-light:#17242b; --mq-text-on-dark:#f1f6f8;
  --mq-accent:#65d6df; --mq-accent-strong:#39b8c5; --mq-accent-2:#82a8ff;
  --mq-border:#48606a; --mq-border-active:#65d6df;
  --mq-success:#72d38b; --mq-error:#ff8795; --mq-warning:#ffd173; --mq-locked:#87979d;
  --mq-shadow:0 14px 34px rgba(0,0,0,.32); --mq-shadow-soft:0 5px 17px rgba(0,0,0,.23);
  --mq-glow:0 0 0 3px rgba(101,214,223,.18);
  --mq-button-bg:linear-gradient(135deg,#247d89,#485fb4); --mq-button-edge:#1d6873;
  color-scheme:dark;
}
.mq-shell[data-skin="ambre"] {
  --mq-bg:#f5d5a1; --mq-bg-2:#ffe8c7;
  --mq-surface:#fffaf1; --mq-surface-raised:#ffffff; --mq-surface-soft:#f8ead7; --mq-surface-selected:#f5dfc0;
  --mq-text:#4a2b12; --mq-text-secondary:#68472d; --mq-text-muted:#7b624e;
  --mq-text-on-light:#4a2b12; --mq-text-on-dark:#fffaf1;
  --mq-accent:#934309; --mq-accent-strong:#7c3505; --mq-accent-2:#7d5420;
  --mq-border:#dec39d; --mq-border-active:#934309;
  --mq-success:#32713a; --mq-error:#ad2c38; --mq-warning:#704600; --mq-locked:#766b60;
  --mq-shadow:0 13px 31px rgba(95,54,13,.18); --mq-shadow-soft:0 5px 16px rgba(95,54,13,.12);
  --mq-glow:0 0 0 3px rgba(147,67,9,.16);
  --mq-button-bg:linear-gradient(135deg,#a84d0a,#7c3505); --mq-button-edge:#642904;
  color-scheme:light;
}
.mq-shell[data-skin="nuit"] {
  --mq-bg:#070d1c; --mq-bg-2:#101a31;
  --mq-surface:#131d34; --mq-surface-raised:#1b2844; --mq-surface-soft:#202e4b; --mq-surface-selected:#26395b;
  --mq-text:#f5f7ff; --mq-text-secondary:#c9d1e8; --mq-text-muted:#a8b3d1;
  --mq-text-on-light:#17213b; --mq-text-on-dark:#f5f7ff;
  --mq-accent:#80d7ff; --mq-accent-strong:#52b9e7; --mq-accent-2:#9a9dff;
  --mq-border:#415176; --mq-border-active:#80d7ff;
  --mq-success:#78d893; --mq-error:#ff8a9b; --mq-warning:#ffd47f; --mq-locked:#8591ad;
  --mq-shadow:0 15px 38px rgba(0,0,0,.38); --mq-shadow-soft:0 6px 19px rgba(0,0,0,.26);
  --mq-glow:0 0 0 3px rgba(128,215,255,.19);
  --mq-button-bg:linear-gradient(135deg,#357ba6,#555fc0); --mq-button-edge:#2c5777;
  color-scheme:dark;
}

/* Fond et hiérarchie typographique. */
.mq-shell[data-skin] { background-color:var(--mq-bg); }
.mq-shell[data-skin] .mq-title,
.mq-shell[data-skin] h1,
.mq-shell[data-skin] h2,
.mq-shell[data-skin] h3 { color:var(--mq-text); font-family:var(--mq-font-display); line-height:1.12; overflow-wrap:anywhere; }
.mq-shell[data-skin] .mq-degrade-texte {
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--mq-text);
}
.mq-shell[data-skin] .mq-eyebrow { color:var(--mq-accent); font-size:max(.72rem,11px); line-height:1.25; }
.mq-shell[data-skin] .mq-lede,
.mq-shell[data-skin] .mq-fact { color:var(--mq-text-secondary); font-size:max(.8rem,12px); line-height:1.42; }
.mq-shell[data-skin] small { line-height:1.32; }
.mq-shell[data-skin] :focus-visible { outline-color:var(--mq-border-active); box-shadow:var(--mq-glow); }

/* Boutons et états interactifs. */
.mq-shell[data-skin] .mq-btn { background:var(--mq-surface-raised); color:var(--mq-text); border:1px solid var(--mq-border); }
.mq-shell[data-skin] .mq-btn-primary,
.mq-shell[data-skin] .mq-play,
.mq-shell[data-skin] .mq-promo-entry button,
.mq-shell[data-skin] .mq-promo-reward button {
  color:var(--mq-button-text); background-color:var(--mq-accent-strong); background-image:var(--mq-button-bg);
  border-color:transparent; box-shadow:0 4px 0 var(--mq-button-edge),var(--mq-shadow-soft); text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.mq-shell[data-skin] .mq-btn-primary:active { box-shadow:0 1px 0 var(--mq-button-edge); }
.mq-shell[data-skin] .mq-btn-ghost { color:var(--mq-text-secondary); background:var(--mq-surface-soft); border-color:var(--mq-border); }

.mq-shell[data-skin] [disabled],
.mq-shell[data-skin] .is-disabled,
.mq-shell[data-skin] .is-locked { opacity:.58; color:var(--mq-locked); filter:none; }
.mq-shell[data-skin] .is-error { border-color:var(--mq-error); }
.mq-shell[data-skin] .is-success,
.mq-shell[data-skin] .mq-ready { color:var(--mq-success); }
.mq-shell[data-skin] .mq-price { color:var(--mq-warning); }

/* En-tête, navigation et icônes. */
.mq-shell[data-skin] .mq-top,
.mq-shell[data-skin] .mq-nav { background:color-mix(in srgb,var(--mq-surface) 94%,transparent); border:1px solid var(--mq-border); }
.mq-shell[data-skin] .mq-icon-btn { color:var(--mq-accent); background:var(--mq-surface-soft); border:1px solid var(--mq-border); }
.mq-shell[data-skin] .mq-chip { background:var(--mq-surface-soft); color:var(--mq-text); border-color:var(--mq-border); }
.mq-shell[data-skin] .mq-nav button { color:var(--mq-text-secondary); }
.mq-shell[data-skin] .mq-nav button.is-on { color:var(--mq-accent-strong); }

/* Réglages : tête respirante, liste stable et états lisibles. */
.mq-shell[data-skin] .mq-view[data-view="reglages"] { gap:clamp(10px,1.4vh,16px); }
.mq-shell[data-skin] .mq-settings-head,
.mq-shell[data-skin] .mq-screen-head { display:grid; gap:5px; padding:clamp(8px,1.2vh,13px) clamp(8px,2vw,14px) 2px; }
.mq-shell[data-skin] .mq-settings-head .mq-eyebrow { margin:0; color:var(--mq-accent); }
.mq-shell[data-skin] .mq-settings-head .mq-title { margin:0; color:var(--mq-text); font-size:clamp(1.55rem,6.3vw,2.05rem); }
.mq-shell[data-skin] .mq-settings-head .mq-lede { max-width:44rem; margin:0; }
.mq-shell[data-skin] .mq-settings-scroll { padding:2px 4px 10px; }
.mq-shell[data-skin] .mq-settings-list { gap:clamp(9px,1.1vh,13px); }
.mq-shell[data-skin] .mq-settings-row,
.mq-shell[data-skin] .mq-theme-panel { background:var(--mq-surface); border-color:var(--mq-border); box-shadow:var(--mq-shadow-soft); }
.mq-shell[data-skin] .mq-settings-copy strong,
.mq-shell[data-skin] .mq-theme-option strong { color:var(--mq-text); }
.mq-shell[data-skin] .mq-settings-copy small { color:var(--mq-text-secondary); font-size:max(.72rem,11px); }
.mq-shell[data-skin] .mq-volume-value { color:var(--mq-accent-strong); }
.mq-shell[data-skin] .mq-theme-option { background:var(--mq-surface-raised); color:var(--mq-text); border-color:var(--mq-border); }
.mq-shell[data-skin] .mq-switch { background:var(--mq-surface-soft); border:1px solid var(--mq-border); }
.mq-shell[data-skin] .mq-switch i { background:var(--mq-surface-raised); }
.mq-shell[data-skin] [aria-pressed="true"] .mq-switch { background:var(--mq-accent); }
.mq-shell[data-skin] .mq-range { color:var(--mq-accent); }
.mq-shell[data-skin] .mq-settings-foot { padding-top:3px; }
.mq-shell[data-skin] .mq-settings-foot>small { color:var(--mq-text-muted); }
.mq-shell[data-skin] .mq-settings-back { color:var(--mq-button-text); background:var(--mq-button-bg); box-shadow:var(--mq-shadow-soft); }
.mq-shell[data-skin] .mq-reset-button { color:var(--mq-error); background:color-mix(in srgb,var(--mq-error) 10%,var(--mq-surface)); border:1px solid color-mix(in srgb,var(--mq-error) 30%,var(--mq-border)); }

/* Boutique : séparation stable entre l'en-tête, le cadeau et les catalogues. */
.mq-shell[data-skin] .mq-view[data-view="boutique"] { gap:clamp(10px,1.4vh,16px); }
.mq-shell[data-skin] .mq-shop-scroll { padding:2px 4px 10px; }
.mq-shell[data-skin] .mq-shop-stack { display:grid; gap:clamp(14px,1.9vh,20px); align-content:start; }
.mq-shell[data-skin] .mq-shop-section { display:grid; gap:9px; }
.mq-shell[data-skin] .mq-section-eyebrow { margin:0; }
.mq-shell[data-skin] [data-gift] { border:1px solid var(--mq-border-active); background:linear-gradient(135deg,var(--mq-surface-raised),var(--mq-surface-selected)); }
.mq-shell[data-skin] .mq-opt { background:var(--mq-surface); border-color:var(--mq-border); }

/* Code promotionnel adapté aux six thèmes. */
.mq-shell[data-skin] .mq-promo-card { background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface-soft)); border-color:var(--mq-border); }
.mq-shell[data-skin] .mq-promo-icon { color:var(--mq-button-text); background:var(--mq-button-bg); border-color:var(--mq-surface-raised); }
.mq-shell[data-skin] .mq-promo-head h3,
.mq-shell[data-skin] .mq-promo-form>label,
.mq-shell[data-skin] .mq-promo-reward h3,
.mq-shell[data-skin] .mq-promo-reward>strong,
.mq-shell[data-skin] .mq-promo-reward small b { color:var(--mq-text); }
.mq-shell[data-skin] .mq-promo-head small,
.mq-shell[data-skin] .mq-promo-form>small,
.mq-shell[data-skin] .mq-promo-reward small { color:var(--mq-text-secondary); }
.mq-shell[data-skin] .mq-promo-entry input { color:var(--mq-text); background:var(--mq-surface-raised); border-color:var(--mq-border); caret-color:var(--mq-accent); }
.mq-shell[data-skin] .mq-promo-entry input::placeholder { color:var(--mq-text-muted); }
.mq-shell[data-skin] .mq-promo-entry input:focus { border-color:var(--mq-border-active); box-shadow:var(--mq-glow); }
.mq-shell[data-skin] .mq-promo-reward { background:linear-gradient(155deg,var(--mq-surface-raised),var(--mq-surface-soft)); border-color:var(--mq-border); }

/* Profil, Histoire, multijoueur et résultats. */
.mq-shell[data-skin] .mq-profile-identity-copy h2 { color:var(--mq-text); line-height:1.14; }
.mq-shell[data-skin] .mq-profile-identity-copy>p,
.mq-shell[data-skin] .mq-profile-metric small,
.mq-shell[data-skin] .mq-profile-panel p,
.mq-shell[data-skin] .mq-profile-panel dt { color:var(--mq-text-secondary); }
.mq-shell[data-skin] .mq-profile-edit { color:var(--mq-accent-strong); background:var(--mq-surface-soft); border-color:var(--mq-border); }
.mq-shell[data-skin] .mq-story-title,
.mq-shell[data-skin] .mq-profile-identity-copy h2 { white-space:normal; overflow:visible; text-overflow:clip; min-height:1.2em; }

.mq-shell[data-skin] :is(.mq-dob-field input,.mq-premium-field input,.mq-premium-field select,.mq-code-field input) { background:var(--mq-surface-raised); color:var(--mq-text); border-color:var(--mq-border); }
.mq-shell[data-skin] :is(.mq-dob-field input,.mq-premium-field input,.mq-premium-field select,.mq-code-field input):focus { border-color:var(--mq-border-active); box-shadow:var(--mq-glow); }
.mq-shell[data-skin] .mq-result-grid>div { background:var(--mq-surface-soft); }
.mq-shell[data-skin] .mq-result-grid small { color:var(--mq-text-secondary); }
.mq-shell[data-skin] .mq-result-grid strong,
.mq-shell[data-skin] .mq-personal-score strong,
.mq-shell[data-skin] .mq-personal-stats strong,
.mq-shell[data-skin] .mq-personal-trophies strong { color:var(--mq-accent-strong); }

/* Plateau, barre de partie, cartes et états. */
.mq-shell[data-skin] .mq-gamebar,
.mq-shell[data-skin] .mq-score-chip { color:var(--mq-text); }
.mq-shell[data-skin] .mq-score-chip { background:var(--mq-surface); border-color:var(--mq-border); box-shadow:var(--mq-shadow-soft); }
.mq-shell[data-skin] .mq-score-chip.is-turn { border-color:var(--mq-border-active); box-shadow:var(--mq-glow),var(--mq-shadow-soft); }
.mq-shell[data-skin] .mq-game-action { color:var(--mq-accent); background:var(--mq-surface); border-color:var(--mq-border); }
.mq-shell[data-skin] .mq-game-action svg { color:currentColor; filter:none; }
.mq-shell[data-skin] .mq-front { color:var(--mq-text-on-light); }
.mq-shell[data-skin] .mq-front .mq-card-name { color:var(--mq-text-on-light); background:rgba(255,255,255,.91); text-shadow:none; }
.mq-shell[data-skin] .mq-card.is-wrong .mq-face { border-color:var(--mq-error); }
.mq-shell[data-skin] .mq-card.is-done .mq-face { border-color:var(--mq-success); }
.mq-shell[data-skin] .mq-answer,
.mq-shell[data-skin] .mq-quiz-option,
.mq-shell[data-skin] .mq-vf-option { background:var(--mq-surface); color:var(--mq-text); border-color:var(--mq-border); }
.mq-shell[data-skin] .mq-answer.is-correct,
.mq-shell[data-skin] .mq-quiz-option.is-correct,
.mq-shell[data-skin] .mq-vf-option.is-correct { border-color:var(--mq-success); background:color-mix(in srgb,var(--mq-success) 12%,var(--mq-surface)); }
.mq-shell[data-skin] .mq-answer.is-wrong,
.mq-shell[data-skin] .mq-quiz-option.is-wrong,
.mq-shell[data-skin] .mq-vf-option.is-wrong { border-color:var(--mq-error); background:color-mix(in srgb,var(--mq-error) 10%,var(--mq-surface)); }

/* Modales et panneau Astuces/Paramètres en partie. */
.mq-shell[data-skin] :is(.mq-sheet,.mq-game-sheet,.mq-privacy-panel,.mq-tips-card) { color:var(--mq-text); background:var(--mq-surface); border:1px solid var(--mq-border); }
.mq-shell[data-skin] :is(.mq-sheet,.mq-game-sheet,.mq-privacy-panel,.mq-tips-card) :is(h2,h3,strong) { color:var(--mq-text); }
.mq-shell[data-skin] :is(.mq-sheet,.mq-game-sheet,.mq-privacy-panel,.mq-tips-card) :is(p,small) { color:var(--mq-text-secondary); }
.mq-shell[data-skin] .mq-sheet-actions { display:grid; gap:8px; }

/* Responsive et petites hauteurs. */
@media (max-width:500px) {
  .mq-shell[data-skin] { font-size:clamp(13px,3.35vw,16px); }
  .mq-shell[data-skin] .mq-title { letter-spacing:-.025em; }
  .mq-shell[data-skin] .mq-settings-row { min-height:64px; }
  .mq-shell[data-skin] .mq-settings-copy strong { font-size:clamp(.94rem,3.75vw,1.14rem); }
  .mq-shell[data-skin] .mq-settings-copy small { font-size:clamp(.72rem,2.7vw,.84rem); }
  .mq-shell[data-skin] .mq-online-choice small,
  .mq-shell[data-skin] .mq-online-resume small { font-size:clamp(.72rem,2.75vw,.86rem); }
}
@media (max-height:720px) {
  .mq-shell[data-skin] .mq-screen-head,
  .mq-shell[data-skin] .mq-settings-head { padding-top:4px; gap:2px; }
  .mq-shell[data-skin] .mq-settings-list,
  .mq-shell[data-skin] .mq-shop-stack { gap:8px; }
  .mq-shell[data-skin] .mq-settings-row { min-height:58px; padding-block:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin] *, .mq-shell[data-skin] *::before, .mq-shell[data-skin] *::after { scroll-behavior:auto!important; }
}
/* =========================================================================
   MEMOQUEST 6.26.0 — FINITIONS QA VISUELLE
   Résultats, textes compacts, contrôles tactiles et longues dénominations.
   ========================================================================= */
.mq-shell[data-skin] .mq-sheet-title { font-size:clamp(1.12rem,4.4vw,1.3rem); }
.mq-shell[data-skin] .mq-mission-tete strong { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.22; }

.mq-shell[data-skin] :is(.mq-profile-edit,.mq-reset-button,.mq-chip,.mq-icon-btn,.mq-game-action) { min-width:40px; min-height:40px; }
.mq-shell[data-skin] .mq-range { min-height:28px; touch-action:pan-x; }

/* Résultats : même système de surface et de texte que le thème actif. */
.mq-shell[data-skin] .mq-final-result-page { color:var(--mq-text); }

.mq-shell[data-skin] .mq-final-home { color:var(--mq-text)!important; background:var(--mq-surface-raised)!important; border-color:var(--mq-border)!important; }
.mq-shell[data-skin] .mq-final-replay { color:var(--mq-button-text)!important; background:var(--mq-button-bg)!important; border-color:transparent!important; box-shadow:0 5px 0 var(--mq-button-edge),var(--mq-shadow-soft)!important; }

/* Les formulaires et mentions en ligne héritent du thème, jamais du bleu Lagon. */
.mq-shell[data-skin] :is(.mq-privacy-check,.mq-quick-rule,.mq-competitive-copy p,.mq-competitive-copy>span,
  .mq-match-progress span,.mq-rematch-status,.mq-online-form-note) { color:var(--mq-text-secondary); }
.mq-shell[data-skin] :is(.mq-competitive-copy>strong,.mq-trophy-result>div:nth-child(2) strong,
  .mq-trophy-result>div:nth-child(2) p b,.mq-rematch-status strong,.mq-room-code strong) { color:var(--mq-text); }

/* En-têtes posés directement sur le décor : couleur distincte des surfaces. */
.mq-shell[data-skin] {
  --mq-screen-text:var(--mq-text);
  --mq-screen-secondary:var(--mq-text-secondary);
  --mq-screen-accent:var(--mq-accent);
}
.mq-shell[data-skin="jade"] { --mq-screen-text:#123c4f; --mq-screen-secondary:#365f70; --mq-screen-accent:#087f8c; }
.mq-shell[data-skin="ocean"] { --mq-screen-text:#082f49; --mq-screen-secondary:#214e62; --mq-screen-accent:#05596f; }
.mq-shell[data-skin="grenat"] { --mq-screen-text:#fff5ed; --mq-screen-secondary:#f0d5ce; --mq-screen-accent:#efbd82; }
.mq-shell[data-skin="ardoise"] { --mq-screen-text:#f1f6f8; --mq-screen-secondary:#c8d5da; --mq-screen-accent:#65d6df; }
.mq-shell[data-skin="ambre"] { --mq-screen-text:#4a2b12; --mq-screen-secondary:#68472d; --mq-screen-accent:#7c3505; }
.mq-shell[data-skin="nuit"] { --mq-screen-text:#f5f7ff; --mq-screen-secondary:#c9d1e8; --mq-screen-accent:#80d7ff; }
.mq-shell[data-skin] :is(.mq-screen-head,.mq-settings-head,.mq-histoire-titre,.mq-setup-copy) .mq-title { color:var(--mq-screen-text); }
.mq-shell[data-skin] :is(.mq-screen-head,.mq-settings-head,.mq-histoire-titre,.mq-setup-copy) .mq-lede { color:var(--mq-screen-secondary); }
.mq-shell[data-skin] :is(.mq-screen-head,.mq-settings-head,.mq-histoire-titre,.mq-setup-copy) .mq-eyebrow { color:var(--mq-screen-accent); }
.mq-shell[data-skin] .mq-shop-head { flex:0 0 auto; min-height:clamp(82px,10.8vh,102px); padding-bottom:10px; }
.mq-shell[data-skin] .mq-shop-head .mq-lede { padding-bottom:2px; }
@media (max-height:720px) {
  .mq-shell[data-skin] .mq-shop-head { min-height:72px; padding-bottom:6px; }
}

/* ------------------------------------------------------------------
   MemoQuest 6.26.9 — réactions premium : quota 5 + cooldown 3:30
   ------------------------------------------------------------------ */
.mq-game-action.is-reaction svg{width:20px;height:20px}
.mq-game-action.is-reaction{position:relative;background:linear-gradient(145deg,var(--mq-surface,#fff),color-mix(in srgb,var(--mq-accent,#38c4a4) 18%,var(--mq-surface,#fff)));border-color:color-mix(in srgb,var(--mq-accent,#38c4a4) 38%,transparent);box-shadow:0 8px 20px rgba(12,45,39,.13)}
.mq-game-action.is-reaction.is-cooldown::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;right:4px;top:4px;background:#ffb74d;box-shadow:0 0 0 3px color-mix(in srgb,#ffb74d 20%,transparent)}

.mq-game-popover-layer{position:absolute;inset:0;z-index:42;pointer-events:auto;background:transparent}
.mq-game-popover{position:absolute;width:min(296px,calc(100% - 20px));padding:9px;border-radius:19px;background:color-mix(in srgb,var(--mq-surface,#fff) 96%,transparent);color:var(--mq-text,#173c35);border:1px solid color-mix(in srgb,var(--mq-border,rgba(76,117,108,.18)) 86%,transparent);box-shadow:0 18px 42px rgba(8,28,24,.24),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-4px) scale(.97);transform-origin:50% 0;opacity:0;transition:transform .16s cubic-bezier(.2,.85,.2,1),opacity .14s ease}
.mq-game-popover.is-above{transform:translateY(4px) scale(.97);transform-origin:50% 100%}
.mq-game-popover-layer.is-open .mq-game-popover{transform:translateY(0) scale(1);opacity:1}
.mq-reaction-popover{display:grid;gap:7px}
.mq-reaction-popover-head{min-height:29px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.mq-reaction-popover-head strong{font-size:.9rem;letter-spacing:.01em;color:var(--mq-text,#173c35);white-space:nowrap}
.mq-reaction-quota{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.mq-reaction-quota-label{font-size:.62rem;font-weight:850;line-height:1;white-space:nowrap;color:var(--mq-text-secondary,#607973)}
.mq-reaction-quota-dots{display:flex;gap:3px}
.mq-reaction-quota-dots i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--mq-text-secondary,#607973) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mq-border,#80958f) 50%,transparent)}
.mq-reaction-quota-dots i.is-on{background:var(--mq-accent,#38c4a4);box-shadow:0 0 0 2px color-mix(in srgb,var(--mq-accent,#38c4a4) 13%,transparent)}

.mq-reaction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mq-reaction-tile{min-width:0;height:68px;padding:5px 2px 5px;border:1px solid color-mix(in srgb,var(--mq-border,rgba(76,117,108,.18)) 90%,transparent);border-radius:15px;background:color-mix(in srgb,var(--mq-surface,#fff) 91%,var(--mq-accent,#38c4a4) 9%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden;box-shadow:0 5px 14px rgba(12,44,38,.07);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,opacity .14s ease}
.mq-reaction-tile:hover,.mq-reaction-tile:focus-visible{transform:translateY(-2px) scale(1.02);border-color:color-mix(in srgb,var(--mq-accent,#38c4a4) 48%,transparent);box-shadow:0 9px 18px rgba(12,44,38,.13)}
.mq-reaction-tile:active{transform:scale(.96)}
.mq-reaction-tile.is-sending{opacity:.62}
.mq-reaction-tile.is-cooldown,.mq-reaction-tile:disabled{opacity:.42;filter:saturate(.55);transform:none;cursor:not-allowed}
.mq-reaction-tile strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center;font-size:.58rem;line-height:1.03;font-weight:850;color:var(--mq-text,#173c35)}
.mq-reaction-art{width:40px;height:40px;display:grid;place-items:center;filter:drop-shadow(0 5px 7px rgba(21,35,32,.12))}
.mq-reaction-glyph{display:block;width:100%;height:100%;line-height:1;transform-origin:50% 58%;will-change:transform,filter}
.mq-reaction-glyph img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 4px rgba(25,38,34,.12))}
.mq-reaction-tile:hover .mq-reaction-laugh,.mq-reaction-bubble .mq-reaction-laugh{animation:mqEmojiLaugh .58s ease-in-out infinite}
.mq-reaction-tile:hover .mq-reaction-clap,.mq-reaction-bubble .mq-reaction-clap{animation:mqEmojiClap .5s ease-in-out infinite}
.mq-reaction-tile:hover .mq-reaction-wow,.mq-reaction-bubble .mq-reaction-wow{animation:mqEmojiWow .72s cubic-bezier(.2,.8,.2,1) infinite}
.mq-reaction-tile:hover .mq-reaction-fire,.mq-reaction-bubble .mq-reaction-fire{animation:mqEmojiFire .46s ease-in-out infinite alternate}
.mq-reaction-tile:hover .mq-reaction-luck,.mq-reaction-bubble .mq-reaction-luck{animation:mqEmojiLuck .72s ease-in-out infinite}
.mq-reaction-tile:hover .mq-reaction-gg,.mq-reaction-bubble .mq-reaction-gg{animation:mqEmojiGG .9s ease-in-out infinite}
.mq-reaction-tile:hover .mq-reaction-oops,.mq-reaction-bubble .mq-reaction-oops{animation:mqEmojiOops .8s ease-in-out infinite}
.mq-reaction-tile:hover .mq-reaction-star,.mq-reaction-bubble .mq-reaction-star{animation:mqEmojiStar .72s ease-in-out infinite}

.mq-reaction-visibility{height:32px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border-radius:12px;border:0;background:color-mix(in srgb,var(--mq-text,#173c35) 6%,transparent);color:var(--mq-text-secondary,#607973);font-weight:800}
.mq-reaction-visibility svg{width:16px;height:16px}.mq-reaction-visibility span{font-size:.64rem;line-height:1}

/* La réaction remplace temporairement le contenu du HUD, sans modifier sa
   géométrie : les cartes et la destination des gains restent immobiles. */
.mq-board-bottom{position:relative}
.mq-board-bottom>.mq-game-progress,.mq-board-bottom>.mq-gamebar,.mq-board-bottom>.mq-impact-bar{transition:opacity .2s ease,transform .28s cubic-bezier(.22,.85,.25,1),visibility 0s linear 0s}
.mq-board-bottom.is-showing-reaction>.mq-game-progress,.mq-board-bottom.is-showing-reaction>.mq-gamebar,.mq-board-bottom.is-showing-reaction>.mq-impact-bar{opacity:0;transform:translateY(10px) scale(.97);visibility:hidden;transition-delay:0s,0s,.2s;pointer-events:none}
.mq-reaction-burst{position:absolute;inset:2px 3px max(1px,env(safe-area-inset-bottom));z-index:10;display:grid;align-items:center;pointer-events:none;opacity:0;transform:translateY(-10px) scale(.95);animation:mqReactionIn .34s cubic-bezier(.18,.92,.24,1.15) forwards}
.mq-reaction-burst.is-leaving{animation:mqReactionOut .28s ease forwards}
.mq-reaction-bubble{position:relative;width:100%;height:100%;min-height:58px;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:9px;padding:3px 46px 3px 7px;border-radius:19px;background:linear-gradient(105deg,color-mix(in srgb,var(--mq-surface,#fff) 88%,var(--mq-accent,#38c4a4) 12%),color-mix(in srgb,var(--mq-surface,#fff) 94%,#ffd76b 6%));border:1px solid color-mix(in srgb,var(--mq-accent,#38c4a4) 28%,var(--mq-border,transparent));box-shadow:0 8px 20px rgba(7,28,24,.16),inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden}
.mq-reaction-bubble::after{content:"✓";position:absolute;right:10px;top:50%;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--mq-accent,#38c4a4) 12%,transparent);color:var(--mq-accent,#38c4a4);font-size:.78rem;font-weight:950;transform:translateY(-50%) scale(0);animation:mqReactionCheck .36s .18s cubic-bezier(.2,.9,.2,1.25) forwards}
.mq-reaction-bubble-art{width:61px;height:61px;display:grid;place-items:center;flex:0 0 auto;filter:drop-shadow(0 6px 8px rgba(21,35,32,.15))}
.mq-reaction-bubble .mq-reaction-glyph{width:58px;height:58px;animation:mqReactionEmoji .48s cubic-bezier(.18,.9,.25,1.22) both}
.mq-reaction-bubble-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.mq-reaction-bubble b{font-size:clamp(1rem,4.5vmin,1.35rem);line-height:1;font-weight:950;letter-spacing:-.035em;color:var(--mq-text,#173c35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-reaction-bubble small{font-size:.52rem;line-height:1;font-weight:950;letter-spacing:.09em;text-transform:uppercase;color:var(--mq-accent,#38c4a4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-reaction-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--mq-accent,#38c4a4);opacity:.85;animation:mqSpark .9s ease-out infinite}
.mq-reaction-spark.s1{left:7px;top:6px;animation-delay:.03s}.mq-reaction-spark.s2{right:8px;top:5px;animation-delay:.25s}

@keyframes mqEmojiLaugh{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-7deg) translateY(-2px)}50%{transform:rotate(7deg) translateY(1px)}75%{transform:rotate(-4deg) translateY(-1px)}}
@keyframes mqEmojiClap{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.16) rotate(-6deg)}60%{transform:scale(.94) rotate(5deg)}}
@keyframes mqEmojiWow{0%,100%{transform:scale(1)}42%{transform:scale(1.18)}60%{transform:scale(.96)}}
@keyframes mqEmojiFire{from{transform:translateY(1px) scale(.96) rotate(-2deg);filter:saturate(1)}to{transform:translateY(-3px) scale(1.08) rotate(2deg);filter:saturate(1.18)}}
@keyframes mqEmojiLuck{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-9deg) translateY(-2px)}60%{transform:rotate(7deg) translateY(0)}}
@keyframes mqEmojiGG{0%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(2px) rotate(3deg)}70%{transform:translateX(-1px) rotate(-2deg)}}
@keyframes mqEmojiOops{0%,100%{transform:rotate(0) translateY(0)}45%{transform:rotate(-7deg) translateY(1px)}65%{transform:rotate(4deg) translateY(-1px)}}
@keyframes mqEmojiStar{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.13) rotate(-4deg);filter:brightness(1.04)}70%{transform:scale(.97) rotate(4deg)}}
@keyframes mqReactionIn{from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mqReactionOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes mqReactionEmoji{0%{opacity:0;transform:translateY(7px) scale(.62) rotate(-8deg)}65%{opacity:1;transform:translateY(-1px) scale(1.1) rotate(3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes mqReactionCheck{to{transform:translateY(-50%) scale(1)}}
@keyframes mqSpark{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:translateY(-8px) scale(.2)}}
[data-motion="calme"] .mq-reaction-glyph,[data-motion="calme"] .mq-reaction-burst,[data-motion="calme"] .mq-reaction-spark,[data-motion="calme"] .mq-reaction-bubble::after{animation:none!important}
[data-motion="calme"] .mq-reaction-burst{opacity:1;transform:none}
[data-motion="calme"] .mq-reaction-bubble::after{transform:translateY(-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.mq-reaction-burst{opacity:1;transform:none;animation:none!important}.mq-reaction-bubble::after{transform:translateY(-50%) scale(1);animation:none!important}}
@media(max-width:390px){
 .mq-game-popover{width:min(286px,calc(100% - 14px));padding:8px;border-radius:18px}
 .mq-reaction-grid{gap:5px}.mq-reaction-tile{height:65px;border-radius:13px}.mq-reaction-art{width:38px;height:38px}.mq-reaction-glyph{font-size:31px}.mq-reaction-tile strong{font-size:.56rem}.mq-reaction-visibility{height:31px}
 .mq-reaction-quota-label{font-size:.58rem}.mq-reaction-quota-dots{gap:2px}.mq-reaction-quota-dots i{width:4px;height:4px}
 .mq-reaction-burst{inset:1px 0}.mq-reaction-bubble{grid-template-columns:56px minmax(0,1fr);padding:2px 37px 2px 5px}.mq-reaction-bubble-art{width:54px;height:54px}.mq-reaction-bubble .mq-reaction-glyph{width:51px;height:51px}.mq-reaction-bubble::after{right:7px;width:23px;height:23px}
}

@keyframes mqHomeCardLeftIn{0%{opacity:0;transform:translate(-155%,-150%) rotate(-27deg) scale(.72)}68%{opacity:1;transform:translate(-92%,-50%) rotate(-10deg) scale(1.035)}100%{opacity:1;transform:translate(-91%,-49%) rotate(-8.5deg) scale(1)}}
@keyframes mqHomeCardRightIn{0%{opacity:0;transform:translate(55%,-150%) rotate(27deg) scale(.72)}68%{opacity:1;transform:translate(-8%,-50%) rotate(10deg) scale(1.035)}100%{opacity:1;transform:translate(-9%,-49%) rotate(8.5deg) scale(1)}}
@keyframes mqHomeCardCenterIn{0%{opacity:0;transform:translate(-50%,-55%) scale(.42);filter:blur(1.2px)}58%{opacity:1;transform:translate(-50%,-50%) scale(1.07);filter:blur(0)}100%{opacity:1;transform:translate(-50%,-49%) scale(1)}}
@keyframes mqHomeCardLeftIdle{from{transform:translate(-91%,-49%) rotate(-8.5deg)}to{transform:translate(-91%,-52%) rotate(-7.6deg)}}
@keyframes mqHomeCardRightIdle{from{transform:translate(-9%,-49%) rotate(8.5deg)}to{transform:translate(-9%,-52%) rotate(7.6deg)}}
@keyframes mqHomeCardCenterIdle{from{transform:translate(-50%,-49%) scale(1)}to{transform:translate(-50%,-52%) scale(1.012)}}
@keyframes mqHomeWordIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:760px){
  
  
}
@media(max-height:660px){
  
  
}
@media(prefers-reduced-motion:reduce){
  
  
  
  
}

/* =========================================================================
   MemoQuest 6.26.9 — Phase 2 : cibles tactiles et bandeau étroit
   Corrections additives limitées afin de préserver les géométries du jeu.
   ========================================================================= */
.mq-icon-btn,
.mq-game-action,
.mq-reaction-launch,
.mq-settings-close,
.mq-panel-close {
    min-width: 44px;
    min-height: 44px;
}
.mq-game-action { width:44px; height:44px; flex-basis:44px; }

@media (max-width: 370px) {
    .mq-shell[data-screen="miseEnPlace"] .mq-top {
        min-height: 58px;
        padding-inline: 8px;
        gap: 4px;
        border-radius: 22px;
    }
    .mq-shell[data-screen="miseEnPlace"] .mq-avatar {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
    .mq-shell[data-screen="miseEnPlace"] .mq-profil-info { display:none; }
    .mq-shell[data-screen="miseEnPlace"] .mq-chip { gap:3px; margin-left:auto; }
    .mq-shell[data-screen="miseEnPlace"] .mq-chip .mq-coin { width:32px; height:32px; }
    .mq-shell[data-screen="miseEnPlace"] .mq-chip .mq-plus { width:32px; height:32px; }
    .mq-shell[data-screen="miseEnPlace"] .mq-icon-btn {
        width:44px;
        height:44px;
        flex:0 0 44px;
    }
}
@media (max-width: 330px) {
    .mq-shell[data-screen="miseEnPlace"] .mq-chip .mq-plus { display:none; }
    .mq-shell[data-screen="miseEnPlace"] .mq-chip .mq-coin { width:28px; height:28px; }
    .mq-shell[data-screen="miseEnPlace"] .mq-chip { padding-inline:5px; }
    .mq-shell[data-screen="miseEnPlace"] .mq-top { gap:3px; padding-inline:6px; }
}

/* =========================================================================
   MemoQuest 6.27.6 — Design system ciblé : wordmark, univers, thèmes,
   légendes de cartes. Ce bloc est la couche canonique de ces composants.
   ========================================================================= */

/* Wordmark : une paire de couleurs explicitement définie pour chaque thème. */
.mq-shell[data-skin="jade"] {
  --mq-wordmark-memo:#078d9b;
  --mq-wordmark-quest:#123f69;
  --mq-wordmark-shadow:0 1px 0 rgba(255,255,255,.30),0 3px 9px rgba(18,63,105,.12);
}
.mq-shell[data-skin="ocean"] {
  --mq-wordmark-memo:#057d98;
  --mq-wordmark-quest:#083f66;
  --mq-wordmark-shadow:0 1px 0 rgba(255,255,255,.28),0 3px 9px rgba(4,55,91,.14);
}
.mq-shell[data-skin="ardoise"] {
  --mq-wordmark-memo:#69e1e9;
  --mq-wordmark-quest:#f5f9fb;
  --mq-wordmark-shadow:0 2px 10px rgba(0,0,0,.42),0 0 14px rgba(105,225,233,.10);
}
.mq-shell[data-skin="grenat"] {
  --mq-wordmark-memo:#ffc0cb;
  --mq-wordmark-quest:#fff6f1;
  --mq-wordmark-shadow:0 2px 10px rgba(47,7,17,.42),0 0 13px rgba(255,192,203,.10);
}
.mq-shell[data-skin="ambre"] {
  --mq-wordmark-memo:#9b430a;
  --mq-wordmark-quest:#4d2b10;
  --mq-wordmark-shadow:0 1px 0 rgba(255,255,255,.24),0 3px 9px rgba(98,44,8,.12);
}
.mq-shell[data-skin="nuit"] {
  --mq-wordmark-memo:#82ddff;
  --mq-wordmark-quest:#f5f7ff;
  --mq-wordmark-shadow:0 2px 11px rgba(0,0,0,.50),0 0 16px rgba(128,215,255,.12);
}

/* Les mêmes nouveaux visuels horizontaux sont aussi utilisés dans la boutique. */
.mq-view[data-view="boutique"] .mq-opt figure {
  height:clamp(58px,13.5vw,82px);
  padding:0;
  border-radius:clamp(13px,3.3vw,18px);
  background:var(--mq-surface-soft,#dcecf7);
}
.mq-view[data-view="boutique"] .mq-opt figure img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Boutique et Paramètres partagent désormais le même composant visuel de thème,
   la même image, le même ordre et le même état Actif/Utiliser/Prix. */
.mq-theme-grid-unified {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(7px,2vw,10px);
}
.mq-theme-unified {
  min-height:0;
  padding:5px 5px 7px;
  gap:5px;
}
.mq-theme-unified .mq-theme-image {
  width:100%;
  aspect-ratio:16/10;
  border-radius:clamp(9px,2.3vw,13px);
}
.mq-theme-unified .mq-theme-copy {
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.mq-theme-unified .mq-theme-copy strong {
  max-width:100%;
  font-size:clamp(.68rem,2.8vw,.86rem);
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mq-theme-unified .mq-theme-copy small {
  max-width:100%;
  min-height:1.15em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:clamp(.55rem,2.25vw,.72rem);
  line-height:1.08;
  font-weight:850;
  white-space:nowrap;
  color:var(--mq-text-secondary,#55719c);
}
.mq-theme-unified .mq-theme-copy small svg {
  width:11px;
  height:11px;
}
.mq-theme-unified .mq-theme-copy small.is-active { color:var(--mq-success,#15956f); }
.mq-theme-unified .mq-theme-copy small.is-locked { color:var(--mq-warning,#8b6200); }
.mq-view[data-view="boutique"] .mq-shop-theme-option {
  background:var(--mq-surface-raised);
  border-color:var(--mq-border);
  box-shadow:var(--mq-shadow-soft);
}

/* Libellés des cartes : aucun fond blanc, une seule ligne, taille ajustée
   dynamiquement par fitCardNames() quand le plateau devient très dense. */
.mq-shell[data-skin] .mq-board .mq-front > .mq-card-name,
.mq-shell[data-skin] .mq-board[data-category="animaux"] .mq-front > .mq-card-name,
.mq-card-preview-surface > .mq-card-name {
  left:4%;
  right:4%;
  bottom:3.5%;
  min-height:0;
  max-height:none;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  color:#fff !important;
  font-family:"Arial Narrow","Roboto Condensed","Segoe UI",system-ui,sans-serif;
  font-size:clamp(5.2px,1.20vmin,10px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.025em;
  white-space:nowrap !important;
  overflow:visible;
  overflow-wrap:normal;
  word-break:normal;
  text-overflow:clip;
  text-shadow:0 1px 2px rgba(0,0,0,.94),0 0 4px rgba(0,0,0,.58);
}
.mq-shell[data-skin] .mq-board .mq-card-name.is-long,
.mq-card-preview-surface .mq-card-name.is-long {
  font-size:clamp(4.6px,1.02vmin,8.7px);
  letter-spacing:-.035em;
}
.mq-shell[data-skin] .mq-board .mq-card-name.is-very-long,
.mq-card-preview-surface .mq-card-name.is-very-long {
  font-size:clamp(4px,.90vmin,7.6px);
  letter-spacing:-.045em;
}

/* Sur très faible hauteur, l'icône peut disparaître du panneau d'information
   mais jamais recouvrir l'image : priorité au contenu et au toucher. */
@media (max-width:480px), (max-height:700px) {
  .mq-view[data-view="miseEnPlace"] .mq-category-card {
    grid-template-rows:minmax(0,1fr) minmax(30px,27%);
  }
  .mq-view[data-view="miseEnPlace"] .mq-category-info { padding:3px 4px; }
  .mq-view[data-view="miseEnPlace"] .mq-category-medallion { display:none; }
  .mq-view[data-view="miseEnPlace"] .mq-category-title-row strong { max-width:100%;font-size:.66rem; }
  .mq-view[data-view="miseEnPlace"] .mq-category-info small { font-size:.56rem; }
}

/* =========================================================================
   MEMOQUEST 6.27.6 — ACTIVITÉS PREMIUM + QUI SUIS-JE ?
   Source de vérité unique pour Quiz et Vrai/Faux.
   Une seule surface modale, couleurs sémantiques, états accessibles et
   animations bornées. Aucun décor du thème n'est dupliqué dans la fenêtre.
   ========================================================================= */
.mq-shell[data-skin] {
  --mq-activity-overlay: color-mix(in srgb,var(--mq-bg) 54%,rgba(5,16,28,.42));
  --mq-activity-surface: var(--mq-surface);
  --mq-activity-soft: var(--mq-surface-soft);
  --mq-activity-border: var(--mq-border);
  --mq-activity-accent: var(--mq-accent);
  --mq-activity-accent-soft: color-mix(in srgb,var(--mq-accent) 11%,var(--mq-surface));
  --mq-activity-shadow: 0 24px 58px color-mix(in srgb,var(--mq-bg) 30%,rgba(0,0,0,.24));
  --mq-vf-true:#238a49;
  --mq-vf-true-soft:#e9f8ee;
  --mq-vf-true-text:#0f5f2d;
  --mq-vf-false:#d84552;
  --mq-vf-false-soft:#fff0f1;
  --mq-vf-false-text:#a22431;
}
.mq-shell[data-skin="ocean"] {
  --mq-activity-accent:#087c9b; --mq-activity-accent-soft:#e3f5f8;
  --mq-vf-true:#1f8247; --mq-vf-true-soft:#e8f7ed; --mq-vf-true-text:#115c31;
  --mq-vf-false:#cc4050; --mq-vf-false-soft:#fff0f2; --mq-vf-false-text:#9d2837;
}
.mq-shell[data-skin="grenat"] {
  --mq-activity-accent:#8c2040; --mq-activity-accent-soft:#f8e9eb;
  --mq-vf-true:#347a46; --mq-vf-true-soft:#edf7ef; --mq-vf-true-text:#245f34;
  --mq-vf-false:#b7253b; --mq-vf-false-soft:#fcebed; --mq-vf-false-text:#8f182c;
}
.mq-shell[data-skin="ambre"] {
  --mq-activity-accent:#934309; --mq-activity-accent-soft:#f8ead7;
  --mq-vf-true:#397c43; --mq-vf-true-soft:#edf7ee; --mq-vf-true-text:#285f31;
  --mq-vf-false:#b7353e; --mq-vf-false-soft:#fceded; --mq-vf-false-text:#92252e;
}
.mq-shell[data-skin="ardoise"] {
  --mq-activity-overlay:rgba(4,10,14,.70); --mq-activity-surface:#1b2930; --mq-activity-soft:#24353d;
  --mq-activity-border:#48606a; --mq-activity-accent:#65d6df; --mq-activity-accent-soft:#243d43;
  --mq-activity-shadow:0 26px 64px rgba(0,0,0,.46);
  --mq-vf-true:#68d58a; --mq-vf-true-soft:#19392a; --mq-vf-true-text:#dcffe8;
  --mq-vf-false:#ff8192; --mq-vf-false-soft:#44232a; --mq-vf-false-text:#fff0f3;
}
.mq-shell[data-skin="nuit"] {
  --mq-activity-overlay:rgba(2,6,16,.76); --mq-activity-surface:#131d34; --mq-activity-soft:#1b2844;
  --mq-activity-border:#415176; --mq-activity-accent:#80d7ff; --mq-activity-accent-soft:#1c3350;
  --mq-activity-shadow:0 28px 68px rgba(0,0,0,.52);
  --mq-vf-true:#72db94; --mq-vf-true-soft:#16352a; --mq-vf-true-text:#e4ffec;
  --mq-vf-false:#ff8798; --mq-vf-false-soft:#40232e; --mq-vf-false-text:#fff0f4;
}

.mq-shell[data-skin] .mq-activity-layer {
  background:var(--mq-activity-overlay);
  /* Hotfix 6.27.6 : pas de backdrop-filter sur le panneau pédagogique.
     Dans Android WebView, le flou oblige le GPU à re-rastériser le plateau animé
     pendant l'ouverture et peut produire un bref scintillement / frame drop. */
  backdrop-filter:none; -webkit-backdrop-filter:none;
  animation:none;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
.mq-shell[data-skin] .mq-activity-sheet {
  width:min(500px,100%); max-height:min(700px,100%);
  gap:clamp(10px,1.5vh,14px); padding:clamp(15px,2.4vmin,22px);
  border:1px solid var(--mq-activity-border); border-radius:clamp(20px,4vmin,30px);
  background:var(--mq-activity-surface); color:var(--mq-text);
  box-shadow:var(--mq-activity-shadow);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  contain:paint; will-change:transform,opacity;
  animation:mq-activity-enter .22s cubic-bezier(.2,.82,.2,1) both;
}
.mq-shell[data-skin] .mq-activity-sheet > div:first-child {
  padding-bottom:10px; border-bottom:1px solid var(--mq-activity-border);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-sheet-head { gap:10px; }
.mq-shell[data-skin] .mq-activity-sheet .mq-sheet-thumb {
  width:54px; height:54px; padding:6px; border-radius:16px;
  background:var(--mq-activity-accent-soft); color:var(--mq-activity-accent);
  border:1px solid color-mix(in srgb,var(--mq-activity-accent) 26%,var(--mq-activity-border));
  box-shadow:none;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-eyebrow {
  margin:0 0 2px; color:var(--mq-activity-accent); font-size:clamp(.68rem,2.6vw,.78rem);
  letter-spacing:.08em; text-transform:uppercase; font-weight:900;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-sheet-title {
  margin:0; color:var(--mq-text); font-size:clamp(1.08rem,4.4vw,1.4rem); line-height:1.08;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-sheet-body { gap:clamp(10px,1.5vh,14px); overflow-x:hidden; }
.mq-online-challenge-timer {
  width:min(100%,420px); margin-inline:auto; padding:7px 9px 6px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 10px;
  border:1px solid color-mix(in srgb,var(--mq-activity-accent) 32%,var(--mq-activity-border)); border-radius:14px;
  background:color-mix(in srgb,var(--mq-activity-accent-soft) 72%,var(--mq-activity-surface)); color:var(--mq-text);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.mq-online-challenge-timer > span { min-width:0; display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:850; }
.mq-online-challenge-timer > span svg { width:16px; height:16px; flex:0 0 16px; color:var(--mq-activity-accent); }
.mq-online-challenge-timer > strong { min-width:42px; text-align:right; color:var(--mq-activity-accent); font-size:.86rem; font-weight:950; font-variant-numeric:tabular-nums; }
.mq-online-challenge-timer > i { grid-column:1 / -1; height:3px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--mq-activity-border) 62%,transparent); }
.mq-online-challenge-timer > i > u { display:block; width:var(--mq-challenge-left,100%); height:100%; border-radius:inherit; background:var(--mq-activity-accent); transition:width .10s linear,background .2s ease; }
.mq-online-challenge-timer.is-urgent { border-color:color-mix(in srgb,#d84552 62%,var(--mq-activity-border)); background:color-mix(in srgb,#fff0f1 52%,var(--mq-activity-surface)); }
.mq-online-challenge-timer.is-urgent > strong,.mq-online-challenge-timer.is-expired > strong { color:#c52f3d; }
.mq-online-challenge-timer.is-urgent > i > u,.mq-online-challenge-timer.is-expired > i > u { background:#d84552; }
.mq-online-challenge-timer.is-expired > span b::after { content:" · temps écoulé"; }
.mq-shell[data-skin] .mq-question-card {
  padding:clamp(13px,3.4vw,18px); border-radius:18px;
  background:var(--mq-activity-soft); border:1px solid var(--mq-activity-border);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-question {
  margin:0; color:var(--mq-text); font-size:clamp(.98rem,3.8vw,1.16rem); line-height:1.34;
  letter-spacing:-.012em; font-weight:850; text-align:center; overflow-wrap:normal; word-break:normal;
}

.mq-shell[data-skin] .mq-activity-sheet .mq-answers { gap:9px; }
.mq-shell[data-skin] .mq-activity-sheet .mq-answer {
  min-height:52px; margin:0; padding:10px 12px; gap:10px;
  border:1.5px solid var(--mq-activity-border); border-radius:16px;
  background:var(--mq-surface-raised); color:var(--mq-text); box-shadow:none;
  font-size:clamp(.82rem,3.15vw,.98rem); font-weight:800; line-height:1.22;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .18s ease,background .18s ease,box-shadow .18s ease,opacity .18s ease;
  touch-action:manipulation;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-answer:not(:disabled):hover {
  border-color:var(--mq-border-active); background:var(--mq-activity-accent-soft);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-answer:not(:disabled):active { transform:scale(.985); }
.mq-shell[data-skin] .mq-activity-sheet .mq-answer:focus-visible { outline:3px solid color-mix(in srgb,var(--mq-activity-accent) 34%,transparent); outline-offset:2px; }
.mq-shell[data-skin] .mq-activity-sheet .mq-answer:disabled { cursor:default; }
.mq-shell[data-skin] .mq-activity-sheet .mq-answer b {
  width:32px; height:32px; border-radius:11px; flex:0 0 32px;
  background:var(--mq-activity-accent-soft); color:var(--mq-activity-accent);
  border:1px solid color-mix(in srgb,var(--mq-activity-accent) 22%,var(--mq-activity-border));
  box-shadow:none; font-size:.78rem; font-weight:950;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-answer > span { min-width:0; }
.mq-shell[data-skin] .mq-activity-sheet .mq-answer.is-muted { opacity:.42; }
.mq-shell[data-skin] .mq-activity-sheet .mq-answer.is-right {
  opacity:1; border-color:var(--mq-vf-true); background:var(--mq-vf-true-soft); color:var(--mq-vf-true-text);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mq-vf-true) 15%,transparent);
  animation:mq-answer-correct .48s cubic-bezier(.2,.88,.25,1);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-answer.is-right b {
  border-color:var(--mq-vf-true); background:var(--mq-vf-true); color:#fff;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-answer.is-wrong {
  opacity:1; border-color:var(--mq-vf-false); background:var(--mq-vf-false-soft); color:var(--mq-vf-false-text);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mq-vf-false) 13%,transparent);
  animation:mq-answer-wrong .42s ease-out;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-answer.is-wrong b {
  border-color:var(--mq-vf-false); background:var(--mq-vf-false); color:#fff;
}

/* Vrai/Faux : vert et rouge restent sémantiques dans tous les thèmes. */
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer {
  min-height:64px; justify-content:center; text-align:center; padding:10px;
  font-size:clamp(.94rem,3.8vw,1.08rem); font-weight:950;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer b { width:36px; height:36px; flex-basis:36px; border-radius:50%; font-size:1.1rem; }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-true {
  border-color:color-mix(in srgb,var(--mq-vf-true) 58%,var(--mq-activity-border));
  background:var(--mq-vf-true-soft); color:var(--mq-vf-true-text);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-true b { color:#fff; background:var(--mq-vf-true); border-color:var(--mq-vf-true); }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-false {
  border-color:color-mix(in srgb,var(--mq-vf-false) 58%,var(--mq-activity-border));
  background:var(--mq-vf-false-soft); color:var(--mq-vf-false-text);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-false b { color:#fff; background:var(--mq-vf-false); border-color:var(--mq-vf-false); }
/* Le sens Vrai/Faux conserve sa couleur. Le résultat est indiqué par un anneau + pictogramme,
   ce qui évite de transformer visuellement « Faux » en bouton vert lorsqu'il est correct. */
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-right {
  opacity:1; background:inherit; color:inherit;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mq-success) 40%,transparent),0 8px 20px color-mix(in srgb,var(--mq-success) 12%,transparent);
  animation:mq-answer-correct .48s cubic-bezier(.2,.88,.25,1); position:relative;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-wrong {
  opacity:1; background:inherit; color:inherit;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mq-error) 38%,transparent);
  animation:mq-answer-wrong .42s ease-out; position:relative;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-right::after,
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-wrong::after {
  position:absolute; right:7px; top:7px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.68rem; font-weight:950;
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-right::after { content:"✓"; background:var(--mq-success); }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-wrong::after { content:"!"; background:var(--mq-error); }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-true.is-right b,
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-true.is-wrong b { background:var(--mq-vf-true); border-color:var(--mq-vf-true); }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-false.is-right b,
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer.is-false.is-wrong b { background:var(--mq-vf-false); border-color:var(--mq-vf-false); }
.mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer:not(:disabled):hover { transform:translateY(-1px); }

/* Quiz : une seule hiérarchie visuelle, accent du thème uniquement. */
.mq-shell[data-skin] .mq-activity-sheet .mq-quiz-answer { position:relative; padding-right:36px; }
.mq-shell[data-skin] .mq-activity-sheet .mq-quiz-answer::after {
  content:"›"; position:absolute; right:13px; top:50%; transform:translateY(-52%);
  color:var(--mq-text-muted); font-size:1.35rem; font-weight:500; opacity:.75;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-quiz-answer.is-right::after { content:"✓"; color:var(--mq-vf-true); font-weight:950; }
.mq-shell[data-skin] .mq-activity-sheet .mq-quiz-answer.is-wrong::after { content:"×"; color:var(--mq-vf-false); font-weight:950; }

/* Verdict : compact, lisible, sans seconde fenêtre superposée. */
.mq-shell[data-skin] .mq-activity-sheet .mq-verdict {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:12px 13px; border-radius:17px; border:1.5px solid; box-shadow:none;
  animation:mq-verdict-enter .34s cubic-bezier(.2,.84,.2,1);
}
.mq-shell[data-skin] .mq-activity-sheet .mq-verdict.is-right { background:var(--mq-vf-true-soft); border-color:var(--mq-vf-true); color:var(--mq-vf-true-text); }
.mq-shell[data-skin] .mq-activity-sheet .mq-verdict.is-wrong { background:var(--mq-vf-false-soft); border-color:var(--mq-vf-false); color:var(--mq-vf-false-text); }
.mq-shell[data-skin] .mq-verdict-main { min-width:0; display:flex; align-items:flex-start; gap:10px; }
.mq-shell[data-skin] .mq-verdict-icon {
  width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; font-size:1.12rem; font-weight:950;
}
.mq-shell[data-skin] .mq-verdict.is-right .mq-verdict-icon { background:var(--mq-vf-true); }
.mq-shell[data-skin] .mq-verdict.is-wrong .mq-verdict-icon { background:var(--mq-vf-false); }
.mq-shell[data-skin] .mq-verdict-copy { min-width:0; }
.mq-shell[data-skin] .mq-activity-sheet .mq-verdict strong { display:block; margin:0 0 2px; color:currentColor; font-size:.96rem; font-weight:950; }
.mq-shell[data-skin] .mq-activity-sheet .mq-verdict p { margin:0; color:currentColor; opacity:.84; font-size:clamp(.72rem,2.8vw,.83rem); line-height:1.36; font-weight:700; }
.mq-shell[data-skin] .mq-activity-sheet .mq-verdict-score {
  white-space:nowrap; padding:6px 9px; border-radius:999px; background:color-mix(in srgb,currentColor 9%,transparent);
  color:currentColor; font-size:.76rem; font-weight:950; font-variant-numeric:tabular-nums;
}
.mq-shell[data-skin] .mq-activity-sheet .mq-sheet-actions { padding-top:0; }
.mq-shell[data-skin] .mq-activity-sheet .mq-activity-continue { min-height:48px; width:100%; border-radius:15px; }

@keyframes mq-activity-enter {
  from { opacity:0; transform:translate3d(0,8px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
.mq-shell[data-skin] .mq-activity-sheet.is-entry-settled { will-change:auto; }
@keyframes mq-answer-correct { 0%{transform:scale(.985)} 45%{transform:scale(1.025)} 100%{transform:scale(1)} }
@keyframes mq-answer-wrong { 0%,100%{transform:translateX(0)} 28%{transform:translateX(-5px)} 54%{transform:translateX(4px)} 76%{transform:translateX(-2px)} }
@keyframes mq-verdict-enter { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }

@media (max-width:380px) {
  .mq-shell[data-skin] .mq-activity-sheet { padding:13px; border-radius:22px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-vf-answers { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer { min-height:58px; gap:7px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer b { width:32px; height:32px; flex-basis:32px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-answer { min-height:48px; padding:9px 10px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-verdict { grid-template-columns:1fr; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-verdict-score { justify-self:start; }
}
@media (max-height:620px) {
  .mq-shell[data-skin] .mq-activity-sheet { gap:8px; padding:11px 13px; }
  .mq-shell[data-skin] .mq-activity-sheet > div:first-child { padding-bottom:7px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-sheet-thumb { width:44px; height:44px; border-radius:13px; }
  .mq-shell[data-skin] .mq-question-card { padding:10px 12px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-answer { min-height:44px; padding-block:7px; }
  .mq-shell[data-skin] .mq-activity-sheet .mq-vf-answer { min-height:52px; }
}
.mq-shell[data-motion="calme"] .mq-activity-layer *,
.mq-shell[data-motion="calme"] .mq-activity-layer *::before,
.mq-shell[data-motion="calme"] .mq-activity-layer *::after { animation:none!important; transition-duration:0s!important; }
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin] .mq-activity-layer *,
  .mq-shell[data-skin] .mq-activity-layer *::before,
  .mq-shell[data-skin] .mq-activity-layer *::after { animation:none!important; transition-duration:0s!important; }
}

/* =========================================================================
   MEMOQUEST 6.28.4 — QUI SUIS-JE ? V5 + DÉMARRAGE WORDPRESS FIABILISÉ
   Refonte visuelle complète inspirée du mockup validé.
   Pas de blur animé : transform/opacity uniquement pour Android WebView.
   ========================================================================= */
.mq-shell[data-skin] {
  --mq-who-screen:color-mix(in srgb,var(--mq-bg) 93%,#dff3f0 7%);
  --mq-who-panel:#f8fcfb;
  --mq-who-panel-2:#edf8f6;
  --mq-who-ink:#123f4a;
  --mq-who-muted:#52727a;
  --mq-who-metal:#c9a85d;
  --mq-who-metal-hi:#f2dfa4;
  --mq-who-metal-lo:#9b7936;
  --mq-who-accent:#168b99;
  --mq-who-accent-2:#35c2c8;
  --mq-who-back:radial-gradient(circle at 30% 16%,rgba(125,255,247,.38),transparent 28%),linear-gradient(158deg,#1da5ae 0%,#0f7082 56%,#084a5b 100%);
  --mq-who-mark:#f8e5a7;
  --mq-who-card-frame:#d9c07b;
  --mq-who-answer-surface:#fbfdfb;
  --mq-who-answer-label:#fbfaf4;
  --mq-who-rune:rgba(25,139,153,.18);
  --mq-who-shadow:rgba(9,56,65,.18);
}
.mq-shell[data-skin="ocean"] { --mq-who-screen:#062c47; --mq-who-panel:#082f49; --mq-who-panel-2:#0c3b57; --mq-who-ink:#f2fbff; --mq-who-muted:#b9d7e5; --mq-who-metal:#d4b76e; --mq-who-metal-hi:#fff0b9; --mq-who-metal-lo:#9a7533; --mq-who-accent:#38c6dc; --mq-who-accent-2:#4fe5da; --mq-who-back:radial-gradient(circle at 28% 14%,rgba(150,255,255,.28),transparent 26%),linear-gradient(158deg,#11b9c7 0%,#087ca7 52%,#054d84 100%); --mq-who-answer-surface:#0d415c; --mq-who-answer-label:#0a334d; --mq-who-rune:rgba(88,230,230,.17); --mq-who-shadow:rgba(0,7,18,.42); }
.mq-shell[data-skin="ardoise"] { --mq-who-screen:#0d171d; --mq-who-panel:#17242b; --mq-who-panel-2:#1e3038; --mq-who-ink:#eff9fb; --mq-who-muted:#abc2c9; --mq-who-metal:#86c7cf; --mq-who-metal-hi:#d3f4f6; --mq-who-metal-lo:#477f86; --mq-who-accent:#53d5df; --mq-who-accent-2:#76edf0; --mq-who-back:linear-gradient(158deg,#334851 0%,#20333c 56%,#101c23 100%); --mq-who-answer-surface:#21343d; --mq-who-answer-label:#1a2b33; --mq-who-rune:rgba(95,225,234,.14); --mq-who-shadow:rgba(0,0,0,.44); }
.mq-shell[data-skin="grenat"] { --mq-who-screen:#32101b; --mq-who-panel:#461827; --mq-who-panel-2:#552032; --mq-who-ink:#fff4ec; --mq-who-muted:#e8c8c4; --mq-who-metal:#d5ad6a; --mq-who-metal-hi:#ffe1a8; --mq-who-metal-lo:#8d6533; --mq-who-accent:#e6a6b5; --mq-who-accent-2:#f1c4a4; --mq-who-back:radial-gradient(circle at 28% 14%,rgba(255,231,198,.20),transparent 25%),linear-gradient(158deg,#9d3b55 0%,#72273f 52%,#4a172a 100%); --mq-who-answer-surface:#5b2236; --mq-who-answer-label:#481829; --mq-who-rune:rgba(238,185,172,.15); --mq-who-shadow:rgba(14,1,6,.46); }
.mq-shell[data-skin="ambre"] { --mq-who-screen:#4b2614; --mq-who-panel:#fff7e7; --mq-who-panel-2:#ffedc9; --mq-who-ink:#542c18; --mq-who-muted:#8b6248; --mq-who-metal:#bc7a27; --mq-who-metal-hi:#ffe4a2; --mq-who-metal-lo:#75420e; --mq-who-accent:#d96c23; --mq-who-accent-2:#f1aa3d; --mq-who-back:radial-gradient(circle at 30% 15%,rgba(255,255,220,.30),transparent 24%),linear-gradient(158deg,#f2a33d 0%,#d86b1d 54%,#963d0d 100%); --mq-who-answer-surface:#fff8e9; --mq-who-answer-label:#fff1d2; --mq-who-rune:rgba(201,119,33,.17); --mq-who-shadow:rgba(80,35,7,.22); }
.mq-shell[data-skin="nuit"] { --mq-who-screen:#070d19; --mq-who-panel:#0e1727; --mq-who-panel-2:#131f33; --mq-who-ink:#f5f9ff; --mq-who-muted:#b7c5dd; --mq-who-metal:#d3b366; --mq-who-metal-hi:#ffedac; --mq-who-metal-lo:#85682a; --mq-who-accent:#5dcbe6; --mq-who-accent-2:#91e2f2; --mq-who-back:radial-gradient(circle at 30% 15%,rgba(111,214,244,.18),transparent 24%),linear-gradient(158deg,#1a3151 0%,#111f36 56%,#09111f 100%); --mq-who-answer-surface:#16253c; --mq-who-answer-label:#101c30; --mq-who-rune:rgba(112,220,241,.14); --mq-who-shadow:rgba(0,0,0,.52); }

.mq-shell[data-skin] .mq-who-layer { background:var(--mq-who-screen)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
.mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"] {
  width:min(520px,calc(100% - 18px)); max-height:min(820px,calc(100% - 18px)); overflow:hidden;
  padding:clamp(12px,2.1vmin,18px); gap:8px; border:1px solid color-mix(in srgb,var(--mq-who-accent) 34%,var(--mq-who-metal) 22%);
  border-radius:clamp(26px,6vw,38px); background:linear-gradient(180deg,var(--mq-who-panel),var(--mq-who-panel-2));
  box-shadow:0 22px 48px var(--mq-who-shadow),inset 0 1px 0 rgba(255,255,255,.46),inset 0 0 0 1px color-mix(in srgb,var(--mq-who-metal) 18%,transparent);
  color:var(--mq-who-ink); isolation:isolate;
}
.mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"]::before {
  content:""; position:absolute; inset:8px; border-radius:inherit; pointer-events:none; z-index:-1;
  border:1px solid color-mix(in srgb,var(--mq-who-metal) 22%,transparent);
  background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--mq-who-accent-2) 7%,transparent),transparent 36%);
}
.mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"] > div:first-child { text-align:center; padding:0 0 4px; }
.mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"] .mq-sheet-body { overflow:visible; padding:0; }
.mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"] .mq-sheet-actions { display:none; }

.mq-who-heading { display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; padding-top:2px; }
.mq-who-crown { width:33px; height:33px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:-3px; color:var(--mq-who-metal-lo); background:linear-gradient(145deg,var(--mq-who-metal-hi),#fff,var(--mq-who-metal)); border:1px solid var(--mq-who-metal); box-shadow:0 5px 12px color-mix(in srgb,var(--mq-who-metal) 25%,transparent); font-size:.94rem; }
.mq-who-badge { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:5px 17px; border-radius:12px; background:linear-gradient(180deg,color-mix(in srgb,var(--mq-who-accent) 94%,#fff 6%),color-mix(in srgb,var(--mq-who-accent) 78%,#001 22%)); color:#fff; border:1px solid var(--mq-who-metal); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 4px 10px color-mix(in srgb,var(--mq-who-shadow) 65%,transparent); font-size:.62rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.mq-who-badge::before,.mq-who-badge::after { content:"✦"; color:var(--mq-who-metal-hi); font-size:.52rem; margin-inline:6px; }
.mq-who-heading .mq-sheet-title { margin:2px 0 0; color:var(--mq-who-ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.72rem,8.6vw,2.55rem); line-height:1; font-weight:800; letter-spacing:-.035em; text-shadow:0 2px 0 color-mix(in srgb,#fff 44%,transparent); }
.mq-shell[data-skin="ocean"] .mq-who-heading .mq-sheet-title,.mq-shell[data-skin="ardoise"] .mq-who-heading .mq-sheet-title,.mq-shell[data-skin="grenat"] .mq-who-heading .mq-sheet-title,.mq-shell[data-skin="nuit"] .mq-who-heading .mq-sheet-title { text-shadow:0 2px 12px color-mix(in srgb,var(--mq-who-accent) 18%,transparent); }
.mq-who-divider { display:block; width:min(230px,62vw); height:8px; margin-top:2px; position:relative; }
.mq-who-divider::before { content:""; position:absolute; left:0; right:0; top:3px; height:1px; background:linear-gradient(90deg,transparent,var(--mq-who-metal),transparent); }
.mq-who-divider::after { content:"◆"; position:absolute; left:50%; top:-4px; transform:translateX(-50%); color:var(--mq-who-metal); font-size:.58rem; }

.mq-who-stage { position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.2vh,13px); min-height:0; width:100%; }
.mq-who-v5 .mq-online-challenge-timer { width:min(100%,310px); padding:5px 8px 5px; border-color:color-mix(in srgb,var(--mq-who-metal) 42%,var(--mq-who-accent)); background:color-mix(in srgb,var(--mq-who-panel) 90%,var(--mq-who-accent) 10%); color:var(--mq-who-ink); border-radius:13px; }
.mq-who-v5 .mq-online-challenge-timer > span { color:var(--mq-who-muted); font-size:.66rem; }
.mq-who-v5 .mq-online-challenge-timer > span svg,.mq-who-v5 .mq-online-challenge-timer > strong { color:var(--mq-who-accent); }
.mq-who-v5 .mq-online-challenge-timer > i { background:color-mix(in srgb,var(--mq-who-metal) 25%,transparent); }
.mq-who-v5 .mq-online-challenge-timer > i > u { background:linear-gradient(90deg,var(--mq-who-accent),var(--mq-who-metal)); }
.mq-who-stage-rune { position:absolute; left:50%; bottom:clamp(90px,16vh,150px); width:min(94%,420px); aspect-ratio:2.3; transform:translateX(-50%); pointer-events:none; opacity:.72; background:radial-gradient(ellipse at center,transparent 0 32%,var(--mq-who-rune) 33% 34%,transparent 35% 44%,var(--mq-who-rune) 45% 46%,transparent 47%),linear-gradient(90deg,transparent 4%,var(--mq-who-rune) 50%,transparent 96%); mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent); }

.mq-who-mystery-wrap { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:clamp(160px,26vh,224px); }
.mq-who-card { width:clamp(126px,38vw,172px); aspect-ratio:3/4; perspective:1100px; position:relative; z-index:5; flex:0 0 auto; border-radius:18px; box-shadow:0 14px 28px var(--mq-who-shadow),0 0 0 4px color-mix(in srgb,var(--mq-who-metal) 20%,transparent); transform:translate3d(0,0,0) scale(1); transform-origin:center; transition:transform .42s cubic-bezier(.2,.82,.2,1),opacity .2s ease; animation:mq-who-card-breathe 3.8s ease-in-out infinite; }
@keyframes mq-who-card-breathe { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-3px,0)} }
.mq-who-card-inner { position:absolute; inset:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform .58s cubic-bezier(.17,.86,.22,1); }
.mq-who-card.is-revealed .mq-who-card-inner { transform:rotateY(180deg); }
.mq-who-face { position:absolute; inset:0; overflow:hidden; border-radius:inherit; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:2px solid var(--mq-who-card-frame); }
.mq-who-back { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--mq-who-back); color:var(--mq-who-mark); box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--mq-who-metal-hi) 12%,transparent),inset 0 -18px 28px rgba(0,0,0,.20); }
.mq-who-back::before { content:""; position:absolute; inset:9px; border-radius:14px; border:1px solid color-mix(in srgb,var(--mq-who-metal-hi) 72%,transparent); background:radial-gradient(circle at 50% 45%,transparent 0 31%,color-mix(in srgb,var(--mq-who-metal-hi) 20%,transparent) 32% 33%,transparent 34% 47%,color-mix(in srgb,var(--mq-who-metal-hi) 12%,transparent) 48% 49%,transparent 50%); }
.mq-who-back::after { content:"✦"; position:absolute; left:50%; top:11px; transform:translateX(-50%); color:var(--mq-who-metal-hi); font-size:.68rem; text-shadow:0 0 10px currentColor; }
.mq-who-question { position:relative; z-index:2; width:62%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--mq-who-mark); font-family:Georgia,serif; font-size:clamp(4rem,16vw,6.2rem); line-height:1; font-weight:800; background:radial-gradient(circle,color-mix(in srgb,#001 15%,transparent),transparent 67%); border:1px solid color-mix(in srgb,var(--mq-who-metal-hi) 58%,transparent); box-shadow:0 0 0 8px color-mix(in srgb,var(--mq-who-metal-hi) 6%,transparent),0 6px 18px rgba(0,0,0,.18); text-shadow:0 4px 12px rgba(0,0,0,.28); }
.mq-who-back > small { display:none; }
.mq-who-front { transform:rotateY(180deg); display:flex; flex-direction:column; background:var(--mq-who-answer-surface); border-color:var(--mq-who-card-frame); }
.mq-who-front img { width:100%; flex:1 1 auto; min-height:0; object-fit:cover; display:block; }
.mq-who-front strong { flex:0 0 auto; min-height:30px; padding:6px 6px 7px; display:flex; align-items:center; justify-content:center; background:var(--mq-who-answer-label); color:var(--mq-who-ink); font-family:Georgia,serif; font-size:clamp(.68rem,2.6vw,.86rem); font-weight:800; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid color-mix(in srgb,var(--mq-who-metal) 55%,transparent); }

.mq-who-judge { position:absolute; top:50%; width:44px; height:70px; margin-top:-35px; border-radius:22px; display:flex; align-items:center; justify-content:center; opacity:.13; font-size:1.9rem; font-weight:1000; border:1px solid currentColor; transition:opacity .18s ease,transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease; }
.mq-who-judge-ok { left:max(4px,calc(50% - 142px)); color:var(--mq-vf-true); transform:translateX(-6px) scale(.88); }
.mq-who-judge-no { right:max(4px,calc(50% - 142px)); color:var(--mq-vf-false); transform:translateX(6px) scale(.88); }
.mq-who-layer.is-match-right .mq-who-judge-ok { opacity:1; transform:none; box-shadow:0 0 0 8px color-mix(in srgb,var(--mq-vf-true) 8%,transparent),0 0 25px color-mix(in srgb,var(--mq-vf-true) 30%,transparent); }
.mq-who-layer.is-match-wrong .mq-who-judge-no { opacity:1; transform:none; box-shadow:0 0 0 8px color-mix(in srgb,var(--mq-vf-false) 8%,transparent),0 0 25px color-mix(in srgb,var(--mq-vf-false) 30%,transparent); }

.mq-who-speech { position:relative; width:min(100%,430px); padding:clamp(12px,2.2vh,18px) clamp(20px,5vw,34px); border-radius:20px; background:linear-gradient(180deg,color-mix(in srgb,var(--mq-who-panel) 90%,#fff 10%),var(--mq-who-panel)); border:1px solid color-mix(in srgb,var(--mq-who-metal) 65%,var(--mq-who-accent) 35%); box-shadow:0 9px 18px color-mix(in srgb,var(--mq-who-shadow) 55%,transparent),inset 0 0 0 1px color-mix(in srgb,#fff 38%,transparent); }
.mq-who-speech::before { content:""; position:absolute; left:50%; top:-10px; width:18px; height:18px; transform:translateX(-50%) rotate(45deg); background:var(--mq-who-panel); border-left:1px solid color-mix(in srgb,var(--mq-who-metal) 65%,var(--mq-who-accent) 35%); border-top:1px solid color-mix(in srgb,var(--mq-who-metal) 65%,var(--mq-who-accent) 35%); }
.mq-who-speech::after { content:"✦"; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); color:var(--mq-who-metal); font-size:.62rem; background:var(--mq-who-panel); padding:0 5px; }
.mq-who-speech-quote { position:absolute; left:12px; top:6px; color:color-mix(in srgb,var(--mq-who-metal) 62%,transparent); font:700 2rem/1 Georgia,serif; }
.mq-who-speech p { position:relative; z-index:1; margin:0; color:var(--mq-who-ink); font-size:clamp(.85rem,3.45vw,1.08rem); line-height:1.32; font-weight:850; text-align:center; text-wrap:balance; }

.mq-who-answers { position:relative; z-index:3; width:100%; max-width:440px; display:grid; gap:clamp(7px,2vw,11px); align-items:start; justify-content:center; }
.mq-who-answers[data-count="1"] { grid-template-columns:minmax(0,120px); max-width:120px; }
.mq-who-answers[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:250px; }
.mq-who-answers[data-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mq-who-answers[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:306px; }
.mq-who-answers[data-count="5"] { grid-template-columns:repeat(6,minmax(0,1fr)); max-width:342px; }
.mq-who-answers[data-count="5"] .mq-who-answer { grid-column:span 2; }
.mq-who-answers[data-count="5"] .mq-who-answer:nth-child(4) { grid-column:2 / span 2; }
.mq-who-answers[data-count="5"] .mq-who-answer:nth-child(5) { grid-column:4 / span 2; }
.mq-who-answer { min-width:0; min-height:44px; padding:0; border:0; background:transparent; color:inherit; border-radius:18px; touch-action:manipulation; position:relative; z-index:3; transform:translate3d(0,0,0) scale(1); transform-origin:center; transition:transform .42s cubic-bezier(.2,.82,.2,1),opacity .2s ease,filter .2s ease; animation:mq-who-choice-enter .38s cubic-bezier(.18,.82,.25,1) both; animation-delay:calc(var(--who-choice-index,0) * 38ms); }
@keyframes mq-who-choice-enter { from{opacity:0;transform:translate3d(0,10px,0) scale(.96)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} }
.mq-who-answer:focus-visible { outline:3px solid color-mix(in srgb,var(--mq-who-accent) 48%,transparent); outline-offset:4px; }
.mq-who-answer:not(:disabled):active { transform:translateY(2px) scale(.975); }
.mq-who-choice-card { position:relative; display:flex; flex-direction:column; width:100%; aspect-ratio:3/4; overflow:visible; border-radius:18px; border:1px solid var(--mq-who-card-frame); background:var(--mq-who-answer-surface); box-shadow:0 9px 18px var(--mq-who-shadow),inset 0 0 0 3px color-mix(in srgb,#fff 34%,transparent); }
.mq-who-choice-card::before { content:""; position:absolute; inset:4px; z-index:4; pointer-events:none; border-radius:14px; border:1px solid color-mix(in srgb,var(--mq-who-metal-hi) 35%,transparent); }
.mq-who-choice-image { flex:1 1 auto; min-height:0; overflow:hidden; border-radius:16px 16px 0 0; background:color-mix(in srgb,var(--mq-who-accent) 12%,var(--mq-who-panel)); }
.mq-who-choice-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .28s ease; }
.mq-who-answer:not(:disabled):active .mq-who-choice-image img { transform:scale(1.025); }
.mq-who-choice-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--mq-who-accent); font-size:2rem; font-weight:950; }
.mq-who-choice-name { flex:0 0 auto; width:100%; min-height:31px; padding:6px 5px 8px; display:flex; align-items:center; justify-content:center; background:var(--mq-who-answer-label); color:var(--mq-who-ink); font-family:Georgia,serif; font-size:clamp(.60rem,2.55vw,.82rem); line-height:1; font-weight:800; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip; border-top:1px solid color-mix(in srgb,var(--mq-who-metal) 50%,transparent); border-radius:0 0 16px 16px; }
.mq-who-choice-gem { position:absolute; z-index:6; bottom:-7px; left:50%; width:18px; height:18px; transform:translateX(-50%); border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--mq-who-metal-hi),var(--mq-who-metal)); color:var(--mq-who-metal-lo); border:1px solid color-mix(in srgb,var(--mq-who-metal-lo) 55%,transparent); font-size:.48rem; box-shadow:0 3px 7px var(--mq-who-shadow); }
.mq-who-answer:not(:disabled):hover .mq-who-choice-card { border-color:color-mix(in srgb,var(--mq-who-accent) 44%,var(--mq-who-card-frame)); box-shadow:0 12px 24px var(--mq-who-shadow),0 0 0 2px color-mix(in srgb,var(--mq-who-accent) 10%,transparent); }

.mq-who-progress { position:relative; z-index:3; width:min(100%,390px); display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; min-height:28px; color:var(--mq-who-muted); }
.mq-who-progress b { min-width:48px; height:28px; padding:0 10px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--mq-who-ink); font:800 .72rem/1 Georgia,serif; background:color-mix(in srgb,var(--mq-who-panel) 88%,var(--mq-who-accent) 12%); border:1px solid color-mix(in srgb,var(--mq-who-metal) 58%,transparent); }
.mq-who-progress > span { height:8px; display:flex; align-items:center; justify-content:space-around; gap:4px; border-radius:999px; padding:0 5px; background:linear-gradient(90deg,color-mix(in srgb,var(--mq-who-accent) 16%,transparent),color-mix(in srgb,var(--mq-who-metal) 15%,transparent)); border:1px solid color-mix(in srgb,var(--mq-who-metal) 32%,transparent); }
.mq-who-progress i { width:7px; height:7px; transform:rotate(45deg); border-radius:2px; background:color-mix(in srgb,var(--mq-who-muted) 32%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--mq-who-metal) 22%,transparent); }
.mq-who-progress i.is-on { background:var(--mq-who-metal-hi); box-shadow:0 0 10px color-mix(in srgb,var(--mq-who-metal-hi) 56%,transparent); }
.mq-who-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Matching premium : l'arène reste visible pour que ✓/× ne soit jamais masqué par l'opacité du parent. */
.mq-who-match-arena { position:absolute; left:50%; top:45%; width:min(94%,370px); height:210px; transform:translate(-50%,-50%); z-index:12; pointer-events:none; opacity:1; }
.mq-who-match-beam { position:absolute; left:50%; top:50%; width:74%; height:2px; transform:translate(-50%,-50%) scaleX(.2); opacity:0; background:linear-gradient(90deg,transparent,var(--mq-who-metal-hi),transparent); transition:opacity .18s ease,transform .34s ease; }
.mq-who-match-sign { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.55); width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; color:#fff; font-size:2.6rem; font-weight:1000; border:2px solid color-mix(in srgb,#fff 68%,transparent); box-shadow:0 10px 24px rgba(0,0,0,.24); transition:opacity .16s ease,transform .30s cubic-bezier(.2,1,.2,1),box-shadow .30s ease; }
.mq-who-match-sign::before,.mq-who-match-sign::after { content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid currentColor; opacity:.34; }
.mq-who-match-sign::after { inset:-18px; opacity:.16; }
.mq-who-layer.is-resolving .mq-who-heading,.mq-who-layer.is-resolving .mq-who-speech,.mq-who-layer.is-resolving .mq-who-progress,.mq-who-layer.is-resolving .mq-who-judge,.mq-who-layer.is-resolving .mq-who-answer:not(.is-selected-choice) { opacity:0; pointer-events:none; transition:opacity .20s ease; }
.mq-who-layer.is-resolving .mq-who-answer { animation:none; }
.mq-who-layer.is-resolving .mq-who-answer.is-selected-choice,.mq-who-layer.is-resolving .mq-who-card.is-match-card { z-index:20; animation:none; }
.mq-who-layer.is-match-arrived .mq-who-card.is-match-card { transform:translate3d(var(--who-match-x),var(--who-match-y),0) scale(var(--who-match-scale)); }
.mq-who-layer.is-match-arrived .mq-who-answer.is-match-choice { transform:translate3d(var(--who-match-x),var(--who-match-y),0) scale(var(--who-match-scale)); }
.mq-who-layer.is-match-arrived .mq-who-match-beam { opacity:.9; transform:translate(-50%,-50%) scaleX(1); }
.mq-who-layer.is-match-right .mq-who-match-sign,.mq-who-layer.is-match-wrong .mq-who-match-sign { opacity:1; transform:translate(-50%,-50%) scale(1); animation:mq-who-sign-pop .38s cubic-bezier(.2,1.18,.28,1); }
@keyframes mq-who-sign-pop { 0%{transform:translate(-50%,-50%) scale(.5)} 72%{transform:translate(-50%,-50%) scale(1.12)} 100%{transform:translate(-50%,-50%) scale(1)} }
.mq-who-layer.is-match-right .mq-who-match-sign { background:var(--mq-vf-true); box-shadow:0 0 0 9px color-mix(in srgb,var(--mq-vf-true) 12%,transparent),0 0 34px color-mix(in srgb,var(--mq-vf-true) 55%,transparent),0 10px 24px rgba(0,0,0,.24); }
.mq-who-layer.is-match-wrong .mq-who-match-sign { background:var(--mq-vf-false); box-shadow:0 0 0 9px color-mix(in srgb,var(--mq-vf-false) 11%,transparent),0 0 34px color-mix(in srgb,var(--mq-vf-false) 50%,transparent),0 10px 24px rgba(0,0,0,.24); }
.mq-who-layer.is-match-right .mq-who-answer.is-selected-choice .mq-who-choice-card { border-color:var(--mq-vf-true); box-shadow:0 0 0 4px color-mix(in srgb,var(--mq-vf-true) 16%,transparent),0 12px 28px rgba(0,0,0,.20); }
.mq-who-layer.is-match-right .mq-who-card.is-match-card .mq-who-face { border-color:var(--mq-vf-true); }
.mq-who-layer.is-match-wrong .mq-who-answer.is-selected-choice .mq-who-choice-card { border-color:var(--mq-vf-false); box-shadow:0 0 0 4px color-mix(in srgb,var(--mq-vf-false) 14%,transparent),0 12px 28px rgba(0,0,0,.20); animation:mq-who-v3-recoil .36s ease-out; }
.mq-who-layer.is-match-wrong .mq-who-card.is-match-card { animation:mq-who-v3-recoil .36s ease-out; }
@keyframes mq-who-v3-recoil { 0%,100%{translate:0 0} 28%{translate:-4px 0} 58%{translate:4px 0} 80%{translate:-1px 0} }
.mq-who-layer.is-match-right .mq-who-card.is-success { filter:drop-shadow(0 0 14px color-mix(in srgb,var(--mq-vf-true) 38%,transparent)); }

@media (max-width:360px) {
  .mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"] { width:calc(100% - 12px); padding:10px; border-radius:25px; }
  .mq-who-crown { width:27px; height:27px; }
  .mq-who-badge { min-height:25px; padding:4px 12px; font-size:.55rem; }
  .mq-who-heading .mq-sheet-title { font-size:1.48rem; }
  .mq-who-mystery-wrap { min-height:147px; }
  .mq-who-card { width:110px; }
  .mq-who-judge { width:36px; height:58px; font-size:1.5rem; }
  .mq-who-judge-ok { left:8px; }.mq-who-judge-no { right:8px; }
  .mq-who-speech { padding:10px 16px; border-radius:16px; }
  .mq-who-speech p { font-size:.80rem; }
  .mq-who-answers { gap:6px; }
  .mq-who-answers[data-count="3"] { max-width:292px; }
  .mq-who-answers[data-count="4"] { max-width:252px; }
  .mq-who-answers[data-count="5"] { max-width:274px; gap:5px; }
  .mq-who-choice-name { min-height:25px; padding:5px 3px 7px; }
  .mq-who-progress { min-height:24px; }
  .mq-who-progress b { height:24px; min-width:44px; }
  .mq-who-match-arena { width:96%; height:178px; top:43%; }
  .mq-who-match-sign { width:60px; height:60px; font-size:2.25rem; }
}
@media (max-height:620px) {
  .mq-shell[data-skin] .mq-activity-sheet[data-activity-mode="quisuisje"] { max-height:calc(100% - 10px); padding:7px 9px; gap:3px; }
  .mq-who-crown { display:none; }
  .mq-who-badge { min-height:21px; padding:3px 9px; font-size:.49rem; }
  .mq-who-heading .mq-sheet-title { font-size:1.22rem; }
  .mq-who-divider { height:5px; margin:0; }
  .mq-who-stage { gap:5px; }
  .mq-who-mystery-wrap { min-height:109px; }
  .mq-who-card { width:82px; }
  .mq-who-back > small { display:none; }
  .mq-who-question { font-size:3.1rem; }
  .mq-who-judge { display:none; }
  .mq-who-speech { padding:7px 12px; border-radius:14px; }
  .mq-who-speech p { font-size:.69rem; line-height:1.22; }
  .mq-who-answers[data-count="3"] { max-width:258px; }
  .mq-who-answers[data-count="4"] { max-width:226px; }
  .mq-who-answers[data-count="5"] { max-width:236px; gap:4px; }
  .mq-who-choice-name { min-height:20px; padding:3px 2px 5px; font-size:.51rem; }
  .mq-who-choice-gem { width:14px; height:14px; bottom:-5px; font-size:.36rem; }
  .mq-who-progress { min-height:20px; gap:5px; }
  .mq-who-progress b { height:20px; min-width:38px; padding:0 7px; font-size:.62rem; }
  .mq-who-progress > span { height:6px; }
  .mq-who-progress i { width:5px; height:5px; }
  .mq-who-match-arena { top:42%; height:135px; }
}
.mq-shell[data-motion="calme"] .mq-who-layer *, .mq-shell[data-motion="calme"] .mq-who-layer *::before, .mq-shell[data-motion="calme"] .mq-who-layer *::after { animation:none!important; transition-duration:0s!important; }
@media (prefers-reduced-motion:reduce) { .mq-who-layer *, .mq-who-layer *::before, .mq-who-layer *::after { animation:none!important; transition-duration:0s!important; } }

/* Qui suis-je ? V4 — progression 1/5 + cadeau dynamique. */
.mq-who-v4 .mq-who-card,.mq-who-v4 .mq-who-choice-card { border-radius:18px; }
.mq-who-v4 .mq-who-face { border-radius:18px; }
.mq-who-v4 .mq-who-back::before { border-radius:14px; inset:4px; }
.mq-who-v4 .mq-who-mystery-wrap { min-height:clamp(158px,25vh,220px); }
.mq-who-v4 .mq-who-progress { width:min(100%,410px); grid-template-columns:auto minmax(0,1fr); gap:8px; }
.mq-who-v4 .mq-who-progress-track { position:relative; min-width:0; height:30px; padding:0 46px 0 10px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:0; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--mq-who-accent) 13%,transparent),color-mix(in srgb,var(--mq-who-metal) 18%,transparent)); border:1px solid color-mix(in srgb,var(--mq-who-metal) 38%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent); }
.mq-who-v4 .mq-who-progress-track::before { content:""; position:absolute; left:14px; right:48px; top:50%; height:2px; transform:translateY(-50%); background:linear-gradient(90deg,color-mix(in srgb,var(--mq-who-accent) 42%,transparent),color-mix(in srgb,var(--mq-who-metal) 42%,transparent)); }
.mq-who-v4 .mq-who-progress-track > i { position:relative; z-index:2; justify-self:center; width:9px; height:9px; border-radius:50%; transform:none; background:color-mix(in srgb,var(--mq-who-muted) 26%,var(--mq-who-panel)); border:1px solid color-mix(in srgb,var(--mq-who-metal) 42%,transparent); transition:transform .24s ease,background .24s ease,box-shadow .24s ease; }
.mq-who-v4 .mq-who-progress-track > i.is-current { transform:scale(1.34); background:var(--mq-who-metal-hi); box-shadow:0 0 0 5px color-mix(in srgb,var(--mq-who-metal-hi) 14%,transparent),0 0 13px color-mix(in srgb,var(--mq-who-metal-hi) 60%,transparent); }
.mq-who-v4 .mq-who-progress-track > i.is-done { background:var(--mq-who-accent-2); box-shadow:0 0 9px color-mix(in srgb,var(--mq-who-accent-2) 50%,transparent); }
.mq-who-gift { position:absolute; z-index:4; right:-3px; top:50%; width:44px; height:44px; transform:translateY(-50%); border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid var(--mq-who-metal); box-shadow:0 7px 15px var(--mq-who-shadow),inset 0 1px 0 rgba(255,255,255,.52); transition:background .24s ease,filter .24s ease,transform .24s ease; }
.mq-who-gift-icon { width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.mq-who-gift-icon svg { width:100%; height:100%; }
.mq-who-gift small { position:absolute; right:-3px; bottom:-12px; min-width:48px; padding:2px 5px; border-radius:999px; display:flex; gap:3px; justify-content:center; align-items:center; background:var(--mq-who-panel); color:var(--mq-who-ink); border:1px solid color-mix(in srgb,var(--mq-who-metal) 45%,transparent); font:800 .48rem/1 system-ui,sans-serif; white-space:nowrap; }
.mq-who-gift small em { font-style:normal; color:var(--mq-who-accent); }
.mq-who-gift.is-perfect { background:linear-gradient(145deg,#fff5b9,#e7b849 60%,#b77912); color:#5d3b00; box-shadow:0 0 0 5px rgba(255,213,74,.11),0 7px 17px rgba(117,75,0,.28); }
.mq-who-gift.is-gold { background:linear-gradient(145deg,#e7fff8,#55d4bf 60%,#158c83); color:#064d4a; }
.mq-who-gift.is-silver { background:linear-gradient(145deg,#f6fbff,#b7cbd6 60%,#718d9c); color:#254352; }
.mq-who-gift.is-bronze { background:linear-gradient(145deg,#ffe5bf,#c98547 60%,#80451d); color:#4b260d; }
.mq-who-gift.is-mini { background:linear-gradient(145deg,#f2eee8,#b8a99c 65%,#766a61); color:#403a36; filter:saturate(.72); }

.mq-who-series-reward { position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; border-radius:22px; opacity:0; pointer-events:none; transform:scale(.94); background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--mq-who-metal-hi) 25%,transparent),transparent 45%),linear-gradient(180deg,color-mix(in srgb,var(--mq-who-panel) 97%,transparent),color-mix(in srgb,var(--mq-who-panel-2) 97%,transparent)); transition:opacity .26s ease,transform .38s cubic-bezier(.2,1,.2,1); text-align:center; }
.mq-who-layer.is-series-reward .mq-who-series-reward { opacity:1; transform:scale(1); pointer-events:auto; }
.mq-who-layer.is-series-reward .mq-who-stage > :not(.mq-who-series-reward) { opacity:0!important; transition:opacity .18s ease; }
.mq-who-reward-rays { position:absolute; width:210px; height:210px; border-radius:50%; background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--mq-who-metal-hi) 22%,transparent) 0 7deg,transparent 7deg 18deg); mask-image:radial-gradient(circle,black 0 48%,transparent 72%); animation:mq-who-reward-spin 8s linear infinite; }
@keyframes mq-who-reward-spin { to { transform:rotate(360deg); } }
.mq-who-reward-gift { position:relative; z-index:2; width:88px; height:88px; border-radius:28px; display:flex; align-items:center; justify-content:center; color:var(--mq-who-metal-lo); background:linear-gradient(145deg,var(--mq-who-metal-hi),#fff8d4 46%,var(--mq-who-metal)); border:2px solid var(--mq-who-metal); box-shadow:0 0 0 9px color-mix(in srgb,var(--mq-who-metal-hi) 13%,transparent),0 18px 35px var(--mq-who-shadow); animation:mq-who-gift-open .65s cubic-bezier(.2,1.25,.25,1) both; }
.mq-who-reward-gift svg { width:50px; height:50px; }
@keyframes mq-who-gift-open { 0%{transform:translateY(16px) scale(.72) rotate(-7deg);opacity:0} 65%{transform:translateY(-4px) scale(1.08) rotate(3deg);opacity:1} 100%{transform:none;opacity:1} }
.mq-who-series-reward > small { position:relative; z-index:2; font-size:.62rem; font-weight:950; letter-spacing:.16em; color:var(--mq-who-accent); }
.mq-who-series-reward > strong { position:relative; z-index:2; color:var(--mq-who-ink); font:900 clamp(1.2rem,5vw,1.65rem)/1.05 Georgia,serif; }
.mq-who-series-reward > div { position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.mq-who-series-reward > div b { min-height:38px; padding:8px 13px; border-radius:14px; display:flex; gap:5px; align-items:center; background:color-mix(in srgb,var(--mq-who-panel) 82%,var(--mq-who-accent) 18%); color:var(--mq-who-ink); border:1px solid color-mix(in srgb,var(--mq-who-metal) 50%,transparent); box-shadow:0 7px 16px var(--mq-who-shadow); }
.mq-who-series-reward > div svg { width:18px; height:18px; }
.mq-who-series-reward.is-perfect .mq-who-reward-gift { box-shadow:0 0 0 10px rgba(255,221,94,.16),0 0 38px rgba(255,201,39,.42),0 18px 35px var(--mq-who-shadow); }
.mq-who-series-reward.is-mini .mq-who-reward-gift { filter:saturate(.68); }
.mq-who-answer.is-eliminated { opacity:0!important; transform:scale(.82)!important; }
.mq-who-answer.is-auto-correct .mq-who-choice-card { border-color:var(--mq-vf-true); }

@media (max-height:620px) {
  .mq-who-v4 .mq-who-gift { width:36px; height:36px; border-radius:11px; }
  .mq-who-v4 .mq-who-gift-icon { width:21px; height:21px; }
  .mq-who-v4 .mq-who-gift small { display:none; }
  .mq-who-v4 .mq-who-progress-track { height:24px; padding-right:38px; }
}

/* ======================================================================
   QUI SUIS-JE ? V5 — carte mystère = carte candidate, cadeau non révélé
   ====================================================================== */
.mq-who-v5 .mq-who-card {
  width:var(--mq-who-mystery-w,120px);
  height:var(--mq-who-mystery-h,160px);
  aspect-ratio:auto;
  border-radius:18px;
  animation:mq-who-card-breathe 3.8s ease-in-out infinite;
}
.mq-who-v5 .mq-who-face,.mq-who-v5 .mq-who-choice-card { border-radius:18px; }
.mq-who-v5:not(.is-card-size-synced) .mq-who-card { opacity:0; }
.mq-who-v5.is-card-size-synced .mq-who-card { opacity:1; }
.mq-who-v5 .mq-who-back::before { inset:4px; border-radius:14px; }
.mq-who-v5 .mq-who-mystery-wrap { min-height:172px; transition:min-height .18s ease; }

/* La progression ne révèle ni le palier, ni les pièces, ni les points. */
.mq-who-v5 .mq-who-progress { width:min(100%,410px); grid-template-columns:auto minmax(0,1fr); gap:8px; }
.mq-who-v5 .mq-who-progress-track {
  position:relative; min-width:0; height:30px; padding:0 42px 0 10px;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:0;
  border-radius:999px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--mq-who-accent) 10%,transparent),color-mix(in srgb,var(--mq-who-metal) 14%,transparent));
  border:1px solid color-mix(in srgb,var(--mq-who-metal) 34%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent);
}
.mq-who-v5 .mq-who-progress-track::before {
  content:""; position:absolute; left:14px; right:44px; top:50%; height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--mq-who-accent) 40%,transparent),color-mix(in srgb,var(--mq-who-metal) 38%,transparent));
}
.mq-who-v5 .mq-who-progress-track > i {
  position:relative; z-index:2; justify-self:center; width:9px; height:9px; border-radius:50%;
  background:color-mix(in srgb,var(--mq-who-muted) 25%,var(--mq-who-panel));
  border:1px solid color-mix(in srgb,var(--mq-who-metal) 40%,transparent);
  transition:transform .24s ease,background .24s ease,box-shadow .24s ease;
}
.mq-who-v5 .mq-who-progress-track > i.is-current {
  transform:scale(1.34); background:var(--mq-who-metal-hi);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--mq-who-metal-hi) 13%,transparent),0 0 13px color-mix(in srgb,var(--mq-who-metal-hi) 55%,transparent);
}
.mq-who-v5 .mq-who-progress-track > i.is-done { background:var(--mq-who-accent-2); box-shadow:0 0 9px color-mix(in srgb,var(--mq-who-accent-2) 48%,transparent); }

.mq-who-v5 .mq-who-gift {
  position:absolute; z-index:4; right:-2px; top:50%; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; border-radius:13px;
  color:var(--mq-who-metal-lo); background:linear-gradient(145deg,var(--mq-who-panel),var(--mq-who-panel-2));
  border:1px solid color-mix(in srgb,var(--mq-who-metal) 48%,transparent);
  box-shadow:0 6px 14px color-mix(in srgb,var(--mq-who-shadow) 62%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent);
  transform:translateY(-50%) scale(.78); opacity:0; pointer-events:none;
  transition:opacity .24s ease,transform .32s cubic-bezier(.2,1,.2,1),filter .24s ease,box-shadow .28s ease;
}
.mq-who-v5 .mq-who-gift-icon { width:23px; height:23px; display:flex; align-items:center; justify-content:center; }
.mq-who-v5 .mq-who-gift-icon svg { width:100%; height:100%; }
.mq-who-v5 .mq-who-gift-lock {
  position:absolute; z-index:2; width:12px; height:12px; right:-3px; top:-4px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.42rem; color:var(--mq-who-metal-lo);
  background:var(--mq-who-metal-hi); border:1px solid var(--mq-who-metal); box-shadow:0 2px 5px var(--mq-who-shadow);
}
.mq-who-v5 .mq-who-gift.is-locked { opacity:.64; transform:translateY(-50%) scale(.84); filter:saturate(.38); }
.mq-who-v5 .mq-who-gift.is-near { opacity:.84; transform:translateY(-50%) scale(.92); filter:saturate(.62); }
.mq-who-v5 .mq-who-gift.is-ready {
  opacity:1; transform:translateY(-50%) scale(1); filter:none;
  color:var(--mq-who-metal-lo); background:linear-gradient(145deg,var(--mq-who-metal-hi),#fff9df 48%,var(--mq-who-metal));
  box-shadow:0 0 0 6px color-mix(in srgb,var(--mq-who-metal-hi) 12%,transparent),0 7px 18px color-mix(in srgb,var(--mq-who-metal) 30%,transparent);
  animation:mq-who-gift-ready 1.45s ease-in-out infinite;
}
@keyframes mq-who-gift-ready { 0%,100%{transform:translateY(-50%) scale(1)} 50%{transform:translateY(-54%) scale(1.06)} }

/* La valeur réelle n'existe visuellement qu'après le cinquième défi. */
.mq-who-v5 .mq-who-series-reward { border-radius:24px; }
.mq-who-v5 .mq-who-reward-gift {
  width:92px; height:92px; border-radius:28px;
  animation:mq-who-v5-gift-reveal .72s cubic-bezier(.16,1.25,.25,1) both;
}
@keyframes mq-who-v5-gift-reveal {
  0%{transform:translateY(18px) scale(.55) rotate(-8deg);opacity:0}
  58%{transform:translateY(-7px) scale(1.12) rotate(4deg);opacity:1}
  100%{transform:none;opacity:1}
}
.mq-who-v5 .mq-who-series-reward > div b { min-width:120px; justify-content:center; }
.mq-who-reward-note { position:relative; z-index:2; margin:0; color:var(--mq-who-muted); font-size:.68rem; font-weight:750; }

@media (max-width:360px) {
  .mq-who-v5 .mq-who-progress-track { height:26px; padding-right:36px; }
  .mq-who-v5 .mq-who-gift { width:34px; height:34px; border-radius:11px; }
  .mq-who-v5 .mq-who-gift-icon { width:20px; height:20px; }
}
@media (max-height:620px) {
  .mq-who-v5 .mq-who-mystery-wrap { min-height:116px; }
  .mq-who-v5 .mq-who-progress-track { height:22px; padding-right:34px; }
  .mq-who-v5 .mq-who-gift { width:31px; height:31px; border-radius:10px; }
  .mq-who-v5 .mq-who-gift-icon { width:18px; height:18px; }
}

/* =========================================================================
   MEMOQUEST 6.28.4 — CONTRAT RESPONSIVE SMARTPHONE
   Les proportions compactes ne dépendent plus uniquement de la hauteur du
   viewport. Une WebView plein écran et Chrome avec barre d’adresse doivent
   rendre la même interface pour une largeur smartphone <= 480 CSS px.
   ========================================================================= */

/* ================================================================
   MEMOQUEST 6.28.4 — ROUTE DES TROPHÉES / ASCENSION COMPÉTITIVE
   Clone fonctionnel du design validé. Présentation uniquement :
   aucun barème de trophées ou de matchmaking n'est modifié.
   ================================================================ */
.mq-competitive-card[data-competitive-card]{cursor:pointer;outline:none;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}
.mq-competitive-card[data-competitive-card]:active{transform:scale(.988)}
.mq-competitive-card[data-competitive-card]:focus-visible{box-shadow:0 0 0 3px rgba(31,180,194,.2),0 15px 28px rgba(25,78,133,.12)}
.mq-trophy-road-open{overflow:hidden!important}

/* Couche plein écran : on ne déplace jamais le viewport du jeu. */
.mq-trophy-route-layer,.mq-tier-promotion-layer{position:absolute;inset:0;z-index:1250;display:flex;align-items:stretch;justify-content:center;background:rgba(236,250,253,.98);opacity:1;transition:opacity .24s ease}
.mq-trophy-route-layer.is-closing,.mq-tier-promotion-layer.is-closing{opacity:0;pointer-events:none}
.mq-trophy-route{position:relative;width:min(100%,520px);height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:
 radial-gradient(circle at 85% 6%,rgba(84,201,238,.18),transparent 27%),
 radial-gradient(circle at 7% 94%,rgba(247,196,71,.12),transparent 28%),
 linear-gradient(180deg,#f5fcff 0%,#edf9fb 52%,#fbfdfc 100%);color:#153f58}
.mq-trophy-route:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.52) 48%,transparent 54%);transform:translateX(-120%);animation:mq-route-sheen 1.2s ease .2s both}
@keyframes mq-route-sheen{to{transform:translateX(120%)}}

/* En-tête identique au mockup validé. */
.mq-trophy-route-head{position:relative;z-index:5;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;padding:12px 16px 9px;min-height:70px}
.mq-trophy-route-head button{width:44px;height:44px;border:1px solid rgba(25,93,125,.08);border-radius:15px;display:grid;place-items:center;color:#14455d;background:rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(27,84,111,.1);-webkit-tap-highlight-color:transparent}
.mq-trophy-route-head button:active{transform:scale(.95)}
.mq-trophy-route-head button svg{width:24px;height:24px;stroke-width:2.2}
.mq-trophy-route-head>div{text-align:center;min-width:0}
.mq-trophy-route-head h2{margin:0;color:#123f59;font-size:1.27rem;line-height:1.05;font-weight:1000;letter-spacing:-.035em}
.mq-trophy-route-head p{margin:4px 0 0;color:#6d8aa2;font-size:.64rem;line-height:1;font-weight:820}.mq-trophy-route-head p span{color:#21aee0}

/* Résumé 3 colonnes. */
.mq-trophy-summary{position:relative;z-index:3;margin:0 16px 10px;padding:12px 10px 10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-radius:24px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.96);box-shadow:0 13px 30px rgba(31,92,118,.1),inset 0 1px 0 #fff}
.mq-trophy-summary-cell{min-width:0;display:grid;grid-template-columns:42px 1fr;gap:7px;align-items:center;padding:0 8px;position:relative}
.mq-trophy-summary-cell+ .mq-trophy-summary-cell:before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;background:#e4eef2}
.mq-trophy-summary-cell>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(33,110,143,.07)}
.mq-trophy-summary-cell>span svg{width:21px;height:21px}
.mq-trophy-summary-cell.is-trophies>span{color:#eba91d;background:#fff8e5;box-shadow:0 5px 12px rgba(224,162,35,.12)}
.mq-trophy-summary-cell.is-grid>span{background:#f2f9fd}
.mq-trophy-summary-cell.is-next>span{background:#f0fbf2}
.mq-trophy-summary-cell p{min-width:0;margin:0;color:#67839a;font-size:.49rem;line-height:1.12;font-weight:780;white-space:normal}
.mq-trophy-summary-cell p strong{display:block;margin-top:3px;color:#153f58;font-size:.93rem;line-height:1;font-weight:1000;white-space:nowrap;font-variant-numeric:tabular-nums}
.mq-trophy-summary-cell.is-trophies p strong{font-size:1.12rem}.mq-trophy-summary-cell.is-next p strong{color:#269a63;font-size:.66rem;line-height:1.1}
.mq-trophy-summary-cell p strong b{font:inherit}
.mq-trophy-grid-icon{display:grid!important;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:2px;place-content:center;color:#258dce}
.mq-trophy-grid-icon i{display:block;width:7px;height:7px;border-radius:2px;background:currentColor;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.mq-target-icon{position:relative;display:block;width:20px;height:20px;border:3px solid #4cb962;border-radius:50%}
.mq-target-icon:before,.mq-target-icon:after{content:"";position:absolute;background:#4cb962;border-radius:2px}.mq-target-icon:before{left:50%;top:-6px;bottom:-6px;width:2px;transform:translateX(-50%)}.mq-target-icon:after{top:50%;left:-6px;right:-6px;height:2px;transform:translateY(-50%)}
.mq-target-icon{box-shadow:inset 0 0 0 4px rgba(76,185,98,.14)}
.mq-trophy-next-line{grid-column:1/-1;margin-top:10px;min-height:37px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:14px;background:linear-gradient(180deg,#f7fbfd,#f0f8fb);border:1px solid #e6f0f4;color:#67839a}
.mq-trophy-next-line>svg{width:17px;height:17px;color:#5daddb;transform:rotate(-90deg)}
.mq-trophy-next-line p{margin:0;font-size:.57rem;font-weight:760}.mq-trophy-next-line p b,.mq-trophy-next-line p strong{color:#179eae;font-weight:1000}

/* Barre de progression globale. */
.mq-trophy-overall{position:relative;z-index:3;margin:0 18px 8px}
.mq-trophy-overall>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mq-trophy-overall>div:first-child span{color:#64849a;font-size:.58rem;font-weight:900}.mq-trophy-overall>div:first-child b{color:#1399a8;font-size:.66rem;font-weight:1000}
.mq-trophy-overall-bar{height:7px;margin-top:6px;border-radius:99px;overflow:hidden;background:#dcecf0;box-shadow:inset 0 1px 2px rgba(22,77,105,.08)}
.mq-trophy-overall-bar i{display:block;width:var(--road-overall,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#11afb6,#20b8c4,#2099d2);box-shadow:0 0 10px rgba(32,176,190,.28);transform-origin:left;animation:mq-route-progress .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes mq-route-progress{from{transform:scaleX(0)}}
.mq-trophy-overall>p{margin:4px 0 0;color:#718ba0;font-size:.52rem;font-weight:760}.mq-trophy-overall>p b{color:#1495a5;font-size:1.08em}

/* Route : 9 paliers, visibilité par défaut pour éviter tout écran vide. */
.mq-trophy-road-scroll{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:7px 14px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mq-trophy-road-scroll::-webkit-scrollbar{display:none}
.mq-trophy-road-track{position:absolute;left:112px;top:27px;bottom:27px;width:3px;border-radius:99px;background:#d6e8ed;overflow:hidden;pointer-events:none}
.mq-trophy-road-track>span{position:absolute;inset:0}.mq-trophy-road-track>span i{position:absolute;left:0;right:0;bottom:0;height:var(--road-progress,0%);border-radius:99px;background:linear-gradient(0deg,#21c7b8,#27a9cd,#f3bd36);box-shadow:0 0 9px rgba(30,181,187,.34);transform-origin:bottom;animation:mq-route-climb 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes mq-route-climb{from{transform:scaleY(0)}}
.mq-trophy-stage{position:relative;display:grid;grid-template-columns:87px 18px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;margin:0 0 6px;opacity:1;transform:none;transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.mq-trophy-route-layer:not(.is-ready) .mq-trophy-stage{opacity:.78;transform:translateY(5px)}
.mq-trophy-threshold{height:43px;padding:0 9px;border-radius:13px;display:flex;align-items:center;justify-content:flex-start;gap:6px;color:#8099ad;background:rgba(255,255,255,.84);border:1px solid rgba(44,108,140,.08);box-shadow:0 5px 12px rgba(30,79,107,.07);font-variant-numeric:tabular-nums}
.mq-trophy-threshold svg{width:16px;height:16px;flex:0 0 auto}.mq-trophy-threshold b{font-size:.67rem;font-weight:1000;white-space:nowrap}
.mq-trophy-stage-dot{position:relative;z-index:3;width:15px;height:15px;border:3px solid #eff9fb;border-radius:50%;display:grid;place-items:center;background:#bdd9e5;box-shadow:0 0 0 1px #9fc7d8}
.mq-trophy-stage-dot svg{width:10px;height:10px;color:white;stroke-width:2.4}
.mq-trophy-format{height:46px;min-width:0;padding:0 11px;display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:8px;border-radius:14px;background:rgba(255,255,255,.84);border:1px solid rgba(35,100,132,.07);box-shadow:0 5px 12px rgba(27,78,105,.06)}
.mq-trophy-format .mq-trophy-grid-icon{width:30px;height:30px;border-radius:10px;background:#f1f7fb;color:#7a98b3}.mq-trophy-format strong{color:#6e8ba6;font-size:.78rem;line-height:1;font-weight:1000;white-space:nowrap}
.mq-trophy-state{display:flex;align-items:center;gap:4px;justify-content:flex-end;white-space:nowrap;font-size:.45rem;font-weight:1000;letter-spacing:.015em}.mq-trophy-state svg{width:14px;height:14px}
.mq-trophy-state.is-locked{color:#9aaab8}.mq-trophy-state.is-done{color:#41ad7a}.mq-trophy-state.is-current{padding:5px 7px;border-radius:9px;color:white;background:linear-gradient(135deg,#1ab7c3,#23c7b0);box-shadow:0 6px 12px rgba(26,176,183,.2)}
.mq-trophy-stage.is-done .mq-trophy-threshold{color:#45aa7c;background:linear-gradient(180deg,#f7fffb,#eefbf6)}.mq-trophy-stage.is-done .mq-trophy-stage-dot{background:#5bc893;box-shadow:0 0 0 1px #50bb88}.mq-trophy-stage.is-done .mq-trophy-format strong{color:#587c91}
.mq-trophy-stage.is-current .mq-trophy-threshold{color:#11a6ae;border-color:rgba(18,177,184,.34);background:linear-gradient(180deg,#f9ffff,#eafafb);box-shadow:0 7px 17px rgba(21,169,177,.15),0 0 0 2px rgba(30,200,202,.05)}
.mq-trophy-stage.is-current .mq-trophy-stage-dot{background:#1bc3c1;box-shadow:0 0 0 1px #0aa6ad,0 0 0 5px rgba(26,193,194,.11);animation:mq-current-dot 1.7s ease-in-out infinite}
@keyframes mq-current-dot{50%{box-shadow:0 0 0 1px #0aa6ad,0 0 0 9px rgba(26,193,194,.035)}}
.mq-trophy-stage.is-current .mq-trophy-format{border-color:#1bcad0;background:linear-gradient(135deg,#fbffff,#ebfbfb);box-shadow:0 8px 18px rgba(20,169,180,.13),0 0 0 1px rgba(29,208,210,.17)}
.mq-trophy-stage.is-current .mq-trophy-format .mq-trophy-grid-icon{color:#2098cf;background:#effbfe}.mq-trophy-stage.is-current .mq-trophy-format strong{color:#1599aa;font-size:.84rem}
.mq-trophy-stage.is-future{filter:saturate(.75)}

/* Message pédagogique en bas. */
.mq-trophy-route-tip{position:relative;z-index:5;margin:3px 16px 12px;min-height:58px;padding:9px 11px;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;border-radius:18px;background:rgba(248,253,255,.9);border:1px solid rgba(40,139,168,.12);box-shadow:0 8px 20px rgba(31,83,108,.06)}
.mq-trophy-route-tip>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#24c6bc,#259bd3);box-shadow:0 7px 15px rgba(27,153,188,.18)}.mq-trophy-route-tip svg{width:20px;height:20px}
.mq-trophy-route-tip p{margin:0;color:#71899d;font-size:.5rem;line-height:1.27;font-weight:720}.mq-trophy-route-tip b{color:#1b5069;font-size:1.06em;font-weight:1000}

/* ================================================================
   PALIER FRANCHI — écran de célébration premium
   ================================================================ */
.mq-tier-promotion-layer{z-index:1350;align-items:center;padding:12px;background:radial-gradient(circle at 50% 26%,rgba(233,249,255,.96),rgba(231,245,248,.99) 68%)}
.mq-tier-promotion{position:relative;width:min(100%,430px);max-height:96%;overflow:auto;padding:22px 16px 14px;border-radius:29px;text-align:center;background:
 radial-gradient(circle at 50% 25%,rgba(255,223,100,.25),transparent 28%),
 linear-gradient(180deg,#f8fdff,#effafd 55%,#f9fdfc);border:1px solid rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(28,77,103,.2);opacity:1;transform:none;scrollbar-width:none}
.mq-tier-promotion::-webkit-scrollbar{display:none}
.mq-tier-promotion-layer:not(.is-ready) .mq-tier-promotion{opacity:.72;transform:translateY(8px) scale(.985)}
.mq-tier-promotion-layer.is-ready .mq-tier-promotion{transition:opacity .28s ease,transform .55s cubic-bezier(.16,1.15,.3,1)}
.mq-tier-promotion>small{position:relative;z-index:3;display:block;color:#1499a9;font-size:.64rem;letter-spacing:.08em;font-weight:1000}
.mq-tier-promotion>h2{position:relative;z-index:3;margin:4px auto 10px;max-width:340px;color:#123e58;font-size:1.18rem;line-height:1.08;font-weight:1000;letter-spacing:-.03em}
.mq-promotion-rays{position:absolute;left:50%;top:112px;width:235px;height:235px;transform:translate(-50%,-50%);opacity:.48;animation:mq-rays-spin 14s linear infinite;pointer-events:none}.mq-promotion-rays i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,42,.32) 0 3deg,transparent 3deg 22deg)}
@keyframes mq-rays-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mq-promotion-cup{position:relative;z-index:2;margin:4px auto 10px;width:86px;height:86px;border-radius:29px;display:grid;place-items:center;color:#fff7d5;background:linear-gradient(145deg,#ffd95f,#eaa019);border:4px solid #fff;box-shadow:0 16px 34px rgba(200,130,20,.27),0 0 0 9px rgba(255,199,52,.11);animation:mq-promotion-pop .65s cubic-bezier(.14,1.32,.25,1) both}.mq-promotion-cup svg{width:46px;height:46px;stroke-width:1.7}
@keyframes mq-promotion-pop{from{transform:translateY(32px) scale(.45) rotate(-10deg);opacity:.15}}
.mq-promotion-cup i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd74d;box-shadow:38px -10px 0 #35c8bb,-36px -15px 0 #56a3e4,31px 28px 0 #ff987c,-33px 26px 0 #f8c445;animation:mq-prom-spark .85s ease-in-out infinite alternate}.mq-promotion-cup i+i{transform:rotate(45deg) scale(.72);animation-delay:.22s}@keyframes mq-prom-spark{to{transform:rotate(28deg) scale(1.12)}}
.mq-tier-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.mq-confetti-piece{--hue:calc(var(--i)*28deg);position:absolute;left:calc(4% + var(--i)*5.2%);top:-14px;width:6px;height:11px;border-radius:2px;background:hsl(var(--hue) 72% 60%);opacity:.8;transform:rotate(calc(var(--i)*19deg));animation:mq-confetti-fall 2.8s ease-in-out calc(var(--i)*-.12s) infinite}
.mq-confetti-piece:nth-child(3n){width:8px;height:5px;background:#f2bd3d}.mq-confetti-piece:nth-child(3n+1){background:#30b9d2}.mq-confetti-piece:nth-child(3n+2){background:#54c59c}
@keyframes mq-confetti-fall{0%{transform:translateY(-15px) rotate(0deg);opacity:0}12%{opacity:.85}100%{transform:translateY(280px) rotate(300deg);opacity:0}}
.mq-promotion-shift{position:relative;z-index:3;margin:8px auto 10px;display:grid;grid-template-columns:1fr 28px 1fr;gap:7px;align-items:center;max-width:310px}
.mq-promotion-shift article{position:relative;min-height:64px;padding:9px 6px;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.84);border:1px solid rgba(39,103,135,.08);box-shadow:0 8px 18px rgba(30,77,104,.07)}
.mq-promotion-shift article .mq-trophy-grid-icon{width:31px;height:31px;border-radius:10px;background:#f0f7fb;color:#2a94d3}.mq-promotion-shift article strong{color:#1a4963;font-size:.78rem;font-weight:1000}.mq-promotion-shift>em{color:#17b9b3;font-style:normal}.mq-promotion-shift>em svg{width:22px;height:22px;stroke-width:2.4}
.mq-promotion-shift article.is-new{border-color:#24c8ce;background:linear-gradient(135deg,#fbffff,#ebfbfa);box-shadow:0 8px 20px rgba(27,185,191,.16),0 0 0 2px rgba(40,210,211,.06);animation:mq-new-format 1.35s ease-in-out infinite alternate}.mq-promotion-shift article.is-new strong{color:#149eaa}.mq-promotion-shift article.is-new>b{position:absolute;right:7px;bottom:-7px;padding:3px 6px;border-radius:7px;color:white;background:#19b7c1;font-size:.38rem;font-weight:1000}
@keyframes mq-new-format{to{box-shadow:0 10px 25px rgba(27,185,191,.22),0 0 0 4px rgba(40,210,211,.045)}}
.mq-promotion-details{position:relative;z-index:3;margin:6px 0 10px;padding:2px 11px;border-radius:21px;text-align:left;background:rgba(255,255,255,.9);border:1px solid rgba(38,100,132,.07);box-shadow:0 10px 22px rgba(31,83,108,.07)}
.mq-promotion-details>div{min-height:58px;display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;padding:7px 0}.mq-promotion-details>div+div{border-top:1px solid #e8f0f3}
.mq-promotion-details>div>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.mq-promotion-details>div>span svg{width:19px;height:19px}.mq-promotion-details .is-gold{color:#df9f16;background:#fff7df}.mq-promotion-details .is-blue{background:#eef8fd}.mq-promotion-details .is-green{background:#f0faf2}
.mq-mini-grid{display:block;width:18px;height:18px;background:linear-gradient(#2799d4 0 0) 0 0/8px 8px no-repeat,linear-gradient(#2799d4 0 0) 100% 0/8px 8px no-repeat,linear-gradient(#2799d4 0 0) 0 100%/8px 8px no-repeat,linear-gradient(#2799d4 0 0) 100% 100%/8px 8px no-repeat}
.mq-promotion-details p{margin:0;color:#6e899d;font-size:.52rem;line-height:1.2;font-weight:740}.mq-promotion-details p strong{display:block;color:#1b4d66;font-size:.66rem;font-weight:1000}.mq-promotion-details p strong b{color:#13a2af}.mq-promotion-details p small{display:block;margin-top:2px;font-size:.48rem;font-weight:720}.mq-promotion-details p>strong+span{display:block;margin-top:1px}.mq-promotion-details .is-green+.mq-target-icon{transform:scale(.8)}
.mq-promotion-primary,.mq-promotion-secondary{position:relative;z-index:3;width:100%;min-height:45px;border-radius:14px;font-size:.69rem;font-weight:1000;-webkit-tap-highlight-color:transparent}
.mq-promotion-primary{border:0;color:white;background:linear-gradient(135deg,#21bfc1,#199bc8);box-shadow:0 11px 22px rgba(24,154,184,.2)}.mq-promotion-secondary{margin-top:7px;border:1px solid rgba(51,107,137,.11);color:#52738c;background:rgba(255,255,255,.82)}
.mq-promotion-primary:active,.mq-promotion-secondary:active{transform:scale(.985)}

/* Thèmes. */
.mq-shell[data-skin="grenat"] .mq-trophy-route,.mq-shell[data-skin="grenat"] .mq-tier-promotion{background:linear-gradient(180deg,#fff9f7,#f8eeee 58%,#fffaf3)}
.mq-shell[data-skin="ardoise"] .mq-trophy-route,.mq-shell[data-skin="ardoise"] .mq-tier-promotion{background:linear-gradient(180deg,#f9fbfc,#ebf1f4 58%,#f8fbfb)}
.mq-shell[data-skin="nuit"] .mq-trophy-route,.mq-shell[data-skin="nuit"] .mq-tier-promotion{background:linear-gradient(180deg,#172439,#101c2e 58%,#142136);color:#edf6ff}.mq-shell[data-skin="nuit"] :is(.mq-trophy-route-head h2,.mq-trophy-summary-cell p strong,.mq-trophy-format strong,.mq-tier-promotion>h2,.mq-promotion-details p strong){color:#edf6ff}.mq-shell[data-skin="nuit"] :is(.mq-trophy-summary,.mq-trophy-threshold,.mq-trophy-format,.mq-trophy-route-tip,.mq-promotion-shift article,.mq-promotion-details){background:rgba(25,40,61,.88);border-color:#33485f}.mq-shell[data-skin="nuit"] :is(.mq-trophy-summary-cell p,.mq-trophy-overall>p,.mq-trophy-route-tip p,.mq-promotion-details p){color:#9fb1c5}

/* Accessibilité / animation calme. */
[data-motion="calme"] :is(.mq-trophy-route:before,.mq-trophy-overall-bar i,.mq-trophy-road-track i,.mq-trophy-stage.is-current .mq-trophy-stage-dot,.mq-promotion-rays,.mq-promotion-cup,.mq-promotion-cup i,.mq-confetti-piece,.mq-promotion-shift article.is-new){animation:none!important}
@media (prefers-reduced-motion:reduce){.mq-trophy-route:before,.mq-trophy-overall-bar i,.mq-trophy-road-track i,.mq-trophy-stage.is-current .mq-trophy-stage-dot,.mq-promotion-rays,.mq-promotion-cup,.mq-promotion-cup i,.mq-confetti-piece,.mq-promotion-shift article.is-new{animation:none!important}}

/* Contrat smartphone : mêmes proportions dans Chrome et dans la WebView. */
@media (max-width:480px), (max-height:700px){
 .mq-trophy-route-head{min-height:62px;padding:9px 13px 7px;grid-template-columns:42px 1fr 42px}.mq-trophy-route-head button{width:40px;height:40px;border-radius:13px}.mq-trophy-route-head h2{font-size:1.14rem}.mq-trophy-route-head p{font-size:.57rem}
 .mq-trophy-summary{margin:0 13px 8px;padding:9px 7px 8px;border-radius:20px}.mq-trophy-summary-cell{grid-template-columns:34px 1fr;gap:5px;padding:0 5px}.mq-trophy-summary-cell>span{width:33px;height:33px}.mq-trophy-summary-cell>span svg{width:18px;height:18px}.mq-trophy-summary-cell p{font-size:.43rem}.mq-trophy-summary-cell p strong{font-size:.78rem}.mq-trophy-summary-cell.is-trophies p strong{font-size:.98rem}.mq-trophy-summary-cell.is-next p strong{font-size:.57rem}.mq-trophy-grid-icon{grid-template-columns:repeat(2,6px);grid-template-rows:repeat(2,6px);gap:2px}.mq-trophy-grid-icon i{width:6px;height:6px}.mq-target-icon{width:17px;height:17px;border-width:2px}.mq-trophy-next-line{margin-top:8px;min-height:32px;padding:5px 7px;border-radius:12px}.mq-trophy-next-line p{font-size:.49rem}
 .mq-trophy-overall{margin:0 15px 6px}.mq-trophy-overall>div:first-child span{font-size:.51rem}.mq-trophy-overall>div:first-child b{font-size:.59rem}.mq-trophy-overall-bar{height:6px;margin-top:5px}.mq-trophy-overall>p{font-size:.46rem}
 .mq-trophy-road-scroll{padding:5px 11px 7px}.mq-trophy-road-track{left:98px;top:25px;bottom:25px}.mq-trophy-stage{grid-template-columns:76px 17px minmax(0,1fr);gap:6px;min-height:44px;margin-bottom:5px}.mq-trophy-threshold{height:39px;padding:0 7px;border-radius:12px;gap:5px}.mq-trophy-threshold svg{width:14px;height:14px}.mq-trophy-threshold b{font-size:.6rem}.mq-trophy-stage-dot{width:13px;height:13px;border-width:3px}.mq-trophy-format{height:41px;padding:0 8px;grid-template-columns:27px minmax(0,1fr) auto;gap:6px;border-radius:12px}.mq-trophy-format .mq-trophy-grid-icon{width:27px;height:27px;border-radius:9px}.mq-trophy-format strong{font-size:.69rem}.mq-trophy-stage.is-current .mq-trophy-format strong{font-size:.74rem}.mq-trophy-state{font-size:.39rem}.mq-trophy-state.is-current{padding:4px 6px}.mq-trophy-state svg{width:12px;height:12px}
 .mq-trophy-route-tip{margin:2px 13px 8px;min-height:50px;padding:7px 9px;grid-template-columns:33px 1fr;gap:8px;border-radius:15px}.mq-trophy-route-tip>span{width:33px;height:33px;border-radius:10px}.mq-trophy-route-tip svg{width:17px;height:17px}.mq-trophy-route-tip p{font-size:.44rem}
 .mq-tier-promotion-layer{padding:9px}.mq-tier-promotion{padding:18px 13px 12px;border-radius:25px}.mq-tier-promotion>small{font-size:.56rem}.mq-tier-promotion>h2{font-size:1.02rem;margin-bottom:8px}.mq-promotion-cup{width:72px;height:72px;border-radius:24px}.mq-promotion-cup svg{width:38px;height:38px}.mq-promotion-rays{top:98px;width:205px;height:205px}.mq-promotion-shift{grid-template-columns:1fr 24px 1fr;max-width:280px}.mq-promotion-shift article{min-height:57px;border-radius:15px}.mq-promotion-shift article strong{font-size:.7rem}.mq-promotion-details>div{min-height:52px;grid-template-columns:34px 1fr}.mq-promotion-details>div>span{width:32px;height:32px}.mq-promotion-details p{font-size:.47rem}.mq-promotion-details p strong{font-size:.59rem}.mq-promotion-primary,.mq-promotion-secondary{min-height:42px;font-size:.63rem}
}

/* =========================================================================
   MEMOQUEST 6.28.7 — PATCH VISUEL ARDOISE + NUIT
   Portée volontairement limitée aux thèmes concernés.
   Aucun comportement de jeu, score, économie ou réseau n'est modifié.
   ========================================================================= */

/* --- ARDOISE : calme visuel, suppression des scintillements/reflets lourds --- */
.mq-shell[data-skin="ardoise"] .mq-ambiance::before {
  opacity:.16;
  animation:none!important;
  transform:none!important;
  will-change:auto;
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i {
  animation:none!important;
  transform:none!important;
  will-change:auto;
  opacity:.58;
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i:nth-child(1) {
  background:linear-gradient(105deg,transparent 18%,rgba(150,230,238,.055) 38%,transparent 57%),linear-gradient(75deg,transparent 31%,rgba(118,198,213,.045) 48%,transparent 65%);
  filter:blur(8px);
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i:nth-child(2) {
  background:radial-gradient(circle,rgba(62,145,166,.065),transparent 66%);
}
.mq-shell[data-skin="ardoise"] .mq-ambiance i:nth-child(3) {
  background:radial-gradient(ellipse,rgba(64,125,142,.055),transparent 67%);
}

.mq-shell[data-skin="ardoise"] .mq-card.is-open .mq-back::after,
.mq-shell[data-skin="ardoise"] .mq-card.is-done .mq-front::before {
  animation-duration:.95s;
}

/* --- NUIT : surfaces de choix réellement sombres et typographie blanche --- */
.mq-shell[data-skin="nuit"] {
  --night-selected:#142238;
  --night-selected-text:#ffffff;
}

.mq-shell[data-skin="nuit"] .mq-carreau[aria-checked="true"]::before {
  background:linear-gradient(180deg,rgba(255,255,255,.065),transparent 23%)!important;
  opacity:.32!important;
}

.mq-shell[data-skin="nuit"] .mq-carreau[aria-checked="true"]::after {
  width:clamp(34px,9.5vw,46px);
  top:clamp(9px,1.25vh,12px);
  right:clamp(9px,2vw,12px);
  border:2px solid rgba(236,249,255,.90)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),linear-gradient(145deg,#69d3ef,#6575df)!important;
  box-shadow:0 4px 10px rgba(0,0,0,.26)!important;
}

/* Champs Nuit : noir propre, texte blanc, reflet minimal. */
.mq-shell[data-skin="nuit"] :is(.mq-promo-entry,.mq-input,.mq-premium-field,input[type="text"],input[type="number"],select,textarea) {
  background:#080f1b!important;
  color:#fff!important;
  border-color:#344963!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 12px rgba(0,0,0,.18)!important;
}
.mq-shell[data-skin="nuit"] :is(.mq-promo-entry,.mq-input,.mq-premium-field,input,textarea)::placeholder {
  color:#8290a8!important;
  opacity:1;
}

/* Dos des cartes Nuit : emblème lune premium réellement rendu. */
.mq-shell[data-skin="nuit"] .mq-back {
  background:
    radial-gradient(circle at 50% 42%,rgba(87,142,205,.10),transparent 42%),
    linear-gradient(160deg,#182740 0%,#101b30 54%,#091321 100%)!important;
  border-color:#9fb6cf!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -12px 22px rgba(0,0,0,.20),0 5px 12px rgba(0,0,0,.28)!important;
}
.mq-shell[data-skin="nuit"] .mq-back::before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 20% 22%,rgba(255,255,255,.28) 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 29%,rgba(156,226,250,.24) 0 1px,transparent 1.7px),
    radial-gradient(circle at 73% 78%,rgba(255,255,255,.20) 0 1px,transparent 1.6px),
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 30%,transparent 74%,rgba(131,220,246,.035))!important;
  filter:none!important;
  opacity:1!important;
}
.mq-shell[data-skin="nuit"] .mq-back::after {
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:36%!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Ccircle cx='48' cy='48' r='38' stroke='%235c7697' stroke-width='1.5' opacity='.42'/%3E%3Cpath d='M61.5 23.5c-12 4.3-20.5 15.7-20.5 29.1 0 11.8 6.6 22 16.3 27.2-2.9.9-6 1.4-9.2 1.4-17.4 0-31.5-14.1-31.5-31.5S30.7 18.2 48.1 18.2c4.8 0 9.3 1.1 13.4 3v2.3Z' fill='%23dff6ff' opacity='.94'/%3E%3Cpath d='m69 29 2.2 6.8L78 38l-6.8 2.2L69 47l-2.2-6.8L60 38l6.8-2.2L69 29Z' fill='%2388def5'/%3E%3Ccircle cx='72' cy='59' r='2.5' fill='%23eefcff'/%3E%3Ccircle cx='25' cy='28' r='1.8' fill='%239edff3'/%3E%3C/svg%3E")!important;
  opacity:.96!important;
  filter:drop-shadow(0 0 7px rgba(112,202,239,.24))!important;
}
.mq-shell[data-skin="nuit"] .mq-card.is-open .mq-back::after {
  animation:mq-night-premium-emblem .62s ease-out!important;
}
@keyframes mq-night-premium-emblem {
  0% { opacity:.66; transform:translate(-50%,-50%) scale(.92); }
  100% { opacity:.96; transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="nuit"] .mq-card.is-open .mq-back::after { animation:none!important; }
}

/* ======================================================================
   MEMOQUEST 6.28.12 — GUIDE ÉVÉNEMENTIEL / MOTION PREMIUM
   Aucun voile ni fond. Entrée/sortie uniquement sur le visuel transparent.
   ====================================================================== */
@keyframes mq-guide-enter-premium {
  0%   { opacity:0; transform:translate(-50%,30px) scale(.90);  }
  52%  { opacity:1; transform:translate(-50%,-5px) scale(1.026);  }
  76%  { opacity:1; transform:translate(-50%,2px) scale(.995); }
  100% { opacity:1; transform:translate(-50%,0) scale(1);  }
}
@keyframes mq-guide-enter-celebration {
  0%   { opacity:0; transform:translate(-50%,34px) scale(.82) rotate(-1.2deg);  }
  45%  { opacity:1; transform:translate(-50%,-7px) scale(1.045) rotate(.5deg);  }
  68%  { transform:translate(-50%,3px) scale(.988) rotate(-.2deg); }
  84%  { transform:translate(-50%,-1px) scale(1.01) rotate(0); }
  100% { opacity:1; transform:translate(-50%,0) scale(1) rotate(0);  }
}
@keyframes mq-guide-enter-soft {
  0%   { opacity:0; transform:translate(-50%,18px) scale(.95);  }
  62%  { opacity:1; transform:translate(-50%,-2px) scale(1.012);  }
  100% { opacity:1; transform:translate(-50%,0) scale(1);  }
}
@keyframes mq-guide-switch-out {
  0%   { opacity:1; transform:translate(-50%,0) scale(1);  }
  100% { opacity:0; transform:translate(-50%,10px) scale(.965);  }
}
@keyframes mq-guide-exit-premium {
  0%   { opacity:1; transform:translate(-50%,0) scale(1);  }
  24%  { opacity:1; transform:translate(-50%,-3px) scale(1.012); }
  100% { opacity:0; transform:translate(-50%,18px) scale(.94);  }
}
.mq-onboarding-layer {
  position:absolute;
  inset:0;
  z-index:38;
  pointer-events:none;
  overflow:hidden;
  background:transparent!important;
  opacity:1;
  -webkit-tap-highlight-color:transparent;
}
.mq-onboarding-art {
  position:absolute;
  z-index:1;
  left:50%;
  bottom:max(0px,env(safe-area-inset-bottom));
  display:block;
  width:min(103vw,940px);
  height:auto;
  max-height:min(43vh,505px);
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  transform:translate(-50%,30px) scale(.90);
  transform-origin:center bottom;
  /* aucun filtre : blur/drop-shadow animés sur une image de 940 px provoquaient des saccades en pleine partie */
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.mq-onboarding-art.is-ready {
  animation:mq-guide-enter-premium .56s cubic-bezier(.16,.84,.24,1) both;
}
/* Les combos rares reçoivent un mouvement plus spectaculaire, mais court. */
.mq-onboarding-layer[data-guide-event="combo3"] .mq-onboarding-art.is-ready,
.mq-onboarding-layer[data-guide-event="combo4"] .mq-onboarding-art.is-ready,
.mq-onboarding-layer[data-guide-event="combo5"] .mq-onboarding-art.is-ready,
.mq-onboarding-layer[data-guide-event="combo6"] .mq-onboarding-art.is-ready {
  animation-name:mq-guide-enter-celebration;
  animation-duration:.66s;
}
/* Erreur et rupture de combo : mouvement plus doux, sans effet de victoire. */
.mq-onboarding-layer[data-guide-event="firstMiss"] .mq-onboarding-art.is-ready,
.mq-onboarding-layer[data-guide-event="comboBreak"] .mq-onboarding-art.is-ready {
  animation-name:mq-guide-enter-soft;
  animation-duration:.46s;
}
.mq-onboarding-art.is-changing-out {
  animation:mq-guide-switch-out .19s cubic-bezier(.4,0,.7,1) both!important;
}
.mq-onboarding-layer.is-leaving .mq-onboarding-art {
  animation:mq-guide-exit-premium .30s cubic-bezier(.4,0,.7,1) both!important;
}
/* Les deux instructions d'action restent légèrement plus grandes. */
.mq-onboarding-layer[data-guide-event="start"] .mq-onboarding-art,
.mq-onboarding-layer[data-guide-event="firstCard"] .mq-onboarding-art {
  width:min(106vw,970px);
  max-height:min(45vh,525px);
}
/* Plus la série devient rare, plus le visuel gagne légèrement en présence. */
.mq-onboarding-layer[data-guide-event="combo4"] .mq-onboarding-art,
.mq-onboarding-layer[data-guide-event="combo5"] .mq-onboarding-art,
.mq-onboarding-layer[data-guide-event="combo6"] .mq-onboarding-art {
  width:min(105vw,965px);
  max-height:min(44vh,520px);
}
.mq-shell[data-motion="calme"] .mq-onboarding-art,
.mq-shell[data-motion="calme"] .mq-onboarding-art.is-ready,
.mq-shell[data-motion="calme"] .mq-onboarding-art.is-changing-out,
.mq-shell[data-motion="calme"] .mq-onboarding-layer.is-leaving .mq-onboarding-art {
  animation:none!important;
  opacity:1;
  transform:translate(-50%,0) scale(1);
  filter:drop-shadow(0 9px 18px rgba(5,31,58,.12));
}
@media (prefers-reduced-motion:reduce) {
  .mq-onboarding-art,
  .mq-onboarding-art.is-ready,
  .mq-onboarding-art.is-changing-out,
  .mq-onboarding-layer.is-leaving .mq-onboarding-art {
    animation:none!important;
    opacity:1;
    transform:translate(-50%,0) scale(1);
    filter:drop-shadow(0 9px 18px rgba(5,31,58,.12));
  }
}
@media (max-height:700px) {
  .mq-onboarding-art { width:min(101vw,790px);max-height:min(38vh,355px); }
  .mq-onboarding-layer[data-guide-event="start"] .mq-onboarding-art,
  .mq-onboarding-layer[data-guide-event="firstCard"] .mq-onboarding-art { width:min(104vw,820px);max-height:min(40vh,375px); }
}
@media (min-width:800px) {
  .mq-onboarding-art { width:min(78vw,960px);max-height:min(44vh,540px); }
  .mq-onboarding-layer[data-guide-event="start"] .mq-onboarding-art,
  .mq-onboarding-layer[data-guide-event="firstCard"] .mq-onboarding-art { width:min(82vw,990px); }
}

/* MEMOQUEST 6.28.12 — CLAVIER / DATE DE NAISSANCE
   Le clavier Android ne doit jamais masquer le champ actif. La WebView est
   redimensionnée nativement; cette règle fournit un fallback scrollable pour
   les claviers OEM et les grands panneaux de suggestions. */
.mq-view[data-view="online"].is-dob-ime .mq-online-center {
  align-items:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px 3px 12px;
  scrollbar-width:none;
}
.mq-view[data-view="online"].is-dob-ime .mq-online-center::-webkit-scrollbar { display:none; }
.mq-view[data-view="online"].is-dob-ime .mq-online-age-card {
  flex:0 0 auto;
  margin:0 auto;
  scroll-margin-block:14px;
}
.mq-view[data-view="online"].is-dob-ime .mq-dob-field input { scroll-margin-block:18px; }
@media (max-height:700px) {
  .mq-view[data-view="online"].is-dob-ime .mq-online-head { padding-top:0; }
  .mq-view[data-view="online"].is-dob-ime .mq-online-age-card { padding-block:8px;gap:6px; }
  .mq-view[data-view="online"].is-dob-ime .mq-online-age-card p { line-height:1.18; }
}

/* Les photos Nourriture restent la mémoire principale de la carte : plein
   cadre 3:4, aucun filtre, seulement un voile très léger sous le libellé. */
.mq-board[data-category="nourriture"] .mq-front { padding:0;gap:0;background:#2a1710; }
.mq-board[data-category="nourriture"] .mq-front img { position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none; }
.mq-board[data-category="nourriture"] .mq-front::after {
  content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:20%;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,9,3,0),rgba(22,9,3,.42));
}
.mq-board[data-category="nourriture"] .mq-front > .mq-card-name { z-index:3; }

@media (max-width:480px), (max-height:700px) {
  
  
  
  
}

/* =========================================================================
   IMPACT SYSTEM — animations de partie à six paliers (6.28.18)
   Une couche d'effets au-dessus du plateau ; transform/opacity uniquement ;
   palette par thème via variables ; mode calme et reduced-motion respectés.
   ========================================================================= */
.mq-shell {
	--fx-1: var(--turq); --fx-2: var(--bleu); --fx-glow: rgba(46, 134, 224, .55);
	--fx-hot-1: #ffc02e; --fx-hot-2: #ff6a2e; --fx-hot-glow: rgba(255, 138, 61, .6); --fx-ink: #153c7a;
	--fx-conf-a: #ffe08a; --fx-conf-b: #16c4ce; --fx-conf-c: #2e86e0; --fx-conf-d: #ffffff;
	--fx-seg-off: rgba(21, 60, 122, .14);
}
.mq-shell[data-skin="jade"]    { --fx-1:#4fd1b0; --fx-2:#087f8c; --fx-glow:rgba(8,127,140,.5);  --fx-hot-1:#ffd66b; --fx-hot-2:#12b09a; --fx-hot-glow:rgba(79,209,176,.7); --fx-ink:#123c4f; --fx-conf-a:#fff3b0; --fx-conf-b:#7ff0cf; --fx-conf-c:#087f8c; --fx-conf-d:#ffffff; }
.mq-shell[data-skin="ocean"]   { --fx-1:#7ff4ff; --fx-2:#0fa3b4; --fx-glow:rgba(22,196,206,.6);  --fx-hot-1:#e6ffff; --fx-hot-2:#16c4ce; --fx-hot-glow:rgba(127,244,255,.7); --fx-ink:#05596f; --fx-conf-a:#e6ffff; --fx-conf-b:#7ff4ff; --fx-conf-c:#16c4ce; --fx-conf-d:#ffffff; --fx-seg-off:rgba(255,255,255,.16); }
.mq-shell[data-skin="ambre"]   { --fx-1:#ffb457; --fx-2:#c9550c; --fx-glow:rgba(242,113,28,.55); --fx-hot-1:#ffe08a; --fx-hot-2:#ff6a1c; --fx-hot-glow:rgba(255,120,20,.65); --fx-ink:#7c3505; --fx-conf-a:#ffe08a; --fx-conf-b:#ff9d3d; --fx-conf-c:#c9550c; --fx-conf-d:#fff7ea; }
.mq-shell[data-skin="nuit"]    { --fx-1:#83dcf6; --fx-2:#7587ef; --fx-glow:rgba(131,220,246,.55); --fx-hot-1:#c6f0ff; --fx-hot-2:#7587ef; --fx-hot-glow:rgba(117,135,239,.7); --fx-ink:#0a1020; --fx-conf-a:#c6f0ff; --fx-conf-b:#83dcf6; --fx-conf-c:#7587ef; --fx-conf-d:#ffffff; --fx-seg-off:rgba(255,255,255,.14); }
.mq-shell[data-skin="grenat"]  { --fx-1:#efbd82; --fx-2:#c9505b; --fx-glow:rgba(239,189,130,.55); --fx-hot-1:#ffe6c4; --fx-hot-2:#ff5c6b; --fx-hot-glow:rgba(255,120,120,.65); --fx-ink:#3a0812; --fx-conf-a:#ffe6c4; --fx-conf-b:#efbd82; --fx-conf-c:#ff5c6b; --fx-conf-d:#fff5ed; --fx-seg-off:rgba(255,255,255,.14); }
.mq-shell[data-skin="ardoise"] { --fx-1:#65d6df; --fx-2:#3a9fb0; --fx-glow:rgba(101,214,223,.55); --fx-hot-1:#e0fdff; --fx-hot-2:#65d6df; --fx-hot-glow:rgba(101,214,223,.7); --fx-ink:#0f161b; --fx-conf-a:#e0fdff; --fx-conf-b:#65d6df; --fx-conf-c:#3a9fb0; --fx-conf-d:#ffffff; --fx-seg-off:rgba(255,255,255,.14); }

/* ---- jauge de série sous la barre de jeu ---- */
.mq-view[data-view="plateau"] { --mq-heat: 0; }
.mq-impact-bar {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
	min-height: 18px; padding: 0 5px;
}
.mq-impact-badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 16px; padding: 0 7px;
	border-radius: 999px; font-size: .6rem; font-weight: 950; letter-spacing: -.01em; white-space: nowrap; color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 0 6px rgba(0, 0, 0, .18);
	background: linear-gradient(120deg, var(--fx-1), var(--fx-2)); box-shadow: 0 3px 10px var(--fx-glow);
	opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ressort), background .3s;
}
.mq-impact-badge:empty { visibility: hidden; }
.mq-impact-badge.is-on { opacity: 1; transform: scale(1); }
.mq-impact-bar[data-tier="4"] .mq-impact-badge, .mq-impact-bar[data-tier="5"] .mq-impact-badge, .mq-impact-bar[data-tier="6"] .mq-impact-badge {
	background: linear-gradient(120deg, var(--fx-hot-1), var(--fx-hot-2)); box-shadow: 0 3px 12px var(--fx-hot-glow);
	animation: mq-fx-burn 1.1s ease-in-out infinite;
}
@keyframes mq-fx-burn { 50% { filter: brightness(1.25); } }
.mq-impact-badge.is-pulse { animation: mq-fx-badge-pulse .5s var(--ressort); }
@keyframes mq-fx-badge-pulse { 40% { transform: scale(1.22); } }
.mq-impact-badge.is-break { animation: mq-fx-badge-break .55s var(--ease) forwards; background: linear-gradient(120deg, #ff8f86, var(--rouge)); }
@keyframes mq-fx-badge-break {
	20% { transform: scale(1.15) rotate(-6deg); }
	45% { transform: scale(1.05) rotate(5deg); opacity: 1; }
	100% { transform: scale(.4) translateY(10px) rotate(-14deg); opacity: 0; }
}
.mq-impact-meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; min-width: 0; }
.mq-impact-meter i { display: block; height: 5px; border-radius: 999px; background: var(--fx-seg-off); position: relative; overflow: hidden; }
.mq-impact-meter i::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: linear-gradient(90deg, var(--fx-1), var(--fx-2));
	transform: scaleX(0); transform-origin: left; transition: transform .4s var(--sortie);
}
.mq-impact-meter i.is-on::after { transform: scaleX(1); }
.mq-impact-meter i.is-hot::after { background: linear-gradient(90deg, var(--fx-hot-1), var(--fx-hot-2)); box-shadow: 0 0 8px var(--fx-hot-glow); }
.mq-impact-meter i.is-next::after { transform: scaleX(1); opacity: .35; animation: mq-fx-next 1s ease-in-out infinite; }
@keyframes mq-fx-next { 50% { opacity: .7; } }
.mq-impact-next { font-size: .6rem; font-weight: 950; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Écrans courts : la jauge s'aplatit pour ne rien retirer aux cartes (cible tactile ≥ 44 px conservée). */
@media (max-height: 700px) {
	.mq-impact-bar { min-height: 13px; padding: 0 5px; gap: 6px; }
	.mq-impact-badge { height: 13px; min-width: 24px; padding: 0 6px; font-size: .52rem; }
	.mq-impact-meter i { height: 3px; }
	.mq-impact-next { font-size: .52rem; }
}
@media (max-width: 340px) { .mq-impact-next { display: none; } .mq-impact-bar { grid-template-columns: auto minmax(0, 1fr); } }
/* Très petits téléphones (≤ 600 px de haut) : la jauge disparaît pour rendre chaque pixel aux cartes ; le reste de l'Impact System est conservé. */
@media (max-height: 600px) { .mq-impact-bar { display: none; } }
.mq-impact-next em { font-style: normal; color: var(--encre); }
.mq-shell[data-skin] .mq-impact-next { color: var(--mq-screen-secondary, var(--encre-2)); }
.mq-shell[data-skin] .mq-impact-next em { color: var(--mq-screen-text, var(--encre)); }

/* ---- chips de score ---- */
.mq-score-chip.is-hot { box-shadow: 0 2px 9px rgba(21,60,122,.11), 0 0 0 2px var(--fx-hot-1), 0 0 18px var(--fx-hot-glow); }
.mq-score-chip.is-bump { animation: mq-fx-chip-bump .5s var(--ressort); }
@keyframes mq-fx-chip-bump { 35% { transform: scale(1.14); } }
.mq-score-chip.is-hit { animation: mq-fx-chip-hit .45s var(--ease); }
@keyframes mq-fx-chip-hit { 25% { transform: translateX(-3px); } 55% { transform: translateX(3px); } }

/* ---- couches d'ambiance dans le cadre du plateau ---- */
.mq-fx-aura {
	position: absolute; inset: -10%; pointer-events: none; z-index: 0; border-radius: inherit;
	opacity: var(--mq-heat); transition: opacity .6s;
	background: radial-gradient(ellipse at 50% 40%, transparent 40%, var(--fx-hot-glow) 100%);
	animation: mq-fx-aura 2.6s ease-in-out infinite;
}
@keyframes mq-fx-aura { 50% { transform: scale(1.04); } }
.mq-fx-heat {
	position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
	opacity: var(--mq-heat); transition: opacity .45s;
	box-shadow: inset 0 0 0 2px var(--fx-hot-1), inset 0 0 30px 6px var(--fx-hot-glow);
}
.mq-fx-flash {
	position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; opacity: 0;
	background: radial-gradient(circle at 50% 45%, var(--fx-hot-glow), transparent 62%);
}
.mq-fx-flash.is-on { animation: mq-fx-flash .55s var(--sortie); }
@keyframes mq-fx-flash { 12% { opacity: 1; } 100% { opacity: 0; } }
.mq-fx-miss { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; opacity: 0; box-shadow: inset 0 0 40px 10px rgba(240, 68, 56, .45); }
.mq-fx-miss.is-on { animation: mq-fx-miss .6s var(--sortie); }
@keyframes mq-fx-miss { 15% { opacity: 1; } 100% { opacity: 0; } }
.mq-fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.mq-score-fx-layer { position:absolute;inset:0;pointer-events:none;z-index:18;overflow:hidden; }

/* ---- tremblement du plateau (×4+) ---- */
.mq-board.is-shake-1 { animation: mq-fx-shake .42s var(--ease); --amp: 2px; }
.mq-board.is-shake-2 { animation: mq-fx-shake .48s var(--ease); --amp: 4px; }
.mq-board.is-shake-3 { animation: mq-fx-shake .55s var(--ease); --amp: 6px; }
@keyframes mq-fx-shake {
	15% { transform: translate(var(--amp), calc(var(--amp) * -.6)); }
	35% { transform: translate(calc(var(--amp) * -1), calc(var(--amp) * .5)); }
	55% { transform: translate(calc(var(--amp) * .7), calc(var(--amp) * .4)); }
	75% { transform: translate(calc(var(--amp) * -.5), calc(var(--amp) * -.3)); }
}

/* ---- gain à paliers ---- */
.mq-fx-gain {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	font-weight: 950; letter-spacing: -.045em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
	color: #fff; -webkit-text-stroke: 2px var(--fx-ink); paint-order: stroke fill;
	text-shadow: 0 3px 0 var(--fx-ink), 0 10px 22px var(--fx-glow), 0 0 18px var(--fx-1);
	animation: mq-fx-gain .68s var(--sortie) forwards; --dy: -13px;
}
.mq-fx-gain.is-t1 { font-size: clamp(22px, 7vmin, 32px); }
.mq-fx-gain.is-t2 { font-size: clamp(26px, 8.5vmin, 38px); }
.mq-fx-gain.is-t3 { font-size: clamp(30px, 10vmin, 46px); color: var(--fx-hot-1); text-shadow: 0 3px 0 var(--fx-ink), 0 10px 22px var(--fx-hot-glow), 0 0 20px var(--fx-hot-2); }
.mq-fx-gain.is-t4 { font-size: clamp(34px, 11.5vmin, 54px); }
.mq-fx-gain.is-t5 { font-size: clamp(38px, 13vmin, 60px); }
.mq-fx-gain.is-t6 { font-size: clamp(44px, 15vmin, 68px); }
.mq-fx-gain.is-t4, .mq-fx-gain.is-t5, .mq-fx-gain.is-t6 { color: var(--fx-hot-1); -webkit-text-stroke: 3px var(--fx-ink); text-shadow: 0 4px 0 var(--fx-ink), 0 12px 26px var(--fx-hot-glow), 0 0 26px var(--fx-hot-2); }
@keyframes mq-fx-gain {
	0% { opacity: 0; transform: translate(-50%, -50%) translateY(14px) scale(.35); }
	14% { opacity: 1; transform: translate(-50%, -50%) translateY(-10px) scale(1.28); }
	26% { transform: translate(-50%, -50%) translateY(-14px) scale(1); }
	70% { opacity: 1; transform: translate(-50%, -50%) translateY(calc(var(--dy) * .6)) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) translateY(var(--dy)) scale(.9); }
}
@keyframes mq-fx-calm {
	0% { opacity: 0; transform: translate(-50%, -50%) translateY(6px); }
	20% { opacity: 1; transform: translate(-50%, -50%); }
	100% { opacity: 0; transform: translate(-50%, -50%) translateY(-20px); }
}
.mq-fx-fly {
	position: absolute; left: 0; top: 0; font-weight: 950; color: #fff; font-size: 15px; padding: 3px 9px; border-radius: 999px;
	background: linear-gradient(120deg, var(--fx-1), var(--fx-2)); box-shadow: 0 4px 12px var(--fx-glow); will-change: transform, opacity;
}
.mq-fx-fly.is-hot { background: linear-gradient(120deg, var(--fx-hot-1), var(--fx-hot-2)); box-shadow: 0 4px 12px var(--fx-hot-glow); }
.mq-fx-fly.is-ghost { padding: 0; width: 10px; height: 10px; border-radius: 50%; opacity: .7; }

/* ---- scellement : balayage lumineux synchrone sur les deux cartes ---- */
.mq-fx-sweep {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: clamp(9px, 2vmin, 18px); overflow: hidden;
	pointer-events: none;
}
.mq-fx-sweep::before {
	content: ""; position: absolute; inset: -40%;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%);
	transform: translateX(-70%); animation: mq-fx-sweep .7s var(--ease) .12s forwards;
}
@keyframes mq-fx-sweep { to { transform: translateX(70%); } }
.mq-fx-sweep.is-hot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--fx-hot-1); opacity: 0; animation: mq-fx-rim .9s var(--ease) .1s; }
@keyframes mq-fx-rim { 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---- anneaux, particules, rayons, étincelles ---- */
.mq-fx-ring { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 4px solid var(--fx-1); animation: mq-fx-ring .74s var(--sortie) forwards; will-change: transform, opacity; }
.mq-fx-ring.is-hot { border-color: var(--fx-hot-1); }
.mq-fx-ring.is-b { animation-delay: .12s; }
@keyframes mq-fx-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(9); } }
.mq-fx-dot {
	position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #fff, var(--fx-1)); box-shadow: 0 0 10px var(--fx-glow);
	animation: mq-fx-dot .78s var(--sortie) forwards; will-change: transform, opacity;
}
.mq-fx-dot.is-hot { background: radial-gradient(circle at 40% 35%, #fff, var(--fx-hot-2)); box-shadow: 0 0 12px var(--fx-hot-glow); }
@keyframes mq-fx-dot {
	0% { opacity: 1; transform: rotate(calc(var(--a) * 1deg)) translateY(0) scale(1.3); }
	100% { opacity: 0; transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--d) * -1px)) scale(.2); }
}
.mq-fx-rays {
	position: absolute; left: 0; top: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, var(--fx-hot-1) 0 5deg, transparent 5deg 24deg);
	-webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%);
	opacity: 0; animation: mq-fx-rays .8s var(--sortie) forwards; will-change: transform, opacity;
}
@keyframes mq-fx-rays { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .95; } 100% { opacity: 0; transform: scale(1.25) rotate(28deg); } }
.mq-fx-ember {
	position: absolute; left: 0; top: 0; width: 5px; height: 12px; margin: -6px 0 0 -2px; border-radius: 3px;
	background: linear-gradient(180deg, #fff, var(--fx-hot-2)); opacity: 0;
	animation: mq-fx-ember var(--dur) ease-out var(--delay) forwards; will-change: transform, opacity;
}
@keyframes mq-fx-ember { 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -140px) scale(.3) rotate(120deg); } }

/* ---- bannière combo ---- */
.mq-fx-combo {
	position: absolute; left: 50%; top: 44%; width: 100%; transform: translate(-50%, -50%);
	font-weight: 950; letter-spacing: -.05em; line-height: .95; text-align: center; white-space: nowrap;
	font-size: clamp(28px, 9vmin, 50px); color: #fff; -webkit-text-stroke: 2.5px var(--fx-ink); paint-order: stroke fill;
	text-shadow: 0 4px 0 var(--fx-ink), 0 12px 26px var(--fx-glow), 0 0 22px var(--fx-1);
	animation: mq-fx-combo 1.15s var(--sortie) forwards;
}
.mq-fx-combo small { display: block; font-size: .34em; letter-spacing: .12em; font-weight: 900; margin-top: 6px; color: #fff; -webkit-text-stroke: 1px var(--fx-ink); text-shadow: 0 2px 0 var(--fx-ink); }
.mq-fx-combo.is-hot { font-size: clamp(34px, 11.5vmin, 62px); color: var(--fx-hot-1); -webkit-text-stroke: 3px var(--fx-ink); text-shadow: 0 4px 0 var(--fx-ink), 0 14px 30px var(--fx-hot-glow), 0 0 28px var(--fx-hot-2); }
@keyframes mq-fx-combo {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); letter-spacing: .2em; }
	18% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); letter-spacing: -.05em; }
	32% { transform: translate(-50%, -50%) scale(1) rotate(0); }
	74% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
	100% { opacity: 0; transform: translate(-50%, -70%) scale(.94); }
}

/* ---- malus ---- */
.mq-fx-malus {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-weight: 950; font-size: clamp(18px, 6vmin, 26px);
	color: #fff; -webkit-text-stroke: 1.5px #a3231a; filter: drop-shadow(0 4px 10px rgba(240, 68, 56, .5));
	animation: mq-fx-malus .95s var(--ease) forwards;
}
@keyframes mq-fx-malus {
	0% { opacity: 0; transform: translate(-50%, -50%) translateY(-6px) scale(.6); }
	15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
	100% { opacity: 0; transform: translate(-50%, -50%) translateY(38px) scale(.9); }
}

/* ---- Impact System : le bouton « Refaire une partie » reçoit un reflet
   périodique qui invite à relancer, sans transformer le bouton (le retour
   tactile :active reste intact). Coupé en mode calme et reduced-motion. ---- */
.mq-final-replay { position: relative; overflow: hidden; }
.mq-final-replay:not(.is-loading):not(.is-waiting)::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 60%);
	transform: translateX(-120%); will-change: transform;
	animation: mq-fx-cta-sheen 2.4s ease-in-out 1.2s infinite;
}
@keyframes mq-fx-cta-sheen { 40%, 100% { transform: translateX(120%); } }
.mq-shell[data-motion="calme"] .mq-final-replay::before { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .mq-shell .mq-final-replay::before { animation: none; display: none; } }

/* =========================================================================
   ÉCRAN DE RÉSULTAT DE DUEL — chorégraphie premium (6.28.23)
   ========================================================================= */
.mq-res-page { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(6px, 1.1vh, 10px); align-content: start; padding-top: 6px !important; }
.mq-res-page > * { min-width: 0; }
.mq-res-page { --res-win: #1f9d55; --res-win-2: #5fd48a; --res-loss: #e5484d; --res-loss-2: #ff8a8f; --res-accent: #2e86e0; --res-accent-2: #16c4ce; --res-glow: rgba(46, 134, 224, .45); }
.mq-res-rays { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; overflow: hidden; background-size: 260% 260%; background-position: 50% 0; transform: rotate(-8deg) scale(.9); background-image: conic-gradient(from 200deg at 50% 20%, transparent 0 35%, rgba(255, 255, 255, .22) 40%, transparent 45%, transparent 55%, rgba(255, 255, 255, .16) 60%, transparent 65%); }
.mq-res-page.is-on .mq-res-rays { animation: mq-res-rays 3.2s var(--ease) .1s forwards; }
@keyframes mq-res-rays { 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(10deg) scale(1.15); } }
.mq-res-page.is-loss .mq-res-rays { background-image: conic-gradient(from 200deg at 50% 20%, transparent 0 35%, rgba(255, 255, 255, .12) 40%, transparent 45%); }
.mq-res-dust { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.mq-res-page.is-loss .mq-res-dust::before, .mq-res-page.is-loss .mq-res-dust::after { content: ""; position: absolute; left: 12%; top: 110%; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); animation: mq-res-dust 12s linear infinite; }
.mq-res-page.is-loss .mq-res-dust::after { left: 78%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: -6s; }
@keyframes mq-res-dust { 10% { opacity: .8; } 90% { opacity: .4; } 100% { transform: translateY(-140vh); opacity: 0; } }

/* titre mot à mot */
.mq-res-head { position: relative; z-index: 1; text-align: center; padding: 0 4px; }
.mq-res-title { margin: 0; font-size: clamp(19px, 5.6vw, 26px); font-weight: 950; letter-spacing: -.03em; line-height: 1.05; color: var(--result-deep); }
.mq-res-word { display: inline-block; opacity: 0; transform: translateY(18px) rotate(2deg); filter: blur(4px); }
.mq-res-page.is-on .mq-res-word { animation: mq-res-word .6s var(--sortie) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes mq-res-word { to { opacity: 1; transform: none; filter: none; } }
.mq-res-page.is-on .mq-res-subtitle { margin: 4px 0 0; font-size: clamp(.62rem, 2.7vw, .74rem); font-weight: 700; color: #58739a; line-height: 1.3; opacity: 0; }
.mq-res-page.is-on .mq-res-subtitle { animation: mq-res-fade-up .6s var(--sortie) .9s forwards; }
@keyframes mq-res-fade-up { to { opacity: 1; transform: none; } }

/* cartes */
.mq-res-card { position: relative; z-index: 1; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .85); border-radius: clamp(20px, 5vw, 26px); box-shadow: 0 10px 30px rgba(21, 60, 122, .12); opacity: 0; transform: translateY(24px) scale(.97); }
.mq-res-page.is-on .mq-res-card { animation: mq-res-card-in .7s var(--sortie) forwards; animation-delay: var(--t, 0s); }
@keyframes mq-res-card-in { to { opacity: 1; transform: none; } }
.mq-res-reward-wrap { background: none; border: 0; box-shadow: none; }
.mq-res-actions-wrap { background: none; border: 0; box-shadow: none; }

/* arène */
.mq-res-arena { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; gap: 6px; padding-top: 12px; }
.mq-res-side { position: relative; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .85); border-radius: clamp(18px, 5vw, 24px); padding: 16px 8px 12px; text-align: center; box-shadow: 0 10px 30px rgba(21, 60, 122, .12); overflow: visible; opacity: 0; transition: filter .6s, box-shadow .6s; }
.mq-res-side.is-player { transform: translateX(-30px); }
.mq-res-side.is-opponent { transform: translateX(30px); }
.mq-res-page.is-on .mq-res-side { animation: mq-res-side-in .75s var(--sortie) forwards; animation-delay: calc(.35s + var(--i) * .12s); }
@keyframes mq-res-side-in { to { opacity: 1; transform: none; } }
.mq-res-side em { display: block; font-style: normal; font-size: clamp(.8rem, 3.4vw, .95rem); font-weight: 900; color: #3f6084; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-res-side small { display: block; font-size: clamp(.56rem, 2.4vw, .66rem); letter-spacing: .14em; font-weight: 950; color: #3f6084; margin-top: 2px; }
.mq-res-bgstar { position: absolute; right: 8%; bottom: 6%; width: 46%; opacity: .08; pointer-events: none; color: var(--result-deep); }
.mq-res-page.is-on .mq-res-side.is-winner { box-shadow: 0 10px 30px rgba(21, 60, 122, .12), 0 0 0 3px var(--res-win-2), 0 0 34px rgba(95, 212, 138, .45); }
.mq-res-page.is-on .mq-res-side.is-loser { filter: saturate(.75) brightness(.97); }
.mq-res-page.is-draw.is-on .mq-res-side { box-shadow: 0 10px 30px rgba(21, 60, 122, .12), 0 0 0 3px var(--res-accent-2); }
.mq-res-badge { position: absolute; left: 50%; top: -14px; transform: translate(-50%, -30px) scale(.4); opacity: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: #fff; font-size: clamp(.62rem, 2.8vw, .74rem); font-weight: 950; letter-spacing: .06em; white-space: nowrap; background: linear-gradient(120deg, var(--res-win-2), var(--res-win)); box-shadow: 0 8px 18px rgba(31, 157, 85, .45); z-index: 2; }
.mq-res-badge svg { width: 15px; height: 15px; }
.mq-res-badge.is-on { animation: mq-res-badge .7s cubic-bezier(.22, 1.6, .36, 1) forwards; }
@keyframes mq-res-badge { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.mq-res-badge::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--res-win-2); opacity: 0; }
.mq-res-badge.is-on::after { animation: mq-res-ring .8s var(--sortie) .55s; }
@keyframes mq-res-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.mq-res-vs { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 950; color: var(--result-deep); background: rgba(255, 255, 255, .92); border: 3px solid rgba(22, 196, 206, .45); box-shadow: 0 8px 20px rgba(21, 60, 122, .18); opacity: 0; transform: scale(.3) rotate(-30deg); z-index: 1; }
.mq-res-page.is-on .mq-res-vs { animation: mq-res-pop-in .8s cubic-bezier(.22, 1.6, .36, 1) .5s forwards; }
@keyframes mq-res-pop-in { to { opacity: 1; transform: none; } }
.mq-res-vs::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--res-accent-2); opacity: 0; }
.mq-res-page.is-on .mq-res-vs::before { animation: mq-res-ring 1s var(--sortie) 1.1s; }

/* odomètre */
.mq-res-odo { display: inline-flex; height: 1em; line-height: 1; font-size: clamp(36px, 11vw, 50px); font-weight: 950; letter-spacing: -.05em; overflow: hidden; font-variant-numeric: tabular-nums; margin: 4px 0 2px; color: var(--result-deep); }
.mq-res-col { position: relative; height: 1em; width: .62em; overflow: hidden; }
.mq-res-col i { position: absolute; left: 0; top: 0; width: 100%; display: grid; font-style: normal; transform: translateY(0); transition: transform var(--dur, 1.3s) var(--ease); }
.mq-res-col i b { display: block; height: 1em; text-align: center; }
.mq-res-side.is-winner .mq-res-odo { color: var(--res-win); }

/* notes */
.mq-res-ratings { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; padding: 10px 6px 8px; gap: 4px; }
.mq-res-rating-col { text-align: center; display: grid; gap: 3px; justify-items: center; min-width: 0; width: 100%; container-type: inline-size; }
.mq-res-rating-col h4 { margin: 0; font-size: clamp(.68rem, 3vw, .78rem); font-weight: 900; color: var(--result-deep); line-height: 1.15; overflow-wrap: anywhere; }
/* les étoiles se dimensionnent d'après la largeur réelle de leur colonne : 4 × 17 % + 20 % + 4 × 1,5 % = 94 % → centrées, jamais en dépassement */
.mq-res-stars { display: flex; gap: 1.5cqi; align-items: center; justify-content: center; padding: 4px 0 7px; overflow: visible; width: 100%; max-width: 100%; }
.mq-res-stars .mq-etoile-geant { width: 17cqi; height: 17cqi; max-width: 34px; max-height: 34px; filter: none; }
.mq-res-stars .mq-etoile-geant:nth-child(2) { width: 17cqi; height: 17cqi; max-width: 34px; max-height: 34px; }
.mq-res-stars .mq-etoile-geant:nth-child(3) { width: 20cqi; height: 20cqi; max-width: 40px; max-height: 40px; }
@supports not (width: 1cqi) { .mq-res-stars .mq-etoile-geant, .mq-res-stars .mq-etoile-geant:nth-child(2) { width: clamp(20px, 5.4vw, 30px); height: clamp(20px, 5.4vw, 30px); } .mq-res-stars .mq-etoile-geant:nth-child(3) { width: clamp(24px, 6.4vw, 36px); height: clamp(24px, 6.4vw, 36px); } .mq-res-stars { gap: 2px; } }
.mq-res-note { font-size: clamp(1rem, 4.4vw, 1.2rem); font-weight: 950; letter-spacing: -.02em; color: var(--result-deep); opacity: 0; transform: scale(.6); }
.mq-res-note.is-on { animation: mq-res-pop-in .55s cubic-bezier(.22, 1.6, .36, 1) forwards; }
.mq-res-eff { display: grid; justify-items: center; gap: 5px; align-self: center; }
.mq-res-medal { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle at 35% 30%, #2fb4c8, #0f6d84); box-shadow: 0 8px 20px rgba(21, 60, 122, .3); opacity: 0; transform: scale(.3); }
.mq-res-medal svg { width: 24px; height: 24px; }
.mq-res-page.is-on .mq-res-medal { animation: mq-res-pop-in .8s cubic-bezier(.22, 1.6, .36, 1) 1.75s forwards; }
.mq-res-eff small { font-size: .5rem; letter-spacing: .08em; font-weight: 950; color: #3f6084; text-align: center; line-height: 1.2; }

/* récompense : compacte (détail sur deux lignes) et la pièce tourne */
.mq-res-page .mq-final-reward { padding: 9px 12px; grid-template-columns: clamp(46px, 11vw, 60px) minmax(0, 1fr) clamp(46px, 12vw, 70px); gap: 10px; border-radius: clamp(18px, 5vw, 24px); }
.mq-res-page .mq-final-reward-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; }
.mq-res-page .mq-final-reward-art { height: 46px; } .mq-res-page .mq-final-reward-art i { width: 30px; }
.mq-res-page .mq-final-reward-icon { transform-style: preserve-3d; }
.mq-res-page .mq-final-reward.is-spin .mq-final-reward-icon { animation: mq-res-coin 1.4s var(--ease) both; }
@keyframes mq-res-coin { 0% { transform: rotateY(0); } 60% { transform: rotateY(540deg); } 100% { transform: rotateY(720deg); } }

/* comparaison */
.mq-res-compare { padding: 10px 12px 6px; }
.mq-res-compare header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.mq-res-compare header strong { font-size: clamp(.68rem, 3vw, .8rem); letter-spacing: .14em; color: var(--res-accent); font-weight: 950; }
.mq-res-compare header b { font-size: clamp(.68rem, 3vw, .8rem); font-weight: 900; color: var(--result-deep); }
.mq-res-cols { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; font-size: clamp(.54rem, 2.3vw, .62rem); letter-spacing: .1em; font-weight: 950; color: #3f6084; padding: 2px 0 1px; }
.mq-res-cols span:nth-child(2) { text-align: center; } .mq-res-cols span:last-child { text-align: right; }
.mq-res-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(21, 60, 122, .08); opacity: 0; transform: translateX(-14px); }
.mq-res-row.is-on { animation: mq-res-row-in .5s var(--sortie) forwards; }
@keyframes mq-res-row-in { to { opacity: 1; transform: none; } }
.mq-res-row b { font-size: clamp(.84rem, 3.5vw, .95rem); font-weight: 950; font-variant-numeric: tabular-nums; color: var(--result-deep); }
.mq-res-row b:last-child { text-align: right; }
.mq-res-row b.is-best { color: var(--res-win); } .mq-res-row b.is-worst { color: var(--res-loss); }
.mq-res-mid { display: grid; gap: 2px; text-align: center; font-size: clamp(.6rem, 2.6vw, .68rem); line-height: 1.15; font-weight: 800; color: #3f6084; }
.mq-res-mid span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mq-res-mid span svg { width: 14px; height: 14px; color: #6a8fc0; }
.mq-res-bar { position: relative; height: 4px; border-radius: 999px; background: rgba(21, 60, 122, .1); overflow: hidden; }
.mq-res-bar i, .mq-res-bar u { position: absolute; top: 0; bottom: 0; border-radius: inherit; width: 0; transition: width .9s var(--sortie); }
.mq-res-bar i { left: 50%; transform-origin: left; background: linear-gradient(90deg, var(--res-accent-2), var(--res-accent)); transform: scaleX(-1); }
.mq-res-bar u { left: 50%; background: linear-gradient(90deg, var(--res-loss-2), var(--res-loss)); }
.mq-res-row.is-on .mq-res-bar i { width: var(--l); } .mq-res-row.is-on .mq-res-bar u { width: var(--r); }
.mq-res-bar u.is-win { background: linear-gradient(90deg, var(--res-win-2), var(--res-win)); }

/* actions : le bouton respire une fois la séquence posée */
.mq-res-page.is-settled .mq-final-replay:not(.is-waiting):not(.is-loading) { animation: mq-res-cta 2.2s ease-in-out .3s infinite; }
@keyframes mq-res-cta { 50% { transform: scale(1.02); } }
.mq-res-page.is-loss.is-settled .mq-final-replay:not(.is-waiting):not(.is-loading) { animation: mq-res-cta-loss 2.2s ease-in-out .3s infinite; }
@keyframes mq-res-cta-loss { 50% { transform: scale(1.02); } }

/* mode calme : tout est posé d'emblée */
.mq-shell[data-motion="calme"] .mq-res-page .mq-res-word, .mq-shell[data-motion="calme"] .mq-res-page .mq-res-subtitle,
.mq-shell[data-motion="calme"] .mq-res-page .mq-res-card, .mq-shell[data-motion="calme"] .mq-res-page .mq-res-side, .mq-shell[data-motion="calme"] .mq-res-page .mq-res-vs,
.mq-shell[data-motion="calme"] .mq-res-page .mq-res-medal, .mq-shell[data-motion="calme"] .mq-res-page .mq-res-note, .mq-shell[data-motion="calme"] .mq-res-page .mq-res-row { opacity: 1; transform: none; filter: none; animation: none !important; }
.mq-shell[data-motion="calme"] .mq-res-page .mq-res-rays, .mq-shell[data-motion="calme"] .mq-res-page .mq-res-dust { display: none; }
.mq-shell[data-motion="calme"] .mq-res-page .mq-final-reward-icon, .mq-shell[data-motion="calme"] .mq-res-page .mq-final-replay { animation: none !important; }
.mq-shell[data-motion="calme"] .mq-res-page .mq-res-row .mq-res-bar i { width: var(--l); } .mq-shell[data-motion="calme"] .mq-res-page .mq-res-row .mq-res-bar u { width: var(--r); }
@media (prefers-reduced-motion: reduce) { .mq-res-page .mq-res-rays, .mq-res-page .mq-res-dust { display: none; } }
@media (max-width: 360px) { .mq-res-ratings { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); } .mq-res-medal { width: 40px; height: 40px; } .mq-res-arena { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr); } .mq-res-vs { width: 50px; height: 50px; font-size: .95rem; } }

/* =========================================================================
   CARROUSEL DES UNIVERS — choix de catégorie (6.28.25)
   GPU uniquement : transform/opacity, aucun filtre en direct, ombres
   pré-calculées dans les images, trois cartes dessinées à la fois.
   ========================================================================= */
/* Les étapes en carrousel (modes, univers) passent devant leur ciel décoratif. */
.mq-view[data-view="miseEnPlace"] > .mq-setup-head.is-centered,
.mq-view[data-view="miseEnPlace"] > .mq-univers,
.mq-view[data-view="miseEnPlace"] > .mq-univers ~ .mq-setup-foot { position: relative; z-index: 1; }
/* en-tête centré : le bouton retour et le compteur restent aux bords */
/* En-tête des carrousels : Retour | titre centré | compteur, sur une seule ligne (même spécificité que la règle « structure verticale »). */
/* colonnes latérales symétriques (1fr chacune) : le titre est centré au pixel, quelle que soit la largeur du compteur */
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered { grid-template-columns: minmax(clamp(46px, 12vw, 56px), 1fr) auto minmax(clamp(46px, 12vw, 56px), 1fr); grid-template-areas: "back copy counter" "steps steps steps"; align-items: center; column-gap: clamp(6px, 1.8vw, 12px); row-gap: clamp(8px, 1.4vh, 14px); flex: 0 0 auto; }
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-back { grid-area: back; align-self: center; justify-self: start; margin: 0; }
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-copy { grid-area: copy; align-self: center; text-align: center; padding: 0 6px; margin: 0; min-width: 0; }
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-steps { grid-area: steps; margin: 0; }
.mq-setup-head.is-centered .mq-setup-copy .mq-eyebrow { margin: 0 0 1px; font-size: clamp(.58rem, 2.5vw, .68rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-copy .mq-title { margin: 0; font-size: clamp(1.15rem, 5.4vw, 1.9rem); line-height: 1.05; white-space: nowrap; }
@media (max-width: 340px) { .mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-copy .mq-title { font-size: 1.05rem; } .mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-copy { padding: 0 2px; } .mq-univers-counter { padding: 0 9px; font-size: .8rem; } }
.mq-setup-head.is-centered .mq-setup-copy .mq-eyebrow { letter-spacing: .28em; }
.mq-setup-head.is-centered .mq-setup-copy .mq-title { position: relative; display: inline-block; text-shadow: 0 2px 0 rgba(255, 255, 255, .7); }
.mq-setup-head.is-centered .mq-setup-copy .mq-title::after { content: ""; display: block; height: 4px; width: 44%; margin: 7px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--c1, var(--turq)), var(--c2, var(--bleu))); transition: background .6s; }
.mq-univers-counter { grid-area: counter; align-self: center; justify-self: end; height: clamp(40px, 10vw, 46px); padding: 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(21, 60, 122, .12); display: flex; align-items: center; gap: 4px; font-weight: 950; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--encre); }
.mq-univers-counter b { color: var(--bleu); }

/* ---- fond vivant ---- */
.mq-univers-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.mq-univers-aura { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); background: radial-gradient(ellipse 70% 45% at 50% 38%, var(--a1, transparent) 0%, transparent 100%), radial-gradient(ellipse 80% 40% at 50% 78%, var(--a2, transparent) 0%, transparent 100%); }
.mq-univers-aura.is-on { opacity: .7; }
.mq-univers-layer { position: absolute; top: -5%; bottom: -5%; left: 0; width: 200%; will-change: transform; contain: strict; }
.mq-univers-layer.is-blobs i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .04) 60%, transparent 70%); }
.mq-univers-layer.is-rings i { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .32); }
.mq-univers-layer.is-rings b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, .35) 55%, transparent 75%); opacity: .7; }
.mq-univers-twinkle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, .35) 55%, transparent 75%); animation: mq-univers-twinkle var(--d, 3s) ease-in-out var(--r, 0s) infinite; }
@keyframes mq-univers-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.mq-univers-streak { position: absolute; top: 0; bottom: 0; width: 36%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; }
.mq-univers-streak.is-go { animation: mq-univers-streak .7s var(--ease); }
.mq-univers-streak.is-back { animation: mq-univers-streak-back .7s var(--ease); }
@keyframes mq-univers-streak { 0% { left: -40%; opacity: 0; } 20% { opacity: .9; } 100% { left: 110%; opacity: 0; } }
@keyframes mq-univers-streak-back { 0% { left: 110%; opacity: 0; } 20% { opacity: .9; } 100% { left: -40%; opacity: 0; } }

/* ---- scène ---- */
.mq-univers { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mq-univers-stage { position: relative; flex: 1 1 auto; min-height: 0; perspective: 1100px; perspective-origin: 50% 35%; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; --card-w: 300px; }
.mq-univers-stage.is-drag { cursor: grabbing; }
.mq-univers-card { position: absolute; left: 50%; top: 50%; width: var(--card-w); height: calc(var(--card-w) / .82); margin-left: calc(var(--card-w) / -2); margin-top: calc(var(--card-w) / -.82 / 2 + 7%); border-radius: 30px; transform-style: preserve-3d; will-change: transform, opacity; visibility: hidden; }
.mq-univers-card.is-near { visibility: visible; }
.mq-univers-body { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .84)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 26px 50px rgba(21, 60, 122, .22), inset 0 1px 0 #fff; overflow: hidden; }
.mq-univers-body::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 18%, var(--c1) 0%, transparent 58%); opacity: .5; }
.mq-univers-sheen { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%); transform: translateX(-80%); pointer-events: none; display: none; }
.mq-univers-card.is-enter .mq-univers-sheen { display: block; animation: mq-univers-sheen 1.3s var(--ease) .25s both; }
@keyframes mq-univers-sheen { to { transform: translateX(80%); } }
.mq-univers-dim { position: absolute; inset: 0; border-radius: inherit; background: rgba(120, 150, 190, .28); opacity: 0; pointer-events: none; }
.mq-univers-art { position: absolute; left: 50%; top: -27%; width: 112%; aspect-ratio: 1; margin-left: -56%; transform: translateZ(70px); pointer-events: none; }
.mq-univers-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mq-univers-card.is-active .mq-univers-art img { animation: mq-univers-float 3.4s ease-in-out infinite; }
@keyframes mq-univers-float { 50% { transform: translateY(-8px); } }
.mq-univers-card.is-enter .mq-univers-art img { animation: mq-univers-pop .85s cubic-bezier(.22, 1.5, .36, 1) both, mq-univers-float 3.4s ease-in-out .85s infinite; }
@keyframes mq-univers-pop { 0% { transform: translateY(46px) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.mq-univers-floor { position: absolute; left: 50%; top: 55%; width: 56%; height: 9%; margin-left: -28%; border-radius: 50%; background: radial-gradient(ellipse, rgba(20, 40, 80, .26), transparent 70%); }
.mq-univers-card.is-active .mq-univers-floor { animation: mq-univers-floor 3.4s ease-in-out infinite; }
@keyframes mq-univers-floor { 50% { transform: scale(.86); opacity: .7; } }
.mq-univers-ring { position: absolute; left: 50%; top: 34%; width: 60%; aspect-ratio: 1; margin-left: -30%; border-radius: 50%; border: 3px solid var(--c2); opacity: 0; pointer-events: none; display: none; }
.mq-univers-card.is-enter .mq-univers-ring { display: block; animation: mq-univers-ring .9s var(--sortie) .1s; }
@keyframes mq-univers-ring { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
.mq-univers-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px clamp(12px, 3.6vw, 20px); text-align: center; }
.mq-univers-name { display: block; font-size: clamp(20px, 6.2vw, 30px); font-weight: 950; letter-spacing: -.03em; line-height: 1; color: var(--encre); }
.mq-univers-name { opacity: 0; transform: translateY(10px); }
.mq-univers-card.is-active .mq-univers-name { animation: mq-univers-ch .5s var(--sortie) .12s forwards; }
@keyframes mq-univers-ch { to { opacity: 1; transform: none; } }
.mq-univers-sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 900; color: var(--encre-2); background: rgba(21, 60, 122, .07); opacity: 0; transform: translateY(8px); }
.mq-univers-card.is-active .mq-univers-sub { animation: mq-univers-ch .5s var(--sortie) .45s forwards; }
.mq-univers-sub svg { width: 16px; height: 16px; }
.mq-univers-sub.is-locked { color: #9a6a12; background: rgba(255, 192, 46, .2); }
.mq-univers-pill { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 6px 12px; border-radius: 999px; font-size: .74rem; font-weight: 900; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2)); box-shadow: 0 6px 14px rgba(21, 60, 122, .18); opacity: 0; transform: translateY(8px); }
.mq-univers-pill svg { width: 14px; height: 14px; }
.mq-univers-card.is-active .mq-univers-pill { animation: mq-univers-ch .5s var(--sortie) .52s forwards; }
.mq-univers-card.has-pill .mq-univers-sub { display: block; margin-top: 6px; background: none; padding: 0; font-size: clamp(.8rem, 3.3vw, .92rem); }
.mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-pill { opacity: 1; transform: none; animation: none !important; }
.mq-univers-tag { position: absolute; left: -6px; top: 22%; z-index: 3; padding: 6px 10px; border-radius: 999px; font-size: .64rem; letter-spacing: .12em; font-weight: 950; color: #fff; background: linear-gradient(120deg, #ff9d3d, #e8531c); box-shadow: 0 6px 14px rgba(232, 83, 28, .35); transform: translateZ(80px) rotate(-6deg); }
.mq-univers-lock { position: absolute; right: -4px; top: 22%; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: #9a6a12; box-shadow: 0 6px 14px rgba(21, 60, 122, .15); transform: translateZ(80px); }
.mq-univers-lock svg { width: 18px; height: 18px; }
.mq-univers-card.is-shake .mq-univers-body { animation: mq-univers-shake .5s var(--ease); }
@keyframes mq-univers-shake { 20% { transform: translateX(-7px) rotate(-1.5deg); } 40% { transform: translateX(7px) rotate(1.5deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.mq-univers-arrow { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--encre); box-shadow: 0 8px 20px rgba(21, 60, 122, .16); display: flex; align-items: center; justify-content: center; opacity: .9; }
.mq-univers-arrow svg { width: 20px; height: 20px; }
.mq-univers-arrow.is-prev { left: 4px; } .mq-univers-arrow.is-next { right: 4px; }
.mq-univers-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 6px; padding: 4px 0 6px; }
.mq-univers-dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(21, 60, 122, .18); transition: width .35s var(--sortie), background .35s; }
.mq-univers-dots i.is-on { width: 26px; background: linear-gradient(90deg, var(--c1, var(--turq)), var(--c2, var(--bleu))); }
/* bouton : libellé qui bascule, état verrouillé ambré */
.mq-setup-foot .mq-btn [data-next-label].is-swap { display: inline-block; animation: mq-univers-swap .35s var(--sortie); }
@keyframes mq-univers-swap { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.mq-setup-foot .mq-btn.is-unlock { color: #fff; background: linear-gradient(105deg, #e8951c, #c9550c) !important; box-shadow: 0 5px 0 #7a3d00, 0 12px 25px rgba(201, 85, 12, .31), inset 0 2px 0 rgba(255, 255, 255, .4) !important; }
/* mode calme : tout posé, aucun décor animé */
.mq-shell[data-motion="calme"] .mq-univers-layer, .mq-shell[data-motion="calme"] .mq-univers-twinkle, .mq-shell[data-motion="calme"] .mq-univers-streak { display: none; }
.mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-name, .mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-sub { opacity: 1; transform: none; animation: none !important; }
.mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-art img, .mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-floor, .mq-shell[data-motion="calme"] .mq-univers-sheen, .mq-shell[data-motion="calme"] .mq-univers-ring { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .mq-univers-layer, .mq-univers-twinkle, .mq-univers-streak { display: none; } }
/* ---- carrousel des adversaires : suffixe de nom, jauge de danger, statistiques, liseré ---- */
.mq-univers-name em { font-style: normal; font-weight: 900; font-size: .62em; color: var(--encre-2); letter-spacing: -.01em; }
.mq-univers-danger { display: inline-flex; gap: 4px; margin-top: 6px; opacity: 0; transform: translateY(8px); }
.mq-univers-danger i { width: 18px; height: 6px; border-radius: 999px; background: rgba(21, 60, 122, .14); }
.mq-univers-danger i.is-on { background: linear-gradient(90deg, var(--c1), var(--c2)); }
.mq-univers-card.is-active .mq-univers-danger { animation: mq-univers-ch .5s var(--sortie) .26s forwards; }
.mq-univers-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; width: 78%; margin: 8px auto 0; font-size: .6rem; font-weight: 900; color: var(--encre-2); letter-spacing: .04em; text-transform: uppercase; text-align: left; opacity: 0; transform: translateY(8px); }
.mq-univers-card.is-active .mq-univers-stats { animation: mq-univers-ch .5s var(--sortie) .34s forwards; }
.mq-univers-stats b { display: block; height: 5px; border-radius: 999px; background: rgba(21, 60, 122, .1); overflow: hidden; }
.mq-univers-stats b i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .9s var(--sortie) .35s; }
.mq-univers-card.is-active .mq-univers-stats b i { width: var(--w); }
.mq-univers-card.has-stats .mq-univers-meta { padding-bottom: clamp(10px, 3vw, 16px); }
.mq-univers-card.has-stats .mq-univers-sub { margin-top: 6px; }
.mq-univers-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--c2), inset 0 0 26px var(--c2); }
.mq-univers-card.is-danger-high.is-active .mq-univers-rim { opacity: .3; }
.mq-univers-card.is-danger-max.is-active .mq-univers-rim { animation: mq-univers-rim 1.8s ease-in-out infinite; }
@keyframes mq-univers-rim { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
.mq-univers-streak { background: linear-gradient(90deg, transparent, var(--streak, rgba(255, 255, 255, .55)), transparent); }
.mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-danger, .mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-stats { opacity: 1; transform: none; animation: none !important; }
.mq-shell[data-motion="calme"] .mq-univers-card .mq-univers-stats b i { width: var(--w); }
.mq-shell[data-motion="calme"] .mq-univers-rim { animation: none !important; }
/* cartes à statistiques (adversaires) : illustration plus haute et un peu plus petite pour ne jamais couvrir le nom */
.mq-univers-card.has-stats .mq-univers-art { top: -30%; width: 86%; margin-left: -43%; }
.mq-univers-card.has-stats .mq-univers-stats { margin-top: 6px; }
.mq-univers-card.has-stats .mq-univers-pill { margin-top: 6px; }

/* =========================================================================
   EN-TÊTE COMPACT (étapes Format et Mode) — titre centré sur la ligne du bouton Retour
   ========================================================================= */
/* spécificité alignée sur la règle « structure verticale » (.mq-view[data-view] .mq-setup-head) qu'elle remplace */
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-inline {
	grid-template-columns: clamp(46px, 12vw, 56px) minmax(0, 1fr) clamp(46px, 12vw, 56px);
	grid-template-areas: "back copy spacer" "steps steps steps";
	align-items: center;
	row-gap: clamp(8px, 1.4vh, 14px);
	flex: 0 0 auto;
}
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-inline .mq-setup-back { grid-area: back; align-self: center; margin: 0; }
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-inline .mq-setup-copy { grid-area: copy; align-self: center; text-align: center; padding: 0; margin: 0; min-width: 0; }
.mq-setup-head.is-inline .mq-setup-copy .mq-eyebrow { margin: 0 0 1px; font-size: clamp(.6rem, 2.6vw, .7rem); letter-spacing: .26em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-setup-head.is-inline .mq-setup-copy .mq-title { position: relative; display: inline-block; margin: 0; font-size: clamp(1.45rem, 6.6vw, 2rem); line-height: 1.05; white-space: nowrap; text-shadow: 0 2px 0 rgba(255, 255, 255, .7); }
.mq-setup-head.is-inline .mq-setup-copy .mq-title::after { content: ""; display: block; height: 4px; width: 44%; margin: 6px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--turq), var(--bleu)); }
.mq-view[data-view="miseEnPlace"] .mq-setup-head.is-inline .mq-setup-steps { grid-area: steps; margin: 0; }
@media (max-width: 340px) { .mq-setup-head.is-inline .mq-setup-copy .mq-title { font-size: 1.35rem; } }
/* modes de contenu : le sous-titre est une phrase (hint) → deux lignes maximum, taille réduite */
.mq-univers-card.has-pill .mq-univers-sub { white-space: normal; line-height: 1.25; font-size: clamp(.72rem, 3vw, .82rem); max-width: 92%; margin-left: auto; margin-right: auto; display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* =========================================================================
   ACCUEIL (6.28.38) — l'ouverture du jeu : deux cartes qui s'aimantent dans un éclair,
   paire révélée, validation + titre, lumière, JOUER, ligne de chargement. Transform/opacité uniquement.
   ========================================================================= */
.mq-view[data-view="accueil"] { position: absolute; display: flex; flex-direction: column; gap: 0; overflow: hidden; min-width: 0; }
.mq-view[data-view="accueil"] > * { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
.mq-shell[data-screen="accueil"] .mq-view[data-view="accueil"] { overflow: hidden; gap: clamp(6px, 1vh, 12px); }
.mq-view[data-view="accueil"] > .mq-h2-play { flex: 0 0 auto; }

/* lumière : soleil haut, voile blanc qui s'allume à la validation, éclat au point de rencontre */
.mq-h2-light { position: absolute !important; inset: -30% 0 0 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.mq-h2-light i { position: absolute; display: block; }
.mq-h2-sun { left: 50%; top: 0; width: 170vw; height: 60vh; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.18) 42%, transparent 70%); }
.mq-h2-lift { inset: 0; background: #fff; opacity: 0; }
.mq-h2-flash { inset: 0; background: #fff; opacity: 0; }
.mq-h2-burst { left: 50%; top: 58%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; border-radius: 50%; opacity: 0; transform: scale(0);
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.9) 12%, rgba(190,246,250,.55) 26%, rgba(22,196,206,.18) 42%, transparent 60%); }
.mq-shell[data-skin="nuit"] .mq-h2-sun, .mq-shell[data-skin="ardoise"] .mq-h2-sun { opacity: .35; }
.mq-shell[data-skin="nuit"] .mq-h2-lift, .mq-shell[data-skin="ardoise"] .mq-h2-lift { background: #9fd8ff; }

/* la scène : cartes + titre forment un groupe centré dans l'espace libre */
.mq-h2-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.mq-h2-scene { position: relative; width: 100%; height: calc(min(34vw, 148px) / .72 + clamp(28px, 7vh, 60px)); perspective: 1100px; perspective-origin: 50% 50%; }
.mq-h2-slot { position: absolute; left: 50%; top: 50%; width: min(34vw, 148px); aspect-ratio: .72; margin-left: calc(min(34vw, 148px) / -2); transform: translateY(-50%); transform-style: preserve-3d; }
.mq-h2-card { position: absolute; inset: 0; will-change: transform; opacity: 0; }
.mq-h2-wob { position: absolute; inset: 0; }
.mq-h2-flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.mq-h2-face { position: absolute; inset: 0; border-radius: 14% / 10%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 26px 48px rgba(21,60,122,.28), 0 4px 10px rgba(21,60,122,.12); }
.mq-h2-back { background: linear-gradient(165deg, #6be4dc 0%, #37b9ea 50%, #2e86e0 100%); border: 4px solid #fff; overflow: hidden; }
.mq-h2-back::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; border: 2px solid rgba(255,255,255,.34); }
.mq-h2-back svg { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; fill: #fff; filter: drop-shadow(0 3px 0 rgba(21,60,122,.26)); }
.mq-h2-front { transform: rotateY(180deg); background: #fff; padding: 4%; visibility: hidden; }
.mq-h2-front img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 11% / 8%; }
.mq-h2-front b { position: absolute; left: 4%; right: 4%; bottom: 4%; padding: 22% 8% 8%; border-radius: 0 0 11% 11% / 0 0 20% 20%; text-align: center; color: #fff; font-size: clamp(.72rem, 3.2vw, .86rem); font-weight: 900; letter-spacing: .01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(180deg, rgba(9,32,68,0), rgba(9,32,68,.72)); }
.mq-h2-front::after { content: ""; position: absolute; inset: 4%; border-radius: 11% / 8%; box-shadow: inset 0 0 0 3px rgba(127,227,182,.95), inset 0 0 24px rgba(79,209,176,.35); opacity: 0; transition: opacity .4s; }
/* double sécurité : au-delà de 90°, la face avant prend le relais même si backface-visibility est ignoré */
.mq-h2-slot.is-shown .mq-h2-front { visibility: visible; }
.mq-h2-slot.is-shown .mq-h2-back { visibility: hidden; }
.mq-h2-slot.is-paired .mq-h2-front::after { opacity: 1; }
.mq-h2-spark { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; z-index: 2; opacity: 0; transform: scale(.2);
	background: radial-gradient(circle, #fff 0%, rgba(190,250,250,.9) 30%, rgba(39,217,220,.5) 55%, transparent 72%); }
/* l'éclair : tracé SVG (cœur blanc + halo turquoise) dessiné par stroke-dashoffset, hors ramifications */
.mq-h2-bolt { position: absolute; left: 50%; top: 50%; width: 62%; height: 128%; margin: -64% 0 0 -31%; z-index: 7; pointer-events: none; overflow: visible; }
.mq-h2-bolt path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.mq-h2-bolt-glow { stroke: rgba(39,217,220,.75); stroke-width: 9; }
.mq-h2-bolt-core { stroke: #fff; stroke-width: 3; }
.mq-h2-bolt .is-branch .mq-h2-bolt-glow { stroke-width: 6; }
.mq-h2-bolt .is-branch .mq-h2-bolt-core { stroke-width: 2; }
.mq-h2-seal { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%; z-index: 9; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0);
	background: linear-gradient(145deg, #7fe3b6, #1f9d55); box-shadow: 0 12px 28px rgba(31,157,85,.45), inset 0 3px 0 rgba(255,255,255,.55), 0 0 0 4px #fff; }
.mq-h2-seal svg { width: 56%; height: 56%; }
.mq-h2-ring { position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1; margin: -45% 0 0 -45%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(39,217,220,.5), inset 0 0 0 2px rgba(39,217,220,.5); opacity: 0; transform: scale(.3); z-index: 8; }
.mq-h2-shard { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px 2px rgba(255,255,255,.9), 0 0 22px rgba(39,217,220,.7); opacity: 0; z-index: 8; }

/* la fiche de la carte, au-dessus des cartes, flèche vers elles */
.mq-h2-tip { position: absolute; left: 50%; bottom: calc(100% + 16px); width: min(88vw, 360px); margin-left: calc(min(88vw, 360px) / -2); z-index: 12; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; padding: 11px 13px 12px; border-radius: 20px; color: var(--mq-text, var(--encre));
	background: linear-gradient(180deg, var(--mq-surface, #fff), var(--mq-surface-raised, #f6fbfe)); box-shadow: 0 16px 36px rgba(21,60,122,.20), 0 2px 6px rgba(21,60,122,.08), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1.5px rgba(31,157,85,.32);
	opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 50% 100%; }
.mq-h2-tip.is-on { animation: mq-h2-tip .5s cubic-bezier(.22,1.45,.36,1) forwards; }
@keyframes mq-h2-tip { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.mq-h2-tip[hidden] { display: none; }
.mq-h2-tip-arrow { position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: var(--mq-surface-raised, #f6fbfe); transform: rotate(45deg); border-radius: 3px; box-shadow: 2px 2px 0 0 rgba(31,157,85,.32); }
.mq-h2-tip-ic { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #ffd27a, #e08a2b); box-shadow: 0 6px 14px rgba(224,138,43,.35); }
.mq-h2-tip-ic svg { width: 20px; height: 20px; stroke-width: 2.4; }
.mq-h2-tip-copy { min-width: 0; }
.mq-h2-tip-copy small { display: flex; justify-content: space-between; gap: 8px; font-size: .56rem; letter-spacing: .16em; font-weight: 950; color: #1f9d55; text-transform: uppercase; }
.mq-h2-tip-copy small em { font-style: normal; letter-spacing: .04em; color: var(--mq-text-muted, var(--encre-3)); }
.mq-h2-tip-copy b { display: block; margin-top: 2px; font-size: .9rem; font-weight: 950; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-h2-tip-copy p { margin: 3px 0 0; font-size: clamp(.76rem, 3.2vw, .84rem); font-weight: 800; line-height: 1.3; color: var(--mq-text, var(--encre)); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mq-h2-tip-copy p strong { font-weight: 950; color: #e8531c; background: linear-gradient(transparent 60%, rgba(255,192,46,.35) 60%); padding: 0 2px; border-radius: 3px; }
.mq-shell[data-skin="nuit"] .mq-h2-tip-copy p strong, .mq-shell[data-skin="ardoise"] .mq-h2-tip-copy p strong { color: #ffb36b; background: linear-gradient(transparent 60%, rgba(255,192,46,.22) 60%); }

/* le titre, sous les cartes */
.mq-h2-brand { width: 100%; text-align: center; margin-top: clamp(4px, 1.6vh, 16px); }
.mq-h2-brand h1 { margin: 0; display: block; text-align: center; font-size: clamp(2.5rem, 12.4vw, 3.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; }
.mq-h2-brand h1 span { display: inline-block; opacity: 0; will-change: transform, opacity; text-shadow: 0 3px 0 rgba(255,255,255,.85), 0 14px 30px rgba(21,60,122,.14); }
.mq-h2-brand h1 .is-m { color: var(--turq-2); }
.mq-h2-brand h1 .is-q { color: var(--encre); }
.mq-shell[data-skin="nuit"] .mq-h2-brand h1 span, .mq-shell[data-skin="ardoise"] .mq-h2-brand h1 span { text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.3); }
.mq-h2-brand p { margin: 8px 0 0; font-size: clamp(.8rem, 3.4vw, .9rem); font-weight: 600; letter-spacing: .02em; color: var(--encre-2); opacity: 0; }

/* JOUER : blanc nacré, liseré turquoise → bleu, pastille dégradée à gauche, mot centré */
.mq-h2-play { position: relative; flex: 0 0 auto; height: clamp(62px, 8.4vh, 72px); border-radius: 28px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--mq-text, var(--encre)); opacity: 0; margin-bottom: clamp(2px, .6vh, 6px);
	background: linear-gradient(180deg, var(--mq-surface, #fff) 0%, var(--mq-surface-raised, #f6fbfe) 100%);
	box-shadow: 0 18px 40px rgba(21,60,122,.20), 0 3px 8px rgba(21,60,122,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(21,60,122,.05); }
.mq-h2-play::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(120deg, rgba(22,196,206,.6), rgba(255,255,255,0) 45%, rgba(46,134,224,.5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mq-h2-play::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(112deg, transparent 44%, rgba(22,196,206,.13) 50%, transparent 56%); transform: translateX(-70%); animation: mq-h2-sheen 5.2s var(--ease) 4.6s infinite; }
@keyframes mq-h2-sheen { 22%, 100% { transform: translateX(80%); } }
.mq-h2-play:active { transform: scale(.978); }
.mq-h2-play-ic { position: absolute; left: 12px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--degrade); box-shadow: 0 8px 18px rgba(22,140,200,.42), inset 0 -3px 0 rgba(15,60,120,.22), inset 0 2px 0 rgba(255,255,255,.35); }
.mq-h2-play-ic svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.mq-h2-play-t { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mq-h2-play-t > span { font-size: clamp(1.3rem, 5.6vw, 1.5rem); font-weight: 900; letter-spacing: .08em; background: linear-gradient(100deg, #0fa3b4 0%, #2e86e0 60%, #1f6ac0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mq-h2-play-t small { margin-top: 4px; font-size: .66rem; font-weight: 700; color: var(--mq-text-secondary, var(--encre-2)); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.mq-shell[data-skin="nuit"] .mq-h2-play-t > span, .mq-shell[data-skin="ardoise"] .mq-h2-play-t > span { background: linear-gradient(100deg, #83dcf6, #7587ef); -webkit-background-clip: text; background-clip: text; }

/* JOUER en attente du chargement */
.mq-h2-play.is-waiting { pointer-events: none; }
.mq-h2-play.is-waiting .mq-h2-play-ic { background: linear-gradient(180deg, #cfe0ee, #b9cde0); box-shadow: none; }
.mq-h2-play.is-waiting .mq-h2-play-t > span { background: linear-gradient(100deg, #9db3cc, #8aa3bf); -webkit-background-clip: text; background-clip: text; }

/* ligne de chargement de l'ouverture : en bas, pourcentage réel, disparaît une fois prête */
.mq-h2-loader { position: absolute; left: clamp(18px, 5vw, 28px); right: clamp(18px, 5vw, 28px); bottom: calc(env(safe-area-inset-bottom) + clamp(14px, 2.2vh, 22px)); z-index: 6; display: flex; flex-direction: column; gap: 7px; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mq-h2-loader.is-done { opacity: 0; transform: translateY(8px); }
.mq-h2-loader-txt { display: flex; justify-content: space-between; align-items: baseline; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--mq-text-secondary, var(--encre-2)); }
.mq-h2-loader-txt b { font-size: .8rem; font-weight: 900; color: var(--mq-text, var(--encre)); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.mq-h2-loader-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.7); box-shadow: inset 0 1px 2px rgba(21,60,122,.14), 0 1px 0 rgba(255,255,255,.8); overflow: hidden; }
.mq-h2-loader-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #27d9dc, #2e86e0); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.mq-shell[data-skin="nuit"] .mq-h2-loader-bar, .mq-shell[data-skin="ardoise"] .mq-h2-loader-bar { background: rgba(255,255,255,.18); }

/* pendant la séquence complète, l'en-tête et la navigation attendent, puis se posent */
.mq-shell .mq-top, .mq-shell .mq-nav { transition: opacity .56s var(--sortie), transform .56s var(--sortie); }
.mq-shell.is-home-intro .mq-top { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.mq-shell.is-home-intro .mq-nav { opacity: 0; transform: translateY(22px); pointer-events: none; }

/* entrée douce partagée (utilisée aussi par le hub Arène) */
@keyframes mq-hb-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* mode calme : ni secousse ni reflet, la paire est simplement en place */
.mq-shell[data-motion="calme"] .mq-h2-play::after { animation: none; }
@media (max-height: 660px) { .mq-h2-brand p { display: none; } }

/* ---------- En-tête nacré sur l'accueil (mêmes commandes : profil, pièces → boutique, coffre, réglages) ---------- */
.mq-shell[data-screen="accueil"] .mq-top { height: auto; min-height: 0; padding: 2px 0; gap: 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; min-width: 0; }
.mq-shell[data-screen="accueil"] .mq-avatar { width: clamp(46px, 6.2vh, 54px); height: clamp(46px, 6.2vh, 54px); padding: 3px; border: 0; background: var(--mq-surface, #fff); box-shadow: 0 8px 20px rgba(21,60,122,.16), 0 1px 3px rgba(21,60,122,.08); }
.mq-shell[data-screen="accueil"] .mq-avatar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, #27d9dc, #2e86e0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.mq-shell[data-screen="accueil"] .mq-avatar b { right: -6px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; font-size: .64rem; font-weight: 900; background: var(--degrade); border: 2.5px solid #fff; box-shadow: 0 4px 10px rgba(46,134,224,.35); }
.mq-shell[data-screen="accueil"] .mq-profil-info { justify-content: center; gap: 4px; min-width: 0; flex: 1 1 0; }
.mq-shell[data-screen="accueil"] .mq-profil-info strong { display: block; font-size: clamp(.74rem, 3.2vw, .84rem); font-weight: 900; letter-spacing: -.01em; color: var(--mq-text, var(--encre)); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.mq-shell[data-skin="nuit"][data-screen="accueil"] .mq-profil-info strong, .mq-shell[data-skin="ardoise"][data-screen="accueil"] .mq-profil-info strong { text-shadow: none; }
.mq-shell[data-screen="accueil"] .mq-xp { height: 7px; max-width: 132px; border-radius: 99px; background: rgba(255,255,255,.8); box-shadow: inset 0 1px 2px rgba(21,60,122,.14); }
.mq-shell[data-screen="accueil"] .mq-xp i { position: relative; overflow: hidden; background: linear-gradient(90deg, #27d9dc, #2e86e0); }
.mq-shell[data-screen="accueil"] .mq-xp i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: mq-h2-xp 3.6s var(--ease) 4.8s infinite; }
@keyframes mq-h2-xp { 35%, 100% { transform: translateX(100%); } }
.mq-shell[data-screen="accueil"] .mq-chip { height: clamp(40px, 5.4vh, 44px); gap: 6px; padding: 0 5px 0 6px; border-radius: 99px; font-size: clamp(.86rem, 3.8vw, .96rem); font-weight: 900; color: var(--mq-text, var(--encre)); background: linear-gradient(180deg, var(--mq-surface, #fff), var(--mq-surface-raised, #f6fbfe)); border: 0; box-shadow: 0 10px 24px rgba(21,60,122,.16), 0 1px 3px rgba(21,60,122,.08), inset 0 1px 0 rgba(255,255,255,.9); position: relative; }
.mq-shell[data-screen="accueil"] .mq-chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(120deg, rgba(255,192,46,.7), rgba(255,255,255,0) 45%, rgba(232,149,28,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mq-shell[data-screen="accueil"] .mq-chip .mq-coin { width: 30px; height: 30px; background: radial-gradient(circle at 36% 30%, #fff1b8 0%, #ffd24a 34%, #ffc02e 58%, #e8951c 100%); box-shadow: 0 3px 0 #b8650a, 0 6px 12px rgba(232,149,28,.35), inset 0 1px 0 rgba(255,255,255,.7); color: #b25f05; }
.mq-shell[data-screen="accueil"] .mq-chip .mq-coin svg { width: 50%; height: 50%; stroke-width: 3; }
.mq-shell[data-screen="accueil"] .mq-chip b { min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
.mq-shell[data-screen="accueil"] .mq-chip .mq-plus { width: 30px; height: 30px; font-size: 1.1rem; background: var(--degrade); box-shadow: 0 5px 12px rgba(46,134,224,.38), inset 0 -2px 0 rgba(15,60,120,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.mq-shell[data-screen="accueil"] .mq-icon-btn { width: clamp(40px, 5.4vh, 44px); height: clamp(40px, 5.4vh, 44px); border-radius: 50%; border: 0; color: var(--mq-text-secondary, var(--encre-2)); background: linear-gradient(180deg, var(--mq-surface, #fff), var(--mq-surface-raised, #f6fbfe)); box-shadow: 0 10px 24px rgba(21,60,122,.14), inset 0 1px 0 rgba(255,255,255,.9); }
.mq-shell[data-screen="accueil"] .mq-icon-btn svg { width: 19px; height: 19px; stroke-width: 2.5; }
.mq-shell[data-screen="accueil"] .mq-coffre { color: var(--or-2); }
.mq-shell[data-screen="accueil"] .mq-coffre.is-pret::after { top: -2px; right: -2px; }
@media (max-width: 360px) { .mq-shell[data-screen="accueil"] .mq-profil-info strong { display: none; } .mq-shell[data-screen="accueil"] .mq-top { gap: 8px; } }

/* =========================================================================
   HUB MULTIJOUEUR « ARÈNE » (6.28.32)
   ========================================================================= */
.mq-arena-hub { display: grid; gap: 10px; align-content: start; }
.mq-arena { position: relative; border-radius: 30px; padding: 16px 16px 14px; color: #fff; overflow: hidden; background: linear-gradient(160deg, #1f7d8a 0%, #2e86e0 55%, #3b5fd6 100%); box-shadow: 0 20px 44px rgba(31, 106, 192, .35), inset 0 1px 0 rgba(255, 255, 255, .35); opacity: 0; transform: translateY(18px); cursor: pointer; }
.mq-view[data-view="online"].is-on .mq-arena { animation: mq-hb-in .7s var(--sortie) .05s forwards; }
.mq-arena::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 120%; background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .28), transparent 55%); pointer-events: none; }
.mq-arena-sheen { position: absolute; inset: -40% auto -40% -35%; width: 34%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: mq-arena-sheen 4.2s ease-in-out 1.4s infinite; }
@keyframes mq-arena-sheen { 35%, 100% { transform: translateX(430%) skewX(-18deg); } }
.mq-arena-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .62rem; letter-spacing: .22em; font-weight: 950; text-transform: uppercase; opacity: .92; white-space: nowrap; }
.mq-arena-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .58rem; letter-spacing: .08em; }
.mq-arena-live i { width: 8px; height: 8px; border-radius: 50%; background: #7dff9a; animation: mq-arena-live 1.8s ease-out infinite; }
@keyframes mq-arena-live { 0% { box-shadow: 0 0 0 0 rgba(125, 255, 154, .6); } 100% { box-shadow: 0 0 0 9px rgba(125, 255, 154, 0); } }
.mq-arena-main { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 12px; }
.mq-arena-body { min-width: 0; color: #fff; }
.mq-arena-medal { position: relative; width: 84px; height: 84px; flex: 0 0 auto; display: block; color: #7a4306; }
.mq-arena-medal .mq-arena-disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a3, #f5a11c 60%, #c9760d); box-shadow: 0 12px 26px rgba(201, 118, 13, .45), inset 0 -6px 12px rgba(120, 60, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .55); }
.mq-arena-medal .mq-arena-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); }
.mq-arena-medal .mq-arena-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 120, .55), transparent 65%); opacity: 0; }
.mq-arena-medal > svg { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; }
.mq-view[data-view="online"].is-on .mq-arena-medal { animation: mq-arena-float 3.6s ease-in-out infinite; }
.mq-view[data-view="online"].is-on .mq-arena-medal .mq-arena-glow { animation: mq-arena-glow 3.6s ease-in-out infinite; }
@keyframes mq-arena-float { 50% { transform: translateY(-6px); } }
@keyframes mq-arena-glow { 50% { opacity: 1; } }
.mq-arena-trophies { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.mq-arena-trophies strong { font-size: clamp(38px, 11vw, 50px); font-weight: 950; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.mq-arena-trophies small { font-size: .95rem; font-weight: 900; opacity: .9; }
.mq-arena-format { margin: 6px 0 0; font-size: .8rem; font-weight: 800; opacity: .95; }
.mq-arena-format em { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: #fff; color: #1f6ac0; font-style: normal; font-weight: 950; font-size: .8rem; }
.mq-arena-ladder { margin-top: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: .7rem; font-weight: 900; }
.mq-arena-ladder > span { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.mq-arena-ladder > span.is-next { background: rgba(255, 255, 255, .24); }
.mq-arena-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; margin: 0; }
.mq-arena-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #ffe08a, #ffc02e); box-shadow: 0 0 12px rgba(255, 192, 46, .7); transition: width 1.4s var(--sortie) .6s; }
.mq-arena-hint { display: block; margin-top: 8px; font-size: .72rem; font-weight: 800; opacity: .9; }
/* actions */
.mq-arena-act { position: relative; display: grid; grid-template-columns: 60px 1fr 32px; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 24px; text-align: left; color: var(--encre); background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .86)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 30px rgba(21, 60, 122, .12); overflow: hidden; opacity: 0; transform: translateY(18px); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.mq-view[data-view="online"].is-on .mq-arena-act { animation: mq-hb-in .7s var(--sortie) forwards; }
.mq-view[data-view="online"].is-on .mq-arena-act:nth-of-type(1) { animation-delay: .18s; } .mq-view[data-view="online"].is-on .mq-arena-act:nth-of-type(2) { animation-delay: .28s; } .mq-view[data-view="online"].is-on .mq-arena-act:nth-of-type(3) { animation-delay: .38s; } .mq-view[data-view="online"].is-on .mq-arena-act:nth-of-type(4) { animation-delay: .48s; }
.mq-arena-act:active { transform: scale(.985) !important; }
.mq-arena-act::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 50%, var(--tint) 0%, transparent 55%); opacity: .6; pointer-events: none; }
.mq-arena-ic { position: relative; width: 60px; height: 60px; border-radius: 19px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--a), var(--b)); box-shadow: 0 10px 22px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mq-arena-ic svg { width: 28px; height: 28px; }
.mq-arena-copy { min-width: 0; }
.mq-arena-copy strong { display: block; font-size: clamp(1rem, 4.4vw, 1.2rem); font-weight: 950; letter-spacing: -.025em; line-height: 1.1; }
.mq-arena-copy small { display: block; margin-top: 3px; font-size: .76rem; font-weight: 800; color: var(--encre-2); line-height: 1.25; }
.mq-arena-chev { width: 32px; height: 32px; border-radius: 50%; background: rgba(21, 60, 122, .06); display: flex; align-items: center; justify-content: center; color: var(--encre-2); }
.mq-arena-chev svg { width: 18px; height: 18px; }
.mq-arena-act.is-quick { --a: #5ad7e6; --b: #1f7d8a; --glow: rgba(31, 125, 138, .35); --tint: rgba(90, 215, 230, .45); }
.mq-arena-act.is-create { --a: #6f8cff; --b: #3b5fd6; --glow: rgba(59, 95, 214, .35); --tint: rgba(111, 140, 255, .4); }
.mq-arena-act.is-join { --a: #5fe0a8; --b: #1f9d55; --glow: rgba(31, 157, 85, .35); --tint: rgba(95, 224, 168, .4); }
.mq-arena-act.is-resume { --a: #ffd27a; --b: #e08a2b; --glow: rgba(224, 138, 43, .35); --tint: rgba(255, 210, 122, .45); }
.mq-shell[data-motion="calme"] .mq-view[data-view="online"] .mq-arena, .mq-shell[data-motion="calme"] .mq-view[data-view="online"] .mq-arena-act { opacity: 1; transform: none; animation: none !important; }
.mq-shell[data-motion="calme"] .mq-arena-sheen, .mq-shell[data-motion="calme"] .mq-arena-medal, .mq-shell[data-motion="calme"] .mq-arena-medal .mq-arena-glow, .mq-shell[data-motion="calme"] .mq-arena-live i { animation: none !important; }

/* =========================================================================
   FLUIDITÉ (6.28.35) — rien ne s'anime hors champ
   ========================================================================= */
/* Les vues cachées gardent leurs animations en pause : une seule vue vivante à la fois. */
.mq-view:not(.is-active), .mq-view:not(.is-active) * { animation-play-state: paused !important; }
/* Feuille, dialogue ou route des trophées ouverts : la vue en dessous et le décor s'immobilisent. */
.mq-shell.has-sheet .mq-view *, .mq-shell.has-sheet .mq-ambiance i, .mq-shell.has-sheet .mq-ambiance::before, .mq-shell.has-sheet .mq-ambiance::after { animation-play-state: paused !important; }

/* =========================================================================
   TOURNOIS EN DIRECT (6.29.0) — case du hub, écrans Tournois / Création /
   Vestiaire / Tirage / Tableau / Interlude / Tour terminé / Podium.
   ========================================================================= */
.mq-arena-act.is-tournament { --a: #ffd45a; --b: #e8951c; --glow: rgba(232, 149, 28, .38); --tint: rgba(255, 212, 90, .45); }
.mq-view[data-view="online"].is-on .mq-arena-act:nth-of-type(4) { animation-delay: .42s; }
.mq-arena-badge { position: absolute; right: 12px; top: 10px; font-size: .58rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; color: #fff; background: linear-gradient(105deg, #ff6f91, #f04438); box-shadow: 0 6px 14px rgba(240, 68, 56, .35); z-index: 1; }
.mq-arena-act.is-tournament .mq-arena-copy { padding-right: 6px; }
.mq-arena-act.is-tournament .mq-arena-copy strong::after { content: "🏆"; margin-left: 6px; font-size: .9em; }

/* cartes et textes communs */
.mq-btn.is-ghost { background: rgba(31, 157, 85, .14) !important; color: #1f9d55 !important; box-shadow: none !important; }

/* mes stats + mes tournois */

/* création : sélecteurs */

/* vestiaire */

/* tirage au sort */

/* tableau */

/* interlude aller / retour et tour terminé */

/* podium et récompenses */

/* fin de manche dans un tournoi */
@media (max-width: 360px) { .mq-tn-seats { gap: 6px; } .mq-tn-seat b { font-size: .58rem; } .mq-tn-stats b { font-size: .9rem; } }

/* ---------- Tournois V2 : héros, création par tuiles, rail d'univers, résumé collant ---------- */
@keyframes mq-h2-pulse { 70% { box-shadow: 0 0 0 7px rgba(76, 201, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 201, 63, 0); } }

/* création */
@media (max-width: 360px) { .mq-tn-tiles.is-2 { grid-template-columns: 1fr; } .mq-tn-tile.is-size strong { font-size: 1.4rem; } }

/* =========================================================================
   TOURNOIS (6.30.0) — présentation portée depuis la maquette « Tournois Premium »
   (préfixe .mq-tp), élimination et championnat.
   ========================================================================= */
.mq-view[data-view="online"] > .mq-tp { flex: 1 1 auto; min-height: 0; }
.mq-tp { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; color: var(--mq-text, var(--encre)); font-size: 15px; }
.mq-tp * { box-sizing: border-box; }
.mq-tp h2 { font-size: 30px; letter-spacing: -1.2px; line-height: 1.05; margin: 8px 0 10px; font-weight: 950; }
.mq-tp h3 { font-size: 15px; margin: 0 0 8px; font-weight: 900; }
.mq-tp p { margin: 0 0 8px; line-height: 1.45; font-weight: 700; }
.mq-tp button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mq-tp button:disabled { cursor: default; opacity: .45; }
.mq-tp button:active:not(:disabled) { transform: scale(.97); }
.mq-tp input { font: inherit; }
.mq-tp .mq-tp-ic { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mq-tp-back { width: 36px; height: 36px; border-radius: 50%; background: var(--mq-surface, #fff); display: grid; place-items: center; border: 1px solid var(--mq-border, rgba(21,60,122,.12)); flex-shrink: 0; }
.mq-tp-screen-head h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 950; letter-spacing: -.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-tp-scroll::-webkit-scrollbar { display: none; }
.mq-tp-scroll { scrollbar-width: none; }
.mq-tp-identity { display: grid; gap: 10px; }
.mq-tp-identity .mq-form-error:empty { display: none; }
.mq-tp-choices.mq-tp-five { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mq-tp-choices.mq-tp-five .mq-tp-choice { padding: 12px 4px; align-items: center; text-align: center; }
.mq-tp-choices.mq-tp-five .mq-tp-choice small { font-size: 9px; }
.mq-tp-avatar-empty { display: inline-block; width: 46px; height: 46px; border-radius: 50%; background: var(--mq-surface-raised, #f1f5f9); border: 2px dashed var(--mq-border, #cbd5e1); }
.mq-tp-bracket-match .mq-tp-avatar-empty { width: 20px; height: 20px; border-width: 1px; }
.mq-tp-seat.mq-tp-me .mq-tp-avatar { box-shadow: 0 0 0 3px #16c4ce; }
.mq-tp-training { color: #a45912 !important; }
.mq-tp-standings { padding: 8px 10px 12px; }
.mq-tp-standings-head, .mq-tp-standings-row { display: grid; grid-template-columns: 22px 1fr 26px 26px 26px 56px 34px; align-items: center; gap: 4px; padding: 8px 6px; font-size: 12px; font-weight: 800; }
.mq-tp-standings-head { color: var(--mq-text-secondary); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--mq-border); }
.mq-tp-standings-row { border-radius: 12px; }
.mq-tp-standings-row.mq-tp-mine { background: rgba(22, 196, 206, .12); }
.mq-tp-standings-row.mq-tp-first .mq-tp-rank { background: var(--gold); color: #3a2200; }
.mq-tp-standings-row span { text-align: center; }
.mq-tp-standings-row .mq-tp-rank { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mq-surface-raised); font-size: 11px; }
.mq-tp-standings-row .mq-tp-who { display: flex; align-items: center; gap: 6px; text-align: left; min-width: 0; }
.mq-tp-standings-row .mq-tp-who .mq-tp-avatar { width: 26px; height: 26px; }
.mq-tp-standings-row .mq-tp-who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-tp-standings-row .mq-tp-diff { color: var(--mq-text-secondary); font-variant-numeric: tabular-nums; }
.mq-tp-standings-row .mq-tp-pts { font-size: 14px; font-weight: 950; color: var(--accent); }
.mq-tp-record-card .mq-tp-mini-stats { margin: 0; }
.mq-tp-sheet-backdrop { position: absolute; inset: 0; z-index: 20; background: rgba(8, 23, 44, .45); display: flex; align-items: flex-end; }
.mq-tp-sheet { width: 100%; max-height: 82%; overflow-y: auto; }
.mq-tp-round-button { width: 36px; height: 36px; border-radius: 50%; background: var(--mq-surface); display: grid; place-items: center; border: 1px solid var(--mq-border); }
.mq-tp .mq-tp-count-ring strong[data-tn-until] { font-variant-numeric: tabular-nums; }
.mq-shell[data-motion="calme"] .mq-tp * , .mq-shell[data-motion="calme"] .mq-tp *::before, .mq-shell[data-motion="calme"] .mq-tp *::after { animation: none !important; transition: none !important; }
.mq-tp-ic{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mq-tp{--hero:#e6f8ef;--accent:#087c80;--gold:linear-gradient(115deg,#ffe58b,#ffc02e 60%,#efa22e);--ease:cubic-bezier(.32,.72,.24,1)}
.mq-shell[data-skin="ocean"] .mq-tp{--mq-bg:#ddecf8;--hero:#b5eaf5;--mq-surface-raised:#eff9ff;--mq-border:#caddf0;--accent:#1d669c}
.mq-shell[data-skin="ambre"] .mq-tp{--mq-bg:#fff4df;--hero:#ffe1a5;--mq-surface-raised:#fff9ee;--mq-border:#f0dec0;--accent:#a45912}
.mq-shell[data-skin="nuit"] .mq-tp{--mq-bg:#0b1422;--hero:#203b49;--mq-surface:#18283a;--mq-surface-raised:#20344a;--mq-text:#eff6ff;--mq-text-secondary:#aec3da;--mq-border:#34485d;--accent:#81e0d3}
.mq-shell[data-skin="nuit"] .mq-tp .mq-tp-hero{background:radial-gradient(ellipse at 70% 20%,#3c5147,transparent 70%),linear-gradient(140deg,#243c3e,#162c3c)}
.mq-tp-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 20px 24px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7d7d7 transparent}
.mq-tp-screen-head{display:flex;align-items:center;gap:9px;padding:5px 20px 12px;flex-shrink:0}
.mq-tp-screen-head h1{margin:0;font-size:23px;letter-spacing:-.8px;font-weight:950;flex:1}
.mq-tp-screen-head .mq-tp-back{padding:6px;background:none}
.mq-tp-tag{display:inline-flex;align-items:center;gap:5px;border-radius:30px;padding:6px 9px;font-size:10px;font-weight:900;letter-spacing:.4px;white-space:nowrap;background:var(--mq-surface-raised);color:var(--accent);border:1px solid var(--mq-border)}
.mq-tp-tag.mq-tp-gold{background:#fff0c5;color:#865006;border-color:#f5d68b}
.mq-tp-dot{height:6px;width:6px;border-radius:50%;background:#36b968;box-shadow:0 0 0 3px #36b96819;animation:tp-blink 2s infinite}
.mq-tp-eyebrow{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:950;color:var(--accent);margin:0 0 9px}
.mq-tp-muted{color:var(--mq-text-secondary)}
.mq-tp-row{display:flex;align-items:center;gap:10px}
.mq-tp-between{justify-content:space-between}
.mq-tp-stack{display:grid;gap:12px}
.mq-tp-section-label{display:flex;align-items:center;justify-content:space-between;margin:23px 0 12px}
.mq-tp-section-label h3{margin:0;font-size:16px}
.mq-tp-section-label small{font-size:10px;color:var(--mq-text-secondary);font-weight:800}
.mq-tp-hero{position:relative;overflow:hidden;border-radius:28px;border:1px solid #fff9;background:radial-gradient(ellipse at 80% 30%,#ffedb5a6,transparent 65%),linear-gradient(125deg,#e2faf2,#f6fbef);padding:23px 21px 0;box-shadow:0 12px 30px #153c7a12}
.mq-tp-hero .mq-tp-eyebrow{position:relative;z-index:2}
.mq-tp-hero h2{font-size:30px;max-width:188px;position:relative;z-index:2;line-height:1.04}
.mq-tp-hero h2 em{font-style:normal;color:var(--accent)}
.mq-tp-hero p{max-width:192px;position:relative;z-index:2;margin-bottom:16px;font-weight:600}
.mq-tp-hero .mq-tp-prize{display:inline-flex;gap:6px;align-items:center;color:#8e590f;background:#fff7db;border:1px solid #efd69d;padding:7px 10px;border-radius:9px;font-size:11px;font-weight:900;position:relative;z-index:2}
.mq-tp-prize .mq-tp-ic{width:16px;height:16px}
.mq-tp-hero-art{position:absolute;right:-8px;top:43px;width:154px;height:172px;pointer-events:none}
.mq-tp-halo{position:absolute;inset:9%;border:1px solid #d8be6b66;border-radius:50%;animation:tp-orbit 30s linear infinite}
.mq-tp-halo:before, .mq-tp-halo:after{content:'';position:absolute;border:1px solid #d8be6b44;border-radius:50%;inset:10px}
.mq-tp-halo:after{inset:23px}
.mq-tp-halo i{position:absolute;width:7px;height:7px;background:#edb529;border-radius:50%;top:0;left:60%}
.mq-tp-cup{width:100%;height:100%;filter:drop-shadow(0 15px 8px #80540b26);animation:tp-float 5s var(--ease) infinite}
.mq-tp-spark{position:absolute;font-size:20px;color:#c68e1d;animation:tp-twinkle 3s infinite}
.mq-tp-spark.mq-tp-a{top:6px;right:40px}
.mq-tp-spark.mq-tp-b{bottom:27px;left:24px;animation-delay:1s}
.mq-tp-hero-foot{border-top:1px solid #8db8a52f;display:flex;justify-content:space-between;margin-top:22px;padding:13px 0;position:relative;z-index:2}
.mq-tp-hero-foot span{font-size:10px;font-weight:800;color:var(--mq-text-secondary);display:flex;align-items:center;gap:4px}
.mq-tp-hero-foot b{color:var(--mq-text);font-size:14px}
.mq-tp-hero-foot .mq-tp-ic{width:15px;height:15px}
.mq-tp-primary{padding:15px 18px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--degrade);color:white;font-size:14px;font-weight:900;box-shadow:0 5px 0 #1874aa,0 10px 24px #279ac22b;min-height:48px;position:relative;overflow:hidden}
.mq-tp-primary:after{content:'';position:absolute;inset:-30% auto -30% -70%;width:35%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff40,transparent);animation:tp-shine 6s ease-in-out infinite;pointer-events:none}
.mq-tp-primary.mq-tp-gold{background:var(--gold);color:#634315;box-shadow:0 4px 0 #ca881d,0 10px 20px #c68c1f23}
.mq-tp-primary.mq-tp-full{width:100%;margin-top:15px}
.mq-tp-secondary{display:flex;align-items:center;justify-content:center;gap:7px;min-height:43px;padding:10px 14px;border-radius:13px;background:var(--mq-surface-raised);color:var(--mq-text);border:1px solid var(--mq-border);font-size:12px;font-weight:850}
.mq-tp-text-button{display:flex;align-items:center;gap:5px;background:none;font-size:11px;font-weight:850;color:var(--accent);padding:7px 0}
.mq-tp-text-button .mq-tp-ic{width:14px;height:14px}
.mq-tp-card{padding:16px;border-radius:22px;background:var(--mq-surface);border:1px solid var(--mq-border);box-shadow:0 6px 18px #153c7a05}
.mq-tp-resume{display:flex;align-items:center;gap:10px;border:1px solid #e7c668;background:var(--mq-surface);padding:13px;border-radius:18px;position:relative}
.mq-tp-resume:before{content:'';position:absolute;inset:8px auto 8px 0;width:3px;background:#edb829;border-radius:0 3px 3px 0}
.mq-tp-resume .mq-tp-symbol{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff1c9;color:#a06a13}
.mq-tp-resume strong{font-size:12px;display:block}
.mq-tp-resume small{font-size:10px;display:block;color:var(--mq-text-secondary);margin-top:4px}
.mq-tp-resume .mq-tp-text-button{margin-left:auto}
.mq-tp-code-entry{display:flex;gap:8px;align-items:center}
.mq-tp-code-entry input{min-width:0;width:100%;border:1px solid var(--mq-border);border-radius:12px;padding:12px;background:var(--mq-surface-raised);color:var(--mq-text);letter-spacing:4px;font-size:17px;font-weight:800}
.mq-tp-code-entry button{width:43px;min-height:43px;flex-shrink:0}
.mq-tp-error{color:#c13c50;font-size:11px;min-height:0;margin:7px 0 0}
.mq-tp-public-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--mq-surface);border-radius:19px;border:1px solid var(--mq-border)}
.mq-tp-public-card .mq-tp-copy{flex:1;min-width:0}
.mq-tp-public-card strong{font-size:12px;display:block}
.mq-tp-public-card small{font-size:10px;display:block;color:var(--mq-text-secondary);line-height:1.5;margin-top:3px}
.mq-tp-public-card .mq-tp-secondary{padding:9px 10px;font-size:10px;min-height:39px;color:var(--accent)}
.mq-tp-avatar{width:42px;height:42px;object-fit:cover;border-radius:50%;border:2px solid var(--mq-surface);box-shadow:0 3px 10px #153c7a1f;background:#cbdad9;flex-shrink:0}
.mq-tp-meter{height:4px;border-radius:5px;background:var(--mq-border);overflow:hidden;margin:8px 0 4px}
.mq-tp-meter i{display:block;height:100%;background:var(--degrade);border-radius:5px;transform-origin:left;animation:tp-grow .8s var(--sortie) both}
.mq-tp-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.mq-tp-mini-stats div{text-align:center;padding:13px 4px;background:var(--mq-surface);border:1px solid var(--mq-border);border-radius:16px}
.mq-tp-mini-stats strong{font-size:19px;font-weight:950;display:block}
.mq-tp-mini-stats small{font-size:10px;color:var(--mq-text-secondary)}
.mq-tp-enter{animation:tp-enter .55s var(--sortie) both}
.mq-tp-stagger>*{animation:tp-enter .55s var(--sortie) both}
.mq-tp-stagger>*:nth-child(2){animation-delay:.07s}
.mq-tp-stagger>*:nth-child(3){animation-delay:.14s}
.mq-tp-stagger>*:nth-child(4){animation-delay:.21s}
.mq-tp-stagger>*:nth-child(5){animation-delay:.28s}
.mq-tp-stagger>*:nth-child(6){animation-delay:.35s}
.mq-tp-foot{padding:12px 20px 15px;background:var(--mq-surface);border-top:1px solid var(--mq-border);flex-shrink:0}
.mq-tp-foot p{font-size:10px;text-align:center;margin:0 0 9px;color:var(--mq-text-secondary)}
.mq-tp-foot .mq-tp-primary{width:100%}
.mq-tp-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mq-tp-choices.mq-tp-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mq-tp-choice{min-width:0;position:relative;text-align:left;padding:16px 12px;border-radius:17px;border:1.5px solid var(--mq-border);background:var(--mq-surface);display:flex;flex-direction:column;gap:7px;transition:transform .2s var(--ease);font-weight:850}
.mq-tp-choice .mq-tp-ic{color:var(--mq-text-secondary);height:23px;width:23px}
.mq-tp-choice strong{font-size:12px}
.mq-tp-choice small{font-size:10px;line-height:1.4;color:var(--mq-text-secondary);font-weight:600}
.mq-tp-choice .mq-tp-big{font-size:30px;letter-spacing:-1px}
.mq-tp-choice.mq-tp-selected{border-color:#1babac;background:var(--mq-surface-raised);box-shadow:0 0 0 2px #1babac15}
.mq-tp-choice.mq-tp-selected:after{content:'✓';position:absolute;top:8px;right:8px;width:17px;height:17px;display:grid;place-items:center;background:#119397;color:white;border-radius:50%;font-size:10px}
.mq-tp-choice.mq-tp-selected .mq-tp-ic{color:var(--accent)}
.mq-tp-rail{display:flex;gap:9px;overflow-x:auto;padding:3px 2px 8px;scrollbar-width:thin}
.mq-tp-universe{min-width:100px;width:100px;padding:6px;align-items:center;flex-shrink:0}
.mq-tp-universe img{width:85px;height:62px;object-fit:contain}
.mq-tp-universe strong{font-size:10px}
.mq-tp-toggle{width:100%;background:var(--mq-surface);border:1px solid var(--mq-border);border-radius:17px;padding:15px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;text-align:left}
.mq-tp-toggle strong{font-size:12px}
.mq-tp-toggle small{display:block;color:var(--mq-text-secondary);font-size:10px;margin-top:4px}
.mq-tp-switch{height:25px;width:44px;background:var(--mq-border);border-radius:20px;padding:3px;flex-shrink:0}
.mq-tp-switch:after{content:'';display:block;width:19px;height:19px;border-radius:50%;background:white;transition:transform .2s}
.mq-tp-toggle[aria-checked=true] .mq-tp-switch{background:#1cac98}
.mq-tp-toggle[aria-checked=true] .mq-tp-switch:after{transform:translateX(19px)}
.mq-tp-name-input{width:100%;padding:12px 0 4px;background:none;color:var(--mq-text);font-size:20px;font-weight:900;border:0;border-bottom:1px solid var(--mq-border)}
.mq-tp-lobby-title{text-align:center;margin-top:10px}
.mq-tp-lobby-title h2{font-size:26px}
.mq-tp-lobby-code{display:flex;align-items:center;gap:8px;justify-content:center;margin:12px 0 22px}
.mq-tp-lobby-code button{background:var(--mq-surface);border:1px dashed #9eb9bb;border-radius:10px;padding:9px 14px;font-weight:900;letter-spacing:3px;display:flex;align-items:center;gap:14px}
.mq-tp-lobby-code .mq-tp-ic{width:16px;height:16px;letter-spacing:0}
.mq-tp-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 7px}
.mq-tp-seat{text-align:center;position:relative;min-width:0;padding:6px 0}
.mq-tp-seat .mq-tp-avatar{width:54px;height:54px;border:3px solid var(--mq-surface)}
.mq-tp-seat.mq-tp-ready .mq-tp-avatar{border-color:#67c98e}
.mq-tp-seat .mq-tp-photo{position:relative;display:inline-block}
.mq-tp-seat .mq-tp-check{position:absolute;right:-1px;bottom:3px;border:2px solid var(--mq-surface);border-radius:50%;height:18px;width:18px;display:grid;place-items:center;background:#2dae65;color:white;font-size:10px}
.mq-tp-seat strong{display:block;font-size:11px;margin:6px 0 2px;overflow:hidden;text-overflow:ellipsis}
.mq-tp-seat small{display:block;font-size:8px;color:var(--mq-text-secondary)}
.mq-tp-empty-seat{width:54px;height:54px;border:1.5px dashed #acc3c6;border-radius:50%;margin:auto;display:grid;place-items:center;color:#9cb3bd;font-size:21px}
.mq-tp-lobby-status{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:14px;border-radius:17px;background:var(--mq-surface-raised)}
.mq-tp-lobby-status p{margin:0;font-size:11px}
.mq-tp-lobby-status .mq-tp-ic{color:var(--accent)}
.mq-tp-round-progress{display:flex;gap:4px;justify-content:center;margin:18px 0}
.mq-tp-round-progress i{width:20px;height:4px;border-radius:3px;background:var(--mq-border)}
.mq-tp-round-progress .mq-tp-on{background:#1fa9ad}
.mq-tp-center{text-align:center}
.mq-tp-count-ring{height:175px;width:175px;margin:22px auto;position:relative;display:grid;place-items:center;border-radius:50%;border:1px solid var(--mq-border);background:var(--mq-surface);box-shadow:0 0 0 12px var(--mq-surface-raised),0 20px 40px #153c7a17}
.mq-tp-count-ring:before{content:'';position:absolute;inset:-6px;border-radius:50%;border:4px solid transparent;border-top-color:#e5b130;border-right-color:#1eb6b9;animation:tp-orbit 2s linear infinite}
.mq-tp-count-ring strong{display:block;font-size:62px;letter-spacing:-4px;font-weight:950;line-height:1.1}
.mq-tp-count-ring small{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mq-text-secondary)}
.mq-tp-overlap{display:flex;justify-content:center;margin:19px 0}
.mq-tp-overlap .mq-tp-avatar{margin-left:-8px;width:35px;height:35px}
.mq-tp-overlap .mq-tp-avatar:first-child{margin-left:0}
.mq-tp-draw-stage{height:256px;position:relative;display:grid;place-items:center;margin:8px 0}
.mq-tp-draw-stage .mq-tp-cup{width:170px;height:170px}
.mq-tp-orbit-avatars{position:absolute;width:235px;height:235px;border:1px dashed var(--mq-border);border-radius:50%;animation:tp-orbit 16s linear infinite}
.mq-tp-orbit-avatars img{position:absolute;width:46px;height:46px;left:calc(50% - 23px);top:calc(50% - 23px);transform:rotate(var(--angle)) translateY(-116px) rotate(calc(-1 * var(--angle)));border:3px solid var(--mq-surface)}
.mq-tp-round-tabs{display:flex;gap:6px;overflow-x:auto;margin:3px 0 16px;scrollbar-width:none}
.mq-tp-round-tabs button{white-space:nowrap;background:var(--mq-surface);padding:9px 12px;border:1px solid var(--mq-border);border-radius:20px;font-size:10px;font-weight:900}
.mq-tp-round-tabs button.mq-tp-active{color:var(--mq-bg);background:var(--mq-text);border-color:var(--mq-text)}
.mq-tp-match-card{border:1px solid var(--mq-border);border-radius:20px;background:var(--mq-surface);padding:15px;margin-bottom:12px}
.mq-tp-match-card.mq-tp-mine{border:1.5px solid #d8b65a;box-shadow:0 6px 22px #bc942919}
.mq-tp-match-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:var(--mq-text-secondary);margin-bottom:13px}
.mq-tp-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.mq-tp-contender{text-align:center;min-width:0}
.mq-tp-contender .mq-tp-avatar{width:49px;height:49px}
.mq-tp-contender strong{display:block;font-size:12px;margin-top:5px}
.mq-tp-contender.mq-tp-won strong{color:var(--accent)}
.mq-tp-contender.mq-tp-lost{opacity:.55}
.mq-tp-score{text-align:center;font-size:28px;letter-spacing:-1px;font-weight:950;font-variant-numeric:tabular-nums}
.mq-tp-score small{display:block;font-size:8px;letter-spacing:1px;font-weight:700;color:var(--mq-text-secondary);margin-top:4px;text-transform:uppercase}
.mq-tp-match-detail{text-align:center;font-size:9px;color:var(--mq-text-secondary);border-top:1px solid var(--mq-border);padding-top:10px;margin-top:12px;line-height:1.9}
.mq-tp-match-card .mq-tp-primary{margin-top:13px;min-height:40px;padding:11px;font-size:12px;box-shadow:0 3px 0 #1874aa}
.mq-tp-bracket{display:flex;gap:12px;overflow-x:auto;padding:0 0 14px;align-items:center;scrollbar-width:thin}
.mq-tp-bracket-col{min-width:174px;flex:0 0 174px;display:grid;gap:9px}
.mq-tp-bracket-col>small{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.mq-tp-bracket-match{background:var(--mq-surface);border:1px solid var(--mq-border);border-radius:12px;padding:10px;font-size:10px}
.mq-tp-bracket-match.mq-tp-mine{border-color:#d7b259}
.mq-tp-bracket-match div{display:flex;justify-content:space-between;padding:5px 0}
.mq-tp-bracket-match .mq-tp-winner{color:var(--accent);font-weight:900}
.mq-tp-bracket-match .mq-tp-eliminated{opacity:.5}
.mq-tp-bracket-match .mq-tp-avatar{width:20px;height:20px;vertical-align:middle;margin-right:5px}
.mq-tp-bracket-match span{display:flex;align-items:center}
.mq-tp-mode-switch{display:flex;gap:5px}
.mq-tp-mode-switch button{background:var(--mq-surface);border:1px solid var(--mq-border);border-radius:9px;padding:7px 9px;font-size:10px}
.mq-tp-mode-switch .mq-tp-active{background:var(--mq-text);color:var(--mq-bg)}
.mq-tp-duel-score{display:flex;justify-content:space-between;align-items:center;background:var(--mq-surface);border:1px solid var(--mq-border);border-radius:20px;padding:12px 15px}
.mq-tp-duel-score .mq-tp-avatar{width:36px;height:36px}
.mq-tp-duel-score strong{font-size:12px}
.mq-tp-duel-score b{font-size:22px;letter-spacing:-1px;display:block}
.mq-tp-duel-score small{font-size:9px;color:var(--mq-text-secondary)}
.mq-tp-duel-score .mq-tp-right{text-align:right}
.mq-tp-turn-pill{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:900;color:var(--accent);padding:14px 0}
.mq-tp-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;perspective:1000px}
.mq-tp-memory{aspect-ratio:1/1.07;position:relative;background:none;border-radius:12px;padding:0;transform-style:preserve-3d;transition:transform .5s var(--ressort);box-shadow:0 4px 0 #2c889a,0 7px 12px #153c7a0d}
.mq-tp-memory>span{position:absolute;inset:0;border-radius:12px;display:grid;place-items:center;backface-visibility:hidden}
.mq-tp-memory .mq-tp-front{background:linear-gradient(135deg,#35cbd0,#2489b2);border:2px solid #ffffffa0;overflow:hidden}
.mq-tp-memory .mq-tp-front:before{content:'';position:absolute;inset:6px;border-radius:7px;border:1px solid #ffffff40}
.mq-tp-memory .mq-tp-front .mq-tp-ic{color:#ffffff9c;width:30px;height:30px;transform:rotate(-10deg)}
.mq-tp-memory .mq-tp-face{background:var(--mq-surface);border:2px solid #cde5dd;transform:rotateY(180deg);font-size:28px}
.mq-tp-memory.mq-tp-revealed, .mq-tp-memory.mq-tp-matched{transform:rotateY(180deg)}
.mq-tp-memory.mq-tp-matched{box-shadow:0 3px 0 #69b793}
.mq-tp-memory.mq-tp-matched .mq-tp-face{border-color:#52c994;background:#effbf5}
.mq-tp-duel-tip{font-size:10px;text-align:center;color:var(--mq-text-secondary);margin:14px 0 0}
.mq-tp-interlude-avatar{display:flex;align-items:center;justify-content:center;gap:20px;margin:28px 0}
.mq-tp-interlude-avatar .mq-tp-avatar{height:74px;width:74px;border:4px solid #e6c16c}
.mq-tp-interlude-avatar .mq-tp-ic{width:32px;height:32px;color:var(--accent)}
.mq-tp-result-mark{display:grid;place-items:center;margin:20px auto 17px;width:68px;height:68px;border-radius:23px;background:var(--gold);color:#875b13;box-shadow:0 9px 24px #c99b2826;animation:tp-stamp .8s var(--ressort) both}
.mq-tp-result-mark .mq-tp-ic{width:36px;height:36px}
.mq-tp-points-table{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center;font-size:11px;margin:10px 0}
.mq-tp-points-table .mq-tp-muted{font-size:9px}
.mq-tp-points-table b{font-size:17px}
.mq-tp-total-row{display:flex;justify-content:space-between;padding-top:13px;border-top:1px solid var(--mq-border);font-size:12px;font-weight:900}
.mq-tp-total-row strong{color:var(--accent)}
.mq-tp-qualifier{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--mq-border);font-size:12px}
.mq-tp-qualifier:last-child{border:0}
.mq-tp-qualifier small{display:block;color:var(--mq-text-secondary);font-size:10px}
.mq-tp-qualifier>.mq-tp-ic{margin-left:auto;color:var(--accent)}
.mq-tp-qualifier .mq-tp-avatar{height:36px;width:36px}
.mq-tp-podium-scene{position:relative;text-align:center;overflow:hidden;padding:6px 0 0}
.mq-tp-podium-scene h2{font-size:37px;letter-spacing:-1.5px;margin-bottom:7px}
.mq-tp-podium-scene .mq-tp-eyebrow{color:var(--accent)}
.mq-tp-podium{display:flex;align-items:flex-end;justify-content:center;height:258px;padding:0 5px;margin-top:3px;gap:6px}
.mq-tp-podium-place{width:31%;position:relative;animation:tp-podium 1.1s var(--sortie) both;transform-origin:bottom}
.mq-tp-podium-place:nth-child(1){animation-delay:.2s}
.mq-tp-podium-place:nth-child(3){animation-delay:.4s}
.mq-tp-podium-place .mq-tp-avatar{width:56px;height:56px;border:3px solid #dbe5eb;display:block;margin:0 auto 6px}
.mq-tp-podium-place.mq-tp-champion .mq-tp-avatar{width:76px;height:76px;border:4px solid #ffc02e;box-shadow:0 0 0 7px #ffcd3c22,0 0 40px #ffc02e46}
.mq-tp-podium-place strong{font-size:11px;display:block;margin-bottom:9px}
.mq-tp-step{border-radius:15px 15px 0 0;border:1px solid #c7d3df;background:linear-gradient(120deg,#edf4fa,#bbcfdd);height:85px;display:grid;place-items:center;color:#506c89;font-size:38px;font-weight:950;box-shadow:inset 0 2px 0 #fff9}
.mq-tp-champion .mq-tp-step{height:119px;border-color:#e6b643;background:linear-gradient(125deg,#fff0b7,#ffce52 55%,#eda931);color:#97620d;font-size:50px}
.mq-tp-bronze .mq-tp-step{height:65px;border-color:#dfb08b;background:linear-gradient(120deg,#f5ddc7,#d79c73);color:#955a33}
.mq-tp-crown{color:#e8af29;position:absolute;top:-29px;left:calc(50% - 17px);font-size:27px;animation:tp-float 3s infinite}
.mq-tp-reward-card{position:relative;border:1px solid #ddbd69;border-radius:20px;background:var(--mq-surface);padding:16px;margin-top:16px;text-align:center}
.mq-tp-reward-title{font-size:12px;font-weight:900;display:flex;align-items:center;gap:7px;justify-content:center}
.mq-tp-reward-title .mq-tp-ic{color:#bf8a19}
.mq-tp-reward-values{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 0;gap:8px}
.mq-tp-reward-values b{font-size:25px;letter-spacing:-1px}
.mq-tp-reward-values small{display:block;font-size:10px;color:var(--mq-text-secondary);margin-top:3px}
.mq-tp-reward-values>div+div{border-left:1px solid var(--mq-border)}
.mq-tp-confetti-layer{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.mq-tp-confetti-layer i{position:absolute;left:var(--x);top:-15px;width:7px;height:12px;background:var(--c);animation:tp-confetti var(--d) var(--delay) ease-in both}
.mq-tp-share-row{display:flex;gap:8px;margin-top:13px}
.mq-tp-share-row button{flex:1}
.mq-tp-share-row .mq-tp-primary{box-shadow:0 3px 0 #1874aa;font-size:12px}
.mq-tp-hub-tile{width:100%;text-align:left;margin:14px 0;padding:22px;border:1px solid #dbb352;border-radius:24px;background:var(--gold);color:#67470f;box-shadow:0 5px 0 #ce9a2c,0 15px 35px #b8972e20;position:relative;overflow:hidden}
.mq-tp-hub-tile h2{font-size:27px;margin:16px 0 6px}
.mq-tp-hub-tile p{font-size:12px;margin:0;max-width:220px}
.mq-tp-hub-tile>.mq-tp-ic{position:absolute;right:25px;top:33px;width:60px;height:60px;transform:rotate(12deg)}
.mq-tp-hub-tile .mq-tp-tag{background:#fff7d9;color:#765415;border-color:#e3c16d}
.mq-tp-hub-tile:after{content:'';position:absolute;width:150px;height:200%;background:#fff3;right:-70px;top:-50%;transform:rotate(25deg)}
.mq-tp-sheet-backdrop{position:absolute;inset:0;z-index:20;background:#051b3b70;display:flex;align-items:flex-end;padding:12px}
.mq-tp-sheet{width:100%;max-height:90%;overflow-y:auto;padding:21px;border:1px solid var(--mq-border);border-radius:26px;background:var(--mq-surface);box-shadow:0 20px 60px #0003;animation:tp-enter .4s var(--sortie)}
.mq-tp-sheet h2{font-size:24px}
.mq-tp-sheet .mq-tp-choices{gap:7px}
.mq-tp-sheet .mq-tp-choice{padding:11px;font-size:11px}
.mq-tp-sheet .mq-tp-section-label{margin:19px 0 10px}
.mq-tp-sheet .mq-tp-palette{height:20px;width:100%;border-radius:6px}
.mq-tp-toast{position:absolute;bottom:88px;left:20px;right:20px;text-align:center;z-index:40;background:var(--mq-text);color:var(--mq-bg);padding:13px 15px;border-radius:15px;font-size:12px;box-shadow:0 8px 30px #0002;animation:tp-enter .3s var(--sortie);pointer-events:none}
.mq-tp-help-content p{font-size:12px}
.mq-tp-small-note{font-size:10px;color:var(--mq-text-secondary);text-align:center;margin:16px 0 0}
.mq-tp-no-margin{margin:0}
.mq-tp-badge-seal{height:65px;width:65px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;background:var(--gold);border:4px double #fff1ba;color:#8e611a;box-shadow:0 4px 18px #d2aa3333;animation:tp-stamp .9s var(--ressort)}
.mq-tp-badge-seal .mq-tp-ic{height:34px;width:34px}
@keyframes tp-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes tp-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes tp-orbit{to{transform:rotate(360deg)}}
@keyframes tp-twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes tp-blink{50%{opacity:.45}}
@keyframes tp-shine{0%,65%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(600%) skewX(-20deg)}}
@keyframes tp-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tp-podium{from{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}
@keyframes tp-stamp{0%{opacity:0;transform:scale(2) rotate(-20deg)}65%{opacity:1;transform:scale(.9) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes tp-confetti{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(700px) rotate(700deg)}}
.mq-shell[data-motion="calme"] .mq-tp *, .mq-shell[data-motion="calme"] .mq-tp *:before, .mq-shell[data-motion="calme"] .mq-tp *:after{animation:none!important;transition:none!important}
.mq-shell[data-motion="calme"] .mq-tp .mq-tp-confetti-layer{display:none}
@media(prefers-reduced-motion:reduce){.mq-tp *, .mq-tp *:before, .mq-tp *:after{animation:none!important;transition:none!important}.mq-tp-confetti-layer{display:none}}
@media(min-width:700px){.mq-tp{height:min(930px,96dvh);margin:2dvh auto;border:1px solid #fff9;border-radius:32px}}
@media(max-width:374px){.mq-tp-scroll{padding-left:16px;padding-right:16px}.mq-tp-screen-head{padding-left:16px;padding-right:16px}.mq-tp-hero{padding:20px 17px 0}.mq-tp-hero h2{font-size:28px;max-width:176px}.mq-tp-hero-art{width:133px;right:-9px;top:44px}.mq-tp-hero p{max-width:177px;font-size:11px}.mq-tp-hero-foot span{font-size:9px}.mq-tp-hero-foot b{font-size:12px}.mq-tp-choice{padding:14px 10px}.mq-tp-podium-scene h2{font-size:33px}.mq-tp-seat .mq-tp-avatar, .mq-tp-empty-seat{width:49px;height:49px}}

/* =========================================================================
   TOURNOIS 6.30.1 — plein écran, rails horizontaux, tuiles homogènes.
   Ce bloc corrige les défauts relevés : double en-tête, murs de tuiles,
   coches sur le texte, textes non centrés, fonds qui se superposent.
   ========================================================================= */

/* --- plein écran : la barre du jeu disparaît, la section prend toute la hauteur --- */
.mq-shell.is-tp-full .mq-top { display: none !important; }
.mq-shell.is-tp-full .mq-stage { padding-top: calc(env(safe-area-inset-top) + 6px); }
.mq-shell.is-tp-full .mq-view[data-view="online"] { gap: 0; }
.mq-tp { background: linear-gradient(180deg, var(--mq-bg, #eef8f0) 0%, var(--mq-surface-raised, #f6fbfe) 46%, var(--mq-bg, #eef8f0) 100%); border-radius: 26px; overflow: hidden; }
.mq-shell[data-skin="nuit"] .mq-tp, .mq-shell[data-skin="ardoise"] .mq-tp { background: linear-gradient(180deg, rgba(11,20,34,.9), rgba(24,40,58,.9)); }

/* --- en-tête de section : un seul, compact, aligné --- */
.mq-tp-screen-head { padding: 10px 16px 8px; gap: 10px; }
.mq-tp-screen-head h1 { font-size: 20px; }
.mq-tp-scroll { padding: 2px 16px 18px; }
.mq-tp-foot { padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px); background: var(--mq-surface, #fff); border-top: 1px solid var(--mq-border, rgba(21,60,122,.08)); }
.mq-tp-foot p { margin: 0 0 8px; font-size: 12px; line-height: 1.45; font-weight: 800; color: var(--mq-text-secondary); text-align: center; }
.mq-tp-foot p b { color: var(--mq-text); }

/* --- titres de section dans la charte du jeu --- */
.mq-tp-section-label { margin: 18px 0 8px; align-items: baseline; }
.mq-tp-section-label h3 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--turq-2); font-weight: 950; }
.mq-tp-section-label small { font-size: 11px; font-weight: 900; color: var(--mq-text); }

/* --- rails horizontaux : cartes de taille fixe, défilement magnétique --- */
.mq-tp-rail { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mq-tp-rail::-webkit-scrollbar { display: none; }
.mq-tp-rail > .mq-tp-choice { scroll-snap-align: center; flex: 0 0 auto; }
.mq-tp-rail-wide > .mq-tp-choice { width: 200px; height: 132px; }
.mq-tp-rail-mid > .mq-tp-choice { width: 124px; height: 116px; }
.mq-tp-rail-small > .mq-tp-choice { width: 104px; height: 116px; }
.mq-tp-rail > .mq-tp-universe { width: 116px; height: 148px; }

/* --- tuiles : fond blanc dans tous les états, coche dans un coin réservé --- */
.mq-tp-choice { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 20px; text-align: left; overflow: hidden;
	background: var(--mq-surface, #fff); border: 2px solid var(--mq-border, rgba(21,60,122,.1));
	box-shadow: 0 8px 20px rgba(21,60,122,.08); transition: transform .2s var(--ressort), border-color .2s, box-shadow .2s; }
.mq-tp-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
.mq-tp-choice-top > i:first-child { display: block; width: 23px; height: 23px; }
.mq-tp-choice .mq-tp-ic { width: 23px; height: 23px; color: var(--turq-2); }
.mq-tp-choice-mark { width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; background: var(--mq-surface-raised, #eef4fb); border: 1.5px solid var(--mq-border, rgba(21,60,122,.14)); transition: background .2s, border-color .2s; }
.mq-tp-choice strong { display: block; font-size: 13px; font-weight: 950; letter-spacing: -.2px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-tp-choice small { display: -webkit-box; font-size: 10.5px; line-height: 1.35; font-weight: 700; color: var(--mq-text-secondary); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mq-tp-choice .mq-tp-big { display: block; font-size: 34px; line-height: 1; letter-spacing: -2px; font-weight: 950; text-align: center; margin-top: 2px; }
.mq-tp-choice .mq-tp-mid { display: block; font-size: 19px; line-height: 1.1; letter-spacing: -.5px; font-weight: 950; text-align: center; margin-top: 4px; }
.mq-tp-choice.mq-tp-tile-size small, .mq-tp-choice.mq-tp-tile-grid small { text-align: center; -webkit-line-clamp: 1; }
.mq-tp-choice.mq-tp-tile-size strong, .mq-tp-choice.mq-tp-tile-grid strong { text-align: center; }
.mq-tp-choice.mq-tp-tile-mode { align-items: center; text-align: center; }
.mq-tp-choice.mq-tp-tile-mode .mq-tp-choice-top { width: 100%; }
.mq-tp-choice.mq-tp-tile-mode strong { white-space: normal; font-size: 12px; }
.mq-tp-choice:active:not(:disabled) { transform: scale(.96); }
.mq-tp-choice.mq-tp-selected { border-color: var(--turq); background: var(--mq-surface, #fff); box-shadow: 0 12px 26px rgba(22,196,206,.24); transform: translateY(-2px); }
.mq-tp-choice.mq-tp-selected:after { content: none; }
.mq-tp-choice.mq-tp-selected .mq-tp-choice-mark { background-color: #2e86e0; border-color: #2e86e0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"), linear-gradient(105deg, #16c4ce, #2e86e0);
	background-size: 62% 62%, 100% 100%; background-position: center; background-repeat: no-repeat; box-shadow: 0 4px 10px rgba(46,134,224,.32); }
.mq-tp-choice.mq-tp-selected .mq-tp-ic { color: var(--bleu-2); }
.mq-tp-universe { padding: 8px; }
.mq-tp-universe .mq-tp-choice-top { min-height: 21px; }
.mq-tp-universe img { width: 100%; height: 74px; object-fit: cover; border-radius: 14px; margin: 2px 0 6px; background: var(--mq-surface-raised); }
.mq-tp-universe strong { font-size: 12px; text-align: center; width: 100%; }

/* --- carte du nom, interrupteur, identité --- */
.mq-tp-name-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.mq-tp-name-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--gold, linear-gradient(115deg,#ffe58b,#ffc02e 60%,#efa22e)); box-shadow: 0 8px 18px rgba(232,149,28,.32); }
.mq-tp-name-ic .mq-tp-ic { width: 24px; height: 24px; }
.mq-tp-name-field { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mq-tp-name-field > span { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 950; color: var(--mq-text-secondary); }
.mq-tp-name-input { padding: 4px 0 3px; font-size: 18px; border-bottom-color: transparent; }
.mq-tp-toggle { border-radius: 20px; padding: 13px 14px; margin-top: 14px; border: 2px solid var(--mq-border, rgba(21,60,122,.1)); box-shadow: 0 8px 20px rgba(21,60,122,.08); }
.mq-tp-toggle[aria-checked="true"] { border-color: var(--turq); }
.mq-tp-identity { margin-top: 14px; display: grid; gap: 8px; }
.mq-tp-identity .mq-form-error:empty { display: none; }

/* --- boutons : texte centré au pixel, icône hors du flux --- */
.mq-tp-primary, .mq-tp-secondary, .mq-tp-text-button { position: relative; }
.mq-tp-primary { min-height: 56px; padding: 0 52px; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 0; font-size: 15.5px; letter-spacing: .2px; text-align: center; }
.mq-tp-primary > .mq-tp-ic { position: absolute; right: 18px; top: 50%; margin-top: -11px; }
.mq-tp-primary > .mq-tp-ic:first-child { right: auto; left: 18px; }
.mq-tp-primary.mq-tp-full { margin-top: 12px; }
.mq-tp-secondary { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.mq-tp-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mq-tp-back { border-radius: 14px; }

/* --- listes et cartes : marges homogènes, plus de bandes --- */
.mq-tp-card { padding: 14px; border-radius: 22px; box-shadow: 0 8px 22px rgba(21,60,122,.07); }
.mq-tp-public-card, .mq-tp-resume, .mq-tp-lobby-status, .mq-tp-match-card, .mq-tp-reward-card { border-radius: 20px; }
.mq-tp-hero { border-radius: 24px; }
@media (max-width: 360px) {
	.mq-tp-rail-wide > .mq-tp-choice { width: 176px; }
	.mq-tp-scroll, .mq-tp-screen-head, .mq-tp-foot { padding-left: 13px; padding-right: 13px; }
	.mq-tp-rail { margin: 0 -13px; padding-left: 13px; padding-right: 13px; }
}

/* =========================================================================
   TOURNOIS 6.30.4 — DESIGN V2 PREMIUM COMPACT
   Objectifs : densité mobile, hiérarchie nette, CTA 44–48 px, thèmes complets,
   zéro débordement à 360 px, animations GPU légères et mode Calme respecté.
   ========================================================================= */

/* --- bouton Tournois du hub multijoueur : cohérent avec les autres actions --- */
.mq-arena-act.is-tournament {
	grid-template-columns: 52px minmax(0,1fr) 28px;
	gap: 10px;
	min-height: 72px;
	padding: 10px 10px;
	border-radius: 20px;
	border-color: rgba(255,255,255,.88);
	background:
		radial-gradient(circle at 8% 50%, rgba(255,220,120,.23), transparent 38%),
		linear-gradient(165deg, rgba(255,255,255,.98), rgba(255,250,238,.92));
	box-shadow: 0 8px 22px rgba(94,64,12,.10), 0 1px 0 rgba(255,255,255,.72) inset;
}
.mq-arena-act.is-tournament .mq-arena-ic {
	width: 52px; height: 52px; border-radius: 16px;
	box-shadow: 0 7px 18px var(--glow), inset 0 1px 0 rgba(255,255,255,.5);
}
.mq-arena-act.is-tournament .mq-arena-ic svg { width: 25px; height: 25px; }
.mq-arena-act.is-tournament .mq-arena-copy { padding-right: 42px; }
.mq-arena-act.is-tournament .mq-arena-copy strong { font-size: 1rem; }
.mq-arena-act.is-tournament .mq-arena-copy strong::after { content: none; }
.mq-arena-act.is-tournament .mq-arena-copy small { font-size: .70rem; line-height: 1.28; }
.mq-arena-act.is-tournament .mq-arena-chev { width: 28px; height: 28px; }
.mq-arena-act.is-tournament .mq-arena-chev svg { width: 16px; height: 16px; }
.mq-arena-act.is-tournament .mq-arena-badge {
	top: 8px; right: 40px; padding: 3px 7px; font-size: .50rem;
	letter-spacing: .08em; box-shadow: none;
	background: linear-gradient(105deg,#f09a2a,#d46b24);
}

/* --- palette et matériaux V2 --- */
.mq-tp-v2 {
	--tp-a: #13b8b4;
	--tp-b: #2f7edb;
	--tp-gold: #e9b544;
	--tp-gold-2: #c7861f;
	--tp-panel: rgba(255,255,255,.92);
	--tp-panel-2: rgba(246,251,252,.92);
	--tp-line: rgba(28,77,105,.11);
	--tp-soft: rgba(18,184,180,.10);
	--tp-shadow: 0 7px 22px rgba(21,60,122,.08);
	--tp-shadow-strong: 0 12px 32px rgba(21,60,122,.13);
	--tp-accent-grad: linear-gradient(105deg,var(--tp-a),var(--tp-b));
	--tp-gold-grad: linear-gradient(110deg,#ffe9a0 0%,#f3c45b 42%,#df9d2c 100%);
	position: relative;
	isolation: isolate;
	border-radius: 24px;
	background:
		radial-gradient(circle at 92% -8%, rgba(255,255,255,.72), transparent 27%),
		linear-gradient(180deg, rgba(240,250,248,.96), rgba(246,249,252,.96) 52%, rgba(238,247,246,.98));
	box-shadow: 0 16px 46px rgba(17,57,91,.10);
}
.mq-tp-v2::before {
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:
		radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--tp-a) 11%, transparent), transparent 25%),
		radial-gradient(circle at 85% 36%, color-mix(in srgb, var(--tp-b) 8%, transparent), transparent 28%);
}
.mq-shell[data-skin="ocean"] .mq-tp-v2 {
	--tp-a:#25cce6; --tp-b:#2874d7; --tp-gold:#f2c65e; --tp-gold-2:#b98424;
	--tp-panel:rgba(244,252,255,.93); --tp-panel-2:rgba(230,246,252,.91); --tp-line:rgba(18,93,137,.16); --tp-soft:rgba(37,204,230,.12);
	background:radial-gradient(circle at 85% 0%,rgba(126,231,244,.26),transparent 29%),linear-gradient(180deg,#e7f8fc 0%,#dff0f7 52%,#d2e6f1 100%);
}
.mq-shell[data-skin="ambre"] .mq-tp-v2 {
	--tp-a:#f39a24; --tp-b:#dd6528; --tp-gold:#efb94f; --tp-gold-2:#bd7120;
	--tp-panel:rgba(255,252,244,.94); --tp-panel-2:rgba(255,245,226,.92); --tp-line:rgba(139,77,18,.14); --tp-soft:rgba(243,154,36,.11);
	background:radial-gradient(circle at 88% 2%,rgba(255,199,92,.25),transparent 31%),linear-gradient(180deg,#fff8ea 0%,#fff2dc 54%,#fbe8c8 100%);
}
.mq-shell[data-skin="grenat"] .mq-tp-v2 {
	--tp-a:#b64260; --tp-b:#7c2941; --tp-gold:#d8a55f; --tp-gold-2:#a66a2e;
	--tp-panel:rgba(255,249,246,.94); --tp-panel-2:rgba(250,237,234,.92); --tp-line:rgba(113,31,51,.14); --tp-soft:rgba(182,66,96,.10);
	background:radial-gradient(circle at 88% 1%,rgba(220,156,158,.22),transparent 31%),linear-gradient(180deg,#fff8f5 0%,#f9ece9 54%,#f2ddda 100%);
}
.mq-shell[data-skin="ardoise"] .mq-tp-v2 {
	--tp-a:#6fa3b1; --tp-b:#566a88; --tp-gold:#d7ae68; --tp-gold-2:#9f7741;
	--tp-panel:rgba(245,248,250,.95); --tp-panel-2:rgba(232,238,243,.93); --tp-line:rgba(60,75,95,.17); --tp-soft:rgba(91,123,139,.11);
	background:radial-gradient(circle at 90% 0%,rgba(182,203,214,.15),transparent 32%),linear-gradient(180deg,#edf2f4 0%,#e3e9ed 54%,#d8e0e5 100%);
}
.mq-shell[data-skin="nuit"] .mq-tp-v2 {
	--tp-a:#67d9e4; --tp-b:#7b87f0; --tp-gold:#e9bd62; --tp-gold-2:#a77a2d;
	--tp-panel:rgba(24,40,58,.94); --tp-panel-2:rgba(31,51,72,.94); --tp-line:rgba(173,204,226,.16); --tp-soft:rgba(103,217,228,.11);
	--tp-shadow:0 7px 22px rgba(0,0,0,.18); --tp-shadow-strong:0 14px 34px rgba(0,0,0,.24);
	background:radial-gradient(circle at 84% -4%,rgba(89,112,204,.23),transparent 31%),linear-gradient(180deg,#101c2b 0%,#142436 52%,#0d1928 100%);
}
.mq-shell[data-skin="jade"] .mq-tp-v2 {
	--tp-a:#17b9a6; --tp-b:#2f7edb; --tp-gold:#e8b84d; --tp-gold-2:#bb7f21;
}

/* --- structure compacte et safe-area --- */
.mq-tp-v2 .mq-tp-screen-head {
	min-height: 48px; padding: 7px 14px 7px; gap: 9px;
	border-bottom: 1px solid transparent;
}
.mq-tp-v2 .mq-tp-screen-head h1 { font-size: 18px; letter-spacing: -.45px; }
.mq-tp-v2 .mq-tp-back {
	width: 34px; height: 34px; border-radius: 12px; padding: 0;
	background: var(--tp-panel); border: 1px solid var(--tp-line); box-shadow: 0 4px 12px rgba(21,60,122,.06);
}
.mq-tp-v2 .mq-tp-back .mq-tp-ic { width: 18px; height: 18px; }
.mq-tp-v2 .mq-tp-tag {
	min-height: 25px; padding: 4px 8px; border-radius: 999px;
	font-size: 9px; letter-spacing: .55px; background: var(--tp-panel-2); border-color: var(--tp-line);
}
.mq-tp-v2 .mq-tp-tag.mq-tp-gold { background: color-mix(in srgb,var(--tp-gold) 18%,var(--tp-panel)); color: var(--tp-gold-2); border-color: color-mix(in srgb,var(--tp-gold) 35%,transparent); }
.mq-tp-v2 .mq-tp-scroll {
	padding: 4px 14px 16px; scroll-padding: 14px; scrollbar-width:none;
}
.mq-tp-v2 .mq-tp-scroll::-webkit-scrollbar { display:none; }
.mq-tp-v2 .mq-tp-foot {
	padding: 8px 14px calc(env(safe-area-inset-bottom) + 9px);
	background: color-mix(in srgb,var(--tp-panel) 94%,transparent);
	border-top: 1px solid var(--tp-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mq-tp-v2 .mq-tp-foot p { margin: 0 0 6px; font-size: 10px; line-height: 1.35; font-weight: 760; }
.mq-tp-v2 .mq-tp-section-label { margin: 16px 0 7px; }
.mq-tp-v2 .mq-tp-section-label h3 { font-size: 10px; letter-spacing: 1.35px; color: var(--tp-a); }
.mq-tp-v2 .mq-tp-section-label small { font-size: 10px; }

/* --- hero : moins haut, plus éditorial --- */
.mq-tp-v2 .mq-tp-hero {
	min-height: 214px; padding: 18px 17px 0; border-radius: 21px;
	background:
		radial-gradient(circle at 77% 32%, color-mix(in srgb,var(--tp-gold) 22%,transparent), transparent 35%),
		linear-gradient(138deg,var(--tp-panel),var(--tp-panel-2));
	border: 1px solid color-mix(in srgb,var(--tp-line) 78%,#fff 22%); box-shadow: var(--tp-shadow);
}
.mq-tp-v2 .mq-tp-hero .mq-tp-eyebrow { margin-bottom: 6px; font-size: 9px; color: var(--tp-a); }
.mq-tp-v2 .mq-tp-hero h2 { max-width: 175px; font-size: 25px; line-height: 1.02; letter-spacing: -1px; margin: 0 0 8px; }
.mq-tp-v2 .mq-tp-hero h2 em { color: var(--tp-a); }
.mq-tp-v2 .mq-tp-hero p { max-width: 170px; margin: 0 0 10px; font-size: 10.5px; line-height: 1.35; }
.mq-tp-v2 .mq-tp-prize { padding: 6px 9px; border-radius: 9px; font-size: 10px; background: color-mix(in srgb,var(--tp-gold) 14%,var(--tp-panel)); border-color: color-mix(in srgb,var(--tp-gold) 34%,transparent); color: var(--tp-gold-2); }
.mq-tp-v2 .mq-tp-hero-art { width: 126px; height: 143px; right: -2px; top: 43px; }
.mq-tp-v2 .mq-tp-cup { filter: drop-shadow(0 12px 8px rgba(128,84,11,.16)); }
.mq-tp-v2 .mq-tp-hero-foot { margin-top: 15px; padding: 10px 0; gap: 8px; }
.mq-tp-v2 .mq-tp-hero-foot span { font-size: 9px; }
.mq-tp-v2 .mq-tp-hero-foot b { font-size: 12px; }

/* --- CTA : taille tactile pro, sans effet "gros bouton de jeu" --- */
.mq-tp-v2 .mq-tp-primary {
	min-height: 46px; height: auto; padding: 0 44px; border-radius: 14px;
	font-size: 13px; letter-spacing: .05px; font-weight: 900;
	background: var(--tp-accent-grad); box-shadow: 0 7px 18px color-mix(in srgb,var(--tp-b) 18%,transparent), inset 0 1px 0 rgba(255,255,255,.28);
	transform: translateZ(0);
}
.mq-tp-v2 .mq-tp-primary.mq-tp-gold {
	background: var(--tp-gold-grad); color: #5f430f;
	box-shadow: 0 7px 18px color-mix(in srgb,var(--tp-gold-2) 18%,transparent), inset 0 1px 0 rgba(255,255,255,.38);
}
.mq-tp-v2 .mq-tp-primary > .mq-tp-ic { right: 14px; width: 18px; height:18px; margin-top:-9px; }
.mq-tp-v2 .mq-tp-primary > .mq-tp-ic:first-child { left: 14px; right:auto; }
.mq-tp-v2 .mq-tp-primary.mq-tp-full { margin-top: 10px; }
.mq-tp-v2 .mq-tp-primary:active:not(:disabled) { transform: translateY(1px) scale(.988); box-shadow: 0 4px 12px color-mix(in srgb,var(--tp-b) 14%,transparent); }
.mq-tp-v2 .mq-tp-primary:disabled { opacity:.48; filter:saturate(.55); box-shadow:none; }
.mq-tp-v2 .mq-tp-primary:after { width:24%; opacity:.65; animation-duration:7.5s; }
.mq-tp-v2 .mq-tp-secondary {
	min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 10.5px;
	background: var(--tp-panel-2); border-color: var(--tp-line); box-shadow:none;
}
.mq-tp-v2 .mq-tp-text-button { min-height: 34px; padding: 4px 2px; font-size: 10.5px; color:var(--tp-a); }

/* --- cartes et sélecteurs : densité + sélection premium --- */
.mq-tp-v2 .mq-tp-card,
.mq-tp-v2 .mq-tp-public-card,
.mq-tp-v2 .mq-tp-resume,
.mq-tp-v2 .mq-tp-match-card,
.mq-tp-v2 .mq-tp-reward-card,
.mq-tp-v2 .mq-tp-lobby-status,
.mq-tp-v2 .mq-tp-duel-score {
	background: var(--tp-panel); border-color: var(--tp-line); box-shadow: var(--tp-shadow);
}
.mq-tp-v2 .mq-tp-card { padding: 12px; border-radius: 17px; }
.mq-tp-v2 .mq-tp-public-card { gap: 10px; padding: 11px; border-radius: 16px; }
.mq-tp-v2 .mq-tp-public-card .mq-tp-avatar { width: 38px; height: 38px; }
.mq-tp-v2 .mq-tp-public-card strong { font-size: 11.5px; }
.mq-tp-v2 .mq-tp-public-card small { font-size: 9px; line-height: 1.4; }
.mq-tp-v2 .mq-tp-meter { margin: 6px 0 3px; }
.mq-tp-v2 .mq-tp-meter i { background: var(--tp-accent-grad); }

.mq-tp-v2 .mq-tp-rail { gap: 8px; margin: 0 -14px; padding: 2px 14px 8px; scroll-padding:14px; }
.mq-tp-v2 .mq-tp-rail-wide > .mq-tp-choice { width: 166px; height: 104px; }
.mq-tp-v2 .mq-tp-rail-mid > .mq-tp-choice { width: 108px; height: 98px; }
.mq-tp-v2 .mq-tp-rail-small > .mq-tp-choice { width: 88px; height: 92px; }
.mq-tp-v2 .mq-tp-rail > .mq-tp-universe { width: 104px; height: 128px; }
.mq-tp-v2 .mq-tp-choice {
	gap: 3px; padding: 10px; border-radius: 15px; border-width:1px;
	background: var(--tp-panel); border-color: var(--tp-line); box-shadow: 0 5px 15px rgba(21,60,122,.055);
	transition: transform .18s var(--ressort), border-color .18s, box-shadow .18s, background .18s;
}
.mq-tp-v2 .mq-tp-choice-top { min-height: 20px; }
.mq-tp-v2 .mq-tp-choice .mq-tp-ic { width: 20px; height: 20px; color: var(--tp-a); }
.mq-tp-v2 .mq-tp-choice-mark { width: 18px; height: 18px; background:var(--tp-panel-2); border-color:var(--tp-line); }
.mq-tp-v2 .mq-tp-choice strong { font-size: 11.5px; line-height: 1.18; }
.mq-tp-v2 .mq-tp-choice small { font-size: 9px; line-height: 1.3; -webkit-line-clamp:2; }
.mq-tp-v2 .mq-tp-choice .mq-tp-big { font-size: 28px; letter-spacing:-1.4px; }
.mq-tp-v2 .mq-tp-choice .mq-tp-mid { font-size: 16px; }
.mq-tp-v2 .mq-tp-choice.mq-tp-selected {
	border-color: color-mix(in srgb,var(--tp-a) 82%,#fff 18%);
	background: linear-gradient(155deg,var(--tp-panel),color-mix(in srgb,var(--tp-a) 8%,var(--tp-panel)));
	box-shadow: 0 8px 20px color-mix(in srgb,var(--tp-a) 14%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--tp-a) 10%,transparent);
	transform: translateY(-1px);
}
.mq-tp-v2 .mq-tp-choice.mq-tp-selected .mq-tp-choice-mark {
	background-color: var(--tp-a); border-color:var(--tp-a); box-shadow:0 3px 9px color-mix(in srgb,var(--tp-a) 24%,transparent);
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
	background-size:60%; background-position:center; background-repeat:no-repeat;
}
.mq-tp-v2 .mq-tp-universe img { height: 61px; border-radius: 11px; margin: 1px 0 4px; }
.mq-tp-v2 .mq-tp-universe strong { font-size: 10px; }

/* --- création : nom, switch, identité --- */
.mq-tp-v2 .mq-tp-name-card { gap: 10px; padding: 10px 12px; }
.mq-tp-v2 .mq-tp-name-ic { width: 40px; height:40px; border-radius:13px; background:var(--tp-gold-grad); box-shadow:0 6px 15px rgba(167,108,26,.16); }
.mq-tp-v2 .mq-tp-name-ic .mq-tp-ic { width:21px; height:21px; }
.mq-tp-v2 .mq-tp-name-field > span { font-size:9px; letter-spacing:1.1px; }
.mq-tp-v2 .mq-tp-name-input { font-size:16px; padding:2px 0; }
.mq-tp-v2 .mq-tp-toggle { padding: 11px 12px; margin-top: 12px; border-radius:15px; border-width:1px; background:var(--tp-panel); border-color:var(--tp-line); box-shadow:var(--tp-shadow); }
.mq-tp-v2 .mq-tp-toggle strong { font-size:11.5px; }
.mq-tp-v2 .mq-tp-toggle small { font-size:9px; margin-top:2px; }
.mq-tp-v2 .mq-tp-switch { width:40px; height:23px; padding:3px; }
.mq-tp-v2 .mq-tp-switch:after { width:17px; height:17px; }
.mq-tp-v2 .mq-tp-toggle[aria-checked=true] .mq-tp-switch { background:var(--tp-accent-grad); }
.mq-tp-v2 .mq-tp-toggle[aria-checked=true] .mq-tp-switch:after { transform:translateX(17px); }
.mq-tp-v2 .mq-tp-identity { margin-top:12px; gap:7px; }

/* --- vestiaire / match / tableau --- */
.mq-tp-v2 .mq-tp-lobby-title h2 { font-size:22px; }
.mq-tp-v2 .mq-tp-lobby-code { margin:9px 0 16px; }
.mq-tp-v2 .mq-tp-lobby-code button { padding:7px 11px; border-radius:9px; }
.mq-tp-v2 .mq-tp-seats { gap:10px 6px; }
.mq-tp-v2 .mq-tp-seat .mq-tp-avatar,
.mq-tp-v2 .mq-tp-empty-seat { width:48px; height:48px; }
.mq-tp-v2 .mq-tp-seat strong { font-size:10px; margin-top:4px; }
.mq-tp-v2 .mq-tp-lobby-status { padding:11px; border-radius:15px; }
.mq-tp-v2 .mq-tp-count-ring { width:148px; height:148px; margin:17px auto; box-shadow:0 0 0 9px var(--tp-panel-2),var(--tp-shadow-strong); }
.mq-tp-v2 .mq-tp-count-ring:before { border-top-color:var(--tp-gold); border-right-color:var(--tp-a); }
.mq-tp-v2 .mq-tp-count-ring strong { font-size:52px; }
.mq-tp-v2 .mq-tp-draw-stage { height:220px; }
.mq-tp-v2 .mq-tp-draw-stage .mq-tp-cup { width:145px; height:145px; }
.mq-tp-v2 .mq-tp-orbit-avatars { width:205px; height:205px; }
.mq-tp-v2 .mq-tp-orbit-avatars img { width:40px; height:40px; left:calc(50% - 20px); top:calc(50% - 20px); transform:rotate(var(--angle)) translateY(-101px) rotate(calc(-1 * var(--angle))); }
.mq-tp-v2 .mq-tp-round-tabs { margin-bottom:12px; }
.mq-tp-v2 .mq-tp-round-tabs button { padding:7px 10px; font-size:9px; border-color:var(--tp-line); background:var(--tp-panel); }
.mq-tp-v2 .mq-tp-match-card { padding:12px; margin-bottom:9px; border-radius:16px; }
.mq-tp-v2 .mq-tp-match-card.mq-tp-mine { border-color:color-mix(in srgb,var(--tp-gold) 70%,transparent); box-shadow:0 7px 20px color-mix(in srgb,var(--tp-gold) 12%,transparent); }
.mq-tp-v2 .mq-tp-versus { gap:8px; }
.mq-tp-v2 .mq-tp-contender .mq-tp-avatar { width:44px; height:44px; }
.mq-tp-v2 .mq-tp-score { font-size:24px; }
.mq-tp-v2 .mq-tp-match-card .mq-tp-primary { min-height:40px; font-size:11.5px; margin-top:10px; }
.mq-tp-v2 .mq-tp-bracket-col { min-width:158px; flex-basis:158px; }
.mq-tp-v2 .mq-tp-bracket-match { border-radius:11px; padding:8px; background:var(--tp-panel); border-color:var(--tp-line); }
.mq-tp-v2 .mq-tp-standings { padding:6px 7px 9px; }
.mq-tp-v2 .mq-tp-standings-head,.mq-tp-v2 .mq-tp-standings-row { grid-template-columns:20px 1fr 24px 24px 24px 48px 30px; gap:3px; padding:7px 4px; font-size:10px; }
.mq-tp-v2 .mq-tp-standings-head { font-size:8px; }
.mq-tp-v2 .mq-tp-standings-row.mq-tp-mine { background:var(--tp-soft); }
.mq-tp-v2 .mq-tp-standings-row .mq-tp-pts { color:var(--tp-a); }

/* --- résultats / podium : premium mais plus contenu --- */
.mq-tp-v2 .mq-tp-result-mark { width:60px; height:60px; border-radius:19px; margin:16px auto 13px; background:var(--tp-gold-grad); }
.mq-tp-v2 .mq-tp-podium-scene h2 { font-size:31px; }
.mq-tp-v2 .mq-tp-podium { height:226px; }
.mq-tp-v2 .mq-tp-podium-place .mq-tp-avatar { width:50px; height:50px; }
.mq-tp-v2 .mq-tp-podium-place.mq-tp-champion .mq-tp-avatar { width:66px; height:66px; border-color:var(--tp-gold); box-shadow:0 0 0 5px color-mix(in srgb,var(--tp-gold) 18%,transparent),0 0 30px color-mix(in srgb,var(--tp-gold) 25%,transparent); }
.mq-tp-v2 .mq-tp-step { height:72px; border-radius:13px 13px 0 0; font-size:33px; }
.mq-tp-v2 .mq-tp-champion .mq-tp-step { height:102px; font-size:44px; }
.mq-tp-v2 .mq-tp-bronze .mq-tp-step { height:56px; }
.mq-tp-v2 .mq-tp-reward-card { padding:13px; border-radius:16px; margin-top:12px; }
.mq-tp-v2 .mq-tp-reward-values { margin-top:12px; }
.mq-tp-v2 .mq-tp-reward-values b { font-size:22px; }
.mq-tp-v2 .mq-tp-sheet-backdrop { padding:8px; background:rgba(5,18,34,.56); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.mq-tp-v2 .mq-tp-sheet { padding:17px; border-radius:20px; background:var(--tp-panel); border-color:var(--tp-line); }
.mq-tp-v2 .mq-tp-sheet h2 { font-size:20px; }

/* --- animations V2 : uniquement transform + opacité, très courtes --- */
.mq-tp-v2.mq-tp { animation:tp-v2-shell .34s var(--sortie) both; }
.mq-tp-v2 .mq-tp-card,
.mq-tp-v2 .mq-tp-public-card,
.mq-tp-v2 .mq-tp-choice { will-change:auto; }
.mq-tp-v2 .mq-tp-choice.mq-tp-selected { animation:tp-v2-select .28s var(--ressort) both; }
.mq-tp-v2 .mq-tp-primary:not(:disabled) { transition:transform .16s var(--ease),box-shadow .16s ease,filter .16s ease; }
@keyframes tp-v2-shell { from{opacity:.35;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes tp-v2-select { 0%{transform:scale(.975)} 100%{transform:translateY(-1px) scale(1)} }

/* --- téléphone étroit : priorité à la lisibilité et au scroll --- */
@media (max-width:374px) {
	.mq-arena-act.is-tournament { grid-template-columns:48px minmax(0,1fr) 26px; min-height:68px; padding:9px; gap:8px; }
	.mq-arena-act.is-tournament .mq-arena-ic { width:48px;height:48px;border-radius:15px; }
	.mq-arena-act.is-tournament .mq-arena-copy { padding-right:34px; }
	.mq-arena-act.is-tournament .mq-arena-copy small { font-size:.66rem; }
	.mq-arena-act.is-tournament .mq-arena-badge { right:34px; font-size:.46rem; }
	.mq-tp-v2 .mq-tp-scroll,.mq-tp-v2 .mq-tp-screen-head,.mq-tp-v2 .mq-tp-foot { padding-left:12px; padding-right:12px; }
	.mq-tp-v2 .mq-tp-rail { margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
	.mq-tp-v2 .mq-tp-rail-wide > .mq-tp-choice { width:154px; }
	.mq-tp-v2 .mq-tp-rail-mid > .mq-tp-choice { width:102px; }
	.mq-tp-v2 .mq-tp-hero { min-height:205px; padding-left:15px; }
	.mq-tp-v2 .mq-tp-hero h2 { font-size:23px; max-width:160px; }
	.mq-tp-v2 .mq-tp-hero-art { width:116px; height:132px; }
	.mq-tp-v2 .mq-tp-primary { min-height:45px; font-size:12.5px; }
	.mq-tp-v2 .mq-tp-seats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 4px; }
	.mq-tp-v2 .mq-tp-seat .mq-tp-avatar,.mq-tp-v2 .mq-tp-empty-seat { width:44px;height:44px; }
}

/* --- grands écrans : ne jamais étirer une interface pensée téléphone --- */
@media (min-width:700px) {
	.mq-tp-v2 { width:min(100%,560px); height:min(900px,96dvh); margin:2dvh auto; border-radius:28px; }
	.mq-tp-v2 .mq-tp-rail-wide > .mq-tp-choice { width:176px; }
}

/* Calme / reduced motion restent prioritaires */
.mq-shell[data-motion="calme"] .mq-tp-v2,
.mq-shell[data-motion="calme"] .mq-tp-v2 *,
.mq-shell[data-motion="calme"] .mq-tp-v2 *::before,
.mq-shell[data-motion="calme"] .mq-tp-v2 *::after { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
	.mq-tp-v2,.mq-tp-v2 *,.mq-tp-v2 *::before,.mq-tp-v2 *::after { animation:none!important; transition:none!important; }
}


/* =========================================================================
   ACCUEIL 6.30.4 / 2.1.5-v78 — FOND PLEIN ÉCRAN SANS CADRE + MOTION POLISH
   Correction du rectangle semi-transparent visible sur certains thèmes.
   La couche photo locale à la vue centrale est supprimée : l'atmosphère est
   désormais calculée sur toute la surface de .mq-shell, sans bord perceptible.
   ========================================================================= */
.mq-shell[data-screen="accueil"] {
  --home-v78-glow-a:rgba(255,255,255,.24);
  --home-v78-glow-b:rgba(30,201,207,.18);
  --home-v78-glow-c:rgba(46,134,224,.13);
}
.mq-shell[data-screen="accueil"][data-skin="jade"] {
  --home-v78-glow-a:rgba(255,255,255,.32); --home-v78-glow-b:rgba(80,239,211,.24); --home-v78-glow-c:rgba(60,167,234,.18);
}
.mq-shell[data-screen="accueil"][data-skin="ocean"] {
  --home-v78-glow-a:rgba(172,246,255,.18); --home-v78-glow-b:rgba(31,214,216,.20); --home-v78-glow-c:rgba(50,111,234,.24);
}
.mq-shell[data-screen="accueil"][data-skin="ardoise"] {
  --home-v78-glow-a:rgba(221,237,244,.11); --home-v78-glow-b:rgba(126,161,181,.12); --home-v78-glow-c:rgba(61,82,99,.18);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] {
  --home-v78-glow-a:rgba(255,227,211,.13); --home-v78-glow-b:rgba(213,91,111,.17); --home-v78-glow-c:rgba(120,28,56,.22);
}
.mq-shell[data-screen="accueil"][data-skin="ambre"] {
  --home-v78-glow-a:rgba(255,247,207,.25); --home-v78-glow-b:rgba(255,188,70,.22); --home-v78-glow-c:rgba(238,104,22,.15);
}
.mq-shell[data-screen="accueil"][data-skin="nuit"] {
  --home-v78-glow-a:rgba(167,225,255,.12); --home-v78-glow-b:rgba(91,126,255,.17); --home-v78-glow-c:rgba(30,59,131,.22);
}

/* Une seule atmosphère continue, attachée au viewport complet du jeu. */
.mq-shell[data-screen="accueil"]::before {
  content:"";
  position:absolute;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 74% 42% at 50% 13%,var(--home-v78-glow-a),transparent 72%),
    radial-gradient(ellipse 62% 48% at 8% 66%,var(--home-v78-glow-b),transparent 74%),
    radial-gradient(ellipse 66% 50% at 94% 58%,var(--home-v78-glow-c),transparent 75%);
  opacity:.92;
  transform:translate3d(0,0,0) scale(1.025);
  transform-origin:center;
  animation:mq-home-v78-atmosphere 17s cubic-bezier(.45,0,.25,1) infinite alternate;
  will-change:transform,opacity;
}
@keyframes mq-home-v78-atmosphere {
  from { transform:translate3d(-1.2%,.2%,0) scale(1.025); opacity:.82; }
  to   { transform:translate3d(1.4%,-1.1%,0) scale(1.065); opacity:1; }
}

/* Le calque qui créait le grand rectangle transparent n'est plus rendu. */
.mq-shell[data-screen="accueil"] .mq-home-sky::after { content:none !important; display:none !important; background:none !important; animation:none !important; }
.mq-shell[data-screen="accueil"] .mq-home-aurora { display:none !important; }

/* Grenat : suppression totale des carrés/losanges translucides.
   Ils sont remplacés par de petites poussières rubis organiques. */
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i {
  width:6px !important;
  height:6px !important;
  border:0 !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#ffe5d3 0 20%,#e5a083 32%,rgba(202,77,103,.38) 58%,transparent 72%) !important;
  box-shadow:0 0 10px rgba(229,160,131,.34),0 0 20px rgba(180,54,81,.18) !important;
  transform:none !important;
  opacity:0;
  animation:mq-home-v78-ruby-dust 7.8s ease-in-out infinite !important;
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i:nth-child(1){left:9%;top:22%;animation-delay:-1s!important}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i:nth-child(2){right:11%;top:18%;width:4px!important;height:4px!important;animation-delay:-3.2s!important}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i:nth-child(3){right:8%;top:61%;width:8px!important;height:8px!important;animation-delay:-5.1s!important}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i:nth-child(4){left:14%;top:69%;width:4px!important;height:4px!important;animation-delay:-6.4s!important}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i:nth-child(5){left:67%;top:34%;width:5px!important;height:5px!important;display:block!important;animation-delay:-2.3s!important}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-home-theme-scene i:nth-child(6){left:34%;top:14%;width:3px!important;height:3px!important;display:block!important;animation-delay:-4.4s!important}
@keyframes mq-home-v78-ruby-dust {
  0%,100% { opacity:.08; transform:translate3d(0,10px,0) scale(.62) !important; }
  48% { opacity:.74; transform:translate3d(5px,-16px,0) scale(1.18) !important; }
}

/* Chorégraphie d'accueil plus posée : entrée sans rebond excessif, ouverture
   progressive de la paire, respiration plus longue et disparition propre. */
.mq-view[data-view="accueil"].is-on .mq-hb-slot { animation:mq-hb-slot-in .48s ease-out forwards; }
.mq-view[data-view="accueil"].is-on .mq-hb-slot.is-l { animation:mq-hb-slot-in .48s ease-out .12s forwards,mq-hb-front 12.4s step-end 1.15s infinite,mq-hb-cycle 12.4s linear 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-slot.is-r { animation:mq-hb-slot-in .48s ease-out .20s forwards,mq-hb-front 12.4s step-end 1.15s infinite,mq-hb-cycle 12.4s linear 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-slot.is-c { animation:mq-hb-slot-in .48s ease-out .04s forwards,mq-hb-backz 12.4s step-end 1.15s infinite,mq-hb-cycle 12.4s linear 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-card.is-l { animation:mq-hb-v78-fan-l .82s cubic-bezier(.16,1,.3,1) .12s forwards,mq-hb-v78-pair-l 12.4s cubic-bezier(.42,0,.2,1) 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-card.is-c { animation:mq-hb-v78-fan-c .82s cubic-bezier(.16,1,.3,1) .04s forwards,mq-hb-v78-pair-c 12.4s cubic-bezier(.42,0,.2,1) 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-card.is-r { animation:mq-hb-v78-fan-r .82s cubic-bezier(.16,1,.3,1) .20s forwards,mq-hb-v78-pair-r 12.4s cubic-bezier(.42,0,.2,1) 1.15s infinite; }
@keyframes mq-hb-v78-fan-l { from{opacity:.15;transform:translate3d(-4%,52px,0) rotate(-4deg) scale(.72)} to{opacity:1;transform:translateX(-46%) translateY(6%) rotate(-15deg) scale(.95)} }
@keyframes mq-hb-v78-fan-c { from{opacity:.15;transform:translate3d(0,48px,0) scale(.72)} to{opacity:1;transform:translateY(-4%) scale(1.055)} }
@keyframes mq-hb-v78-fan-r { from{opacity:.15;transform:translate3d(4%,52px,0) rotate(4deg) scale(.72)} to{opacity:1;transform:translateX(46%) translateY(6%) rotate(15deg) scale(.95)} }
@keyframes mq-hb-v78-pair-l {
  0%,14% { transform:translateX(-46%) translateY(6%) rotate(-15deg) scale(.95) translateZ(0) rotateY(0); }
  27%,84% { transform:translateX(-54%) translateY(0) rotate(0) scale(.985) translateZ(60px) rotateY(180deg); }
  92%,100% { transform:translateX(-46%) translateY(6%) rotate(-15deg) scale(.95) translateZ(0) rotateY(0); }
}
@keyframes mq-hb-v78-pair-r {
  0%,14% { transform:translateX(46%) translateY(6%) rotate(15deg) scale(.95) translateZ(0) rotateY(0); }
  27%,84% { transform:translateX(54%) translateY(0) rotate(0) scale(.985) translateZ(60px) rotateY(-180deg); }
  92%,100% { transform:translateX(46%) translateY(6%) rotate(15deg) scale(.95) translateZ(0) rotateY(0); }
}
@keyframes mq-hb-v78-pair-c {
  0%,14% { transform:translateY(-4%) scale(1.055) translateZ(0); }
  27%,84% { transform:translateY(-20%) scale(.80) translateZ(-36px); }
  92%,100% { transform:translateY(-4%) scale(1.055) translateZ(0); }
}
@keyframes mq-hb-cycle { 0%,84%{opacity:1} 89%,95%{opacity:0} 100%{opacity:1} }
@keyframes mq-hb-front { 0%,14%{z-index:2} 15%,90%{z-index:4} 91%,100%{z-index:2} }
@keyframes mq-hb-backz { 0%,14%{z-index:3} 15%,90%{z-index:1} 91%,100%{z-index:3} }
.mq-view[data-view="accueil"].is-on .mq-hb-front::after { animation:mq-hb-seal 12.4s linear 1.15s infinite; }
@keyframes mq-hb-seal { 0%,27%{opacity:0} 32%,82%{opacity:1} 88%,100%{opacity:0} }
.mq-view[data-view="accueil"].is-on .mq-hb-match { animation:mq-hb-match 12.4s cubic-bezier(.16,1,.3,1) 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-match::before { animation:mq-hb-match-ring 12.4s ease-out 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-match i { animation:mq-hb-msp 12.4s ease-out 1.15s infinite; }
.mq-view[data-view="accueil"].is-on .mq-hb-tip { animation:mq-hb-tip 12.4s cubic-bezier(.2,.8,.2,1) 1.15s infinite; }
@keyframes mq-hb-tip { 0%,34%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.975)} 40%,82%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} 88%,100%{opacity:0;transform:translateX(-50%) translateY(4px) scale(.99)} }
.mq-view[data-view="accueil"].is-on .mq-home-play { animation:mq-hb-cta-in .72s cubic-bezier(.16,1,.3,1) 1.05s forwards,mq-hb-v78-cta-breathe 3.6s ease-in-out 2.3s infinite; }
@keyframes mq-hb-v78-cta-breathe { 50%{transform:translateY(-1px) scale(1.012);filter:brightness(1.025)} }

/* Le fond animé et les nouvelles poussières obéissent toujours au mode Calme. */
.mq-shell[data-motion="calme"][data-screen="accueil"]::before,
.mq-shell[data-motion="calme"][data-screen="accueil"] .mq-home-theme-scene i { animation:none !important; }
.mq-shell[data-motion="calme"][data-screen="accueil"]::before { transform:none; opacity:.88; }

@media (prefers-reduced-motion: reduce) {
  .mq-shell[data-screen="accueil"]::before { animation:none !important; transform:none !important; }
}

/* =========================================================================
   ACCUEIL 6.30.4 — CORRECTIF CADRE TRANSPARENT / FX PLEIN ÉCRAN
   L'éclair et la lueur de validation ne sont plus bornés à la zone centrale.
   ========================================================================= */
.mq-shell[data-screen="accueil"] .mq-h2-light {
  position:fixed !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  overflow:hidden;
  pointer-events:none;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.mq-shell[data-screen="accueil"] .mq-h2-lift,
.mq-shell[data-screen="accueil"] .mq-h2-flash { inset:0 !important; border-radius:0 !important; }

/* =========================================================================
   MEMOQUEST 6.31.1 — ACCUEIL SANS VOILE + GRENAT HAUTE LISIBILITÉ
   Le WebView de certains appareils rattache position:fixed à la vue animée :
   le voile lumineux devient alors un grand rectangle. Il est supprimé à la
   source ; les cartes, la validation, le titre et la respiration restent.
   ========================================================================= */
.mq-shell[data-screen="accueil"] .mq-h2-light,
.mq-shell[data-screen="accueil"] .mq-h2-lift,
.mq-shell[data-screen="accueil"] .mq-h2-flash,
.mq-shell[data-screen="accueil"] .mq-h2-sun,
.mq-shell[data-screen="accueil"] .mq-h2-burst {
	display:none !important;
	background:none !important;
	opacity:0 !important;
	animation:none !important;
}
.mq-shell[data-screen="accueil"] .mq-view[data-view="accueil"],
.mq-shell[data-screen="accueil"] .mq-h2-stage,
.mq-shell[data-screen="accueil"] .mq-h2-scene {
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
}

/* Grenat : le bordeaux appartient au décor. Sur le décor, le contenu est
   crème/champagne ; sur les surfaces ivoire, le texte devient prune foncé. */
.mq-shell[data-skin="grenat"] {
	--ciel-1:#4d1625; --ciel-2:#681f32; --ciel-3:#491522; --ciel-4:#2f0d17; --sable:#210911;
	--turq:#f0c27b; --turq-2:#d9a052; --bleu:#edb56c; --bleu-2:#b8752f;
	--degrade:linear-gradient(135deg,#f6d59a 0%,#e5ae60 52%,#bd782e 100%);
	--mq-bg:#310d18; --mq-bg-2:#5a192b;
	--mq-surface:#fffaf4; --mq-surface-raised:#ffffff; --mq-surface-soft:#f8ebe5; --mq-surface-selected:#f4dfd8;
	--mq-text:#451522; --mq-text-secondary:#68424d; --mq-text-muted:#80636b;
	--mq-text-on-light:#451522; --mq-text-on-dark:#fff8ed;
	--mq-accent:#84243e; --mq-accent-strong:#67172d; --mq-accent-2:#9b6330;
	--mq-border:#e5cbbd; --mq-border-active:#b87935;
	--mq-success:#287a49; --mq-warning:#7b5009;
	--mq-glow:0 0 0 3px rgba(226,174,96,.23);
	--mq-button-bg:linear-gradient(135deg,#f4d292,#dfa653 56%,#bd782e);
	--mq-button-edge:#95571f; --mq-button-text:#32101a;
	--mq-screen-text:#fff9ef; --mq-screen-secondary:#f0d8ce; --mq-screen-accent:#f1c47d;
	background:
		radial-gradient(ellipse at 50% -9%,rgba(255,219,188,.19) 0%,rgba(168,60,83,.10) 36%,transparent 61%),
		radial-gradient(ellipse at 85% 58%,rgba(117,24,52,.25),transparent 54%),
		linear-gradient(180deg,#521725 0%,#651e30 26%,#46131f 67%,#260a12 100%);
}
.mq-shell[data-skin="grenat"] .mq-ambiance {
	background:radial-gradient(circle at 50% 13%,rgba(255,225,201,.075),transparent 36%),linear-gradient(180deg,transparent,rgba(18,3,8,.20));
}

/* Accueil Grenat : aucun texte sombre directement sur le fond bordeaux. */
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-profil-info strong {
	color:#fff8ef;text-shadow:0 2px 8px rgba(20,2,7,.48);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-xp {
	background:rgba(255,248,239,.30);box-shadow:inset 0 1px 2px rgba(25,3,9,.24),0 1px 0 rgba(255,255,255,.10);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-xp i { background:linear-gradient(90deg,#f5d49a,#d99c4c); }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-avatar::before { background:linear-gradient(135deg,#fff4dc,#d89b4c); }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-avatar b,
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-chip .mq-plus {
	color:#35111b;background:linear-gradient(145deg,#f7d99e,#d99b49);border-color:#fff8ef;
	box-shadow:0 5px 13px rgba(54,14,20,.30),inset 0 1px 0 rgba(255,255,255,.58);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] :is(.mq-chip,.mq-icon-btn) {
	color:#511728;background:linear-gradient(180deg,#fffdf8,#f8eae2);border:1px solid rgba(239,207,175,.72);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-face {
	border-color:#fffaf1;box-shadow:0 25px 48px rgba(20,2,7,.38),0 0 0 2px rgba(231,178,103,.68);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-seal {
	background:linear-gradient(145deg,#62d696,#218554);color:#fff;
	box-shadow:0 12px 28px rgba(17,91,55,.42),inset 0 3px 0 rgba(255,255,255,.46),0 0 0 4px #fff9ef;
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-ring { border-color:#fff9ef;box-shadow:0 0 0 2px rgba(239,190,116,.72),inset 0 0 0 2px rgba(239,190,116,.48); }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-brand h1 .is-m { color:#f2c77f; }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-brand h1 .is-q { color:#fff9ef; }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-brand h1 span {
	text-shadow:0 3px 0 rgba(45,8,17,.42),0 14px 30px rgba(15,1,5,.30);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-brand p { color:#f4ddd3;opacity:0; }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-play {
	color:#451522;background:linear-gradient(180deg,#fffdf9 0%,#f8ece5 100%);
	box-shadow:0 18px 40px rgba(23,3,9,.30),0 3px 8px rgba(23,3,9,.18),inset 0 1px 0 #fff;
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-play::before {
	background:linear-gradient(120deg,rgba(239,190,116,.92),rgba(255,255,255,0) 46%,rgba(127,35,59,.50));
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-play::after { background:linear-gradient(112deg,transparent 44%,rgba(239,190,116,.18) 50%,transparent 56%); }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-play-ic {
	background:linear-gradient(145deg,#f5d28e,#d79642 64%,#b66d27);
	box-shadow:0 8px 18px rgba(116,65,25,.35),inset 0 -3px 0 rgba(104,52,18,.22),inset 0 2px 0 rgba(255,255,255,.42);
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-play-t > span {
	background:linear-gradient(100deg,#6b1d33,#9b3f52 55%,#8b592a);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-h2-play-t small { color:#68424d; }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-nav button { color:#765760; }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-nav button.is-on { color:#6d1c34;background:linear-gradient(180deg,#fff2eb,#f5ddd7); }
.mq-shell[data-screen="accueil"][data-skin="grenat"] .mq-nav button.is-on::after { background:linear-gradient(90deg,#d89b49,#8b2843); }

/* Dans le reste du thème : les actions principales se détachent du décor en
   champagne, tandis que le grenat reste réservé aux accents sur fond clair. */
.mq-shell[data-skin="grenat"] .mq-btn-primary,
.mq-shell[data-skin="grenat"] .mq-play {
	color:#35111b!important;background-color:#e1a653!important;background-image:linear-gradient(135deg,#f6d69b,#e1a653 58%,#bd772e)!important;
	border-color:#f9e2b8!important;box-shadow:0 4px 0 #95571f,0 10px 24px rgba(31,5,12,.28)!important;text-shadow:0 1px 0 rgba(255,255,255,.35)!important;
}
.mq-shell[data-skin="grenat"] .mq-btn-primary:active { box-shadow:0 1px 0 #95571f!important; }
.mq-shell[data-skin="grenat"] .mq-degrade-texte {
	background:linear-gradient(100deg,#fff9ef,#f3cf93 58%,#e6ad61);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mq-shell[data-skin="grenat"] :is(.mq-screen-head,.mq-settings-head,.mq-histoire-titre,.mq-setup-copy) .mq-title { color:#fff9ef; }
.mq-shell[data-skin="grenat"] :is(.mq-screen-head,.mq-settings-head,.mq-histoire-titre,.mq-setup-copy) .mq-lede { color:#f0d8ce; }
.mq-shell[data-skin="grenat"] :is(.mq-screen-head,.mq-settings-head,.mq-histoire-titre,.mq-setup-copy) .mq-eyebrow { color:#f1c47d; }

/* =========================================================================
   MEMOQUEST 6.31.2 — RETOUR DU PARCOURS FORESTIER + APPRENTISSAGE MOBILE
   ========================================================================= */

/* Le mode Histoire retrouve son ancienne identité de clairière. La fiche de
   mission reste fixe et le parcours est le seul élément qui défile. */
.mq-view[data-view="histoire"] {
	min-width:0;
	grid-template-columns:minmax(0,1fr);
	grid-template-rows:auto minmax(0,1fr) auto;
	gap:clamp(6px,1.1vh,10px);
}
.mq-view[data-view="histoire"] > * { min-width:0;max-width:100%; }
.mq-view[data-view="histoire"] .mq-histoire-tete { gap:5px; }
.mq-view[data-view="histoire"] .mq-histoire-titre { min-width:0;align-items:center; }
.mq-view[data-view="histoire"] .mq-histoire-titre > div { min-width:0; }
.mq-view[data-view="histoire"] .mq-histoire-titre .mq-title {
	font-size:clamp(1.25rem,5.5vw,1.8rem);line-height:1.08;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mq-view[data-view="histoire"] .mq-histoire-total { padding:5px 9px;font-size:.72rem; }
.mq-view[data-view="histoire"] .mq-chapters { max-width:100%;padding-bottom:3px; }
.mq-view[data-view="histoire"] .mq-chapter { width:clamp(50px,13.5vw,68px);padding:5px 3px; }

.mq-view[data-view="histoire"] .mq-chemin {
	position:relative;display:flex;flex-direction:column;gap:4px;
	min-height:0;max-width:100%;padding:0 5px 13px;
	overflow-x:hidden!important;overflow-y:auto!important;
	overscroll-behavior:contain;scrollbar-width:none;
	border:1px solid rgba(255,255,255,.72);border-radius:24px;
	background:
		linear-gradient(180deg,rgba(245,255,250,.52),rgba(229,249,238,.78)),
		radial-gradient(circle at 12% 42%,rgba(93,190,139,.18),transparent 28%),
		radial-gradient(circle at 88% 68%,rgba(74,160,118,.15),transparent 30%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 8px 22px rgba(22,90,74,.10);
}
.mq-view[data-view="histoire"] .mq-chemin::-webkit-scrollbar { display:none; }
.mq-view[data-view="histoire"] .mq-chemin::before {
	top:104px;bottom:26px;width:4px;
	background:repeating-linear-gradient(180deg,rgba(68,128,103,.28) 0 7px,transparent 7px 15px);
}
.mq-view[data-view="histoire"] .mq-chemin-trace {
	top:104px;width:4px;background:linear-gradient(180deg,#5dca91,#2c9d6b);
	box-shadow:0 0 10px rgba(50,164,111,.38);
}

.mq-story-forest-banner {
	position:relative;z-index:0;flex:0 0 auto;height:96px;overflow:hidden;
	margin:0 -5px 2px;border-radius:23px 23px 18px 18px;
	background:linear-gradient(180deg,var(--story-wash),rgba(248,255,250,.94));
	box-shadow:inset 0 -1px 0 rgba(70,130,96,.10);
}
.mq-story-forest-banner b {
	position:absolute;z-index:7;left:50%;bottom:8px;transform:translateX(-50%);
	max-width:76%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.91);
	border:1px solid rgba(255,255,255,.98);box-shadow:0 4px 12px rgba(36,91,69,.12);
	color:var(--story-accent);font-size:.66rem;font-weight:950;letter-spacing:.025em;
}
.mq-story-sun {
	position:absolute;z-index:0;right:15%;top:10px;width:28px;height:28px;border-radius:50%;
	background:#fff0a8;box-shadow:0 0 0 8px rgba(255,241,171,.23),0 0 25px rgba(246,201,80,.28);
}
.mq-story-hill { position:absolute;left:-8%;right:-8%;bottom:-25px;height:75px;border-radius:50% 48% 0 0; }
.mq-story-hill.is-back { z-index:1;bottom:-31px;left:23%;right:-15%;background:color-mix(in srgb,var(--story-leaf) 40%,#fff);transform:rotate(-4deg); }
.mq-story-hill.is-front { z-index:2;background:color-mix(in srgb,var(--story-leaf) 58%,#fff);transform:rotate(3deg); }
.mq-story-path {
	position:absolute;z-index:3;left:50%;bottom:-30px;width:62px;height:88px;
	transform:translateX(-50%) perspective(90px) rotateX(38deg);
	border-radius:50% 50% 0 0;background:linear-gradient(180deg,#fff8d9,#ead4aa);
}
.mq-story-tree { position:absolute;z-index:4;width:46px;height:80px;bottom:-2px;filter:drop-shadow(0 6px 5px rgba(32,87,61,.10)); }
.mq-story-tree::before {
	content:"";position:absolute;left:50%;bottom:0;width:7px;height:42px;transform:translateX(-50%);
	border-radius:5px;background:linear-gradient(90deg,#9c7757,#c6a57b,#8f684e);
}
.mq-story-tree::after {
	content:"";position:absolute;left:50%;top:1px;width:43px;height:51px;transform:translateX(-50%);
	border-radius:50% 52% 46% 55%;background:
		radial-gradient(circle at 30% 25%,rgba(255,255,255,.30),transparent 24%),
		linear-gradient(145deg,color-mix(in srgb,var(--story-leaf) 76%,#d9f0b0),var(--story-accent));
	box-shadow:-10px 12px 0 -5px color-mix(in srgb,var(--story-leaf) 82%,#fff),10px 13px 0 -7px var(--story-accent);
}
.mq-story-tree.t1 { left:3%;transform:scale(1.04); }
.mq-story-tree.t2 { left:18%;bottom:-17px;transform:scale(.70);opacity:.82; }
.mq-story-tree.t3 { right:4%;transform:scale(.97); }
.mq-story-tree.t4 { right:20%;bottom:-17px;transform:scale(.66);opacity:.78; }

.mq-view[data-view="histoire"] .mq-jalon {
	position:relative;z-index:2;flex:0 0 auto;width:100%;min-height:72px;
	padding:7px 8px;border-radius:18px;background:rgba(255,255,255,.48);
	border:1px solid rgba(255,255,255,.64);backdrop-filter:blur(4px);
}
.mq-view[data-view="histoire"] .mq-jalon:nth-of-type(odd) { flex-direction:row;text-align:left; }
.mq-view[data-view="histoire"] .mq-jalon:nth-of-type(even) { flex-direction:row-reverse;text-align:right; }
.mq-view[data-view="histoire"] .mq-jalon:nth-of-type(even) .mq-jalon-etoiles { justify-content:flex-end; }
.mq-view[data-view="histoire"] .mq-jalon-txt { width:calc(50% - 12px);max-width:calc(50% - 12px); }
.mq-view[data-view="histoire"] .mq-jalon-txt strong {
	color:#204f43!important;text-shadow:0 1px 0 rgba(255,255,255,.7)!important;
	font-size:clamp(.72rem,3vw,.88rem);
}
.mq-view[data-view="histoire"] .mq-jalon.is-locked { opacity:.68; }
.mq-view[data-view="histoire"] .mq-jalon.is-locked .mq-jalon-txt strong { color:#55796f!important; }

.mq-view[data-view="histoire"] .mq-mission {
	width:100%;min-width:0;max-width:100%;overflow:hidden;
	padding:clamp(8px,1.15vh,11px) clamp(10px,3vw,14px);
	border-radius:22px;gap:7px;
}
.mq-view[data-view="histoire"] .mq-mission-tete { min-width:0;gap:9px; }
.mq-view[data-view="histoire"] .mq-mission-tete > div { min-width:0; }
.mq-view[data-view="histoire"] .mq-mission-tete strong { font-size:clamp(.86rem,3.6vw,1rem); }
.mq-view[data-view="histoire"] .mq-mission-meta { max-width:100%;overflow:hidden;gap:4px; }
.mq-view[data-view="histoire"] .mq-tag { min-width:0;padding:4px 7px;font-size:clamp(.58rem,2.5vw,.7rem); }
.mq-view[data-view="histoire"] .mq-mission .mq-btn {
	width:100%;max-width:100%;min-width:0;min-height:48px;
	padding:10px 15px;font-size:clamp(.86rem,3.7vw,1rem);white-space:nowrap;
}

/* Le trait coloré entre les cartes n'existe plus. */
.mq-learning-link { display:none!important;animation:none!important; }

/* Commande suivante : cercle bleu franc, grande cible tactile et contraste
   élevé. Elle reste un simple signe >, sans recréer un bouton texte. */
.mq-learning-bubble {
	left:clamp(12px,5vw,32px);right:clamp(12px,5vw,32px);
	grid-template-columns:minmax(0,1fr) 56px;gap:clamp(10px,3vw,16px);
	padding:clamp(16px,4vw,20px) clamp(13px,3.6vw,18px) clamp(16px,4vw,20px) clamp(17px,4.7vw,22px);
}
.mq-learning-next {
	width:54px;height:54px;min-width:54px;min-height:54px;border-radius:50%;
	border:3px solid rgba(255,255,255,.98);
	background:linear-gradient(145deg,#28a8ef 0%,#087bd9 52%,#0758b7 100%);
	color:#fff;box-shadow:0 5px 0 #064a9c,0 10px 20px rgba(4,72,157,.34),inset 0 2px 0 rgba(255,255,255,.36);
	font:950 1.65rem/1 ui-rounded,system-ui,sans-serif;
	transform:translateX(-6px) scale(.72);
}
.mq-learning-next span { display:block;transform:translateX(1px) translateY(-1px);text-shadow:0 1px 2px rgba(0,35,92,.32); }
.mq-learning-next:active {
	transform:translateY(3px)!important;
	box-shadow:0 2px 0 #064a9c,0 5px 11px rgba(4,72,157,.28),inset 0 2px 0 rgba(255,255,255,.30);
}
.mq-learning-next:focus-visible { outline:4px solid rgba(75,216,225,.52);outline-offset:3px; }

@media (max-width:380px) {
	.mq-view[data-view="histoire"] .mq-histoire-titre .mq-eyebrow { font-size:.58rem;letter-spacing:.09em; }
	.mq-view[data-view="histoire"] .mq-histoire-total { padding:4px 7px;font-size:.64rem; }
	.mq-view[data-view="histoire"] .mq-chapter { width:49px; }
	.mq-story-forest-banner { height:86px; }
	.mq-view[data-view="histoire"] .mq-chemin::before,
	.mq-view[data-view="histoire"] .mq-chemin-trace { top:94px; }
	.mq-view[data-view="histoire"] .mq-jalon { min-height:66px;padding:5px 6px; }
	.mq-view[data-view="histoire"] .mq-jalon-pastille { width:42px;height:42px; }
	.mq-learning-bubble { grid-template-columns:minmax(0,1fr) 50px;gap:9px; }
	.mq-learning-next { width:50px;height:50px;min-width:50px;min-height:50px; }
}
@media (max-height:720px) {
	.mq-story-forest-banner { height:82px; }
	.mq-view[data-view="histoire"] .mq-chemin::before,
	.mq-view[data-view="histoire"] .mq-chemin-trace { top:90px; }
	.mq-view[data-view="histoire"] .mq-jalon { min-height:62px; }
	.mq-view[data-view="histoire"] .mq-mission-meta { display:none; }
	.mq-view[data-view="histoire"] .mq-mission-tete strong { white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
	.mq-learning-bubble { top:min(52vh,340px); }
}
@media (prefers-reduced-motion:reduce) {
	.mq-story-tree,.mq-story-sun { animation:none!important; }
}

/* =========================================================================
   MEMOQUEST 6.34.1 — HUD INFÉRIEUR + RÉACTIONS ANIMÉES
   ========================================================================= */

/* La page Histoire reprend la composition exacte demandée : en-tête de voyage,
   progression, dix régions illustrées, chemin sinueux et fiche de mission fixe. */
.mq-view[data-view="histoire"] { display:block;overflow:hidden!important; }
.mq-story-atlas { width:100%;height:100%;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#f5fbff;box-shadow:0 8px 26px rgba(21,60,122,.10); }
.mq-story-atlas-head { flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;padding:10px 14px 9px;background:linear-gradient(140deg,#fff,#f1fbff);border-bottom:1px solid #fff;box-shadow:0 8px 22px rgba(21,60,122,.07);z-index:3; }
.mq-story-atlas-head>div { min-width:0; }
.mq-story-atlas-head .mq-eyebrow { margin:0 0 2px;color:#527c9c;font-size:.58rem;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mq-story-atlas-head h2 { margin:0;color:#153c7a;font-size:clamp(.88rem,3.8vw,1.08rem);font-weight:950;line-height:1.12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mq-story-atlas-head>span { align-self:center;display:flex;align-items:center;gap:4px;padding:6px 9px;border:1px solid #f0dfa5;border-radius:15px;background:#fff9e7;color:#946015;font-size:.72rem; }
.mq-story-atlas-head>span svg { width:14px;height:14px;color:#e7a72b; }
.mq-story-atlas-head>span b { font-size:.8rem; }
.mq-story-atlas-head>span small { color:#946015; }
.mq-story-atlas-progress { position:relative;height:7px;border-radius:20px;background:#dce9ee;overflow:hidden; }
.mq-story-atlas-progress i { position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e8951c,#ffc02e);transform-origin:left;transition:transform .7s cubic-bezier(.32,.72,.24,1); }
.mq-story-atlas-head>small { align-self:center;color:#55758e;font-size:.62rem;font-weight:850;white-space:nowrap; }

.mq-story-atlas-map { flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:none;background:#f7fcff; }
.mq-story-atlas-map::-webkit-scrollbar { display:none; }
.mq-story-region { position:relative;overflow:hidden;background:linear-gradient(180deg,var(--atlas-wash),#f7fcff 92%);border-bottom:1px solid #fff; }
.mq-story-region.is-locked { filter:saturate(.72); }
.mq-story-region.is-locked::after { content:"";position:absolute;inset:174px 0 0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(238,244,247,.52),rgba(234,241,244,.34)); }
.mq-story-region-hero { position:relative;height:174px;padding:17px 12px 0;text-align:center;overflow:hidden; }
.mq-story-region-hero>p { position:relative;z-index:4;margin:0;color:var(--atlas-accent);font-size:.56rem;font-weight:950;letter-spacing:.17em;text-transform:uppercase; }
.mq-story-region-hero>h3 { position:relative;z-index:4;margin:4px 0 0;color:#153c7a;font-size:clamp(1.12rem,5vw,1.48rem);font-weight:950;letter-spacing:-.035em;line-height:1.08; }
.mq-story-region-hero>small { position:relative;z-index:4;display:block;margin:5px auto 0;max-width:90%;color:#51778b;font-size:.62rem;font-weight:700; }
.mq-story-region-hero>b { position:absolute;z-index:7;left:50%;bottom:7px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;max-width:88%;padding:6px 10px;border:1px solid #fff;border-radius:30px;background:rgba(255,255,255,.93);box-shadow:0 5px 15px rgba(21,60,122,.10);color:var(--atlas-accent);font-size:.58rem;font-weight:900;white-space:nowrap; }
.mq-story-region-hero>b svg { width:12px;height:12px; }
.mq-story-atlas-landscape { position:absolute;left:0;right:0;bottom:0;height:112px;overflow:hidden;color:var(--atlas-accent); }
.mq-atlas-sun { position:absolute;right:17%;top:9px;width:25px;height:25px;border-radius:50%;background:#fff1a8;box-shadow:0 0 0 8px rgba(255,241,168,.25),0 0 22px rgba(247,202,75,.30); }
.mq-atlas-hill { position:absolute;left:-10%;right:-10%;bottom:-35px;height:86px;border-radius:52% 48% 0 0;background:color-mix(in srgb,var(--atlas-accent) 25%,#fff); }
.mq-atlas-hill.is-back { left:24%;right:-18%;bottom:-26px;transform:rotate(-4deg);opacity:.7; }
.mq-atlas-hill.is-front { bottom:-48px;background:color-mix(in srgb,var(--atlas-accent) 42%,#fff);transform:rotate(3deg); }
.mq-atlas-tree { position:absolute;z-index:2;bottom:2px;width:44px;height:70px;filter:drop-shadow(0 5px 4px rgba(30,78,62,.10)); }
.mq-atlas-tree::before { content:"";position:absolute;left:50%;bottom:0;width:6px;height:36px;transform:translateX(-50%);border-radius:5px;background:#a38361; }
.mq-atlas-tree::after { content:"";position:absolute;left:50%;top:0;width:42px;height:47px;transform:translateX(-50%);border-radius:50% 53% 45% 56%;background:linear-gradient(145deg,color-mix(in srgb,var(--atlas-accent) 48%,#bfe5ad),var(--atlas-accent));box-shadow:-9px 11px 0 -5px color-mix(in srgb,var(--atlas-accent) 42%,#fff),9px 13px 0 -7px var(--atlas-accent); }
.mq-atlas-tree.is-left { left:5%; }
.mq-atlas-tree.is-small { left:22%;bottom:-8px;transform:scale(.68);opacity:.78; }
.mq-atlas-tree.is-right { right:5%;transform:scale(.91); }
.mq-atlas-path { position:absolute;z-index:2;left:50%;bottom:-40px;width:58px;height:92px;transform:translateX(-50%) perspective(90px) rotateX(38deg);border-radius:50% 50% 0 0;background:linear-gradient(#fff8d9,#ead4aa); }
.mq-atlas-landmark { position:absolute;z-index:3;left:50%;bottom:18px;width:42px;height:42px;transform:translateX(-50%);border:3px solid rgba(255,255,255,.85);border-radius:50%;background:color-mix(in srgb,var(--atlas-accent) 58%,#fff);box-shadow:0 5px 15px rgba(21,60,122,.12);opacity:0; }
.is-scene-2 .mq-atlas-landmark,.is-scene-4 .mq-atlas-landmark,.is-scene-5 .mq-atlas-landmark,.is-scene-6 .mq-atlas-landmark,.is-scene-8 .mq-atlas-landmark,.is-scene-9 .mq-atlas-landmark,.is-scene-10 .mq-atlas-landmark { opacity:1; }
.is-scene-2 .mq-atlas-landmark { border-radius:12px;background:#f0a653; }
.is-scene-4 .mq-atlas-landmark { background:#d7f4fe;border-color:#67b9d5; }
.is-scene-5 .mq-atlas-landmark { border-radius:8px 8px 2px 2px;background:#fff5dc; }
.is-scene-6 .mq-atlas-landmark { width:56px;border-radius:5px;background:#d1bfab; }
.is-scene-8 .mq-atlas-tree::after { border-radius:4px 50% 4px 50%; }
.is-scene-9 .mq-atlas-landmark { width:58px;border-radius:5px;background:#f3e7c3; }
.is-scene-10 .mq-atlas-landmark { transform:translateX(-50%) rotate(45deg);border-radius:12px;background:#ffc02e; }

.mq-story-region-route { position:relative;height:1120px; }
.mq-story-region-route>svg { position:absolute;inset:0;width:100%;height:1070px;overflow:visible; }
.mq-atlas-road-base,.mq-atlas-road-done { fill:none;stroke-width:5;stroke-linecap:round; }
.mq-atlas-road-base { stroke:#c8dce2;stroke-dasharray:2 12; }
.mq-atlas-road-done { stroke:#58c994;filter:drop-shadow(0 0 5px rgba(88,201,148,.35)); }
.mq-atlas-stop { position:absolute;z-index:3;left:0;right:0;width:100%;height:96px;display:flex;align-items:center;justify-content:space-around;gap:5%;padding:0 6%;border:0;background:none;color:#153c7a;text-align:center; }
.mq-atlas-stop.is-even { flex-direction:row-reverse; }
.mq-atlas-orb { flex:0 0 auto;width:61px;height:61px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:linear-gradient(150deg,#fff,#e0ebf0);box-shadow:0 5px 0 #b8cdd8,0 10px 20px rgba(21,60,122,.08);color:#7694a6;font-size:1.24rem;font-weight:950; }
.mq-atlas-orb svg { width:20px;height:20px; }
.mq-atlas-label { width:53%;min-width:0;padding:9px 8px;border:1px solid #fff;border-radius:17px;background:rgba(255,255,255,.82);box-shadow:0 6px 18px rgba(21,60,122,.06); }
.mq-atlas-label strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#244c6c;font-size:.72rem;line-height:1.3; }
.mq-atlas-label small { display:block;margin-top:4px;color:#5c7b91;font-size:.56rem;font-weight:750; }
.mq-atlas-label .mq-stars { justify-content:center;margin-top:3px; }
.mq-atlas-stop.is-even .mq-atlas-label { text-align:right; }
.mq-atlas-stop.is-current .mq-atlas-orb { color:#fff;background:linear-gradient(140deg,#16c4ce,#2e86e0);box-shadow:0 6px 0 #227ba9,0 12px 24px rgba(46,134,224,.22); }
.mq-atlas-stop.is-current .mq-atlas-orb::before { content:"";position:absolute;width:72px;height:72px;border:2px solid rgba(22,196,206,.35);border-radius:50%;animation:mq-atlas-breathe 2.4s ease-in-out infinite; }
.mq-atlas-stop.is-current .mq-atlas-label { border-color:#46c7d7;background:#fff; }
.mq-atlas-stop.is-done .mq-atlas-orb { color:#fff;background:linear-gradient(150deg,#7ce25f,#1f9d55);box-shadow:0 5px 0 #188d53,0 10px 20px rgba(31,157,85,.15); }
.mq-atlas-stop.is-selected .mq-atlas-label { outline:3px solid color-mix(in srgb,var(--atlas-accent) 42%,transparent);outline-offset:2px; }
.mq-atlas-stop.is-boss .mq-atlas-orb { width:73px;height:73px;color:#85540d;background:linear-gradient(145deg,#fff0ae,#ffc02e 48%,#e8951c);border-color:#fff6c3;box-shadow:0 6px 0 #b67711,0 12px 25px rgba(232,149,28,.20); }
.mq-atlas-stop.is-locked { opacity:.68; }
.mq-story-region-bridge { height:26px;display:flex;align-items:center;justify-content:center;gap:8px;color:#6d91a3;font-size:.52rem;font-weight:850;letter-spacing:.16em; }
.mq-story-region-bridge::before,.mq-story-region-bridge::after { content:"";width:32px;height:1px;background:#b9d9de; }
@keyframes mq-atlas-breathe { 50%{transform:scale(1.08);opacity:.55} }

.mq-story-atlas-dock { flex:0 0 auto;z-index:5;padding:7px;background:rgba(255,255,255,.97);border-top:1px solid #fff;box-shadow:0 -8px 24px rgba(21,60,122,.10); }
.mq-story-atlas-dock .mq-mission { margin:0!important;padding:8px 9px!important;border-radius:18px!important;gap:6px!important;box-shadow:none!important; }
.mq-story-atlas-dock .mq-mission-tete { gap:7px; }
.mq-story-atlas-dock .mq-mission-num { width:38px;height:38px;border-radius:13px;font-size:1rem; }
.mq-story-atlas-dock .mq-mission-tete strong { font-size:.78rem!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mq-story-atlas-dock .mq-mission-tete small { font-size:.55rem; }
.mq-story-atlas-dock .mq-mission-meta { display:none!important; }
.mq-story-atlas-dock .mq-mission .mq-btn { min-height:43px!important;padding:8px 13px!important;border-radius:14px!important;font-size:.82rem!important; }

/* Mots à retenir : la couleur turquoise porte le sens et le soulignement doré
   se dessine après l'apparition du message. */
.mq-learning-bubble p strong.mq-memory-word,.mq-h2-tip p strong.mq-memory-word { position:relative;display:inline;color:#078f98!important;font-weight:950;background:linear-gradient(180deg,transparent 68%,rgba(255,205,64,.22) 68%); }
.mq-learning-bubble p strong.mq-memory-word::after { content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:99px;background:linear-gradient(90deg,#f0b82f,#ffd864);transform:scaleX(0);transform-origin:left; }
.mq-learning-reveal.is-gathered .mq-learning-bubble p strong.mq-memory-word::after { animation:mq-learning-memory-line .5s cubic-bezier(.2,.9,.25,1) 1.45s forwards; }
@keyframes mq-learning-memory-line { to{transform:scaleX(1)} }

/* Commande Passer : un médaillon bleu/turquoise, très contrasté, sans texte
   superflu. La double couronne et la lumière de passage remplacent le disque blanc. */
.mq-learning-bubble .mq-learning-next { position:relative;isolation:isolate;width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;border:3px solid #fff!important;border-radius:50%!important;background:linear-gradient(145deg,#32d4db 0%,#149ed9 42%,#0865c7 100%)!important;color:#fff!important;box-shadow:0 6px 0 #0751a4,0 13px 26px rgba(5,86,177,.36),inset 0 2px 0 rgba(255,255,255,.48)!important;font-family:ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,sans-serif!important;overflow:visible; }
.mq-learning-bubble .mq-learning-next::before { content:"";position:absolute;z-index:-1;inset:-7px;border:2px solid rgba(51,205,222,.34);border-radius:50%;animation:mq-learning-next-halo 1.8s ease-in-out infinite; }
.mq-learning-bubble .mq-learning-next::after { content:"";position:absolute;left:12px;right:12px;top:7px;height:16px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.42),transparent);pointer-events:none; }
.mq-learning-bubble .mq-learning-next span { display:block!important;transform:translate(1px,-3px)!important;color:#fff!important;font-size:2.55rem!important;font-weight:800!important;line-height:1!important;text-shadow:0 2px 3px rgba(0,48,106,.35)!important; }
.mq-learning-bubble .mq-learning-next:active { transform:translateY(4px) scale(.97)!important;box-shadow:0 2px 0 #0751a4,0 6px 13px rgba(5,86,177,.28),inset 0 2px 0 rgba(255,255,255,.40)!important; }
.mq-learning-bubble .mq-learning-next:focus-visible { outline:4px solid rgba(62,220,229,.48)!important;outline-offset:4px!important; }
@keyframes mq-learning-next-halo { 50%{transform:scale(1.08);opacity:.45} }

@media (max-width:380px) {
	.mq-story-atlas-head { padding:8px 10px 7px;gap:6px 8px; }
	.mq-story-region-hero { height:158px;padding-top:14px; }
	.mq-story-region.is-locked::after { inset-block-start:158px; }
	.mq-story-region-route { height:1030px;transform-origin:top; }
	.mq-atlas-stop { height:91px;padding-inline:4%; }
	.mq-atlas-orb { width:54px;height:54px; }
	.mq-atlas-label { width:56%;padding:8px 7px; }
	.mq-story-atlas-dock { padding:5px; }
	.mq-story-atlas-dock .mq-mission { padding:6px 8px!important; }
	.mq-story-atlas-dock .mq-mission .mq-btn { min-height:40px!important; }
	.mq-learning-bubble .mq-learning-next { width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important; }
	.mq-learning-bubble .mq-learning-next span { font-size:2.3rem!important; }
}
@media (max-height:680px) {
	.mq-story-atlas-head { padding-block:6px; }
	.mq-story-atlas-dock .mq-mission-tete { display:none; }
	.mq-story-atlas-dock .mq-mission .mq-btn { min-height:42px!important; }
}
@media (prefers-reduced-motion:reduce) {
	.mq-atlas-stop.is-current .mq-atlas-orb::before,.mq-learning-bubble .mq-learning-next::before,.mq-learning-reveal.is-gathered .mq-learning-bubble p strong.mq-memory-word::after { animation:none!important;transform:none!important; }
}

/* =========================================================================
   MEMOQUEST v87 — COUCHE CANONIQUE DES THÈMES DE PARTIE
   Unifie HUD, plateau, cartes, progression et états sans modifier la logique.
   Les variables ci-dessous sont la source de vérité du rendu en partie.
   ========================================================================= */
.mq-shell[data-skin] {
  --mq-game-hud-surface:var(--mq-surface);
  --mq-game-hud-active:var(--mq-surface-selected);
  --mq-game-hud-border:var(--mq-border);
  --mq-game-hud-text:var(--mq-text);
  --mq-game-hud-muted:var(--mq-text-secondary);
  --mq-game-control-bg:var(--mq-surface-raised);
  --mq-game-control-border:var(--mq-border);
  --mq-game-control-icon:var(--mq-accent-strong);
  --mq-game-board-fill:color-mix(in srgb,var(--mq-bg) 18%,transparent);
  --mq-game-board-border:color-mix(in srgb,var(--mq-border-active) 34%,transparent);
  --mq-game-board-shadow:0 12px 28px color-mix(in srgb,var(--mq-bg) 28%,rgba(0,0,0,.12));
  --mq-game-card-border:color-mix(in srgb,var(--mq-surface-raised) 86%,var(--mq-border) 14%);
  --mq-game-card-back:linear-gradient(160deg,var(--mq-accent) 0%,var(--mq-accent-strong) 54%,var(--mq-accent-2) 100%);
  --mq-game-card-front:linear-gradient(165deg,var(--mq-surface-raised),var(--mq-surface-soft));
  --mq-game-card-front-animal:var(--mq-accent-strong);
  --mq-game-card-shadow:0 5px 13px color-mix(in srgb,var(--mq-bg) 34%,rgba(0,0,0,.16));
  --mq-game-progress-track:color-mix(in srgb,var(--mq-text) 12%,transparent);
  --mq-game-progress-fill:linear-gradient(90deg,var(--mq-accent),var(--mq-accent-2));
  --mq-game-active:var(--mq-accent);
  --mq-game-active-glow:color-mix(in srgb,var(--mq-accent) 28%,transparent);
  --mq-game-match:var(--mq-success);
  --mq-game-error:var(--mq-error);
}

/* Lagon / Jade — eau claire, végétation et verre dépoli. */
.mq-shell[data-skin="jade"] {
  --mq-game-hud-surface:rgba(250,255,253,.94);
  --mq-game-hud-active:linear-gradient(180deg,#fbfffd 0%,#e4fff4 100%);
  --mq-game-hud-border:#b8dfd9;
  --mq-game-control-bg:linear-gradient(180deg,#fbfffe 0%,#e4f5f1 100%);
  --mq-game-control-border:#b8dfd9;
  --mq-game-control-icon:#087f8c;
  --mq-game-board-fill:linear-gradient(180deg,rgba(12,117,124,.08),rgba(12,90,109,.14));
  --mq-game-board-border:rgba(101,217,200,.48);
  --mq-game-board-shadow:0 12px 28px rgba(21,92,99,.13),inset 0 0 22px rgba(92,224,198,.07);
  --mq-game-card-border:#f2fffb;
  --mq-game-card-back:radial-gradient(circle at 27% 18%,rgba(255,255,255,.32),transparent 29%),linear-gradient(162deg,#54dcc1 0%,#1fbcc1 46%,#177fc0 100%);
  --mq-game-card-front:linear-gradient(165deg,#fbfffe 0%,#e6f6f2 100%);
  --mq-game-card-front-animal:#0d5d69;
  --mq-game-card-shadow:0 5px 13px rgba(13,79,91,.22);
  --mq-game-progress-track:rgba(14,102,111,.14);
  --mq-game-progress-fill:linear-gradient(90deg,#4bd7ae 0%,#17bdbd 52%,#247fc7 100%);
  --mq-game-active:#159f7d;
  --mq-game-active-glow:rgba(21,159,125,.24);
  --mq-game-match:#38b987;
  background:
    radial-gradient(circle at 78% 7%,rgba(255,255,255,.78) 0%,rgba(255,255,255,.20) 18%,transparent 36%),
    radial-gradient(ellipse at 12% 96%,rgba(74,198,133,.24),transparent 37%),
    linear-gradient(180deg,#4ec9ef 0%,#91ddf1 30%,#c9f0e8 65%,#f2e8c9 100%);
}
.mq-shell[data-skin="jade"] .mq-ambiance i:nth-child(1) { background:radial-gradient(ellipse,rgba(255,255,255,.54) 0%,transparent 64%); }
.mq-shell[data-skin="jade"] .mq-ambiance i:nth-child(2) { background:radial-gradient(circle,rgba(40,174,113,.18) 0%,transparent 62%); }
.mq-shell[data-skin="jade"] .mq-ambiance i:nth-child(3) { background:radial-gradient(ellipse,rgba(22,196,206,.20) 0%,transparent 62%); }
.mq-shell[data-skin="jade"] .mq-back::before {
  inset:21%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 45c11-19 25-27 39-26-3 12-9 22-20 28-7 4-14 2-19-2Z'/%3E%3Cpath d='M18 43c10-8 20-14 30-20M31 34c-2-6-1-11 1-15M39 29c3-4 7-7 12-9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(4,89,100,.28));
}
.mq-shell[data-skin="jade"] .mq-back::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 18% 28%,rgba(255,255,255,.34) 0 2px,transparent 3px),radial-gradient(circle at 79% 72%,rgba(255,255,255,.23) 0 2px,transparent 3px),linear-gradient(115deg,transparent 33%,rgba(255,255,255,.15) 48%,transparent 61%);
  opacity:.9;
}

/* Ambre — canyon solaire, pierre chaude et cuivre. */
.mq-shell[data-skin="ambre"] {
  --mq-game-hud-surface:rgba(255,249,238,.95);
  --mq-game-hud-active:linear-gradient(180deg,#fffdf5 0%,#ffedc5 100%);
  --mq-game-hud-border:#e7c28e;
  --mq-game-control-bg:linear-gradient(180deg,#fffaf0 0%,#f9e1bd 100%);
  --mq-game-control-border:#e5bd84;
  --mq-game-control-icon:#8b3d09;
  --mq-game-board-fill:linear-gradient(180deg,rgba(151,70,15,.075),rgba(121,49,9,.14));
  --mq-game-board-border:rgba(212,134,48,.42);
  --mq-game-board-shadow:0 12px 28px rgba(116,56,15,.16),inset 0 0 22px rgba(255,188,87,.08);
  --mq-game-card-border:#fff1d2;
  --mq-game-card-back:radial-gradient(circle at 28% 17%,rgba(255,247,205,.34),transparent 29%),linear-gradient(160deg,#ffc35f 0%,#ef8429 48%,#b74712 100%);
  --mq-game-card-front:linear-gradient(165deg,#fffaf0 0%,#f7e2c0 100%);
  --mq-game-card-front-animal:#77360f;
  --mq-game-card-shadow:0 5px 13px rgba(113,52,13,.24);
  --mq-game-progress-track:rgba(117,61,18,.14);
  --mq-game-progress-fill:linear-gradient(90deg,#ffd26e 0%,#f29a35 48%,#c95713 100%);
  --mq-game-active:#b86116;
  --mq-game-active-glow:rgba(184,97,22,.23);
  --mq-game-match:#8a8e2d;
  background:
    radial-gradient(circle at 52% 4%,rgba(255,244,188,.86) 0%,rgba(255,207,100,.35) 18%,transparent 40%),
    radial-gradient(ellipse at 12% 84%,rgba(169,67,15,.18),transparent 38%),
    radial-gradient(ellipse at 90% 88%,rgba(132,47,8,.14),transparent 35%),
    linear-gradient(180deg,#f7a43f 0%,#ffc96f 28%,#f6d79f 61%,#e9c08a 100%);
}
.mq-shell[data-skin="ambre"] .mq-ambiance i:nth-child(1) { background:radial-gradient(ellipse,rgba(255,250,216,.48) 0%,transparent 64%); }
.mq-shell[data-skin="ambre"] .mq-ambiance i:nth-child(2) { background:radial-gradient(circle,rgba(210,102,22,.17) 0%,transparent 62%); }
.mq-shell[data-skin="ambre"] .mq-ambiance i:nth-child(3) { background:radial-gradient(ellipse,rgba(232,136,47,.20) 0%,transparent 62%); }
.mq-shell[data-skin="ambre"] .mq-back::before {
  inset:22%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff7df' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='32' cy='32' r='11'/%3E%3Cpath d='M32 7v8M32 49v8M7 32h8M49 32h8M14 14l6 6M44 44l6 6M50 14l-6 6M20 44l-6 6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(113,52,13,.30));
}
.mq-shell[data-skin="ambre"] .mq-back::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,247,204,.20) 48%,transparent 63%),radial-gradient(circle at 78% 25%,rgba(255,248,215,.24) 0 2px,transparent 3px);
  opacity:.88;
}

/* Océan — profondeur froide, perle et aqua. */
.mq-shell[data-skin="ocean"] {
  --mq-game-hud-surface:linear-gradient(180deg,rgba(255,255,255,.97),rgba(231,248,252,.95));
  --mq-game-hud-active:linear-gradient(180deg,#fbfffe 0%,#e7fff4 100%);
  --mq-game-hud-border:rgba(194,235,244,.92);
  --mq-game-control-bg:linear-gradient(180deg,rgba(65,210,235,.97),rgba(20,114,204,.97));
  --mq-game-control-border:rgba(201,246,255,.82);
  --mq-game-control-icon:#ffffff;
  --mq-game-board-fill:linear-gradient(180deg,rgba(1,48,88,.15),rgba(1,29,64,.25));
  --mq-game-board-border:rgba(117,225,239,.36);
  --mq-game-board-shadow:0 12px 30px rgba(0,29,69,.20),inset 0 0 28px rgba(40,217,231,.10);
  --mq-game-card-border:#f6fdff;
  --mq-game-card-back:radial-gradient(circle at 28% 17%,rgba(255,255,255,.28),transparent 31%),linear-gradient(166deg,#49dce1 0%,#20b7e5 46%,#0968c8 100%);
  --mq-game-card-front:linear-gradient(168deg,#f9feff 0%,#e6f8fb 100%);
  --mq-game-card-front-animal:#073f69;
  --mq-game-card-shadow:0 5px 13px rgba(0,35,82,.30);
  --mq-game-progress-track:rgba(212,249,255,.22);
  --mq-game-progress-fill:linear-gradient(90deg,#53e6cc 0%,#33d7db 48%,#43efb2 100%);
  --mq-game-active:#45daa8;
  --mq-game-active-glow:rgba(69,218,168,.24);
  --mq-game-match:#53dfb7;
}

/* Grenat — rubis, ivoire et champagne. */
.mq-shell[data-skin="grenat"] {
  --mq-game-hud-surface:linear-gradient(155deg,#fffaf5 0%,#f6e7df 100%);
  --mq-game-hud-active:linear-gradient(155deg,#fffaf5 0%,#f3e0d4 100%);
  --mq-game-hud-border:#dfb98f;
  --mq-game-hud-text:#531826;
  --mq-game-hud-muted:#805965;
  --mq-game-control-bg:linear-gradient(155deg,#fffaf5 0%,#f4e3dc 100%);
  --mq-game-control-border:#ddb68c;
  --mq-game-control-icon:#6b1d31;
  --mq-game-board-fill:linear-gradient(180deg,rgba(64,15,27,.26),rgba(31,7,14,.36));
  --mq-game-board-border:rgba(217,174,125,.34);
  --mq-game-board-shadow:0 13px 30px rgba(39,7,15,.25),inset 0 0 24px rgba(189,68,93,.06);
  --mq-game-card-border:#e8c49e;
  --mq-game-card-back:linear-gradient(158deg,#aa3b57 0%,#7f263f 48%,#501726 100%);
  --mq-game-card-front:linear-gradient(165deg,#fff9f4 0%,#f1dfd5 100%);
  --mq-game-card-front-animal:#3b151e;
  --mq-game-card-shadow:0 5px 13px rgba(42,7,15,.26);
  --mq-game-progress-track:rgba(255,239,230,.16);
  --mq-game-progress-fill:linear-gradient(90deg,#d9ae7d 0%,#c45a70 52%,#8d263f 100%);
  --mq-game-active:#c79654;
  --mq-game-active-glow:rgba(199,150,84,.24);
  --mq-game-match:#d3a464;
}

/* Ardoise — roche, acier et cyan minéral. */
.mq-shell[data-skin="ardoise"] {
  --mq-game-hud-surface:linear-gradient(155deg,#293d47 0%,#17252d 100%);
  --mq-game-hud-active:linear-gradient(155deg,#304b55 0%,#1b2d35 100%);
  --mq-game-hud-border:#536d77;
  --mq-game-hud-text:#f2f6f8;
  --mq-game-hud-muted:#bdcbd1;
  --mq-game-control-bg:linear-gradient(155deg,#2c414b 0%,#172730 100%);
  --mq-game-control-border:#526b76;
  --mq-game-control-icon:#72e2e9;
  --mq-game-board-fill:linear-gradient(180deg,rgba(8,16,21,.36),rgba(4,10,14,.48));
  --mq-game-board-border:rgba(102,205,216,.25);
  --mq-game-board-shadow:0 14px 32px rgba(0,0,0,.32),inset 0 0 24px rgba(88,223,233,.04);
  --mq-game-card-border:#afc0ca;
  --mq-game-card-back:linear-gradient(158deg,#435965 0%,#273a44 48%,#111c23 100%);
  --mq-game-card-front:linear-gradient(165deg,#253942 0%,#111d24 100%);
  --mq-game-card-front-animal:#0f1b22;
  --mq-game-card-shadow:0 5px 13px rgba(0,0,0,.34);
  --mq-game-progress-track:rgba(190,219,226,.14);
  --mq-game-progress-fill:linear-gradient(90deg,#65e8ef 0%,#39bac8 50%,#658fe9 100%);
  --mq-game-active:#65dfe8;
  --mq-game-active-glow:rgba(101,223,232,.22);
  --mq-game-match:#69dfe8;
}

/* Nuit — bleu profond et lumière lunaire, sans basculer le joueur actif en blanc. */
.mq-shell[data-skin="nuit"] {
  --mq-game-hud-surface:linear-gradient(155deg,#16243a 0%,#0e1727 100%);
  --mq-game-hud-active:linear-gradient(155deg,#1d3150 0%,#111e33 100%);
  --mq-game-hud-border:#425575;
  --mq-game-hud-text:#f5f7ff;
  --mq-game-hud-muted:#bec8df;
  --mq-game-control-bg:linear-gradient(155deg,#182740 0%,#0f192b 100%);
  --mq-game-control-border:#455a7c;
  --mq-game-control-icon:#91e2fb;
  --mq-game-board-fill:linear-gradient(180deg,rgba(9,16,31,.42),rgba(4,8,17,.58));
  --mq-game-board-border:rgba(128,174,226,.18);
  --mq-game-board-shadow:0 15px 34px rgba(0,0,0,.38),inset 0 0 24px rgba(128,215,255,.04);
  --mq-game-card-border:#c8d8eb;
  --mq-game-card-back:linear-gradient(160deg,#1c2c47 0%,#111b2f 52%,#09111f 100%);
  --mq-game-card-front:linear-gradient(165deg,#14223a 0%,#0b1424 100%);
  --mq-game-card-front-animal:#0a1322;
  --mq-game-card-shadow:0 5px 13px rgba(0,0,0,.36);
  --mq-game-progress-track:rgba(201,218,242,.13);
  --mq-game-progress-fill:linear-gradient(90deg,#80d7ff 0%,#7198f4 52%,#9a9dff 100%);
  --mq-game-active:#80d7ff;
  --mq-game-active-glow:rgba(128,215,255,.23);
  --mq-game-match:#82dcf7;
}

/* Application commune : aucune géométrie du plateau n'est modifiée. */
.mq-shell[data-skin] .mq-score-chip {
  color:var(--mq-game-hud-text);
  border-color:var(--mq-game-hud-border);
  background:var(--mq-game-hud-surface);
  box-shadow:0 4px 14px color-mix(in srgb,var(--mq-bg) 22%,rgba(0,0,0,.10)),inset 0 1px 0 rgba(255,255,255,.16);
}
.mq-shell[data-skin] .mq-score-chip small { color:var(--mq-game-hud-muted); }
.mq-shell[data-skin] .mq-score-chip strong { color:var(--mq-game-hud-text); }
.mq-shell[data-skin] .mq-score-chip.is-turn {
  border-color:var(--mq-game-active) !important;
  background:var(--mq-game-hud-active) !important;
  box-shadow:0 0 0 2px var(--mq-game-active-glow),0 5px 17px color-mix(in srgb,var(--mq-bg) 28%,rgba(0,0,0,.13));
}
.mq-shell[data-skin] .mq-score-chip.is-turn small,
.mq-shell[data-skin] .mq-score-chip.is-turn strong { color:var(--mq-game-hud-text); }
.mq-shell[data-skin] .mq-turn-dot {
  background:var(--mq-game-active);
  box-shadow:0 0 0 3px var(--mq-game-active-glow),0 0 10px var(--mq-game-active);
}
.mq-shell[data-skin] .mq-game-action {
  color:var(--mq-game-control-icon) !important;
  border:1px solid var(--mq-game-control-border) !important;
  background:var(--mq-game-control-bg) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--mq-bg) 24%,rgba(0,0,0,.11)),inset 0 1px 0 rgba(255,255,255,.13);
}
.mq-shell[data-skin] .mq-game-action svg { color:var(--mq-game-control-icon) !important; filter:none; }
.mq-shell[data-skin] .mq-game-action:active { transform:scale(.93);box-shadow:0 2px 6px color-mix(in srgb,var(--mq-bg) 22%,rgba(0,0,0,.10)); }

.mq-shell[data-skin] .mq-board-wrap { isolation:isolate;border-radius:clamp(14px,2.5vmin,24px); }
.mq-shell[data-skin] .mq-board-wrap::before {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  border:1px solid var(--mq-game-board-border);
  background:var(--mq-game-board-fill);
  box-shadow:var(--mq-game-board-shadow);
}
.mq-shell[data-skin] .mq-board { position:relative;z-index:1; }
.mq-shell[data-skin] .mq-face {
  border-color:var(--mq-game-card-border);
  box-shadow:var(--mq-game-card-shadow),inset 0 1px 0 rgba(255,255,255,.12);
}
.mq-shell[data-skin] .mq-back {
  background:var(--mq-game-card-back);
  box-shadow:var(--mq-game-card-shadow),inset 0 -12px 22px color-mix(in srgb,var(--mq-bg) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.20);
}
.mq-shell[data-skin] .mq-front {
  background:var(--mq-game-card-front);
  box-shadow:var(--mq-game-card-shadow),inset 0 1px 0 rgba(255,255,255,.12);
}
.mq-shell[data-skin] .mq-board[data-category="animaux"] .mq-front { background:var(--mq-game-card-front-animal); }
.mq-shell[data-skin] .mq-card.is-done .mq-face {
  border-color:var(--mq-game-match);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mq-game-match) 20%,transparent),0 0 18px color-mix(in srgb,var(--mq-game-match) 28%,transparent),var(--mq-game-card-shadow);
}
.mq-shell[data-skin] .mq-card.is-wrong .mq-face {
  border-color:var(--mq-game-error);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mq-game-error) 18%,transparent),var(--mq-game-card-shadow);
}
.mq-shell[data-skin] .mq-game-progress {
  background:var(--mq-game-progress-track);
  box-shadow:inset 0 1px 3px color-mix(in srgb,var(--mq-bg) 20%,transparent);
}
.mq-shell[data-skin] .mq-game-progress i {
  background:var(--mq-game-progress-fill);
  box-shadow:0 0 9px color-mix(in srgb,var(--mq-game-active) 34%,transparent);
}
.mq-card-preview-layer[data-skin] .mq-card-preview-surface {
  border-color:var(--mq-game-card-border,var(--mq-border));
  background:var(--mq-game-card-front-animal,var(--mq-surface));
  box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 0 3px color-mix(in srgb,var(--mq-game-active,var(--mq-accent)) 14%,transparent);
}

/* Réactions : le sélecteur et le message final restent visuellement dans le thème. */
.mq-shell[data-skin] .mq-game-popover {
  background:var(--mq-game-hud-surface);
  border-color:var(--mq-game-hud-border);
  box-shadow:0 18px 42px color-mix(in srgb,var(--mq-bg) 34%,rgba(0,0,0,.18)),inset 0 1px 0 rgba(255,255,255,.18);
}
.mq-shell[data-skin] .mq-reaction-tile {
  border-color:var(--mq-game-hud-border);
  background:color-mix(in srgb,var(--mq-surface) 88%,var(--mq-game-active) 12%);
}
.mq-shell[data-skin] .mq-reaction-bubble {
  border-color:color-mix(in srgb,var(--mq-game-active) 32%,var(--mq-game-hud-border));
  background:linear-gradient(105deg,color-mix(in srgb,var(--mq-surface) 90%,var(--mq-game-active) 10%),var(--mq-surface));
  box-shadow:0 8px 20px color-mix(in srgb,var(--mq-bg) 26%,rgba(0,0,0,.14)),inset 0 1px 0 rgba(255,255,255,.16);
}

/* Petits écrans : garder la lisibilité sans prendre de hauteur au plateau. */
@media (max-width:360px) {
  .mq-shell[data-skin] .mq-gamebar { gap:4px; }
  .mq-shell[data-skin] .mq-score-chip { border-radius:12px; }
  .mq-shell[data-skin] .mq-game-actions { gap:clamp(5px,1.6vw,8px); }
}
@media (max-height:640px) {
  .mq-shell[data-skin] .mq-board-wrap::before { box-shadow:inset 0 0 16px color-mix(in srgb,var(--mq-game-active) 5%,transparent); }
}

/* Les ajouts décoratifs ne doivent jamais imposer de mouvement. */
.mq-shell[data-skin="jade"][data-motion="calme"] .mq-back::after,
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-back::after { animation:none!important; }
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="jade"] .mq-back::after,
  .mq-shell[data-skin="ambre"] .mq-back::after { animation:none!important; }
}

/* =========================================================================
   MemoQuest v87 — AMBRE ULTRA PRO
   Direction artistique complète : soleil bas, cuivre, pierre chaude, ivoire.
   Objectif : supprimer tout héritage bleu/cyan/vert décoratif du gameplay
   sans altérer les couleurs sémantiques nécessaires à la compréhension.
   ========================================================================= */
.mq-shell[data-skin="ambre"] {
  --mq-bg:#edb866;
  --mq-bg-2:#d9893e;
  --mq-surface:#fff9ee;
  --mq-surface-raised:#fffdf8;
  --mq-surface-soft:#f7e5c9;
  --mq-surface-selected:#f4d7ab;
  --mq-text:#43250f;
  --mq-text-secondary:#68452a;
  --mq-text-muted:#806148;
  --mq-text-on-light:#43250f;
  --mq-text-on-dark:#fff9ee;
  --mq-accent:#914006;
  --mq-accent-strong:#733006;
  --mq-accent-2:#bf5d17;
  --mq-border:#dfbd8a;
  --mq-border-active:#b95a13;
  --mq-shadow:0 14px 34px rgba(92,45,10,.20);
  --mq-shadow-soft:0 6px 18px rgba(92,45,10,.13);
  --mq-glow:0 0 0 3px rgba(185,90,19,.17);
  --mq-button-bg:linear-gradient(135deg,#c76318 0%,#8f3c08 100%);
  --mq-button-edge:#6f2e06;

  --mq-game-hud-surface:linear-gradient(160deg,rgba(255,253,247,.98) 0%,rgba(249,229,197,.97) 100%);
  --mq-game-hud-active:linear-gradient(160deg,#fffdf6 0%,#ffe7b6 100%);
  --mq-game-hud-border:#dfb778;
  --mq-game-hud-text:#43250f;
  --mq-game-hud-muted:#765238;

  --mq-game-control-bg:linear-gradient(155deg,#fffaf0 0%,#f5ddb7 100%);
  --mq-game-control-border:#dfb779;
  --mq-game-control-icon:#7b3307;

  --mq-game-board-fill:
    radial-gradient(ellipse at 50% 0%,rgba(255,226,166,.15),transparent 38%),
    linear-gradient(180deg,rgba(112,48,8,.16) 0%,rgba(81,31,5,.25) 100%);
  --mq-game-board-border:rgba(255,230,184,.50);
  --mq-game-board-shadow:0 15px 34px rgba(104,48,9,.18),inset 0 0 28px rgba(255,211,122,.10);

  --mq-game-card-border:#fff0ce;
  --mq-game-card-back:
    radial-gradient(circle at 27% 17%,rgba(255,248,207,.33),transparent 28%),
    linear-gradient(160deg,#f8c766 0%,#df7725 48%,#9d3f0d 100%);
  --mq-game-card-front:linear-gradient(165deg,#fffaf0 0%,#f4ddba 100%);
  --mq-game-card-front-animal:#69300f;
  --mq-game-card-shadow:0 6px 15px rgba(91,39,7,.27);

  --mq-game-progress-track:rgba(77,34,8,.19);
  --mq-game-progress-fill:linear-gradient(90deg,#ffda77 0%,#ed9330 50%,#a74410 100%);
  --mq-game-active:#bd5711;
  --mq-game-active-glow:rgba(189,87,17,.24);
  --mq-game-match:#ffd36a;
  --mq-game-error:#cf4e3c;

  background:
    radial-gradient(circle at 51% 1%,rgba(255,249,211,.92) 0%,rgba(255,212,120,.42) 19%,transparent 43%),
    radial-gradient(ellipse at 7% 79%,rgba(168,69,14,.15),transparent 39%),
    radial-gradient(ellipse at 95% 87%,rgba(130,43,8,.13),transparent 37%),
    linear-gradient(180deg,#f4a84a 0%,#f7c66e 27%,#f3d49c 62%,#dfac73 100%);
}

/* Ambiance du plateau : soleil diffus + dunes, sans cyan ni vert décoratif. */
.mq-shell[data-skin="ambre"][data-screen="plateau"] .mq-ambiance::before {
  content:"";
  position:absolute;
  width:40vmax;
  height:40vmax;
  right:-14vmax;
  top:-18vmax;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,252,223,.70) 0 12%,rgba(255,216,130,.26) 26%,transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.mq-shell[data-skin="ambre"][data-screen="plateau"] .mq-ambiance::after {
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-12%;
  height:36%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 100%,rgba(128,46,8,.17) 0 38%,transparent 39%),
    radial-gradient(ellipse at 62% 108%,rgba(173,76,18,.15) 0 45%,transparent 46%),
    radial-gradient(ellipse at 98% 105%,rgba(107,37,7,.14) 0 36%,transparent 37%);
  filter:blur(.2px);
}
.mq-shell[data-skin="ambre"] .mq-ambiance i:nth-child(1) {
  background:radial-gradient(ellipse,rgba(255,251,223,.50) 0%,transparent 64%);
}
.mq-shell[data-skin="ambre"] .mq-ambiance i:nth-child(2) {
  background:radial-gradient(circle,rgba(194,83,17,.15) 0%,transparent 62%);
}
.mq-shell[data-skin="ambre"] .mq-ambiance i:nth-child(3) {
  background:radial-gradient(ellipse,rgba(224,129,39,.17) 0%,transparent 62%);
}

/* Plateau : texture chaude très légère pour donner de la profondeur sans bruit visuel. */
.mq-shell[data-skin="ambre"] .mq-board-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:.36;
  background:
    radial-gradient(circle at 15% 22%,rgba(255,238,202,.16) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 68%,rgba(255,238,202,.12) 0 1px,transparent 1.5px),
    linear-gradient(118deg,transparent 0 44%,rgba(255,223,161,.055) 45% 46%,transparent 47% 100%);
  background-size:34px 34px,42px 42px,100% 100%;
}

/* Carte fermée : emblème solaire original, cuivre/or et relief plus net. */
.mq-shell[data-skin="ambre"] .mq-face {
  border-color:var(--mq-game-card-border);
}
.mq-shell[data-skin="ambre"] .mq-back {
  background:var(--mq-game-card-back);
  box-shadow:var(--mq-game-card-shadow),inset 0 -16px 24px rgba(96,34,6,.17),inset 0 1px 0 rgba(255,255,255,.26);
}
.mq-shell[data-skin="ambre"] .mq-back::before {
  inset:21%;
  opacity:.96;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff7df' stroke-width='3.6' stroke-linecap='round'%3E%3Ccircle cx='32' cy='32' r='10.5'/%3E%3Cpath d='M32 6v8M32 50v8M6 32h8M50 32h8M13.6 13.6l5.7 5.7M44.7 44.7l5.7 5.7M50.4 13.6l-5.7 5.7M19.3 44.7l-5.7 5.7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(89,34,7,.34));
}
.mq-shell[data-skin="ambre"] .mq-back::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 31%,rgba(255,247,205,.20) 47%,transparent 62%),
    radial-gradient(circle at 77% 24%,rgba(255,247,214,.25) 0 2px,transparent 3px),
    radial-gradient(circle at 21% 78%,rgba(255,236,190,.16) 0 1.5px,transparent 2.4px);
  opacity:.86;
}

/* Faces, erreur d'image et aperçu : aucun bleu de secours. */
.mq-shell[data-skin="ambre"] .mq-front {
  background:var(--mq-game-card-front);
}
.mq-shell[data-skin="ambre"] .mq-board[data-category="animaux"] .mq-front {
  background:var(--mq-game-card-front-animal);
}
.mq-shell[data-skin="ambre"] .mq-front .mq-card-fallback,
.mq-card-preview-layer[data-skin="ambre"] .mq-card-fallback {
  color:#fff8e8;
  background:
    radial-gradient(circle at 36% 20%,rgba(255,219,143,.20),transparent 36%),
    linear-gradient(155deg,#8b4314 0%,#642b0d 58%,#472006 100%);
  text-shadow:0 1px 2px rgba(52,20,3,.65);
}
.mq-card-preview-layer[data-skin="ambre"] .mq-card-preview-surface {
  border-color:#ffe8b9;
  background:linear-gradient(155deg,#7a3810 0%,#542507 68%,#3f1b05 100%);
  box-shadow:0 20px 44px rgba(74,29,5,.38),0 0 0 3px rgba(238,155,55,.18);
}

/* États de jeu : la réussite devient or, l'erreur reste clairement rouge. */
.mq-shell[data-skin="ambre"] .mq-card.is-done .mq-face {
  border-color:var(--mq-game-match);
  box-shadow:
    0 0 0 2px rgba(255,211,106,.22),
    0 0 20px rgba(239,153,47,.34),
    var(--mq-game-card-shadow);
}
.mq-shell[data-skin="ambre"] .mq-card.is-wrong .mq-face {
  border-color:var(--mq-game-error);
  box-shadow:0 0 0 2px rgba(207,78,60,.18),var(--mq-game-card-shadow);
}

/* HUD : ivoire, cuivre et or ; hiérarchie claire et contrastée. */
.mq-shell[data-skin="ambre"] .mq-score-chip {
  color:var(--mq-game-hud-text);
  border-color:var(--mq-game-hud-border);
  background:var(--mq-game-hud-surface);
  box-shadow:0 5px 16px rgba(97,46,8,.15),inset 0 1px 0 rgba(255,255,255,.52);
}
.mq-shell[data-skin="ambre"] .mq-score-chip.is-turn {
  border-color:var(--mq-game-active) !important;
  background:var(--mq-game-hud-active) !important;
  box-shadow:0 0 0 2px rgba(189,87,17,.14),0 6px 18px rgba(100,44,7,.17);
}
.mq-shell[data-skin="ambre"] .mq-turn-dot {
  background:var(--mq-game-active);
  box-shadow:0 0 0 3px rgba(189,87,17,.16),0 0 10px rgba(189,87,17,.48);
}
.mq-shell[data-skin="ambre"] .mq-game-progress {
  background:var(--mq-game-progress-track);
  box-shadow:inset 0 1px 3px rgba(78,34,7,.18);
}
.mq-shell[data-skin="ambre"] .mq-game-progress i {
  background:var(--mq-game-progress-fill);
  box-shadow:0 0 9px rgba(214,111,27,.35);
}

/* Contrôles : même famille visuelle, mais accents distincts pour Astuce/Réagir. */
.mq-shell[data-skin="ambre"] .mq-game-action {
  color:var(--mq-game-control-icon) !important;
  border-color:var(--mq-game-control-border) !important;
  background:var(--mq-game-control-bg) !important;
  box-shadow:0 5px 14px rgba(92,42,8,.14),inset 0 1px 0 rgba(255,255,255,.50);
}
.mq-shell[data-skin="ambre"] .mq-game-action svg {
  color:var(--mq-game-control-icon) !important;
  filter:none;
}
.mq-shell[data-skin="ambre"] .mq-game-action.is-tip svg { color:#a96012 !important; }
.mq-shell[data-skin="ambre"] .mq-game-action.is-reaction {
  background:linear-gradient(155deg,#fff9eb 0%,#f8d9a6 100%) !important;
  border-color:#dca963 !important;
}
.mq-shell[data-skin="ambre"] .mq-game-action.is-reaction svg { color:#a5480b !important; }

/* Réactions et attente multijoueur : suppression des surfaces menthe/teal historiques. */
.mq-shell[data-skin="ambre"] .mq-game-popover {
  background:linear-gradient(160deg,rgba(255,253,247,.99),rgba(248,226,190,.98));
  border-color:#ddb474;
  box-shadow:0 20px 46px rgba(88,38,7,.24),inset 0 1px 0 rgba(255,255,255,.55);
}
.mq-shell[data-skin="ambre"] .mq-reaction-tile {
  border-color:#e1bd85;
  background:linear-gradient(160deg,#fffaf0 0%,#f7e2c0 100%);
  box-shadow:0 5px 14px rgba(93,43,8,.09);
}
.mq-shell[data-skin="ambre"] .mq-reaction-tile:hover,
.mq-shell[data-skin="ambre"] .mq-reaction-tile:focus-visible {
  border-color:#bf651d;
  box-shadow:0 8px 18px rgba(125,54,8,.15);
}
.mq-shell[data-skin="ambre"] .mq-reaction-bubble {
  border-color:#d9aa67;
  background:linear-gradient(105deg,#fffaf0 0%,#f8dfb5 66%,#f4cf91 100%);
  box-shadow:0 9px 22px rgba(92,40,7,.17),inset 0 1px 0 rgba(255,255,255,.55);
}
.mq-shell[data-skin="ambre"] .mq-online-activity-wait {
  border-color:#dfb677;
  background:linear-gradient(150deg,#fffaf0 0%,#f7dfba 100%);
  color:#4b2a11;
  box-shadow:0 8px 20px rgba(91,40,7,.16);
}
.mq-shell[data-skin="ambre"] .mq-online-activity-wait > span svg { color:#a44b0b; }
.mq-shell[data-skin="ambre"] .mq-online-activity-wait > strong {
  background:#f5d6a5;
  color:#7a3307;
}

/* Cohérence des écrans de jeu auxiliaires sans altérer les codes vrai/faux. */
.mq-shell[data-skin="ambre"] .mq-game-setting-row > span,
.mq-shell[data-skin="ambre"] .mq-game-volume-row > span,
.mq-shell[data-skin="ambre"] .mq-game-rules > span {
  background:linear-gradient(145deg,#fff7e9,#f4ddbb);
  color:#9a4309;
}
.mq-shell[data-skin="ambre"] .mq-privacy-link {
  background:linear-gradient(135deg,#b95311,#8a3606);
  box-shadow:0 8px 18px rgba(117,48,6,.22);
}

/* Mouvement réduit : les ajouts Ambre restent statiques. */
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-ambiance::before,
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-ambiance::after,
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-back::after {
  animation:none !important;
}
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="ambre"] .mq-ambiance::before,
  .mq-shell[data-skin="ambre"] .mq-ambiance::after,
  .mq-shell[data-skin="ambre"] .mq-back::after {
    animation:none !important;
  }
}

/* Petits écrans : garder un contour net sans épaissir le HUD. */
@media (max-width:360px), (max-height:640px) {
  .mq-shell[data-skin="ambre"] .mq-board-wrap::after { opacity:.24; }
  .mq-shell[data-skin="ambre"] .mq-score-chip { box-shadow:0 3px 10px rgba(92,42,8,.13),inset 0 1px 0 rgba(255,255,255,.45); }
  .mq-shell[data-skin="ambre"] .mq-game-action { box-shadow:0 3px 10px rgba(92,42,8,.12),inset 0 1px 0 rgba(255,255,255,.45); }
}

/* Correctif final aperçu en erreur : message centré, nom de carte masqué. */
.mq-card-preview-layer[data-skin="ambre"] .mq-card-preview-surface.is-image-error > .mq-card-fallback {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-radius:0;
  font-size:clamp(9px,2.4vmin,12px);
  line-height:1.18;
  font-weight:900;
  text-align:center;
  letter-spacing:.01em;
}
.mq-card-preview-layer[data-skin="ambre"] .mq-card-preview-surface.is-image-error > .mq-card-name {
  display:none !important;
}


/* =========================================================================
   MemoQuest v87 — AMBRE PREGAME PRO
   Parcours avant partie : expérience, difficulté, univers, format et mode.
   Objectif : aucune fuite bleu/turquoise du thème principal dans Ambre.
   ========================================================================= */
.mq-shell[data-skin="ambre"] {
  --mq-amber-ink:#4a2b12;
  --mq-amber-ink-soft:#765033;
  --mq-amber-muted:#9a7657;
  --mq-amber-copper:#a84d0a;
  --mq-amber-copper-deep:#7c3505;
  --mq-amber-orange:#e87820;
  --mq-amber-gold:#f1a437;
  --mq-amber-gold-hi:#ffd983;
  --mq-amber-ivory:#fffaf0;
  --mq-amber-cream:#f8e4c2;
  --mq-amber-sand:#edc996;
  --mq-amber-line:#d8a761;
  --mq-amber-line-soft:rgba(171,93,24,.24);
  --mq-amber-shadow:rgba(92,42,8,.16);
  --mq-amber-shadow-strong:rgba(78,31,5,.23);
}

/* Fond du parcours : canyon lumineux et sable, pas de cyan décoratif. */
.mq-shell[data-skin="ambre"][data-screen="miseEnPlace"] {
  background:
    radial-gradient(circle at 50% -7%,rgba(255,251,220,.96) 0%,rgba(255,216,132,.55) 18%,transparent 40%),
    radial-gradient(ellipse at 7% 89%,rgba(170,72,14,.17),transparent 34%),
    radial-gradient(ellipse at 96% 94%,rgba(124,49,7,.15),transparent 34%),
    linear-gradient(180deg,#f5a343 0%,#f8c56d 25%,#f5d69f 58%,#e9c493 100%);
}
.mq-shell[data-skin="ambre"][data-screen="miseEnPlace"] .mq-ambiance i:nth-child(1) {
  background:radial-gradient(ellipse,rgba(255,252,226,.54) 0%,transparent 64%);
}
.mq-shell[data-skin="ambre"][data-screen="miseEnPlace"] .mq-ambiance i:nth-child(2) {
  background:radial-gradient(circle,rgba(191,78,14,.14) 0%,transparent 62%);
}
.mq-shell[data-skin="ambre"][data-screen="miseEnPlace"] .mq-ambiance i:nth-child(3) {
  background:radial-gradient(ellipse,rgba(235,145,51,.17) 0%,transparent 62%);
}
.mq-shell[data-skin="ambre"] .mq-view[data-view="miseEnPlace"]::before {
  background:
    radial-gradient(circle at 88% 18%,rgba(255,252,225,.30),transparent 25%),
    radial-gradient(circle at 12% 76%,rgba(166,70,12,.075),transparent 28%),
    linear-gradient(155deg,transparent 0 31%,rgba(255,247,218,.16) 31.5% 32.1%,transparent 32.6% 100%);
}

/* Chrome avant partie : surfaces chaudes et ombres cuivre. */
.mq-shell[data-skin="ambre"][data-screen="miseEnPlace"] .mq-top,
.mq-shell[data-skin="ambre"][data-screen="miseEnPlace"] .mq-nav {
  background:linear-gradient(180deg,rgba(255,250,240,.96),rgba(250,229,196,.94));
  border-color:rgba(199,132,60,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 26px rgba(94,41,7,.15);
}
.mq-shell[data-skin="ambre"] .mq-xp { background:#ead1ab; }
.mq-shell[data-skin="ambre"] .mq-xp i {
  background:linear-gradient(90deg,#ffd26f 0%,#ee962f 52%,#b84f0d 100%);
  box-shadow:0 0 8px rgba(216,109,25,.25);
}
.mq-shell[data-skin="ambre"] .mq-chip,
.mq-shell[data-skin="ambre"] .mq-icon-btn {
  color:var(--mq-amber-ink);
  background:linear-gradient(145deg,#fffaf0,#f5ddba);
  border-color:#dfb67b;
  box-shadow:0 4px 12px rgba(92,42,8,.10),inset 0 1px 0 rgba(255,255,255,.55);
}
.mq-shell[data-skin="ambre"] .mq-chip .mq-plus {
  color:#fff9ed;
  background:linear-gradient(145deg,#d76716,#9b3f08);
  box-shadow:0 4px 10px rgba(124,53,5,.22);
}
.mq-shell[data-skin="ambre"] .mq-nav button { color:#8b684b; }
.mq-shell[data-skin="ambre"] .mq-nav button.is-on {
  color:#8d3b07;
  background:linear-gradient(180deg,#fff3dc,#f4d3a2);
}
.mq-shell[data-skin="ambre"] .mq-nav button.is-on::after {
  background:linear-gradient(90deg,#f1aa3e,#b84e0c);
  box-shadow:0 0 8px rgba(185,78,12,.28);
}

/* En-tête de chaque étape. */
.mq-shell[data-skin="ambre"] .mq-setup-back {
  color:#7d3506;
  background:linear-gradient(145deg,rgba(255,252,245,.98),rgba(247,224,189,.96));
  border-color:rgba(218,163,94,.64);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.76),0 7px 18px rgba(94,40,6,.14);
}
.mq-shell[data-skin="ambre"] .mq-setup-back:active {
  box-shadow:0 3px 9px rgba(94,40,6,.12);
}
.mq-shell[data-skin="ambre"] .mq-setup-copy .mq-eyebrow {
  color:#a94b0a;
  text-shadow:0 1px 0 rgba(255,249,229,.35);
}
.mq-shell[data-skin="ambre"] .mq-setup-copy .mq-title {
  color:#4b2a10;
  text-shadow:0 2px 0 rgba(255,247,221,.48);
}
.mq-shell[data-skin="ambre"] .mq-setup-head.is-centered .mq-setup-copy .mq-title::after,
.mq-shell[data-skin="ambre"] .mq-setup-head.is-inline .mq-setup-copy .mq-title::after {
  background:linear-gradient(90deg,#ffd26e 0%,#e98d2c 54%,#a84608 100%);
  box-shadow:0 2px 7px rgba(167,71,8,.18);
}
.mq-shell[data-skin="ambre"] .mq-setup-steps i {
  background:rgba(140,70,18,.16);
  box-shadow:inset 0 1px 2px rgba(91,39,6,.10);
}
.mq-shell[data-skin="ambre"] .mq-setup-steps i.is-on {
  background:linear-gradient(100deg,#ffd46f 0%,#eb922f 55%,#b94e0c 100%);
  box-shadow:0 2px 8px rgba(187,78,11,.24);
}

/* Compteur du carrousel : ivoire/cuivre. */
.mq-shell[data-skin="ambre"] .mq-univers-counter {
  color:#5b3418;
  background:linear-gradient(145deg,rgba(255,252,245,.97),rgba(247,224,188,.96));
  border:1px solid rgba(213,157,87,.45);
  box-shadow:0 6px 16px rgba(91,39,6,.13),inset 0 1px 0 rgba(255,255,255,.60);
}
.mq-shell[data-skin="ambre"] .mq-univers-counter b { color:#a84708; }

/* Atmosphère du carrousel : tons soleil/canyon, même si la catégorie a sa palette propre. */
.mq-shell[data-skin="ambre"] .mq-univers-aura {
  background:
    radial-gradient(ellipse 70% 45% at 50% 38%,rgba(255,213,121,.40) 0%,transparent 100%),
    radial-gradient(ellipse 80% 40% at 50% 78%,rgba(173,70,10,.16) 0%,transparent 100%);
}
.mq-shell[data-skin="ambre"] .mq-univers-layer.is-blobs i {
  background:radial-gradient(circle at 40% 35%,rgba(255,250,222,.48),rgba(232,149,60,.055) 60%,transparent 70%);
}
.mq-shell[data-skin="ambre"] .mq-univers-layer.is-rings i { border-color:rgba(151,73,17,.17); }
.mq-shell[data-skin="ambre"] .mq-univers-layer.is-rings b,
.mq-shell[data-skin="ambre"] .mq-univers-twinkle {
  background:radial-gradient(circle,#fff8d9 0 28%,rgba(244,174,73,.52) 50%,transparent 75%);
}
.mq-shell[data-skin="ambre"] .mq-univers-streak {
  background:linear-gradient(90deg,transparent,rgba(255,228,154,.44),transparent);
}

/* Carte de mode/catégorie/difficulté : surface chaude, relief sans ombre bleue. */
.mq-shell[data-skin="ambre"] .mq-univers-body {
  background:linear-gradient(165deg,rgba(255,252,244,.985),rgba(247,226,195,.94));
  border:1px solid rgba(220,170,105,.60);
  box-shadow:0 24px 48px rgba(88,36,5,.20),inset 0 1px 0 rgba(255,255,255,.78);
}
.mq-shell[data-skin="ambre"] .mq-univers-body::before {
  background:radial-gradient(ellipse at 50% 15%,rgba(255,205,109,.26) 0%,transparent 58%);
  opacity:.72;
}
.mq-shell[data-skin="ambre"] .mq-univers-floor {
  background:radial-gradient(ellipse,rgba(91,38,6,.23),transparent 70%);
}
.mq-shell[data-skin="ambre"] .mq-univers-dim { background:rgba(124,72,37,.22); }
.mq-shell[data-skin="ambre"] .mq-univers-ring { border-color:#d36c18; }
.mq-shell[data-skin="ambre"] .mq-univers-name { color:#4a2b12; }
.mq-shell[data-skin="ambre"] .mq-univers-name em { color:#8b664a; }
.mq-shell[data-skin="ambre"] .mq-univers-sub {
  color:#765033;
  background:rgba(139,72,19,.09);
}
.mq-shell[data-skin="ambre"] .mq-univers-sub.is-locked {
  color:#7c480e;
  background:rgba(224,151,50,.18);
}
.mq-shell[data-skin="ambre"] .mq-univers-pill {
  color:#fffaf0;
  background:linear-gradient(120deg,#d66c18 0%,#a74408 100%);
  box-shadow:0 6px 14px rgba(105,43,5,.18);
}
.mq-shell[data-skin="ambre"] .mq-univers-tag {
  background:linear-gradient(120deg,#f09b34,#c4540d);
  box-shadow:0 6px 14px rgba(160,68,9,.28);
}
.mq-shell[data-skin="ambre"] .mq-univers-lock {
  color:#914106;
  background:linear-gradient(145deg,#fff9e9,#f1d39f);
  box-shadow:0 6px 14px rgba(91,39,6,.16);
}
.mq-shell[data-skin="ambre"] .mq-univers-arrow {
  color:#783206;
  background:linear-gradient(145deg,rgba(255,252,244,.96),rgba(245,220,181,.95));
  border:1px solid rgba(213,157,87,.45);
  box-shadow:0 8px 20px rgba(91,39,6,.14);
}
.mq-shell[data-skin="ambre"] .mq-univers-dots i { background:rgba(113,60,19,.20); }
.mq-shell[data-skin="ambre"] .mq-univers-dots i.is-on {
  background:linear-gradient(90deg,#efaa43,#b84c09);
  box-shadow:0 2px 7px rgba(163,66,7,.20);
}
.mq-shell[data-skin="ambre"] .mq-univers-danger i { background:rgba(116,65,26,.15); }
.mq-shell[data-skin="ambre"] .mq-univers-danger i.is-on,
.mq-shell[data-skin="ambre"] .mq-univers-stats b i {
  background:linear-gradient(90deg,#f1b04e,#b94d0a);
}
.mq-shell[data-skin="ambre"] .mq-univers-stats { color:#816047; }
.mq-shell[data-skin="ambre"] .mq-univers-stats b { background:rgba(100,55,20,.11); }
.mq-shell[data-skin="ambre"] .mq-univers-rim {
  box-shadow:inset 0 0 0 2px #c85b10,inset 0 0 26px rgba(213,102,20,.33);
}

/* Formats de grille : suppression du cyan/bleu historique. */
.mq-shell[data-skin="ambre"] .mq-view[data-view="miseEnPlace"] .mq-carreau {
  background:linear-gradient(145deg,#fffaf0 0%,#f6dfba 100%);
  border-color:rgba(255,248,230,.96);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.78),0 9px 22px rgba(91,39,6,.13),0 2px 4px rgba(91,39,6,.05);
}
.mq-shell[data-skin="ambre"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  border-color:#bd5911;
  background:linear-gradient(145deg,#fff9eb 0%,#f4d39f 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.82),0 0 0 2px rgba(189,89,17,.16),0 12px 27px rgba(126,49,5,.16);
}
.mq-shell[data-skin="ambre"] .mq-carreau[aria-checked="true"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffaf0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 24%,#ffc968 0%,#dd761e 50%,#9e3f07 100%);
  border-color:#fff3d4;
  box-shadow:0 7px 15px rgba(133,51,5,.28),0 0 0 3px rgba(214,114,27,.14);
}
.mq-shell[data-skin="ambre"] .mq-carreau strong { color:#4c2b12; }
.mq-shell[data-skin="ambre"] .mq-carreau small { color:#7c5a40; }
.mq-shell[data-skin="ambre"] .mq-carreau-ico {
  color:#9b4208;
  background:linear-gradient(145deg,#fffaf0,#f5d8aa);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.75),0 7px 16px rgba(91,39,6,.13);
}
.mq-shell[data-skin="ambre"] .mq-mini-grille {
  background:linear-gradient(145deg,#fff9ed,#f0cf9d);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.72),0 5px 12px rgba(91,39,6,.10);
}
.mq-shell[data-skin="ambre"] .mq-mini-grille i {
  background:linear-gradient(145deg,#f5b64d,#c95b12);
  box-shadow:inset 0 1px 0 rgba(255,248,221,.50);
}

/* CTA : même langage cuivre/or que le reste du parcours. */
.mq-shell[data-skin="ambre"] .mq-setup-foot .mq-btn {
  color:#fffaf0;
  background-image:linear-gradient(105deg,#e87920 0%,#b84d0a 100%);
  box-shadow:0 5px 0 #7e3105,0 12px 25px rgba(116,43,5,.27),inset 0 2px 0 rgba(255,255,255,.34);
}
.mq-shell[data-skin="ambre"] .mq-setup-foot .mq-btn.is-unlock {
  background:linear-gradient(105deg,#f0a038,#c75a0e) !important;
  box-shadow:0 5px 0 #873703,0 12px 25px rgba(142,57,3,.27),inset 0 2px 0 rgba(255,255,255,.34) !important;
}

/* Petits écrans : conserver le relief sans saturer l'espace. */
@media (max-width:360px), (max-height:640px) {
  .mq-shell[data-skin="ambre"] .mq-univers-body { box-shadow:0 14px 28px rgba(88,36,5,.17),inset 0 1px 0 rgba(255,255,255,.72); }
  .mq-shell[data-skin="ambre"] .mq-univers-arrow { box-shadow:0 5px 13px rgba(91,39,6,.12); }
  .mq-shell[data-skin="ambre"] .mq-view[data-view="miseEnPlace"] .mq-carreau { box-shadow:inset 0 1px 1px rgba(255,255,255,.72),0 5px 14px rgba(91,39,6,.11); }
}

/* Réduction de mouvement : aucune animation décorative ajoutée. */
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-univers-twinkle,
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-univers-streak,
.mq-shell[data-skin="ambre"][data-motion="calme"] .mq-univers-card.is-active .mq-univers-art img {
  animation:none !important;
}
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="ambre"] .mq-univers-twinkle,
  .mq-shell[data-skin="ambre"] .mq-univers-streak,
  .mq-shell[data-skin="ambre"] .mq-univers-card.is-active .mq-univers-art img {
    animation:none !important;
  }
}

/* =========================================================================
   MemoQuest v87 — NUIT ULTRA PRO
   Source finale du thème Nuit : ciel profond, indigo, cyan lunaire, argent.
   Couvre gameplay + parcours avant partie sans modifier la logique de jeu.
   ========================================================================= */
.mq-shell[data-skin="nuit"] {
  --mq-bg:#060b15;
  --mq-bg-2:#0b1426;
  --mq-surface:#111c2f;
  --mq-surface-raised:#17263e;
  --mq-surface-soft:#1b2b45;
  --mq-surface-selected:#203653;
  --mq-text:#f6f8ff;
  --mq-text-secondary:#c5d0e5;
  --mq-text-muted:#94a4c1;
  --mq-text-on-light:#101a2c;
  --mq-text-on-dark:#f6f8ff;
  --mq-accent:#86dcff;
  --mq-accent-strong:#57bde8;
  --mq-accent-2:#8794ff;
  --mq-border:#3d5274;
  --mq-border-active:#86dcff;
  --mq-success:#78d893;
  --mq-error:#ff879b;
  --mq-warning:#ffd27b;
  --mq-locked:#8492ad;
  --mq-shadow:0 16px 38px rgba(0,0,0,.42);
  --mq-shadow-soft:0 7px 20px rgba(0,0,0,.28);
  --mq-glow:0 0 0 3px rgba(134,220,255,.18);
  --mq-button-bg:linear-gradient(135deg,#317ea9 0%,#5667cb 100%);
  --mq-button-edge:#284e78;
  --mq-button-text:#ffffff;

  --mq-game-hud-surface:linear-gradient(160deg,rgba(24,39,64,.98) 0%,rgba(12,21,37,.98) 100%);
  --mq-game-hud-active:linear-gradient(160deg,#203b5c 0%,#13243d 100%);
  --mq-game-hud-border:#435d82;
  --mq-game-hud-text:#f8fbff;
  --mq-game-hud-muted:#bac7dd;
  --mq-game-control-bg:linear-gradient(155deg,#1c304e 0%,#101d32 100%);
  --mq-game-control-border:#456183;
  --mq-game-control-icon:#9ee7ff;
  --mq-game-board-fill:
    radial-gradient(ellipse at 50% 0%,rgba(106,156,222,.07),transparent 42%),
    linear-gradient(180deg,rgba(5,11,24,.48),rgba(2,6,14,.66));
  --mq-game-board-border:rgba(133,190,236,.22);
  --mq-game-board-shadow:0 16px 38px rgba(0,0,0,.42),inset 0 0 30px rgba(134,220,255,.045);
  --mq-game-card-border:#9fb6d1;
  --mq-game-card-back:
    radial-gradient(circle at 50% 42%,rgba(91,147,210,.11),transparent 43%),
    linear-gradient(160deg,#1b2d49 0%,#101b31 55%,#08111f 100%);
  --mq-game-card-front:linear-gradient(165deg,#14243b 0%,#0a1425 100%);
  --mq-game-card-front-animal:#08111f;
  --mq-game-card-shadow:0 6px 16px rgba(0,0,0,.40);
  --mq-game-progress-track:rgba(197,217,242,.13);
  --mq-game-progress-fill:linear-gradient(90deg,#8ce3ff 0%,#6ea1f6 50%,#8d91ff 100%);
  --mq-game-active:#8be2ff;
  --mq-game-active-glow:rgba(139,226,255,.23);
  --mq-game-match:#8de3ff;
  --mq-game-error:#ff879b;

  background:
    radial-gradient(circle at 78% 7%,rgba(122,171,240,.11) 0%,transparent 24%),
    radial-gradient(ellipse at 16% 78%,rgba(79,91,179,.10),transparent 36%),
    linear-gradient(180deg,#070c17 0%,#0a1323 34%,#0b1425 66%,#050a13 100%);
  color-scheme:dark;
}

/* Atmosphère : lune discrète, étoiles froides et brume indigo. */
.mq-shell[data-skin="nuit"] .mq-ambiance i:nth-child(1) {
  background:radial-gradient(ellipse,rgba(147,205,255,.10) 0%,transparent 66%);
}
.mq-shell[data-skin="nuit"] .mq-ambiance i:nth-child(2) {
  background:radial-gradient(circle,rgba(103,113,220,.105) 0%,transparent 64%);
}
.mq-shell[data-skin="nuit"] .mq-ambiance i:nth-child(3) {
  background:radial-gradient(ellipse,rgba(101,196,231,.08) 0%,transparent 66%);
}
.mq-shell[data-skin="nuit"][data-screen="plateau"] .mq-board-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:.42;
  background:
    radial-gradient(circle at 17% 21%,rgba(227,247,255,.16) 0 1px,transparent 1.5px),
    radial-gradient(circle at 80% 69%,rgba(160,213,255,.12) 0 1px,transparent 1.5px),
    radial-gradient(circle at 61% 31%,rgba(255,255,255,.10) 0 1px,transparent 1.5px);
  background-size:36px 36px,46px 46px,58px 58px;
}

/* Cartes : une seule identité lunaire, sans surface blanche parasite. */
.mq-shell[data-skin="nuit"] .mq-face { border-color:var(--mq-game-card-border); }
.mq-shell[data-skin="nuit"] .mq-back {
  background:var(--mq-game-card-back)!important;
  border-color:var(--mq-game-card-border)!important;
  box-shadow:var(--mq-game-card-shadow),inset 0 -16px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.mq-shell[data-skin="nuit"] .mq-back::before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  background:
    radial-gradient(circle at 20% 22%,rgba(255,255,255,.30) 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 29%,rgba(158,228,255,.25) 0 1px,transparent 1.7px),
    radial-gradient(circle at 73% 78%,rgba(255,255,255,.21) 0 1px,transparent 1.6px),
    radial-gradient(circle at 27% 74%,rgba(143,169,255,.19) 0 1px,transparent 1.7px),
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 30%,transparent 74%,rgba(131,220,246,.035))!important;
}
.mq-shell[data-skin="nuit"] .mq-back::after {
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:36%!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Ccircle cx='48' cy='48' r='38' stroke='%235c7697' stroke-width='1.5' opacity='.42'/%3E%3Cpath d='M61.5 23.5c-12 4.3-20.5 15.7-20.5 29.1 0 11.8 6.6 22 16.3 27.2-2.9.9-6 1.4-9.2 1.4-17.4 0-31.5-14.1-31.5-31.5S30.7 18.2 48.1 18.2c4.8 0 9.3 1.1 13.4 3v2.3Z' fill='%23e8f8ff' opacity='.96'/%3E%3Cpath d='m69 29 2.2 6.8L78 38l-6.8 2.2L69 47l-2.2-6.8L60 38l6.8-2.2L69 29Z' fill='%238ee5ff'/%3E%3Ccircle cx='72' cy='59' r='2.5' fill='%23f4fbff'/%3E%3Ccircle cx='25' cy='28' r='1.8' fill='%239edff3'/%3E%3C/svg%3E")!important;
  opacity:.97!important;
  filter:drop-shadow(0 0 8px rgba(124,214,249,.24))!important;
}
.mq-shell[data-skin="nuit"] .mq-front { background:var(--mq-game-card-front); }
.mq-shell[data-skin="nuit"] .mq-board[data-category="animaux"] .mq-front { background:var(--mq-game-card-front-animal); }
.mq-shell[data-skin="nuit"] .mq-front .mq-card-fallback,
.mq-card-preview-layer[data-skin="nuit"] .mq-card-fallback {
  color:#f5f9ff;
  background:
    radial-gradient(circle at 35% 20%,rgba(117,197,239,.16),transparent 36%),
    linear-gradient(155deg,#172a45 0%,#0e1a30 58%,#070f1d 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.76);
}
.mq-card-preview-layer[data-skin="nuit"] .mq-card-preview-surface {
  border-color:#98b7d5;
  background:linear-gradient(155deg,#172a45 0%,#0d1930 68%,#07101d 100%);
  box-shadow:0 22px 48px rgba(0,0,0,.52),0 0 0 3px rgba(134,220,255,.12);
}
.mq-card-preview-layer[data-skin="nuit"] .mq-card-preview-surface.is-image-error > .mq-card-fallback {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;border-radius:0;
  font-size:clamp(9px,2.4vmin,12px);line-height:1.18;font-weight:900;text-align:center;letter-spacing:.01em;
}
.mq-card-preview-layer[data-skin="nuit"] .mq-card-preview-surface.is-image-error > .mq-card-name { display:none!important; }

/* HUD : le joueur actif reste sombre, uniquement souligné par la lumière lunaire. */
.mq-shell[data-skin="nuit"] .mq-score-chip {
  color:var(--mq-game-hud-text);
  border-color:var(--mq-game-hud-border);
  background:var(--mq-game-hud-surface);
  box-shadow:0 5px 17px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.045);
}
.mq-shell[data-skin="nuit"] .mq-score-chip.is-turn {
  color:var(--mq-game-hud-text)!important;
  border-color:var(--mq-game-active)!important;
  background:var(--mq-game-hud-active)!important;
  box-shadow:0 0 0 2px rgba(139,226,255,.13),0 7px 21px rgba(0,0,0,.32)!important;
}
.mq-shell[data-skin="nuit"] .mq-score-chip.is-turn small,
.mq-shell[data-skin="nuit"] .mq-score-chip.is-turn strong { color:var(--mq-game-hud-text)!important; }
.mq-shell[data-skin="nuit"] .mq-turn-dot {
  background:var(--mq-game-active);
  box-shadow:0 0 0 3px rgba(139,226,255,.14),0 0 11px rgba(139,226,255,.52);
}
.mq-shell[data-skin="nuit"] .mq-game-progress {
  background:var(--mq-game-progress-track);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.30);
}
.mq-shell[data-skin="nuit"] .mq-game-progress i {
  background:var(--mq-game-progress-fill);
  box-shadow:0 0 10px rgba(126,193,255,.38);
}
.mq-shell[data-skin="nuit"] .mq-card.is-done .mq-face {
  border-color:var(--mq-game-match);
  box-shadow:0 0 0 2px rgba(141,227,255,.17),0 0 19px rgba(113,151,246,.28),var(--mq-game-card-shadow);
}
.mq-shell[data-skin="nuit"] .mq-card.is-wrong .mq-face {
  border-color:var(--mq-game-error);
  box-shadow:0 0 0 2px rgba(255,135,155,.15),var(--mq-game-card-shadow);
}

/* Contrôles et réactions : surfaces nocturnes homogènes. */
.mq-shell[data-skin="nuit"] .mq-game-action {
  color:var(--mq-game-control-icon)!important;
  border-color:var(--mq-game-control-border)!important;
  background:var(--mq-game-control-bg)!important;
  box-shadow:0 5px 15px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.mq-shell[data-skin="nuit"] .mq-game-action svg { color:var(--mq-game-control-icon)!important;filter:none!important; }
.mq-shell[data-skin="nuit"] .mq-game-action.is-tip svg { color:#c3c8ff!important; }
.mq-shell[data-skin="nuit"] .mq-game-action.is-reaction {
  background:linear-gradient(155deg,#1d3150 0%,#111f36 100%)!important;
  border-color:#4a688d!important;
}
.mq-shell[data-skin="nuit"] .mq-game-popover {
  background:linear-gradient(160deg,rgba(24,39,64,.99),rgba(11,20,36,.99));
  border-color:#415a7d;
  box-shadow:0 22px 50px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.045);
}
.mq-shell[data-skin="nuit"] .mq-reaction-tile {
  border-color:#3e5677;
  background:linear-gradient(160deg,#192b46 0%,#101c30 100%);
  box-shadow:0 6px 15px rgba(0,0,0,.22);
}
.mq-shell[data-skin="nuit"] .mq-reaction-tile:hover,
.mq-shell[data-skin="nuit"] .mq-reaction-tile:focus-visible {
  border-color:#75cbed;
  box-shadow:0 9px 20px rgba(0,0,0,.30),0 0 0 2px rgba(134,220,255,.08);
}
.mq-shell[data-skin="nuit"] .mq-reaction-bubble {
  border-color:#4f6c91;
  background:linear-gradient(105deg,#1c304d 0%,#13243c 66%,#111c31 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
}
.mq-shell[data-skin="nuit"] .mq-online-activity-wait {
  border-color:#405a7b;
  background:linear-gradient(150deg,#172a45 0%,#0d1a2f 100%);
  color:#f5f8ff;
  box-shadow:0 9px 22px rgba(0,0,0,.33);
}
.mq-shell[data-skin="nuit"] .mq-online-activity-wait > span svg { color:#8ce3ff; }
.mq-shell[data-skin="nuit"] .mq-online-activity-wait > strong { background:#203653;color:#dfeeff; }

/* ---------- Parcours avant partie ---------- */
.mq-shell[data-skin="nuit"][data-screen="miseEnPlace"] .mq-top,
.mq-shell[data-skin="nuit"][data-screen="miseEnPlace"] .mq-nav {
  background:linear-gradient(180deg,rgba(16,27,47,.97),rgba(8,16,30,.96));
  border-color:rgba(78,104,143,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 11px 28px rgba(0,0,0,.34);
}
.mq-shell[data-skin="nuit"] .mq-xp { background:#1c2b43; }
.mq-shell[data-skin="nuit"] .mq-xp i {
  background:linear-gradient(90deg,#8ce3ff 0%,#6da5f7 50%,#8d91ff 100%);
  box-shadow:0 0 9px rgba(126,193,255,.25);
}
.mq-shell[data-skin="nuit"] .mq-chip,
.mq-shell[data-skin="nuit"] .mq-icon-btn {
  color:#f5f8ff;
  background:linear-gradient(145deg,#192b45,#101c31);
  border-color:#3e5576;
  box-shadow:0 5px 13px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
}
.mq-shell[data-skin="nuit"] .mq-chip .mq-plus {
  color:#07101d;
  background:linear-gradient(145deg,#a6edff,#7e91ff);
  box-shadow:0 5px 12px rgba(60,88,180,.26);
}
.mq-shell[data-skin="nuit"] .mq-nav button { color:#8797b3; }
.mq-shell[data-skin="nuit"] .mq-nav button.is-on {
  color:#a4e9ff;
  background:linear-gradient(180deg,#1c304d,#132239);
}
.mq-shell[data-skin="nuit"] .mq-nav button.is-on::after {
  background:linear-gradient(90deg,#8ce3ff,#818eff);
  box-shadow:0 0 9px rgba(139,226,255,.34);
}

.mq-shell[data-skin="nuit"] .mq-setup-back {
  color:#dff4ff;
  background:linear-gradient(145deg,rgba(25,43,69,.98),rgba(13,24,42,.97));
  border-color:rgba(73,101,140,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.31);
}
.mq-shell[data-skin="nuit"] .mq-setup-back:active { box-shadow:0 4px 10px rgba(0,0,0,.25); }
.mq-shell[data-skin="nuit"] .mq-setup-copy .mq-eyebrow { color:#8edfff;text-shadow:0 0 12px rgba(134,220,255,.12); }
.mq-shell[data-skin="nuit"] .mq-setup-copy .mq-title { color:#f8fbff;text-shadow:0 3px 14px rgba(0,0,0,.40); }
.mq-shell[data-skin="nuit"] .mq-setup-head.is-centered .mq-setup-copy .mq-title::after,
.mq-shell[data-skin="nuit"] .mq-setup-head.is-inline .mq-setup-copy .mq-title::after {
  background:linear-gradient(90deg,#8de5ff 0%,#6da4f6 52%,#8e91ff 100%);
  box-shadow:0 2px 9px rgba(113,159,244,.24);
}
.mq-shell[data-skin="nuit"] .mq-setup-steps i {
  background:rgba(147,169,207,.15);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
}
.mq-shell[data-skin="nuit"] .mq-setup-steps i.is-on {
  background:linear-gradient(100deg,#8de5ff 0%,#6da4f6 52%,#8e91ff 100%);
  box-shadow:0 2px 9px rgba(113,159,244,.28);
}

.mq-shell[data-skin="nuit"] .mq-univers-counter {
  color:#dbe8f9;
  background:linear-gradient(145deg,rgba(25,43,69,.98),rgba(13,24,42,.97));
  border:1px solid rgba(70,98,137,.63);
  box-shadow:0 7px 18px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
}
.mq-shell[data-skin="nuit"] .mq-univers-counter b { color:#9ee7ff; }

/* Ambiance du carrousel : ciel nocturne ; les illustrations gardent leurs couleurs de contenu. */
.mq-shell[data-skin="nuit"] .mq-univers-aura {
  background:
    radial-gradient(ellipse 70% 45% at 50% 36%,rgba(111,177,243,.17) 0%,transparent 100%),
    radial-gradient(ellipse 80% 42% at 50% 79%,rgba(91,90,194,.12) 0%,transparent 100%);
}
.mq-shell[data-skin="nuit"] .mq-univers-layer.is-blobs i {
  background:radial-gradient(circle at 40% 35%,rgba(169,225,255,.14),rgba(91,118,207,.035) 60%,transparent 70%);
}
.mq-shell[data-skin="nuit"] .mq-univers-layer.is-rings i { border-color:rgba(132,190,235,.14); }
.mq-shell[data-skin="nuit"] .mq-univers-layer.is-rings b,
.mq-shell[data-skin="nuit"] .mq-univers-twinkle {
  background:radial-gradient(circle,#eaf9ff 0 24%,rgba(124,202,243,.52) 43%,transparent 74%);
}
.mq-shell[data-skin="nuit"] .mq-univers-streak {
  background:linear-gradient(90deg,transparent,rgba(153,211,255,.24),transparent);
}

/* Carte de choix : sombre, lisible, relief froid. */
.mq-shell[data-skin="nuit"] .mq-univers-body {
  background:linear-gradient(165deg,rgba(24,42,68,.985),rgba(11,21,38,.97));
  border:1px solid rgba(71,99,139,.62);
  box-shadow:0 26px 52px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.035);
}
.mq-shell[data-skin="nuit"] .mq-univers-body::before {
  background:radial-gradient(ellipse at 50% 14%,rgba(111,184,239,.13) 0%,transparent 58%);
  opacity:.78;
}
.mq-shell[data-skin="nuit"] .mq-univers-floor { background:radial-gradient(ellipse,rgba(0,0,0,.42),transparent 70%); }
.mq-shell[data-skin="nuit"] .mq-univers-dim { background:rgba(2,7,17,.36); }
.mq-shell[data-skin="nuit"] .mq-univers-ring { border-color:#79caeb; }
.mq-shell[data-skin="nuit"] .mq-univers-name { color:#f7faff; }
.mq-shell[data-skin="nuit"] .mq-univers-name em { color:#b3c1da; }
.mq-shell[data-skin="nuit"] .mq-univers-sub { color:#c0cbe0;background:rgba(140,177,224,.09); }
.mq-shell[data-skin="nuit"] .mq-univers-sub.is-locked { color:#e0c98d;background:rgba(229,190,93,.12); }
.mq-shell[data-skin="nuit"] .mq-univers-pill {
  color:#06101d;
  background:linear-gradient(120deg,#9eeaff 0%,#7c8ef4 100%);
  box-shadow:0 7px 16px rgba(66,91,182,.24);
}
.mq-shell[data-skin="nuit"] .mq-univers-tag {
  color:#07101e;
  background:linear-gradient(120deg,#9eeaff,#7e90f5);
  box-shadow:0 7px 16px rgba(65,91,182,.30);
}
.mq-shell[data-skin="nuit"] .mq-univers-lock {
  color:#d9eaff;
  background:linear-gradient(145deg,#203755,#13233b);
  border:1px solid rgba(111,149,196,.40);
  box-shadow:0 7px 16px rgba(0,0,0,.28);
}
.mq-shell[data-skin="nuit"] .mq-univers-arrow {
  color:#dff5ff;
  background:linear-gradient(145deg,rgba(27,47,75,.97),rgba(13,25,43,.96));
  border:1px solid rgba(69,99,139,.56);
  box-shadow:0 9px 22px rgba(0,0,0,.32);
}
.mq-shell[data-skin="nuit"] .mq-univers-dots i { background:rgba(157,180,214,.18); }
.mq-shell[data-skin="nuit"] .mq-univers-dots i.is-on {
  background:linear-gradient(90deg,#91e6ff,#818df6);
  box-shadow:0 2px 8px rgba(113,159,244,.24);
}
.mq-shell[data-skin="nuit"] .mq-univers-danger i { background:rgba(160,177,207,.14); }
.mq-shell[data-skin="nuit"] .mq-univers-stats { color:#aebbd1; }
.mq-shell[data-skin="nuit"] .mq-univers-stats b { background:rgba(165,187,220,.11); }
.mq-shell[data-skin="nuit"] .mq-univers-rim {
  box-shadow:inset 0 0 0 2px rgba(132,210,244,.76),inset 0 0 28px rgba(106,137,233,.24);
}

/* Formats de grille : cartes sombres, mini-grilles cyan/indigo. */
.mq-shell[data-skin="nuit"] .mq-view[data-view="miseEnPlace"] .mq-carreau {
  background:linear-gradient(145deg,#172943 0%,#0d1a2f 100%);
  border-color:#3f5879;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.18);
}
.mq-shell[data-skin="nuit"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  border-color:#7dd9f7;
  background:linear-gradient(145deg,#1d3453 0%,#12223b 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.045),0 0 0 2px rgba(125,217,247,.11),0 13px 30px rgba(0,0,0,.34);
}
.mq-shell[data-skin="nuit"] .mq-carreau[aria-checked="true"]::before {
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 26%)!important;
  opacity:.42!important;
}
.mq-shell[data-skin="nuit"] .mq-carreau[aria-checked="true"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fcff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 24%,#a6edff 0%,#72b6ee 48%,#6369d6 100%)!important;
  border-color:#dff8ff!important;
  box-shadow:0 7px 17px rgba(0,0,0,.30),0 0 0 3px rgba(126,211,248,.10)!important;
}
.mq-shell[data-skin="nuit"] .mq-carreau strong { color:#f5f8ff; }
.mq-shell[data-skin="nuit"] .mq-carreau small { color:#b6c3d9; }
.mq-shell[data-skin="nuit"] .mq-carreau-ico {
  color:#a3e9ff;
  background:linear-gradient(145deg,#203653,#12233b);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.26);
}
.mq-shell[data-skin="nuit"] .mq-mini-grille {
  background:linear-gradient(145deg,#1e3452,#101e34);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.035),0 6px 14px rgba(0,0,0,.24);
}
.mq-shell[data-skin="nuit"] .mq-mini-grille i {
  background:linear-gradient(145deg,#8de4ff,#687ee7);
  box-shadow:inset 0 1px 0 rgba(237,250,255,.28),0 0 4px rgba(126,205,247,.14);
}

/* CTA : cyan/indigo lisible sur le fond sombre. */
.mq-shell[data-skin="nuit"] .mq-setup-foot .mq-btn {
  color:#f9fcff;
  background-image:linear-gradient(105deg,#367fa9 0%,#5665c6 100%);
  box-shadow:0 5px 0 #263e75,0 13px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);
}
.mq-shell[data-skin="nuit"] .mq-setup-foot .mq-btn.is-unlock {
  color:#08111e;
  background:linear-gradient(105deg,#9eeaff,#7f90f4)!important;
  box-shadow:0 5px 0 #4456a7,0 13px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.20)!important;
}

/* Modales et écrans auxiliaires : pas de flash clair. */
.mq-shell[data-skin="nuit"] .mq-sheet-layer { background:rgba(1,4,10,.77); }
.mq-shell[data-skin="nuit"] .mq-sheet {
  background:linear-gradient(155deg,#172944,#0b172a);
  border-color:#3c5576;
  box-shadow:0 22px 52px rgba(0,0,0,.52);
}
.mq-shell[data-skin="nuit"] .mq-game-setting-row > span,
.mq-shell[data-skin="nuit"] .mq-game-volume-row > span,
.mq-shell[data-skin="nuit"] .mq-game-rules > span {
  background:linear-gradient(145deg,#1e3452,#12223a);
  color:#9ee7ff;
}
.mq-shell[data-skin="nuit"] .mq-privacy-link {
  background:linear-gradient(135deg,#317da7,#555fc0);
  box-shadow:0 9px 20px rgba(0,0,0,.31);
}

/* Petits écrans : relief allégé pour préserver l'espace utile. */
@media (max-width:360px), (max-height:640px) {
  .mq-shell[data-skin="nuit"] .mq-board-wrap::after { opacity:.28; }
  .mq-shell[data-skin="nuit"] .mq-score-chip { box-shadow:0 3px 11px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035); }
  .mq-shell[data-skin="nuit"] .mq-game-action { box-shadow:0 3px 11px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035)!important; }
  .mq-shell[data-skin="nuit"] .mq-univers-body { box-shadow:0 15px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.03); }
  .mq-shell[data-skin="nuit"] .mq-univers-arrow { box-shadow:0 6px 15px rgba(0,0,0,.28); }
  .mq-shell[data-skin="nuit"] .mq-view[data-view="miseEnPlace"] .mq-carreau { box-shadow:inset 0 1px 1px rgba(255,255,255,.03),0 6px 15px rgba(0,0,0,.25); }
}

/* Réduction du mouvement : étoiles et emblèmes restent statiques. */
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-univers-twinkle,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-univers-streak,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-univers-card.is-active .mq-univers-art img,
.mq-shell[data-skin="nuit"][data-motion="calme"] .mq-card.is-open .mq-back::after {
  animation:none!important;
}
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin="nuit"] .mq-univers-twinkle,
  .mq-shell[data-skin="nuit"] .mq-univers-streak,
  .mq-shell[data-skin="nuit"] .mq-univers-card.is-active .mq-univers-art img,
  .mq-shell[data-skin="nuit"] .mq-card.is-open .mq-back::after {
    animation:none!important;
  }
}

/* NUIT ULTRA PRO — sécurité de composition sur téléphones compacts. */
@media (max-width:360px), (max-height:640px) {
  .mq-shell[data-skin="nuit"] .mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered {
    grid-template-columns:40px minmax(0,1fr) 50px;
    column-gap:4px;
    row-gap:2px;
    padding-inline:8px;
  }
  .mq-shell[data-skin="nuit"] .mq-setup-head.is-centered .mq-setup-copy { padding-inline:1px; }
  .mq-shell[data-skin="nuit"] .mq-setup-head.is-centered .mq-setup-copy .mq-eyebrow {
    font-size:.5rem;
    letter-spacing:.22em;
  }
  .mq-shell[data-skin="nuit"] .mq-view[data-view="miseEnPlace"] .mq-setup-head.is-centered .mq-setup-copy .mq-title {
    font-size:1rem;
    line-height:1.02;
  }
  .mq-shell[data-skin="nuit"] .mq-setup-head.is-centered .mq-setup-copy .mq-title::after {
    height:3px;
    margin-top:4px;
  }
  .mq-shell[data-skin="nuit"] .mq-univers-counter {
    height:36px;
    padding:0 8px;
    border-radius:12px;
    font-size:.76rem;
  }
  .mq-shell[data-skin="nuit"] .mq-univers-stage { --card-w:236px!important; }
  .mq-shell[data-skin="nuit"] .mq-univers-art {
    top:-12%;
    width:96%;
    margin-left:-48%;
  }
  .mq-shell[data-skin="nuit"] .mq-univers-meta { padding:0 8px 10px; }
  .mq-shell[data-skin="nuit"] .mq-univers-name { font-size:19px; }
  .mq-shell[data-skin="nuit"] .mq-univers-sub,
  .mq-shell[data-skin="nuit"] .mq-univers-pill {
    margin-top:5px;
    padding:5px 9px;
    font-size:.68rem;
  }
  .mq-shell[data-skin="nuit"] .mq-univers-arrow {
    width:38px;
    height:38px;
    margin-top:-19px;
  }
  .mq-shell[data-skin="nuit"] .mq-univers-dots { padding:2px 0 4px; }
}

/* =========================================================================
   MemoQuest v87 — GRENAT ULTRA PRO
   Direction artistique unifiée : bordeaux profond, rubis, ivoire, champagne.
   Corrige le parcours avant partie, les fallbacks de cartes et les états de jeu
   sans recolorer les illustrations de contenu.
   ========================================================================= */
.mq-shell[data-skin="grenat"] {
  --mq-grenat-deep:#35111b;
  --mq-grenat-wine:#681d31;
  --mq-grenat-ruby:#a83452;
  --mq-grenat-rose:#c9687b;
  --mq-grenat-champagne:#d9ae7d;
  --mq-grenat-champagne-2:#efcda8;
  --mq-grenat-ivory:#fff8f3;
  --mq-grenat-ivory-2:#f7e9e3;
  --mq-grenat-ink:#4b1622;
  --mq-grenat-muted:#815f66;

  --mq-game-card-front-animal:linear-gradient(155deg,#6b2135 0%,#451522 58%,#2c0d16 100%);
  --mq-game-match:#dfb36f;
  --mq-game-progress-fill:linear-gradient(90deg,#e3bd8c 0%,#c85f74 48%,#9a2d49 100%);
  --mq-game-active:#c99a5b;
}

/* Fond de la mise en place : plus profond, moins uniforme, toujours calme. */
.mq-shell[data-skin="grenat"][data-screen="miseEnPlace"] .mq-ambiance {
  background:
    radial-gradient(ellipse at 50% 14%,rgba(226,166,160,.10),transparent 36%),
    radial-gradient(ellipse at 16% 72%,rgba(170,58,83,.12),transparent 42%),
    radial-gradient(ellipse at 84% 62%,rgba(217,174,125,.08),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(26,5,11,.20));
}

/* Chrome avant partie. */
.mq-shell[data-skin="grenat"][data-screen="miseEnPlace"] .mq-top,
.mq-shell[data-skin="grenat"][data-screen="miseEnPlace"] .mq-nav {
  background:linear-gradient(160deg,rgba(255,249,245,.985),rgba(246,230,223,.975));
  border-color:rgba(218,171,128,.72);
  box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(39,7,15,.19);
}
.mq-shell[data-skin="grenat"] .mq-setup-back {
  background:linear-gradient(150deg,#fffaf6,#f2ddd5);
  border:1px solid rgba(220,177,139,.75);
  color:#5d1a2b;
  box-shadow:0 7px 16px rgba(48,9,18,.16),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="grenat"] .mq-setup-copy .mq-eyebrow {
  color:#edbd9c;
  text-shadow:0 1px 8px rgba(32,4,10,.26);
}
.mq-shell[data-skin="grenat"] .mq-setup-copy .mq-title {
  color:#fff8f2;
  text-shadow:0 3px 14px rgba(27,3,9,.42);
}
.mq-shell[data-skin="grenat"] .mq-setup-head.is-centered .mq-setup-copy .mq-title::after,
.mq-shell[data-skin="grenat"] .mq-setup-head.is-inline .mq-setup-copy .mq-title::after {
  background:linear-gradient(90deg,#e2b783,#bd5069 54%,#84243b);
  box-shadow:0 0 12px rgba(216,169,124,.18);
}
.mq-shell[data-skin="grenat"] .mq-setup-steps i {
  background:rgba(241,210,193,.16);
  box-shadow:inset 0 1px 2px rgba(40,6,13,.18);
}
.mq-shell[data-skin="grenat"] .mq-setup-steps i.is-on {
  background:linear-gradient(90deg,#dca875,#c7566d 55%,#8c2942);
  box-shadow:0 2px 10px rgba(159,48,74,.30);
}
.mq-shell[data-skin="grenat"] .mq-univers-counter {
  background:linear-gradient(145deg,#fffaf6,#f2e1da);
  color:#5c1c2c;
  border:1px solid rgba(220,177,139,.70);
  box-shadow:0 7px 17px rgba(45,8,17,.16),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="grenat"] .mq-univers-counter b { color:#a73350; }

/* Carrousel catégories / adversaires / modes. */
.mq-shell[data-skin="grenat"] .mq-univers-aura {
  background:
    radial-gradient(ellipse 72% 45% at 50% 38%,rgba(216,174,125,.10),transparent 100%),
    radial-gradient(ellipse 80% 42% at 50% 78%,rgba(173,55,82,.10),transparent 100%);
}
.mq-shell[data-skin="grenat"] .mq-univers-layer.is-rings i { border-color:rgba(238,200,166,.18); }
.mq-shell[data-skin="grenat"] .mq-univers-layer.is-rings b,
.mq-shell[data-skin="grenat"] .mq-univers-twinkle {
  background:radial-gradient(circle,#f4d5b6 0 28%,rgba(225,174,132,.38) 52%,transparent 76%);
}
.mq-shell[data-skin="grenat"] .mq-univers-streak {
  background:linear-gradient(90deg,transparent,rgba(247,216,190,.40),transparent);
}
.mq-shell[data-skin="grenat"] .mq-univers-body {
  background:linear-gradient(162deg,#fffaf6 0%,#f8ece7 53%,#f0ddd6 100%);
  border:1px solid rgba(226,190,158,.88);
  box-shadow:0 22px 46px rgba(38,6,14,.26),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="grenat"] .mq-univers-body::before {
  background:
    radial-gradient(ellipse at 50% 17%,rgba(214,163,118,.18),transparent 56%),
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 38%);
  opacity:1;
}
.mq-shell[data-skin="grenat"] .mq-univers-floor {
  background:radial-gradient(ellipse,rgba(79,19,33,.24),transparent 70%);
}
.mq-shell[data-skin="grenat"] .mq-univers-dim { background:rgba(83,25,38,.18); }
.mq-shell[data-skin="grenat"] .mq-univers-ring { border-color:#c45a70; }
.mq-shell[data-skin="grenat"] .mq-univers-name { color:#511725; }
.mq-shell[data-skin="grenat"] .mq-univers-name em { color:#86626a; }
.mq-shell[data-skin="grenat"] .mq-univers-sub {
  color:#785862;
  background:rgba(113,35,54,.075);
}
.mq-shell[data-skin="grenat"] .mq-univers-sub.is-locked {
  color:#8e6335;
  background:rgba(217,174,125,.18);
}
.mq-shell[data-skin="grenat"] .mq-univers-pill {
  color:#fff9f4;
  background:linear-gradient(112deg,#c45c72 0%,#a13350 52%,#762139 100%);
  border:1px solid rgba(238,198,161,.76);
  box-shadow:0 6px 15px rgba(86,18,35,.23),inset 0 1px 0 rgba(255,255,255,.23);
}
.mq-shell[data-skin="grenat"] .mq-univers-tag {
  color:#fffaf6;
  background:linear-gradient(110deg,#c6955f,#96633c);
  box-shadow:0 6px 14px rgba(73,24,13,.25);
}
.mq-shell[data-skin="grenat"] .mq-univers-lock {
  background:#fff7ef;
  color:#8d5e31;
  border:1px solid rgba(218,174,132,.70);
  box-shadow:0 6px 14px rgba(58,12,23,.17);
}
.mq-shell[data-skin="grenat"] .mq-univers-arrow {
  background:linear-gradient(145deg,#fffaf6,#f0dcd4);
  color:#671d31;
  border:1px solid rgba(218,174,132,.68);
  box-shadow:0 7px 18px rgba(45,8,17,.17),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="grenat"] .mq-univers-dots i { background:rgba(234,201,175,.18); }
.mq-shell[data-skin="grenat"] .mq-univers-dots i.is-on {
  background:linear-gradient(90deg,#e2b77f,#bd5369 56%,#8b2942);
}
.mq-shell[data-skin="grenat"] .mq-univers-danger i { background:rgba(112,37,55,.13); }
.mq-shell[data-skin="grenat"] .mq-univers-danger i.is-on,
.mq-shell[data-skin="grenat"] .mq-univers-stats b i {
  background:linear-gradient(90deg,#d9ae7d,#bf5269,#8f2942);
}
.mq-shell[data-skin="grenat"] .mq-univers-stats { color:#7c5d65; }
.mq-shell[data-skin="grenat"] .mq-univers-stats b { background:rgba(112,37,55,.10); }

/* Bouton principal : ne plus ressembler au thème Ambre. */
.mq-shell[data-skin="grenat"] .mq-setup-foot .mq-btn:not(.is-unlock) {
  color:#fff9f4;
  background:linear-gradient(112deg,#b73e5b 0%,#8f2943 55%,#681c31 100%) !important;
  border:1px solid rgba(232,190,151,.82);
  box-shadow:0 4px 0 #551426,0 11px 24px rgba(48,8,18,.31),inset 0 1px 0 rgba(255,255,255,.28) !important;
  text-shadow:0 1px 2px rgba(31,3,9,.30);
}
.mq-shell[data-skin="grenat"] .mq-setup-foot .mq-btn:not(.is-unlock):active {
  box-shadow:0 1px 0 #551426,0 6px 14px rgba(48,8,18,.25) !important;
}

/* Choix Expérience / format / mode. */
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-carreau {
  background:linear-gradient(148deg,#fffaf6 0%,#f6e7e1 100%);
  border:1px solid rgba(226,190,158,.84);
  box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(48,9,19,.15);
}
.mq-shell[data-skin="grenat"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  background:linear-gradient(145deg,#fff9f4 0%,#f3ded8 100%);
  border-color:#bd5068;
  box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(189,80,104,.17),0 11px 24px rgba(74,14,29,.19);
}
.mq-shell[data-skin="grenat"] .mq-carreau[aria-checked="true"]::after {
  border-color:#fff7ef;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 24%,#d7798c 0%,#ae3c58 48%,#751f37 100%);
  box-shadow:0 6px 14px rgba(65,12,26,.25),0 0 0 3px rgba(217,174,125,.13);
}
.mq-shell[data-skin="grenat"] .mq-carreau strong { color:#5b1a2a; }
.mq-shell[data-skin="grenat"] .mq-carreau small { color:#8a5f68; }
.mq-shell[data-skin="grenat"] .mq-carreau .mq-price { color:#9c6d3e; }
.mq-shell[data-skin="grenat"] .mq-carreau-ico {
  color:#8f2943;
  background:linear-gradient(145deg,#fff9f4,#edd8d0);
  border:1px solid rgba(222,183,151,.70);
  box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(65,12,26,.14);
}
.mq-shell[data-skin="grenat"] .mq-mini-grille {
  background:linear-gradient(145deg,#fff9f5,#ead2ca);
  border:1px solid rgba(218,177,143,.62);
  box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(63,12,26,.11);
}
.mq-shell[data-skin="grenat"] .mq-mini-grille i {
  background:linear-gradient(145deg,#d26b7f 0%,#ad3e59 52%,#792139 100%);
  box-shadow:inset 0 1px 0 rgba(255,235,226,.55);
}

/* Plateau et états spéciaux. */
.mq-shell[data-skin="grenat"] .mq-score-chip.is-turn {
  border-color:#d2a263 !important;
  background:linear-gradient(155deg,#fffaf4,#f3e1d8) !important;
  box-shadow:0 0 0 2px rgba(210,162,99,.16),0 6px 18px rgba(55,10,20,.18) !important;
}
.mq-shell[data-skin="grenat"] .mq-turn-dot {
  background:#c89252;
  box-shadow:0 0 0 3px rgba(200,146,82,.15),0 0 10px rgba(214,163,99,.50);
}
.mq-shell[data-skin="grenat"] .mq-front .mq-card-fallback,
.mq-card-preview-layer[data-skin="grenat"] .mq-card-fallback {
  color:#fff9f3;
  background:linear-gradient(150deg,#8f2d48 0%,#641d31 54%,#3c111f 100%);
  border:1px solid rgba(226,187,147,.62);
  text-shadow:0 1px 2px rgba(25,3,8,.60);
}
.mq-card-preview-layer[data-skin="grenat"] .mq-card-preview-surface {
  border-color:#e6c198;
  background:linear-gradient(152deg,#a33b55 0%,#79253e 45%,#4e1728 78%,#35101c 100%);
  box-shadow:0 18px 42px rgba(31,4,11,.38),0 0 0 3px rgba(217,174,125,.16);
}
.mq-card-preview-layer[data-skin="grenat"] .mq-card-preview-surface.is-image-error > .mq-card-fallback {
  inset:5%;border-radius:14%;display:flex;align-items:center;justify-content:center;
}
.mq-card-preview-layer[data-skin="grenat"] .mq-card-preview-surface.is-image-error > .mq-card-name { display:none!important; }

/* Réactions et attente en ligne : pas de bleu générique. */
.mq-shell[data-skin="grenat"] .mq-game-popover {
  background:linear-gradient(155deg,#fffaf5,#f4e2da);
  border-color:#dfb78c;
  box-shadow:0 18px 42px rgba(43,7,16,.30),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="grenat"] .mq-reaction-tile {
  color:#591929;
  background:linear-gradient(145deg,#fff9f5,#f1ddd6);
  border-color:#ddb58b;
}
.mq-shell[data-skin="grenat"] .mq-reaction-tile:hover,
.mq-shell[data-skin="grenat"] .mq-reaction-tile:focus-visible {
  background:linear-gradient(145deg,#fff8f3,#ead1ca);
  border-color:#c45b70;
}
.mq-shell[data-skin="grenat"] .mq-reaction-bubble {
  color:#551725;
  background:linear-gradient(105deg,#fff9f5,#f1ddd6);
  border-color:#d5a36c;
}
.mq-shell[data-skin="grenat"] .mq-online-activity-wait {
  color:#f8e9df;
  background:rgba(79,22,36,.72);
  border-color:rgba(217,174,125,.35);
}
.mq-shell[data-skin="grenat"] .mq-online-activity-wait > span svg { color:#e4b57f; }
.mq-shell[data-skin="grenat"] .mq-online-activity-wait > strong { background:#7d2942;color:#fff5ec; }

/* Très petits écrans : préserver le titre, la carte active et le CTA. */
@media (max-width:340px), (max-height:620px) {
  .mq-shell[data-skin="grenat"] .mq-univers-stage { --card-w:min(244px,76vw)!important; }
  .mq-shell[data-skin="grenat"] .mq-univers-card { margin-top:calc(var(--card-w) / -.82 / 2 + 4%)!important; }
  .mq-shell[data-skin="grenat"] .mq-univers-art { top:-20%;width:100%;margin-left:-50%; }
  .mq-shell[data-skin="grenat"] .mq-univers-meta { padding-bottom:9px; }
  .mq-shell[data-skin="grenat"] .mq-univers-name { font-size:clamp(18px,5.8vw,22px); }
  .mq-shell[data-skin="grenat"] .mq-univers-sub,
  .mq-shell[data-skin="grenat"] .mq-univers-pill { padding:5px 9px;margin-top:5px; }
  .mq-shell[data-skin="grenat"] .mq-univers-dots { padding:2px 0 3px; }
}

/* Grenat — contraste du CTA de mise en place (surclasse l'ancien bouton champagne global). */
.mq-shell[data-skin="grenat"] .mq-setup-foot .mq-btn.mq-btn-primary:not(.is-unlock) {
  color:#fff9f4 !important;
  text-shadow:0 1px 2px rgba(31,3,9,.34) !important;
}
.mq-shell[data-skin="grenat"] .mq-setup-foot .mq-btn.mq-btn-primary:not(.is-unlock) svg,
.mq-shell[data-skin="grenat"] .mq-setup-foot .mq-btn.mq-btn-primary:not(.is-unlock) span {
  color:inherit !important;
}

/* =========================================================================
   MemoQuest v87 — OCEAN ULTRA PRO
   Parcours avant partie + gameplay. Direction : profondeur marine, perle,
   cyan froid et bleu saphir. Aucun vert menthe generique dans le gameplay.
   ========================================================================= */
.mq-shell[data-skin="ocean"] {
  --mq-ocean-ink:#073854;
  --mq-ocean-ink-soft:#37657a;
  --mq-ocean-muted:#6e93a4;
  --mq-ocean-cyan:#22c7dd;
  --mq-ocean-cyan-hi:#7ae8f3;
  --mq-ocean-blue:#147fcb;
  --mq-ocean-blue-deep:#075887;
  --mq-ocean-navy:#063b5b;
  --mq-ocean-pearl:#fbfeff;
  --mq-ocean-ice:#e9f9fc;
  --mq-ocean-line:#a9dce7;
  --mq-ocean-shadow:rgba(0,43,72,.18);

  --mq-game-hud-active:linear-gradient(180deg,#fbfeff 0%,#e6f8fc 100%);
  --mq-game-hud-border:#9fd9e5;
  --mq-game-control-bg:linear-gradient(180deg,#30cce2 0%,#167fc9 100%);
  --mq-game-control-border:rgba(214,250,255,.92);
  --mq-game-board-fill:linear-gradient(180deg,rgba(1,44,76,.25),rgba(1,24,51,.39));
  --mq-game-board-border:rgba(127,231,241,.46);
  --mq-game-board-shadow:0 14px 32px rgba(0,24,55,.27),inset 0 0 30px rgba(68,213,229,.09);
  --mq-game-card-border:#d9f8fc;
  --mq-game-card-back:radial-gradient(circle at 27% 16%,rgba(255,255,255,.25),transparent 29%),linear-gradient(160deg,#2bcddd 0%,#118dcb 47%,#07589e 100%);
  --mq-game-card-front:linear-gradient(165deg,#fbfeff 0%,#e7f7fb 100%);
  --mq-game-card-front-animal:#073c60;
  --mq-game-card-shadow:0 6px 15px rgba(0,26,60,.34);
  --mq-game-progress-track:rgba(212,249,255,.18);
  --mq-game-progress-fill:linear-gradient(90deg,#6ce4ee 0%,#24c5dc 48%,#147fcb 100%);
  --mq-game-active:#25c4dd;
  --mq-game-active-glow:rgba(37,196,221,.30);
  --mq-game-match:#62d8ee;
}

/* Fond avant partie : profondeur visible, sans ecraser les cartes perlees. */
.mq-shell[data-skin="ocean"][data-screen="miseEnPlace"] {
  background:
    radial-gradient(circle at 50% -8%,rgba(223,255,255,.94) 0%,rgba(86,218,233,.47) 22%,transparent 48%),
    radial-gradient(ellipse at 8% 86%,rgba(19,165,190,.20),transparent 36%),
    radial-gradient(ellipse at 95% 92%,rgba(5,71,122,.30),transparent 38%),
    linear-gradient(180deg,#36c8df 0%,#1591bb 27%,#0b678f 56%,#064b72 78%,#043758 100%);
}
.mq-shell[data-skin="ocean"] .mq-view[data-view="miseEnPlace"]::before {
  background:
    radial-gradient(circle at 88% 18%,rgba(228,255,255,.22),transparent 23%),
    radial-gradient(circle at 12% 76%,rgba(79,222,234,.10),transparent 28%),
    linear-gradient(155deg,transparent 0 31%,rgba(220,255,255,.10) 31.5% 32.1%,transparent 32.6% 100%);
}

/* Chrome : verre perle, texte marine, accents aqua. */
.mq-shell[data-skin="ocean"][data-screen="miseEnPlace"] .mq-top,
.mq-shell[data-skin="ocean"][data-screen="miseEnPlace"] .mq-nav {
  background:linear-gradient(180deg,rgba(251,254,255,.96),rgba(226,247,251,.94));
  border-color:rgba(149,214,227,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 10px 26px rgba(0,45,75,.16);
}
.mq-shell[data-skin="ocean"] .mq-xp { background:#c9e7ed; }
.mq-shell[data-skin="ocean"] .mq-xp i {
  background:linear-gradient(90deg,#69e2ec 0%,#22bfd6 52%,#147ec8 100%);
  box-shadow:0 0 8px rgba(28,173,205,.28);
}
.mq-shell[data-skin="ocean"] .mq-chip,
.mq-shell[data-skin="ocean"] .mq-icon-btn {
  color:#083b58;
  background:linear-gradient(145deg,#fbfeff,#e5f6fa);
  border-color:#a9d9e4;
  box-shadow:0 4px 12px rgba(0,45,72,.11),inset 0 1px 0 rgba(255,255,255,.80);
}
.mq-shell[data-skin="ocean"] .mq-chip .mq-plus {
  color:#fff;
  background:linear-gradient(145deg,#24c7dd,#0d72b7);
  box-shadow:0 4px 10px rgba(3,93,142,.24);
}
.mq-shell[data-skin="ocean"] .mq-nav button { color:#557d8f; }
.mq-shell[data-skin="ocean"] .mq-nav button.is-on {
  color:#075276;
  background:linear-gradient(180deg,#eefcff,#d8f3f8);
}
.mq-shell[data-skin="ocean"] .mq-nav button.is-on::after {
  background:linear-gradient(90deg,#63e0e9,#1cb8d3,#147bc5);
  box-shadow:0 0 8px rgba(25,174,204,.30);
}

/* En-tete de mise en place. */
.mq-shell[data-skin="ocean"] .mq-setup-back {
  color:#075276;
  background:linear-gradient(145deg,rgba(251,254,255,.98),rgba(224,246,250,.96));
  border-color:rgba(155,216,228,.72);
  box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(0,42,71,.15);
}
.mq-shell[data-skin="ocean"] .mq-setup-copy .mq-eyebrow { color:#087497; }
.mq-shell[data-skin="ocean"] .mq-setup-copy .mq-title {
  color:#063e5c;
  text-shadow:0 2px 0 rgba(231,254,255,.22);
}
.mq-shell[data-skin="ocean"] .mq-setup-head.is-centered .mq-setup-copy .mq-title::after,
.mq-shell[data-skin="ocean"] .mq-setup-head.is-inline .mq-setup-copy .mq-title::after {
  background:linear-gradient(90deg,#79e4ec 0%,#21bed6 52%,#1379c2 100%);
  box-shadow:0 2px 8px rgba(13,137,175,.22);
}
.mq-shell[data-skin="ocean"] .mq-setup-steps i {
  background:rgba(211,245,249,.28);
  box-shadow:inset 0 1px 2px rgba(0,44,72,.14);
}
.mq-shell[data-skin="ocean"] .mq-setup-steps i.is-on {
  background:linear-gradient(90deg,#79e4ec,#23bfd7 54%,#147cc6);
  box-shadow:0 2px 9px rgba(14,151,187,.30);
}
.mq-shell[data-skin="ocean"] .mq-univers-counter {
  color:#093f5c;
  background:linear-gradient(145deg,#fbfeff,#e4f6fa);
  border:1px solid rgba(157,216,227,.78);
  box-shadow:0 7px 17px rgba(0,43,70,.15),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="ocean"] .mq-univers-counter b { color:#087ca4; }

/* Carrousel : illustration coloree conservee, chrome 100 % ocean. */
.mq-shell[data-skin="ocean"] .mq-univers-aura {
  background:
    radial-gradient(ellipse 72% 45% at 50% 38%,rgba(112,232,239,.22),transparent 100%),
    radial-gradient(ellipse 80% 42% at 50% 78%,rgba(14,107,162,.18),transparent 100%);
}
.mq-shell[data-skin="ocean"] .mq-univers-layer.is-rings i { border-color:rgba(152,238,245,.24); }
.mq-shell[data-skin="ocean"] .mq-univers-layer.is-rings b,
.mq-shell[data-skin="ocean"] .mq-univers-twinkle {
  background:radial-gradient(circle,#eaffff 0 28%,rgba(101,225,237,.48) 50%,transparent 76%);
}
.mq-shell[data-skin="ocean"] .mq-univers-streak {
  background:linear-gradient(90deg,transparent,rgba(204,250,255,.46),transparent);
}
.mq-shell[data-skin="ocean"] .mq-univers-body {
  background:linear-gradient(162deg,#fbfeff 0%,#ecf9fb 52%,#dceff4 100%);
  border:1px solid rgba(164,219,230,.92);
  box-shadow:0 24px 48px rgba(0,37,66,.24),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="ocean"] .mq-univers-body::before {
  background:radial-gradient(ellipse at 50% 16%,rgba(104,225,235,.17),transparent 58%);
  opacity:.9;
}
.mq-shell[data-skin="ocean"] .mq-univers-floor { background:radial-gradient(ellipse,rgba(0,55,86,.24),transparent 70%); }
.mq-shell[data-skin="ocean"] .mq-univers-dim { background:rgba(17,76,101,.18); }
.mq-shell[data-skin="ocean"] .mq-univers-ring { border-color:#25b9d0; }
.mq-shell[data-skin="ocean"] .mq-univers-name { color:#063b57; }
.mq-shell[data-skin="ocean"] .mq-univers-name em { color:#527789; }
.mq-shell[data-skin="ocean"] .mq-univers-sub {
  color:#436b7d;
  background:rgba(8,104,139,.08);
}
.mq-shell[data-skin="ocean"] .mq-univers-sub.is-locked {
  color:#3c6779;
  background:rgba(100,186,204,.16);
}
.mq-shell[data-skin="ocean"] .mq-univers-pill {
  color:#f8feff;
  background:linear-gradient(112deg,#25bfd5 0%,#1086bd 54%,#075e96 100%);
  border:1px solid rgba(201,247,251,.76);
  box-shadow:0 6px 15px rgba(0,84,127,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
.mq-shell[data-skin="ocean"] .mq-univers-tag {
  color:#fff;
  background:linear-gradient(110deg,#4cd8e3,#167fbd);
  box-shadow:0 6px 14px rgba(0,78,124,.24);
}
.mq-shell[data-skin="ocean"] .mq-univers-lock {
  color:#0c6385;
  background:linear-gradient(145deg,#f8fdff,#def2f6);
  border:1px solid rgba(153,216,227,.72);
  box-shadow:0 6px 14px rgba(0,49,77,.15);
}
.mq-shell[data-skin="ocean"] .mq-univers-arrow {
  color:#07587f;
  background:linear-gradient(145deg,#fbfeff,#dff3f7);
  border:1px solid rgba(151,216,227,.76);
  box-shadow:0 7px 18px rgba(0,45,73,.16),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="ocean"] .mq-univers-dots i { background:rgba(202,242,247,.28); }
.mq-shell[data-skin="ocean"] .mq-univers-dots i.is-on {
  background:linear-gradient(90deg,#75e3ec,#20bcd5,#147bc6);
}
.mq-shell[data-skin="ocean"] .mq-univers-danger i { background:rgba(15,102,137,.13); }
.mq-shell[data-skin="ocean"] .mq-univers-danger i.is-on,
.mq-shell[data-skin="ocean"] .mq-univers-stats b i {
  background:linear-gradient(90deg,#67dee8,#1bb5d0,#1579bf);
}
.mq-shell[data-skin="ocean"] .mq-univers-stats { color:#4d7485; }
.mq-shell[data-skin="ocean"] .mq-univers-stats b { background:rgba(9,103,139,.09); }

/* CTA : bleu ocean profond, pas vert menthe. */
.mq-shell[data-skin="ocean"] .mq-setup-foot .mq-btn:not(.is-unlock) {
  color:#f9feff;
  background:linear-gradient(112deg,#22bed4 0%,#107fb8 55%,#075b94 100%) !important;
  border:1px solid rgba(191,241,247,.82);
  box-shadow:0 4px 0 #064a78,0 11px 24px rgba(0,45,73,.30),inset 0 1px 0 rgba(255,255,255,.26) !important;
  text-shadow:0 1px 2px rgba(0,34,59,.34);
}
.mq-shell[data-skin="ocean"] .mq-setup-foot .mq-btn:not(.is-unlock):active {
  box-shadow:0 1px 0 #064a78,0 6px 14px rgba(0,45,73,.24) !important;
}

/* Formats / experience : perle claire + mini-grilles saphir. */
.mq-shell[data-skin="ocean"] .mq-view[data-view="miseEnPlace"] .mq-carreau {
  background:linear-gradient(148deg,#fbfeff 0%,#e9f7fa 100%);
  border:1px solid rgba(164,219,229,.88);
  box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(0,45,72,.14);
}
.mq-shell[data-skin="ocean"] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] {
  background:linear-gradient(145deg,#f9feff 0%,#dcf3f7 100%);
  border-color:#28bdd4;
  box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(40,189,212,.15),0 11px 24px rgba(0,65,100,.19);
}
.mq-shell[data-skin="ocean"] .mq-carreau[aria-checked="true"]::after {
  border-color:#f5feff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 24%,#63e1eb 0%,#21b9d3 48%,#116da9 100%);
  box-shadow:0 6px 14px rgba(0,65,100,.23),0 0 0 3px rgba(111,226,236,.13);
}
.mq-shell[data-skin="ocean"] .mq-carreau strong { color:#073c58; }
.mq-shell[data-skin="ocean"] .mq-carreau small { color:#52798a; }
.mq-shell[data-skin="ocean"] .mq-carreau .mq-price { color:#0c7699; }
.mq-shell[data-skin="ocean"] .mq-carreau-ico {
  color:#08779d;
  background:linear-gradient(145deg,#f9feff,#dff2f6);
  border:1px solid rgba(160,218,228,.72);
  box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(0,51,80,.13);
}
.mq-shell[data-skin="ocean"] .mq-mini-grille {
  background:linear-gradient(145deg,#f8feff,#d9eef3);
  border:1px solid rgba(155,216,227,.66);
  box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(0,52,82,.11);
}
.mq-shell[data-skin="ocean"] .mq-mini-grille i {
  background:linear-gradient(145deg,#5edce6 0%,#20b8d2 50%,#116fab 100%);
  box-shadow:inset 0 1px 0 rgba(235,255,255,.46);
}

/* Gameplay : davantage de profondeur et aucun vert generique. */
.mq-shell[data-skin="ocean"] .mq-board-wrap::before {
  background:linear-gradient(180deg,rgba(1,45,79,.24),rgba(1,24,53,.40));
  border-color:rgba(129,230,241,.46);
  box-shadow:0 14px 32px rgba(0,23,55,.26),inset 0 0 28px rgba(51,205,221,.08);
}
.mq-shell[data-skin="ocean"] .mq-card .mq-face {
  border-color:#d8f7fb;
  box-shadow:0 6px 15px rgba(0,26,60,.32);
}
.mq-shell[data-skin="ocean"] .mq-score-chip.is-turn {
  border-color:#71dce8 !important;
  background:linear-gradient(180deg,#fbfeff,#def5f9) !important;
  box-shadow:0 0 0 2px rgba(73,205,222,.14),0 6px 18px rgba(0,52,83,.17) !important;
}
.mq-shell[data-skin="ocean"] .mq-turn-dot {
  background:#24bfd8;
  box-shadow:0 0 0 3px rgba(36,191,216,.15),0 0 10px rgba(73,218,233,.48);
}
.mq-shell[data-skin="ocean"] .mq-game-progress i {
  background:linear-gradient(90deg,#6ce4ee 0%,#24c5dc 48%,#147fcb 100%) !important;
  box-shadow:0 0 10px rgba(45,198,220,.46);
}
.mq-shell[data-skin="ocean"] .mq-card.is-done .mq-face,
.mq-shell[data-skin="ocean"] .mq-card.is-done .mq-front {
  border-color:#69daec !important;
  box-shadow:0 0 0 2px rgba(77,211,232,.18),0 7px 17px rgba(0,48,82,.26) !important;
}
.mq-shell[data-skin="ocean"] .mq-front .mq-card-fallback,
.mq-card-preview-layer[data-skin="ocean"] .mq-card-fallback {
  color:#f5feff;
  background:linear-gradient(150deg,#1087b8 0%,#07618f 54%,#043d65 100%);
  border:1px solid rgba(171,235,242,.68);
  text-shadow:0 1px 2px rgba(0,28,49,.62);
}
.mq-card-preview-layer[data-skin="ocean"] .mq-card-preview-surface {
  border-color:#a9e4ec;
  background:linear-gradient(152deg,#23bed3 0%,#0d8eb9 44%,#075f8e 77%,#043c62 100%);
  box-shadow:0 18px 42px rgba(0,26,55,.40),0 0 0 3px rgba(98,220,234,.16);
}
.mq-card-preview-layer[data-skin="ocean"] .mq-card-preview-surface.is-image-error > .mq-card-fallback {
  inset:5%;border-radius:14%;display:flex;align-items:center;justify-content:center;
}
.mq-card-preview-layer[data-skin="ocean"] .mq-card-preview-surface.is-image-error > .mq-card-name { display:none!important; }

/* Reactions / attente reseau. */
.mq-shell[data-skin="ocean"] .mq-game-popover {
  background:linear-gradient(155deg,#fbfeff,#e5f5f8);
  border-color:#9ed9e4;
  box-shadow:0 18px 42px rgba(0,35,64,.28),inset 0 1px 0 #fff;
}
.mq-shell[data-skin="ocean"] .mq-reaction-tile {
  color:#073e5a;
  background:linear-gradient(145deg,#f9feff,#e2f3f7);
  border-color:#a5dce6;
}
.mq-shell[data-skin="ocean"] .mq-reaction-tile:hover,
.mq-shell[data-skin="ocean"] .mq-reaction-tile:focus-visible {
  background:linear-gradient(145deg,#f7fdff,#d8eef3);
  border-color:#2dbdd3;
}
.mq-shell[data-skin="ocean"] .mq-reaction-bubble {
  color:#073e5a;
  background:linear-gradient(105deg,#f9feff,#e1f3f6);
  border-color:#7fd5e1;
}
.mq-shell[data-skin="ocean"] .mq-online-activity-wait {
  color:#eafcff;
  background:rgba(4,72,105,.78);
  border-color:rgba(126,224,235,.38);
}
.mq-shell[data-skin="ocean"] .mq-online-activity-wait > span svg { color:#75dfeb; }
.mq-shell[data-skin="ocean"] .mq-online-activity-wait > strong { background:#0c779e;color:#f1fdff; }

/* Tres petits ecrans : contenu lisible et CTA accessible. */
@media (max-width:340px), (max-height:620px) {
  .mq-shell[data-skin="ocean"] .mq-univers-stage { --card-w:min(244px,76vw)!important; }
  .mq-shell[data-skin="ocean"] .mq-univers-card { margin-top:calc(var(--card-w) / -.82 / 2 + 4%)!important; }
  .mq-shell[data-skin="ocean"] .mq-univers-art { top:-13%;width:94%;margin-left:-47%; }
  .mq-shell[data-skin="ocean"] .mq-univers-meta { padding-bottom:9px; }
  .mq-shell[data-skin="ocean"] .mq-univers-name { font-size:clamp(18px,5.8vw,22px); }
  .mq-shell[data-skin="ocean"] .mq-univers-sub,
  .mq-shell[data-skin="ocean"] .mq-univers-pill { padding:5px 9px;margin-top:5px; }
  .mq-shell[data-skin="ocean"] .mq-univers-dots { padding:2px 0 3px; }
}

/* =========================================================================
   MEMOQUEST v87 — MASTER THEME QA / ALL PAGES
   Dernière couche de garde-fou : chaque écran consomme les jetons du thème.
   Couvre Accueil, Profil, Mise en place, Histoire, Boutique, Réglages,
   Multijoueur, Tournois, Partie, Résultats, feuilles, dialogues et états.
   ========================================================================= */

/* 1) THÈME PRINCIPAL / LAGON : restaurer exactement la petite étoile blanche
      historique au dos des cartes. Aucun pictogramme feuille n'est autorisé. */
.mq-shell[data-skin="jade"] .mq-back::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:no-repeat center / 46% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.4c.4 0 .8.25 1 .63l2.5 5.06 5.6.82c.9.13 1.26 1.24.6 1.87l-4.05 3.94.96 5.57c.15.9-.8 1.58-1.6 1.15L12 18.82l-5 2.63c-.8.43-1.75-.25-1.6-1.15l.96-5.57-4.05-3.94c-.66-.63-.3-1.74.6-1.87l5.6-.82L11 3.03c.2-.38.6-.63 1-.63Z'/%3E%3C/svg%3E") !important;
  filter:drop-shadow(0 3px 4px rgba(21,60,122,.28)) !important;
  opacity:1 !important;
}
.mq-shell[data-skin="jade"] .mq-back::after { content:none !important; display:none !important; }

/* 2) Palette d'Accueil : l'écran d'accueil fait désormais réellement partie
      du thème actif. Jade conserve strictement sa palette historique. */
.mq-shell[data-skin="jade"] {
  --mq-home-bg:radial-gradient(circle at 12% 24%,rgba(255,255,255,.32) 0 1px,transparent 2px),radial-gradient(circle at 86% 30%,rgba(255,255,255,.42) 0 1.4px,transparent 2.5px),linear-gradient(180deg,#20b8ee 0%,#78d7f5 24%,#d8f1fb 53%,#eef8f1 72%,#fff1d2 100%);
}
.mq-shell[data-skin="ocean"] {
  --mq-home-bg:radial-gradient(circle at 50% -8%,rgba(222,255,255,.88),transparent 34%),radial-gradient(circle at 12% 52%,rgba(77,225,235,.16),transparent 34%),linear-gradient(180deg,#37c9df 0%,#168eaf 32%,#08688e 66%,#043b61 100%);
}
.mq-shell[data-skin="grenat"] {
  --mq-home-bg:radial-gradient(circle at 50% -12%,rgba(255,225,202,.22),transparent 38%),radial-gradient(circle at 12% 48%,rgba(198,69,95,.18),transparent 34%),linear-gradient(180deg,#7f2b42 0%,#5b1d30 42%,#3d111d 76%,#260a13 100%);
}
.mq-shell[data-skin="ardoise"] {
  --mq-home-bg:radial-gradient(circle at 50% -10%,rgba(154,229,236,.15),transparent 37%),radial-gradient(circle at 12% 58%,rgba(105,151,165,.13),transparent 34%),linear-gradient(180deg,#314953 0%,#21343d 38%,#15242b 72%,#0d171c 100%);
}
.mq-shell[data-skin="ambre"] {
  --mq-home-bg:radial-gradient(circle at 50% -8%,rgba(255,247,201,.85),transparent 32%),radial-gradient(circle at 12% 58%,rgba(190,87,20,.14),transparent 34%),linear-gradient(180deg,#f7a33e 0%,#ffc76e 30%,#f5d89f 66%,#e3b977 100%);
}
.mq-shell[data-skin="nuit"] {
  --mq-home-bg:radial-gradient(circle at 50% -10%,rgba(133,190,255,.18),transparent 34%),radial-gradient(circle at 15% 46%,rgba(112,104,224,.14),transparent 31%),linear-gradient(180deg,#151f35 0%,#0e1728 36%,#09111f 70%,#050a13 100%);
}
.mq-shell[data-screen="accueil"][data-skin] { background:var(--mq-home-bg) !important; }

/* Les composants de l'accueil ne reviennent plus arbitrairement au bleu Lagon. */
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-avatar,
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-chip .mq-plus { background:var(--mq-button-bg) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-avatar { box-shadow:0 0 0 3px color-mix(in srgb,var(--mq-accent) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.28) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-brand h1 .is-m { color:var(--mq-screen-accent) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-brand h1 .is-q { color:var(--mq-screen-text) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-brand p { color:var(--mq-screen-secondary) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-back { background:var(--mq-game-card-back) !important;border-color:var(--mq-game-card-border) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-play { background:linear-gradient(160deg,var(--mq-surface-raised),var(--mq-surface-soft)) !important;color:var(--mq-text) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-play::before { background:linear-gradient(120deg,color-mix(in srgb,var(--mq-accent) 58%,transparent),rgba(255,255,255,0) 45%,color-mix(in srgb,var(--mq-accent-2) 48%,transparent)) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-play-ic { background:var(--mq-button-bg) !important;box-shadow:0 8px 18px color-mix(in srgb,var(--mq-accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.26) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-play-t > span { background:linear-gradient(100deg,var(--mq-accent),var(--mq-accent-2)) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-loader-bar i { background:linear-gradient(90deg,var(--mq-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-nav button.is-on { color:var(--mq-accent) !important;background:color-mix(in srgb,var(--mq-accent) 11%,var(--mq-surface)) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-nav button.is-on::after { background:var(--mq-accent) !important; }

/* 3) Surfaces globales. Les anciennes pages construites avec des blancs/bleus
      codés en dur sont rabattues vers les tokens du thème. */
.mq-shell[data-skin] :is(
  .mq-profile-identity,.mq-profile-metric,.mq-profile-panel,.mq-avatar-picker,
  .mq-settings-row,.mq-theme-panel,.mq-reset-row,.mq-promo-card,
  .mq-online-age-card,.mq-online-form-card,.mq-waiting-card,.mq-room-preview,.mq-launch-error,
  .mq-online-resume,.mq-quick-rule,.mq-competitive-card,.mq-room-code,
  .mq-rematch-dialog,.mq-tp-card,.mq-tp-choice,.mq-tp-toggle,.mq-tp-foot,
  .mq-mission,.mq-story-atlas-dock,.mq-game-sheet,.mq-sheet,.mq-tips-card,.mq-privacy-panel
) {
  background:linear-gradient(155deg,var(--mq-surface-raised),var(--mq-surface)) !important;
  color:var(--mq-text) !important;
  border-color:var(--mq-border) !important;
  box-shadow:var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] :is(
  .mq-profile-identity,.mq-profile-metric,.mq-profile-panel,.mq-avatar-picker,
  .mq-settings-row,.mq-theme-panel,.mq-reset-row,.mq-promo-card,
  .mq-online-age-card,.mq-online-form-card,.mq-waiting-card,.mq-room-preview,.mq-launch-error,
  .mq-online-resume,.mq-quick-rule,.mq-competitive-card,.mq-room-code,
  .mq-rematch-dialog,.mq-tp-card,.mq-tp-choice,.mq-tp-toggle,
  .mq-mission,.mq-story-atlas-dock
) :is(h1,h2,h3,h4,strong,b,dt) { color:var(--mq-text) !important; }
.mq-shell[data-skin] :is(
  .mq-profile-identity,.mq-profile-metric,.mq-profile-panel,.mq-avatar-picker,
  .mq-settings-row,.mq-theme-panel,.mq-reset-row,.mq-promo-card,
  .mq-online-age-card,.mq-online-form-card,.mq-waiting-card,.mq-room-preview,.mq-launch-error,
  .mq-online-resume,.mq-quick-rule,.mq-competitive-card,.mq-room-code,
  .mq-rematch-dialog,.mq-tp-card,.mq-tp-choice,.mq-tp-toggle,
  .mq-mission,.mq-story-atlas-dock
) :is(p,small,dd,label) { color:var(--mq-text-secondary) !important; }

/* 4) Profil : icônes, jauges et actions suivent la palette active. */
.mq-shell[data-skin] .mq-profile-heading button { background:var(--mq-surface-raised) !important;color:var(--mq-accent-strong) !important;border:1px solid var(--mq-border) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-profile-panel > h3 svg { color:var(--mq-accent) !important; }
.mq-shell[data-skin] :is(.mq-profile-meter,.mq-profile-xp) { background:color-mix(in srgb,var(--mq-text) 11%,transparent) !important; }
.mq-shell[data-skin] :is(.mq-profile-meter,.mq-profile-xp) i { background:linear-gradient(90deg,var(--mq-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-skin] .mq-profile-edit { background:color-mix(in srgb,var(--mq-accent) 10%,var(--mq-surface)) !important;color:var(--mq-accent-strong) !important;border-color:var(--mq-border-active) !important; }
.mq-shell[data-skin] .mq-avatar-option.is-selected { border-color:var(--mq-border-active) !important;box-shadow:var(--mq-glow),var(--mq-shadow-soft) !important; }

/* 5) Boutique / Réglages : états Disponibles/Actifs et champs ne reprennent
      plus le turquoise du thème principal. */
.mq-shell[data-skin] .mq-opt { background:var(--mq-surface) !important;color:var(--mq-text) !important;border-color:var(--mq-border) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-opt strong { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-opt small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-opt :is(.mq-ready,.mq-theme-copy small.is-active) { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-opt[aria-checked="true"],
.mq-shell[data-skin] .mq-opt.is-on,
.mq-shell[data-skin] .mq-theme-option.is-active { border-color:var(--mq-border-active) !important;box-shadow:var(--mq-glow),var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-settings-icon { background:color-mix(in srgb,var(--mq-accent) 11%,var(--mq-surface-soft)) !important;color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-switch { background:color-mix(in srgb,var(--mq-text) 15%,var(--mq-surface-soft)) !important; }
.mq-shell[data-skin] .mq-settings-row[aria-pressed="true"] .mq-switch { background:linear-gradient(105deg,var(--mq-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-skin] :is(.mq-input,.mq-premium-field input,.mq-premium-field select,.mq-promo-entry input,.mq-dob-field input) { background:var(--mq-surface-raised) !important;color:var(--mq-text) !important;border-color:var(--mq-border) !important;caret-color:var(--mq-accent) !important; }
.mq-shell[data-skin] :is(.mq-input,.mq-premium-field input,.mq-premium-field select,.mq-promo-entry input,.mq-dob-field input):focus { border-color:var(--mq-border-active) !important;box-shadow:var(--mq-glow) !important; }

/* 6) Mise en place : couche commune pour Jade et Ardoise + garde-fou pour
      toutes les étapes (expérience, difficulté, catégorie, mode, format). */
.mq-shell[data-skin] .mq-setup-back { background:var(--mq-surface-raised) !important;color:var(--mq-accent-strong) !important;border:1px solid var(--mq-border) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-setup-steps i { background:color-mix(in srgb,var(--mq-text) 12%,transparent) !important; }
.mq-shell[data-skin] .mq-setup-steps i.is-on { background:linear-gradient(90deg,var(--mq-accent),var(--mq-accent-2)) !important;box-shadow:0 2px 9px color-mix(in srgb,var(--mq-accent) 28%,transparent) !important; }
.mq-shell[data-skin] .mq-univers-counter { background:color-mix(in srgb,var(--mq-surface) 92%,transparent) !important;color:var(--mq-text-secondary) !important;border-color:var(--mq-border) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-univers-counter b { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-view[data-view="miseEnPlace"] .mq-carreau { background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface)) !important;border-color:var(--mq-border) !important;color:var(--mq-text) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-view[data-view="miseEnPlace"] .mq-carreau[aria-checked="true"] { background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface-selected)) !important;border-color:var(--mq-border-active) !important;box-shadow:var(--mq-glow),var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-view[data-view="miseEnPlace"] .mq-carreau strong { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-view[data-view="miseEnPlace"] .mq-carreau small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-carreau-ico { background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface-soft)) !important;color:var(--mq-accent-strong) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-mini-grille { background:color-mix(in srgb,var(--mq-accent) 8%,var(--mq-surface-soft)) !important; }
.mq-shell[data-skin] .mq-mini-grille i { background:linear-gradient(145deg,var(--mq-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-skin] .mq-setup-foot .mq-btn { color:var(--mq-button-text) !important;background:var(--mq-button-bg) !important;border-color:color-mix(in srgb,var(--mq-accent) 45%,transparent) !important;box-shadow:0 5px 0 var(--mq-button-edge),var(--mq-shadow-soft) !important; }

/* 7) Multijoueur : toutes les pages (âge, hub, recherche, création,
      rejoindre, attente, aperçu, préparation, match et erreur). */
.mq-shell[data-skin] .mq-online-head .mq-setup-back { background:var(--mq-surface-raised) !important;color:var(--mq-accent-strong) !important;border-color:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-online-age-card h3,
.mq-shell[data-skin] .mq-room-preview-hero h3,
.mq-shell[data-skin] .mq-launch-error h3 { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-online-age-card p,
.mq-shell[data-skin] .mq-room-preview-hero p,
.mq-shell[data-skin] .mq-launch-error p,
.mq-shell[data-skin] .mq-premium-field > span,
.mq-shell[data-skin] .mq-dob-field > span,
.mq-shell[data-skin] .mq-code-field > span { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-online-hero-icon,
.mq-shell[data-skin] .mq-room-preview-hero > span,
.mq-shell[data-skin] .mq-search-core { background:var(--mq-button-bg) !important;color:var(--mq-button-text) !important;border-color:var(--mq-surface-raised) !important;box-shadow:0 10px 22px color-mix(in srgb,var(--mq-accent) 28%,transparent) !important; }
.mq-shell[data-skin] .mq-code-cells i { background:var(--mq-surface-raised) !important;color:var(--mq-text) !important;border-color:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-code-cells i.is-active { border-color:var(--mq-border-active) !important;box-shadow:var(--mq-glow) !important; }
.mq-shell[data-skin] .mq-privacy-check { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-privacy-check i { background:var(--mq-surface-raised) !important;border-color:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-privacy-check input:checked + i { background:var(--mq-accent) !important;border-color:var(--mq-accent) !important;box-shadow:0 5px 12px color-mix(in srgb,var(--mq-accent) 25%,transparent) !important; }
.mq-shell[data-skin] .mq-consent-link { color:var(--mq-accent-strong) !important;background:color-mix(in srgb,var(--mq-accent) 8%,var(--mq-surface)) !important; }

/* Hub Arène : le texte reste lisible même si une animation est interrompue.
   Les cartes d'actions ne deviennent jamais transparentes sur le décor. */
.mq-shell[data-skin] .mq-arena { background:linear-gradient(155deg,var(--mq-accent-strong),var(--mq-accent-2)) !important;box-shadow:0 18px 40px color-mix(in srgb,var(--mq-bg) 42%,rgba(0,0,0,.18)) !important; }
.mq-shell[data-skin] .mq-arena-act { background:linear-gradient(160deg,var(--mq-surface-raised),var(--mq-surface)) !important;color:var(--mq-text) !important;border-color:var(--mq-border) !important;box-shadow:var(--mq-shadow-soft) !important;opacity:1; }
.mq-shell[data-skin] .mq-arena-copy strong { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-arena-copy small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-arena-chev { background:color-mix(in srgb,var(--mq-accent) 8%,var(--mq-surface-soft)) !important;color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-arena-format em { background:var(--mq-surface-raised) !important;color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-arena-bar i { background:linear-gradient(90deg,var(--mq-screen-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-skin] .mq-waiting-card.is-premium { background:linear-gradient(155deg,var(--mq-surface-raised),var(--mq-surface)) !important; }
.mq-shell[data-skin] .mq-search-player small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-search-player > span { background:var(--mq-button-bg) !important;border-color:var(--mq-surface-raised) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-search-player.is-guest > span { color:var(--mq-text-muted) !important;background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface-soft)) !important; }
.mq-shell[data-skin] .mq-prepare-bar { background:color-mix(in srgb,var(--mq-text) 12%,transparent) !important; }
.mq-shell[data-skin] .mq-prepare-bar i { background:linear-gradient(90deg,var(--mq-accent),var(--mq-accent-2)) !important; }

/* 8) Tournois : toutes les sélections se branchent enfin sur le thème. */
.mq-shell[data-skin] .mq-tp { background:linear-gradient(180deg,var(--mq-bg),color-mix(in srgb,var(--mq-surface) 22%,var(--mq-bg)),var(--mq-bg)) !important;color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-tp-choice { background:var(--mq-surface) !important;color:var(--mq-text) !important;border-color:var(--mq-border) !important;box-shadow:var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-tp-choice small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-tp-choice .mq-tp-ic { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-tp-choice.mq-tp-selected { border-color:var(--mq-border-active) !important;background:var(--mq-surface-selected) !important;box-shadow:var(--mq-glow),var(--mq-shadow-soft) !important; }
.mq-shell[data-skin] .mq-tp-choice.mq-tp-selected .mq-tp-choice-mark { background-color:var(--mq-accent) !important;border-color:var(--mq-accent) !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"),linear-gradient(105deg,var(--mq-accent),var(--mq-accent-2)) !important;box-shadow:0 4px 10px color-mix(in srgb,var(--mq-accent) 28%,transparent) !important; }
.mq-shell[data-skin] .mq-tp-section-label h3 { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-tp-toggle[aria-checked="true"] { border-color:var(--mq-border-active) !important; }
.mq-shell[data-skin] :is(.mq-tp-primary,.mq-tp-gold) { background:var(--mq-button-bg) !important;color:var(--mq-button-text) !important;border-color:transparent !important; }

/* 9) Résultats / revanche / modales : aucune feuille blanche générique sur
      les thèmes sombres ; aucun bleu Lagon sur les thèmes chauds. */
.mq-shell[data-skin] .mq-rematch-dialog-layer { background:color-mix(in srgb,var(--mq-bg) 58%,rgba(0,0,0,.35)) !important; }
.mq-shell[data-skin] .mq-rematch-dialog-icon { background:var(--mq-button-bg) !important;border-color:var(--mq-surface-raised) !important;box-shadow:0 13px 30px color-mix(in srgb,var(--mq-accent) 28%,transparent) !important; }
.mq-shell[data-skin] .mq-rematch-dialog > small { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-final-home { color:var(--mq-text) !important;background:var(--mq-surface-raised) !important;border-color:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-final-replay { color:var(--mq-button-text) !important;background:var(--mq-button-bg) !important;border-color:transparent !important;box-shadow:0 5px 0 var(--mq-button-edge),var(--mq-shadow-soft) !important; }

/* 10) Gameplay : le succès de paire est artistique, le vert reste réservé aux
       validations sémantiques des activités pédagogiques. */
.mq-shell[data-skin] .mq-card.is-done .mq-face { border-color:var(--mq-game-match) !important;box-shadow:0 0 0 2px color-mix(in srgb,var(--mq-game-match) 20%,transparent),0 0 18px color-mix(in srgb,var(--mq-game-match) 28%,transparent),var(--mq-game-card-shadow) !important; }
.mq-shell[data-skin] .mq-game-progress i { background:var(--mq-game-progress-fill) !important; }
.mq-shell[data-skin] .mq-turn-dot { background:var(--mq-game-active) !important; }

/* 11) Ardoise : finition manquante du parcours avant partie. */
.mq-shell[data-skin="ardoise"] .mq-univers-body { background:linear-gradient(165deg,#2b3f49 0%,#1b2b33 58%,#132029 100%) !important;border-color:#526b76 !important;box-shadow:0 15px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05) !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-name { color:#f3f7f9 !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-name em,
.mq-shell[data-skin="ardoise"] .mq-univers-sub { color:#c4d1d6 !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-sub { background:rgba(101,214,223,.08) !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-counter { background:rgba(27,41,48,.94) !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-dots i { background:rgba(190,211,219,.18) !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-dots i.is-on { background:#65d6df !important;box-shadow:0 0 0 3px rgba(101,214,223,.13) !important; }
.mq-shell[data-skin="ardoise"] .mq-univers-arrow { background:#253841 !important;color:#78e3ea !important;border-color:#506a75 !important; }

/* 12) Main/Jade : ne pas transformer l'identité historique. Les pages utilisent
       les tokens mais les cartes gardent le dégradé bleu/turquoise + étoile. */
.mq-shell[data-skin="jade"] .mq-game-card-back { background:linear-gradient(168deg,#62e0da 0%,#35b8ea 52%,#2e86e0 100%); }

/* 13) Accessibilité et petites tailles : aucune surface interactive importante
       ne peut devenir illisible ou trop petite. */
.mq-shell[data-skin] :is(.mq-arena-act,.mq-settings-row,.mq-tp-choice,.mq-carreau,.mq-opt,.mq-btn,.mq-icon-btn,.mq-game-action) { -webkit-tap-highlight-color:transparent; }
.mq-shell[data-skin] :is(.mq-arena-act,.mq-settings-row,.mq-btn,.mq-icon-btn) { min-height:44px; }
@media (max-width:360px) {
  .mq-shell[data-skin] .mq-arena-act { grid-template-columns:52px minmax(0,1fr) 28px;gap:8px;padding:9px;border-radius:20px; }
  .mq-shell[data-skin] .mq-arena-ic { width:52px;height:52px;border-radius:17px; }
  .mq-shell[data-skin] .mq-arena-copy strong { font-size:.98rem; }
  .mq-shell[data-skin] .mq-arena-copy small { font-size:.68rem;line-height:1.22; }
}
@media (prefers-reduced-motion:reduce) {
  .mq-shell[data-skin] .mq-arena,
  .mq-shell[data-skin] .mq-arena-act,
  .mq-shell[data-skin] .mq-search-core i,
  .mq-shell[data-skin] .mq-h2-play::after { animation:none !important; }
}

/* =========================================================================
   MEMOQUEST v87 — MASTER THEME QA / PASS 2
   Pages restantes: Accueil FX, Histoire, Tournois et Résultats.
   ========================================================================= */

/* ACCUEIL — les effets de validation suivent le thème au lieu de rester
   vert/turquoise Lagon. Le thème principal garde volontairement son rendu. */
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-front::after {
  box-shadow:inset 0 0 0 3px var(--mq-accent),inset 0 0 24px color-mix(in srgb,var(--mq-accent) 36%,transparent) !important;
}
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-spark {
  background:radial-gradient(circle,#fff 0%,color-mix(in srgb,var(--mq-accent) 35%,#fff) 30%,color-mix(in srgb,var(--mq-accent) 58%,transparent) 55%,transparent 72%) !important;
}
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-bolt-glow { stroke:color-mix(in srgb,var(--mq-accent) 78%,#fff) !important; }
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-seal {
  background:linear-gradient(145deg,color-mix(in srgb,var(--mq-accent) 66%,#fff),var(--mq-accent-strong)) !important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--mq-accent) 38%,transparent),inset 0 3px 0 rgba(255,255,255,.45),0 0 0 4px var(--mq-surface-raised) !important;
}
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-ring {
  border-color:var(--mq-surface-raised) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mq-accent) 58%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--mq-accent) 58%,transparent) !important;
}
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-shard {
  background:var(--mq-surface-raised) !important;
  box-shadow:0 0 12px 2px color-mix(in srgb,var(--mq-surface-raised) 82%,transparent),0 0 22px color-mix(in srgb,var(--mq-accent) 65%,transparent) !important;
}
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-tip {
  border:1px solid var(--mq-border) !important;
  box-shadow:var(--mq-shadow),0 0 0 1.5px color-mix(in srgb,var(--mq-accent) 28%,transparent) !important;
}
.mq-shell[data-screen="accueil"][data-skin]:not([data-skin="jade"]) .mq-h2-tip-arrow {
  background:var(--mq-surface-raised) !important;
  box-shadow:2px 2px 0 0 color-mix(in srgb,var(--mq-accent) 28%,var(--mq-border)) !important;
}

/* HISTOIRE / ATLAS — le contenu narratif conserve sa couleur de chapitre,
   mais toutes les surfaces et tous les textes appartiennent au thème actif. */
.mq-shell[data-skin] .mq-story-atlas {
  background:var(--mq-bg) !important;
  color:var(--mq-text) !important;
  box-shadow:var(--mq-shadow) !important;
}
.mq-shell[data-skin] .mq-story-atlas-head {
  background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface)) !important;
  border-color:var(--mq-border) !important;
  box-shadow:var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-story-atlas-head .mq-eyebrow { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-story-atlas-head h2 { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-story-atlas-head>span {
  color:var(--mq-accent-strong) !important;
  background:color-mix(in srgb,var(--mq-accent) 9%,var(--mq-surface-raised)) !important;
  border-color:var(--mq-border) !important;
}
.mq-shell[data-skin] .mq-story-atlas-head>span :is(b,small,svg) { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-story-atlas-progress { background:color-mix(in srgb,var(--mq-text) 12%,var(--mq-surface-soft)) !important; }
.mq-shell[data-skin] .mq-story-atlas-progress i { background:linear-gradient(90deg,var(--mq-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-skin] .mq-story-atlas-head>small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-story-atlas-map { background:var(--mq-bg-2) !important; }
.mq-shell[data-skin] .mq-story-region {
  background:linear-gradient(180deg,color-mix(in srgb,var(--atlas-wash) 17%,var(--mq-bg-2)) 0%,var(--mq-bg-2) 92%) !important;
  border-color:var(--mq-border) !important;
}
.mq-shell[data-skin] .mq-story-region-hero>h3 { color:var(--mq-text) !important;text-shadow:none !important; }
.mq-shell[data-skin] .mq-story-region-hero>small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-story-region-hero>p { color:color-mix(in srgb,var(--atlas-accent) 45%,var(--mq-accent-strong)) !important; }
.mq-shell[data-skin] .mq-story-region-hero>b {
  color:var(--mq-accent-strong) !important;
  background:color-mix(in srgb,var(--mq-surface-raised) 94%,transparent) !important;
  border-color:var(--mq-border) !important;
  box-shadow:var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-story-region-bridge { color:var(--mq-text-muted) !important; }
.mq-shell[data-skin] .mq-story-region-bridge::before,
.mq-shell[data-skin] .mq-story-region-bridge::after { background:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-story-atlas-dock {
  background:color-mix(in srgb,var(--mq-surface) 96%,transparent) !important;
  border-color:var(--mq-border) !important;
  box-shadow:0 -8px 24px color-mix(in srgb,var(--mq-bg) 28%,transparent) !important;
}
.mq-shell[data-skin] .mq-story-region.is-locked::after {
  background:linear-gradient(180deg,color-mix(in srgb,var(--mq-bg) 20%,transparent),color-mix(in srgb,var(--mq-bg) 42%,transparent)) !important;
}

/* TOURNOIS — une même règle fonctionne sur les thèmes clairs ET sombres.
   La surface principale suit les surfaces du thème, pas son fond décoratif. */
.mq-shell[data-skin] .mq-tp {
  background:linear-gradient(180deg,var(--mq-surface-soft) 0%,var(--mq-surface) 52%,color-mix(in srgb,var(--mq-surface) 92%,var(--mq-bg-2)) 100%) !important;
  color:var(--mq-text) !important;
}
.mq-shell[data-skin] .mq-tp-screen-head {
  background:color-mix(in srgb,var(--mq-surface) 94%,transparent) !important;
  border-bottom:1px solid var(--mq-border) !important;
}
.mq-shell[data-skin] .mq-tp-screen-head h1,
.mq-shell[data-skin] .mq-tp h2,
.mq-shell[data-skin] .mq-tp h3 { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-tp-back,
.mq-shell[data-skin] .mq-tp-round-button { background:var(--mq-surface-raised) !important;color:var(--mq-accent-strong) !important;border-color:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-tp-foot { background:var(--mq-surface) !important;border-color:var(--mq-border) !important; }
.mq-shell[data-skin] .mq-tp-choice.mq-tp-selected::after { background:var(--mq-accent) !important; }
.mq-shell[data-skin] .mq-tp-toggle[aria-checked="true"] .mq-tp-switch { background:linear-gradient(105deg,var(--mq-accent),var(--mq-accent-2)) !important; }
.mq-shell[data-skin] .mq-tp-round-progress .mq-tp-on { background:var(--mq-accent) !important; }
.mq-shell[data-skin] .mq-tp-standings-row.mq-tp-mine { background:color-mix(in srgb,var(--mq-accent) 11%,var(--mq-surface)) !important; }
.mq-shell[data-skin] .mq-tp-seat.mq-tp-me .mq-tp-avatar { box-shadow:0 0 0 3px var(--mq-accent) !important; }

/* RÉSULTATS — la récompense et les statistiques ne redeviennent plus des
   cartes blanches/bleues sur Grenat, Nuit, Ardoise ou Ambre. */
.mq-shell[data-skin] .mq-final-reward {
  background:linear-gradient(145deg,var(--mq-surface-raised),var(--mq-surface)) !important;
  border-color:var(--mq-border) !important;
  box-shadow:var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-final-reward-copy small { color:var(--mq-accent-strong) !important; }
.mq-shell[data-skin] .mq-final-reward-copy strong,
.mq-shell[data-skin] .mq-final-reward-total b,
.mq-shell[data-skin] .mq-final-reward-format b { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-final-reward-copy p,
.mq-shell[data-skin] .mq-final-reward-total,
.mq-shell[data-skin] .mq-final-reward-format { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-result-grid>div {
  background:var(--mq-surface-soft) !important;
  color:var(--mq-text) !important;
  border:1px solid var(--mq-border) !important;
}
.mq-shell[data-skin] .mq-result-grid>div small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-final-replay {
  color:var(--mq-button-text) !important;
  background:var(--mq-button-bg) !important;
  border-color:color-mix(in srgb,var(--mq-accent) 40%,transparent) !important;
  box-shadow:0 5px 0 var(--mq-button-edge),var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-final-result-page.is-loss .mq-final-replay {
  background:linear-gradient(135deg,var(--mq-error),color-mix(in srgb,var(--mq-error) 72%,#4b1020)) !important;
  box-shadow:0 5px 0 color-mix(in srgb,var(--mq-error) 58%,#2b0710),var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-final-home {
  color:var(--mq-text) !important;background:var(--mq-surface-raised) !important;border-color:var(--mq-border) !important;
}

/* =========================================================================
   MEMOQUEST v87 — MASTER THEME QA / PASS 3
   Contraste Histoire, progression Atlas et écrans Résultats.
   ========================================================================= */

/* HISTOIRE / ATLAS — états du parcours (courant, terminé, verrouillé) :
   aucun vert/cyan historique ne fuit dans les autres thèmes. */
.mq-shell[data-skin] .mq-atlas-road-base {
  stroke:color-mix(in srgb,var(--mq-text) 18%,var(--mq-bg-2)) !important;
}
.mq-shell[data-skin] .mq-atlas-road-done {
  stroke:var(--mq-accent) !important;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--mq-accent) 36%,transparent)) !important;
}
.mq-shell[data-skin] .mq-atlas-stop { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-atlas-orb {
  color:var(--mq-text-secondary) !important;
  background:linear-gradient(150deg,var(--mq-surface-raised),var(--mq-surface-soft)) !important;
  border-color:var(--mq-border) !important;
  box-shadow:0 5px 0 color-mix(in srgb,var(--mq-border) 75%,var(--mq-bg)),var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-atlas-label {
  background:color-mix(in srgb,var(--mq-surface-raised) 94%,transparent) !important;
  border-color:var(--mq-border) !important;
  box-shadow:var(--mq-shadow-soft) !important;
}
.mq-shell[data-skin] .mq-atlas-label strong { color:var(--mq-text) !important; }
.mq-shell[data-skin] .mq-atlas-label small { color:var(--mq-text-secondary) !important; }
.mq-shell[data-skin] .mq-atlas-stop.is-current .mq-atlas-orb,
.mq-shell[data-skin] .mq-atlas-stop.is-done .mq-atlas-orb {
  color:var(--mq-button-text) !important;
  background:linear-gradient(145deg,var(--mq-accent),var(--mq-accent-2)) !important;
  border-color:color-mix(in srgb,var(--mq-accent) 38%,var(--mq-surface-raised)) !important;
  box-shadow:0 5px 0 color-mix(in srgb,var(--mq-accent-strong) 70%,var(--mq-bg)),0 10px 22px color-mix(in srgb,var(--mq-accent) 28%,transparent) !important;
}
.mq-shell[data-skin] .mq-atlas-stop.is-current .mq-atlas-orb::before {
  border-color:color-mix(in srgb,var(--mq-accent) 42%,transparent) !important;
}
.mq-shell[data-skin] .mq-atlas-stop.is-current .mq-atlas-label {
  border-color:var(--mq-border-active) !important;
  background:var(--mq-surface-raised) !important;
}
.mq-shell[data-skin] .mq-atlas-stop.is-selected .mq-atlas-label {
  outline-color:color-mix(in srgb,var(--mq-accent) 42%,transparent) !important;
}

/* Océan et Grenat ont un fond narratif sombre mais un token texte pensé pour
   leurs cartes claires. Le héros de chapitre reçoit donc une teinte dédiée. */
.mq-shell[data-skin="ocean"] .mq-story-region-hero>h3 { color:#f4fdff !important;text-shadow:0 2px 10px rgba(1,48,73,.24) !important; }
.mq-shell[data-skin="ocean"] .mq-story-region-hero>small { color:#d5f2fa !important; }
.mq-shell[data-skin="ocean"] .mq-story-region-hero>p { color:#91f2f5 !important; }
.mq-shell[data-skin="grenat"] .mq-story-region-hero>h3 { color:#fff7ef !important;text-shadow:0 2px 10px rgba(40,7,15,.28) !important; }
.mq-shell[data-skin="grenat"] .mq-story-region-hero>small { color:#f5d9ce !important; }
.mq-shell[data-skin="grenat"] .mq-story-region-hero>p { color:#f0c18e !important; }

/* RÉSULTATS — chaque thème garde son univers jusqu'au dernier écran. */
.mq-shell[data-skin="ambre"] .mq-final-result-page,
.mq-shell[data-skin="ambre"] .mq-solo-result-page {
  background:radial-gradient(circle at 50% 2%,rgba(255,248,218,.72),transparent 24%),linear-gradient(180deg,#f5ae52 0%,#edc37b 36%,#d9994f 100%) !important;
  color:#512509 !important;
}
.mq-shell[data-skin="ocean"] .mq-final-result-page,
.mq-shell[data-skin="ocean"] .mq-solo-result-page {
  background:radial-gradient(circle at 50% 2%,rgba(211,254,255,.34),transparent 25%),linear-gradient(180deg,#18a9c4 0%,#087696 36%,#043d61 100%) !important;
  color:#f1fcff !important;
}
.mq-shell[data-skin="grenat"] .mq-final-result-page,
.mq-shell[data-skin="grenat"] .mq-solo-result-page {
  background:radial-gradient(circle at 50% 2%,rgba(255,225,205,.16),transparent 25%),linear-gradient(180deg,#76263d 0%,#501727 42%,#2d0b14 100%) !important;
}
.mq-shell[data-skin="ardoise"] .mq-final-result-page,
.mq-shell[data-skin="ardoise"] .mq-solo-result-page {
  background:radial-gradient(circle at 50% 2%,rgba(139,225,232,.12),transparent 25%),linear-gradient(180deg,#263b45 0%,#17272f 42%,#0b151a 100%) !important;
}
.mq-shell[data-skin="nuit"] .mq-final-result-page,
.mq-shell[data-skin="nuit"] .mq-solo-result-page {
  background:radial-gradient(circle at 50% 2%,rgba(118,157,255,.13),transparent 25%),linear-gradient(180deg,#121d33 0%,#0a1221 44%,#050a13 100%) !important;
}
.mq-shell[data-skin] .mq-final-result-page:not(.is-loss) .mq-final-particles i:nth-child(3n+1) { background:var(--mq-accent) !important; }
.mq-shell[data-skin] .mq-final-result-page:not(.is-loss) .mq-final-particles i:nth-child(3n+2) { background:var(--mq-accent-2) !important; }
.mq-shell[data-skin] .mq-final-result-page:not(.is-loss) .mq-final-particles i:nth-child(3n) { background:color-mix(in srgb,var(--mq-accent) 42%,#fff) !important; }

/* Le halo des résultats n'introduit plus de bleu froid dans Ambre/Grenat. */
.mq-shell[data-skin="ambre"] .mq-final-result-page::before,
.mq-shell[data-skin="grenat"] .mq-final-result-page::before {
  background:repeating-linear-gradient(112deg,transparent 0 8%,rgba(255,244,218,.10) 8.3%,transparent 8.8% 16%),radial-gradient(ellipse at 50% 8%,rgba(255,239,205,.42),transparent 32%) !important;
}
.mq-shell[data-skin="ambre"] .mq-final-result-page::after,
.mq-shell[data-skin="grenat"] .mq-final-result-page::after {
  background:radial-gradient(ellipse,color-mix(in srgb,var(--mq-accent) 20%,rgba(255,244,218,.62)),transparent 70%) !important;
}

/* =========================================================================
   MEMOQUEST v87 — MASTER THEME QA / PASS 4
   Derniers contrastes des héros de résultats sur fonds foncés.
   ========================================================================= */
.mq-shell[data-skin="grenat"] .mq-final-result-hero :is(.mq-eyebrow,h2,strong,small) { color:#fff7ef !important; }
.mq-shell[data-skin="grenat"] .mq-final-result-hero .mq-eyebrow { color:#f0c18e !important; }
.mq-shell[data-skin="ocean"] .mq-final-result-hero :is(.mq-eyebrow,h2,strong,small) { color:#f3fdff !important; }
.mq-shell[data-skin="ocean"] .mq-final-result-hero .mq-eyebrow { color:#a6f2f7 !important; }
.mq-shell[data-skin="nuit"] .mq-final-result-hero :is(.mq-eyebrow,h2,strong,small),
.mq-shell[data-skin="ardoise"] .mq-final-result-hero :is(.mq-eyebrow,h2,strong,small) { color:var(--mq-screen-text) !important; }

/* ================================================================
   MemoQuest 6.35.0 — Monde marin — FINAL VISUAL PASS
   Un seul fond commun par partie (géré par JS). Les animaux restent transparents.
   Le fond reçoit uniquement un léger assombrissement latéral pour la profondeur.
   ================================================================ */
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-front {
  padding: 0;
  gap: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(5,24,50,.17) 0%,
      rgba(5,24,50,.075) 8%,
      rgba(5,24,50,0) 19%,
      rgba(5,24,50,0) 81%,
      rgba(5,24,50,.075) 92%,
      rgba(5,24,50,.17) 100%),
    var(--mq-marine-bg,linear-gradient(155deg,#d8fbff,#66d9ef)) !important;
  color: #fff;
}
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-front img {
  position: absolute !important;
  inset: 5.5% 6% 19% 6% !important;
  width: 88% !important;
  height: 75.5% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  filter: drop-shadow(0 3px 4px rgba(3,24,46,.20)) !important;
}
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-front > .mq-card-name {
  position: absolute !important;
  z-index: 4;
  left: 4% !important;
  right: 4% !important;
  bottom: 3.8% !important;
  width: 92% !important;
  max-width: 92% !important;
  min-height: 1.15em;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(6.5px,1.08vmin,10px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-shadow:
    0 1px 1px rgba(2,13,30,.92),
    0 1px 3px rgba(2,13,30,.80),
    0 0 5px rgba(2,13,30,.28) !important;
}
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-front > .mq-card-name.is-long,
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-front > .mq-card-name.is-very-long {
  font-size: clamp(6px,.98vmin,9px) !important;
  line-height: 1.02 !important;
}
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-card.is-done .mq-front {
  background:
    linear-gradient(90deg,
      rgba(5,24,50,.17) 0%,
      rgba(5,24,50,.075) 8%,
      rgba(5,24,50,0) 19%,
      rgba(5,24,50,0) 81%,
      rgba(5,24,50,.075) 92%,
      rgba(5,24,50,.17) 100%),
    var(--mq-marine-bg,linear-gradient(155deg,#d8fbff,#66d9ef)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 0 0 2px rgba(56,189,160,.32);
}
.mq-shell[data-skin] .mq-board[data-category="monde-marin"] .mq-front.is-image-error > .mq-card-fallback {
  display: flex;
  inset: 6%;
  background: rgba(6,55,74,.88);
  color: #fff;
}