/* Egalicare : « Match », cartes métiers à swiper (voir assets/js/match.js).
 * Interface de jeu sombre : verre, accents néon, pile de cartes en perspective.
 */

/* ------------------------------------------------------------------ */
/* Conteneur                                                            */
/* ------------------------------------------------------------------ */
.match {
	--m-fond: var(--jeu-fond, #0c1133);
	--m-fond-2: var(--jeu-fond-2, #161d4b);
	--m-ligne: var(--jeu-ligne, rgba(255, 255, 255, .12));
	--m-texte: var(--jeu-texte, #e8eef9);
	--m-gris: var(--jeu-gris, #9aa7bd);
	--m-lagon: var(--neon-lagon, #a3a9ff);
	--m-corail: var(--neon-corail, #ff6a3d);
	--m-or: var(--neon-or, #ffc94a);
	--m-verre: var(--verre, rgba(19, 29, 51, .72));
	--m-titre: var(--f-titre, "Bricolage Grotesque", system-ui, sans-serif);
	--m-texte-f: var(--f-texte, "Atkinson Hyperlegible", system-ui, sans-serif);
	--m-anneau: 0 0 0 3px var(--m-fond), 0 0 0 6px var(--m-lagon);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: 100%;
	padding: clamp(22px, 5vw, 44px) 16px clamp(24px, 5vw, 44px);
	border-radius: 24px;
	border: 1px solid var(--m-ligne);
	color: var(--m-texte);
	font-family: var(--m-texte-f);
	background:
		radial-gradient(110% 60% at 0% 0%, rgba(163, 169, 255, .13), transparent 60%),
		radial-gradient(90% 55% at 100% 100%, rgba(255, 106, 61, .11), transparent 62%),
		linear-gradient(180deg, var(--m-fond-2) 0%, var(--m-fond) 55%);
	box-shadow: 0 30px 70px -30px rgba(4, 8, 18, .8);
}
/* Fine trame de points, très discrète */
.match::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
	mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.match h2 {
	margin: 0 auto .35em;
	max-width: 22ch;
	text-align: center;
	color: #fff;
	font: 800 clamp(1.65rem, 5.5vw, 2.5rem)/1.04 var(--m-titre);
	letter-spacing: -.025em;
}
.match__intro {
	margin: 0 auto 18px;
	max-width: 42ch;
	text-align: center;
	color: var(--m-gris);
	font-size: 1rem;
	line-height: 1.5;
}
.match__jeu {
	position: relative;
	overflow: hidden;
	overflow: clip;
	margin: 0 -8px;
	padding: 10px 8px 6px;
}
.match__ecran {
	max-width: 420px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.match { padding-left: 40px; padding-right: 40px; }
	.match__ecran { max-width: 400px; }
}
.match__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.match .ic { width: 1.15em; height: 1.15em; flex: none; }

/* Focus : double anneau (sombre + lagon), visible aussi en mode contraste élevé */
.match a:focus-visible,
.match button:focus-visible,
.match [tabindex]:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--m-anneau);
}
.match .match__recap-titre:focus { outline: none; box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Boutons texte                                                        */
/* ------------------------------------------------------------------ */
.match__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: 800 1.05rem/1 var(--m-titre);
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
.match__bouton .ic { width: 1.2em; height: 1.2em; }
.match__bouton--plein {
	background: var(--m-lagon);
	color: #03141a;
	box-shadow: 0 0 0 1px rgba(163, 169, 255, .4), 0 12px 32px -10px rgba(163, 169, 255, .75);
}
.match__bouton--plein:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(163, 169, 255, .6), 0 16px 40px -10px rgba(163, 169, 255, .95); }
.match__bouton--contour {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(163, 169, 255, .55);
	color: var(--m-texte);
}
.match__bouton--contour:hover { background: rgba(163, 169, 255, .1); color: #fff; }
.match__bouton:active { transform: scale(.97); }
.match__bouton:disabled { cursor: progress; opacity: .7; transform: none; }
.match__bouton.match__bouton--plein:focus-visible { box-shadow: var(--m-anneau), 0 12px 32px -10px rgba(163, 169, 255, .75); }

/* ------------------------------------------------------------------ */
/* Accueil                                                              */
/* ------------------------------------------------------------------ */
.match__accueil { text-align: center; padding: 4px 0 6px; }
.match__eventail {
	position: relative;
	width: 230px;
	height: 184px;
	margin: 6px auto 22px;
}
.match__eventail-c {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 116px;
	height: 162px;
	margin-left: -58px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	background:
		linear-gradient(var(--k), var(--k)) top / 100% 4px no-repeat,
		radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--k) 40%, transparent), transparent 65%),
		linear-gradient(165deg, #1c2657, #0d1527 75%);
	box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
	transform-origin: 50% 110%;
}
.match__eventail-c--g { --k: var(--m-corail); transform: rotate(-15deg) translateX(-14px); animation: match-flotte-g 5s ease-in-out infinite; }
.match__eventail-c--d { --k: var(--m-or); transform: rotate(15deg) translateX(14px); animation: match-flotte-d 5s ease-in-out infinite; }
.match__eventail-c--m {
	--k: var(--m-lagon);
	display: grid;
	place-items: center;
	color: var(--m-lagon);
	box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .85), 0 0 34px -10px rgba(163, 169, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
	animation: match-flotte-m 5s ease-in-out infinite;
}
.match__eventail-c--m .ic { width: 46px; height: 46px; fill: currentColor; filter: drop-shadow(0 0 10px rgba(163, 169, 255, .7)); }
@keyframes match-flotte-g { 50% { transform: rotate(-18deg) translateX(-20px) translateY(-3px); } }
@keyframes match-flotte-d { 50% { transform: rotate(18deg) translateX(20px) translateY(-3px); } }
@keyframes match-flotte-m { 50% { transform: translateY(-6px); } }
.match__accueil-titre {
	margin: 0 auto 14px;
	max-width: 20ch;
	color: #fff;
	font: 800 clamp(1.3rem, 5vw, 1.6rem)/1.15 var(--m-titre);
	letter-spacing: -.02em;
}
.match__regles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.match__regle {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--k) 45%, transparent);
	background: color-mix(in srgb, var(--k) 10%, transparent);
	color: var(--m-texte);
	font: 700 .86rem/1.2 var(--m-texte-f);
}
.match__regle span { color: var(--k); font-weight: 800; }
.match__regle--oui { --k: var(--m-lagon); }
.match__regle--non { --k: var(--m-corail); }
.match__regle--sup { --k: var(--m-or); }
.match__lancer { min-height: 58px; padding: 0 34px; font-size: 1.15rem; }
.match__meta { margin: 14px 0 0; color: var(--m-gris); font-size: .9rem; }
.match__meta strong { color: var(--m-or); }
.match__erreur { margin: 14px auto 0; max-width: 34ch; color: #ffb59e; font-size: .95rem; }

/* ------------------------------------------------------------------ */
/* Barre du haut : progression + likes                                 */
/* ------------------------------------------------------------------ */
.match__hud {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.match__compte {
	min-width: 3.4em;
	color: #fff;
	font: 800 1rem/1 var(--m-titre);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.match__barre {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	box-shadow: inset 0 0 0 1px var(--m-ligne);
	overflow: hidden;
}
.match__barre-in {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--m-lagon), var(--m-or));
	box-shadow: 0 0 14px rgba(163, 169, 255, .7);
	transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.match__likes {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--m-verre);
	border: 1px solid rgba(163, 169, 255, .35);
	color: #fff;
	font: 800 1rem/1 var(--m-titre);
	font-variant-numeric: tabular-nums;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.match__likes .ic { color: var(--m-lagon); fill: currentColor; width: 18px; height: 18px; }
.match__likes.is-bump { animation: match-bump .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes match-bump {
	40% { transform: scale(1.18); box-shadow: 0 0 22px rgba(163, 169, 255, .65); }
}

/* ------------------------------------------------------------------ */
/* Pile de cartes                                                       */
/* ------------------------------------------------------------------ */
.match__pile {
	--prog: 0;
	--r1: -2.4deg;
	--r2: 2.8deg;
	position: relative;
	height: min(62vh, 560px);
	height: min(62svh, 560px);
	min-height: 420px;
	margin-bottom: 34px;
	perspective: 1200px;
	border-radius: 24px;
}
.match .match__pile:focus-visible { box-shadow: none; }
.match__pile:focus-visible .match__carte[data-p="0"]:not(.is-volante) {
	box-shadow: var(--m-anneau), 0 26px 60px -20px rgba(0, 0, 0, .85);
}

.match__carte {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	background:
		radial-gradient(120% 55% at 100% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 62%),
		radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%),
		linear-gradient(165deg, #19253f 0%, #0e1628 72%);
	box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .1);
	color: var(--m-texte);
	transform-origin: 50% 60%;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, box-shadow .25s ease;
}
/* Voile qui assombrit les cartes du dessous */
.match__carte::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: #050a15;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
.match__carte[data-p="0"] { z-index: 3; cursor: grab; }
.match__carte[data-p="1"] {
	z-index: 2;
	transform: translate3d(0, calc(16px * (1 - var(--prog))), calc(-40px * (1 - var(--prog)))) rotate(calc(var(--r1) * (1 - var(--prog)))) scale(calc(.95 + .05 * var(--prog)));
}
.match__carte[data-p="1"]::after { opacity: calc(.38 * (1 - var(--prog))); }
.match__carte[data-p="2"] {
	z-index: 1;
	transform: translate3d(0, calc(32px - 16px * var(--prog)), calc(-80px + 40px * var(--prog))) rotate(calc(var(--r2) + (var(--r1) - var(--r2)) * var(--prog))) scale(calc(.9 + .05 * var(--prog)));
}
.match__carte[data-p="2"]::after { opacity: calc(.62 - .24 * var(--prog)); }
.match__carte[data-p="3"] {
	z-index: 0;
	opacity: 0;
	transform: translate3d(0, 44px, -120px) rotate(var(--r2)) scale(.86);
}
.match__carte[data-p="1"],
.match__carte[data-p="2"],
.match__carte[data-p="3"] { pointer-events: none; }
.match__carte.is-tenue { cursor: grabbing; transition: none; }
.match__pile.is-glisse .match__carte:not(.is-volante),
.match__pile.is-glisse .match__carte::after { transition: none; }
.match__carte.is-volante { z-index: 5; pointer-events: none; }

/* Contenu de la carte */
.match__carte-in {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: inherit;
}
.match__carte-in::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--c);
	box-shadow: 0 0 22px 2px color-mix(in srgb, var(--c) 70%, transparent);
}
.match__bandeau {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 20px 20px 0;
}
.match__famille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: color-mix(in srgb, var(--c) 42%, #fff);
	font: 700 .74rem/1.25 var(--m-texte-f);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.match__pastille {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 10px 1px var(--c);
}
.match__recrute {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	background: var(--m-or);
	color: #1a1200;
	font: 800 .72rem/1 var(--m-texte-f);
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 0 18px -2px rgba(255, 201, 74, .6);
}
.match__recrute .ic { width: 14px; height: 14px; fill: currentColor; }
.match__mono {
	position: absolute;
	right: -4%;
	top: 8%;
	color: transparent;
	font: 800 clamp(10rem, 46vw, 14rem)/.8 var(--m-titre);
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 60%, transparent);
	opacity: .32;
	pointer-events: none;
}
.match__corps {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0;
	padding: 14px 22px 0;
}
.match__nom {
	margin: 0 0 10px;
	color: #fff;
	font: 800 clamp(1.8rem, 8vw, 2.3rem)/1.02 var(--m-titre);
	letter-spacing: -.025em;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	text-shadow: 0 2px 18px rgba(5, 10, 21, .6);
}
.match__carte--long .match__nom { font-size: clamp(1.45rem, 6.4vw, 1.85rem); }
.match__carte--tres-long .match__nom { font-size: clamp(1.25rem, 5.4vw, 1.55rem); line-height: 1.06; }
.match__phrase {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin: 0 0 14px;
	color: #cbd5e6;
	font-size: 1rem;
	line-height: 1.45;
}
.match__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.match__tags li {
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #e1e8f5;
	font: 700 .8rem/1.25 var(--m-texte-f);
}
.match__pied {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 16px 22px 18px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	color: var(--m-gris);
	font-size: .88rem;
}
.match__niveau { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.match__niveau .ic { color: color-mix(in srgb, var(--c) 50%, #fff); }
.match__niveau strong { color: #fff; }
.match__num { flex: none; color: var(--m-gris); font: 800 .82rem/1 var(--m-titre); font-variant-numeric: tabular-nums; opacity: .8; }

/* Reflet holographique qui suit le doigt ou la souris */
.match__holo {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), rgba(255, 255, 255, .14), transparent 42%),
		linear-gradient(115deg, transparent 28%, rgba(163, 169, 255, .2) 42%, rgba(255, 201, 74, .14) 50%, rgba(255, 106, 61, .16) 58%, transparent 72%);
	background-size: 100% 100%, 260% 260%;
	background-position: 0 0, var(--hx, 50%) var(--hy, 50%);
	mix-blend-mode: screen;
	opacity: calc(.1 + var(--holo, 0) * .7);
	transition: opacity .35s ease;
}

/* Tampons */
.match__tampon {
	position: absolute;
	z-index: 3;
	top: 74px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 3px solid currentColor;
	border-radius: 12px;
	background: rgba(8, 13, 25, .55);
	font: 800 clamp(1.15rem, 5vw, 1.45rem)/1 var(--m-titre);
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 0 14px currentColor;
	box-shadow: 0 0 22px -4px currentColor, inset 0 0 16px -6px currentColor;
	pointer-events: none;
}
.match__tampon--oui {
	left: 18px;
	color: var(--m-lagon);
	opacity: var(--oui, 0);
	transform: rotate(-14deg) scale(calc(1.3 - .3 * var(--oui, 0)));
}
.match__tampon--non {
	right: 18px;
	color: var(--m-corail);
	opacity: var(--non, 0);
	transform: rotate(14deg) scale(calc(1.3 - .3 * var(--non, 0)));
}
.match__tampon--sup {
	top: auto;
	bottom: 30%;
	left: 50%;
	color: var(--m-or);
	opacity: var(--sup, 0);
	transform: translateX(-50%) rotate(-7deg) scale(calc(1.3 - .3 * var(--sup, 0)));
}
.match__tampon--sup .ic { width: 1em; height: 1em; fill: currentColor; }
/* Halo coloré de la carte selon la direction */
.match__carte[data-p="0"] {
	box-shadow:
		0 26px 60px -20px rgba(0, 0, 0, .85),
		inset 0 1px 0 rgba(255, 255, 255, .1),
		0 0 calc(40px * var(--oui, 0)) calc(-6px + 4px * var(--oui, 0)) rgba(163, 169, 255, calc(.8 * var(--oui, 0))),
		0 0 calc(40px * var(--non, 0)) calc(-6px + 4px * var(--non, 0)) rgba(255, 106, 61, calc(.8 * var(--non, 0))),
		0 0 calc(40px * var(--sup, 0)) calc(-6px + 4px * var(--sup, 0)) rgba(255, 201, 74, calc(.8 * var(--sup, 0)));
}

/* ------------------------------------------------------------------ */
/* Boutons ronds                                                        */
/* ------------------------------------------------------------------ */
.match__actions {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(8px, 3.5vw, 18px);
}
.match__btn {
	--k: var(--m-lagon);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 64px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--m-texte);
	font: 700 .74rem/1.15 var(--m-texte-f);
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.match__btn--non { --k: var(--m-corail); }
.match__btn--sup { --k: var(--m-or); }
.match__btn--annuler { --k: #b9c4d8; }
.match__rond {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--k) 70%, transparent);
	background: var(--m-verre);
	color: var(--k);
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8), inset 0 0 20px -8px var(--k);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, background-color .2s ease;
}
.match__btn--non .match__rond,
.match__btn--oui .match__rond { width: 68px; height: 68px; }
.match__rond .ic { width: 28px; height: 28px; stroke-width: 2.2; }
.match__btn--oui .ic,
.match__btn--sup .ic { fill: currentColor; }
.match__btn--annuler .match__rond .ic { width: 24px; height: 24px; }
.match__btn-txt { max-width: 9ch; color: var(--m-gris); }
.match__btn:hover:not(:disabled) .match__rond {
	background: color-mix(in srgb, var(--k) 18%, var(--m-fond-2));
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8), 0 0 26px -4px var(--k), inset 0 0 20px -8px var(--k);
}
.match__btn:hover:not(:disabled) .match__btn-txt { color: var(--m-texte); }
.match__btn:active:not(:disabled) .match__rond,
.match__btn.is-flash .match__rond { transform: scale(.9); }
.match__btn.is-flash .match__rond { background: color-mix(in srgb, var(--k) 26%, var(--m-fond-2)); box-shadow: 0 0 30px -2px var(--k); }
.match__btn:disabled { cursor: default; }
.match__btn:disabled .match__rond { opacity: .32; box-shadow: none; }
.match__btn:disabled .match__btn-txt { opacity: .45; }
.match .match__btn:focus-visible { box-shadow: none; }
.match .match__btn:focus-visible .match__rond { box-shadow: var(--m-anneau), 0 0 26px -4px var(--k); }
.match__aide {
	margin: 16px 0 0;
	text-align: center;
	color: var(--m-gris);
	font-size: .82rem;
}
@media (hover: none) { .match__aide { display: none; } }

/* ------------------------------------------------------------------ */
/* Récapitulatif                                                        */
/* ------------------------------------------------------------------ */
.match__recap { animation: match-entree .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes match-entree { from { opacity: 0; transform: translateY(14px); } }
.match__surtitre {
	margin: 0 0 6px;
	color: var(--m-lagon);
	font: 700 .78rem/1.3 var(--m-texte-f);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.match__recap-titre {
	margin: 0 0 10px;
	color: #fff;
	font: 800 clamp(1.9rem, 7vw, 2.5rem)/1 var(--m-titre);
	letter-spacing: -.025em;
}
.match__score {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 16px;
	color: var(--m-gris);
}
.match__score strong {
	color: var(--m-lagon);
	font: 800 3.2rem/1 var(--m-titre);
	text-shadow: 0 0 24px rgba(163, 169, 255, .55);
}
.match__profil {
	margin: 0 0 18px;
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid var(--m-ligne);
	background: var(--m-verre);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.match__profil p { margin: 0; line-height: 1.5; }
.match__profil strong { color: #fff; }
.match__profil .match__profil-titre {
	margin-bottom: 6px;
	color: var(--m-or);
	font: 700 .75rem/1.3 var(--m-texte-f);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.match__liste {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.match__mini {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 12px 16px 12px 20px;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--m-ligne);
	background: rgba(255, 255, 255, .04);
	color: var(--m-texte);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.match__mini::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--c);
	box-shadow: 0 0 14px 1px var(--c);
}
.match__mini:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); transform: translateX(3px); }
.match__mini > .ic { margin-left: auto; color: var(--m-gris); transition: transform .2s ease, color .2s ease; }
.match__mini:hover > .ic { color: var(--m-lagon); transform: translateX(3px); }
.match__mini-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.match__mini strong { color: #fff; font: 800 1.05rem/1.2 var(--m-titre); overflow-wrap: break-word; }
.match__mini small { color: var(--m-gris); font-size: .82rem; line-height: 1.3; }
.match__mini-recrute { color: var(--m-or); font-weight: 700; }
.match__mini--coeur {
	border-color: rgba(255, 201, 74, .55);
	background: linear-gradient(100deg, rgba(255, 201, 74, .14), rgba(255, 201, 74, .03) 70%);
	box-shadow: 0 0 26px -10px rgba(255, 201, 74, .6);
}
.match__mini--coeur:hover { background: linear-gradient(100deg, rgba(255, 201, 74, .2), rgba(255, 201, 74, .05) 70%); border-color: var(--m-or); }
.match__mini-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--m-or);
	font: 800 .7rem/1.2 var(--m-texte-f);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.match__mini-badge .ic { width: 13px; height: 13px; fill: currentColor; }
.match__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 4px;
	color: var(--m-gris);
	font-size: .9rem;
}
.match__note .ic { color: var(--m-lagon); margin-top: .15em; }
.match__fin {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}
.match__fin .match__bouton { flex: 1 1 160px; }

/* ------------------------------------------------------------------ */
/* Écrans étroits et mouvements réduits                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 359px) {
	.match__rond { width: 52px; height: 52px; }
	.match__btn--non .match__rond,
	.match__btn--oui .match__rond { width: 60px; height: 60px; }
	.match__btn { min-width: 56px; font-size: .7rem; }
	.match__nom { font-size: 1.6rem; }
}
@media (max-height: 640px) {
	.match__pile { min-height: 380px; }
	.match__phrase { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) {
	.match__pile { --r1: 0deg; --r2: 0deg; perspective: none; }
	.match__carte { transition: opacity .25s ease; }
	.match__eventail-c--g,
	.match__eventail-c--d,
	.match__eventail-c--m,
	.match__likes.is-bump,
	.match__recap { animation: none; }
	.match__barre-in,
	.match__rond,
	.match__bouton,
	.match__mini,
	.match__mini > .ic { transition: none; }
	.match__tampon--oui,
	.match__tampon--non { transform: rotate(0); }
	.match__tampon--sup { transform: translateX(-50%); }
}
@media (forced-colors: active) {
	.match__carte, .match__rond, .match__mini { border: 2px solid CanvasText; }
	.match__tampon { forced-color-adjust: none; }
}