/* Egalicare : « Les défis de l'étape » et hub des défis (voir inc/defis.php, assets/js/defis.js).
 * Interface de jeu sombre : verre, accents néon (lagon = ordre, corail = réflexes, or = duo).
 * Les jeux s'ouvrent dans une modale <dialog>, plein écran sur mobile.
 */

/* ------------------------------------------------------------------ */
/* Jetons                                                               */
/* ------------------------------------------------------------------ */
.defis,
.defi-modale {
	--d-fond: var(--jeu-fond, #0c1133);
	--d-fond-2: var(--jeu-fond-2, #161d4b);
	--d-ligne: var(--jeu-ligne, rgba(255, 255, 255, .12));
	--d-texte: var(--jeu-texte, #e8eef9);
	--d-gris: var(--jeu-gris, #9aa7bd);
	--d-lagon: var(--neon-lagon, #a3a9ff);
	--d-corail: var(--neon-corail, #ff6a3d);
	--d-or: var(--neon-or, #ffc94a);
	--d-vert: #3ddc97;
	--d-verre: var(--verre, rgba(19, 29, 51, .72));
	--d-titre: var(--f-titre, "Bricolage Grotesque", system-ui, sans-serif);
	--d-texte-f: var(--f-texte, "Atkinson Hyperlegible", system-ui, sans-serif);
	--k: var(--d-lagon);
}
.defis .ic,
.defi-modale .ic { width: 1.15em; height: 1.15em; flex: none; }

/* Focus visible : anneau lagon, lisible aussi en contraste élevé */
.defis a:focus-visible,
.defis button:focus-visible,
.defi-modale a:focus-visible,
.defi-modale button:focus-visible,
.defi-modale [tabindex="0"]:focus-visible {
	outline: 3px solid var(--d-lagon);
	outline-offset: 2px;
}
.defi-modale [tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------ */
/* Section « Les défis de l'étape »                                     */
/* ------------------------------------------------------------------ */
.defis { padding: clamp(28px, 5vw, 56px) 0; }
.defis__boite {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(22px, 5vw, 40px) 16px;
	border-radius: 24px;
	border: 1px solid var(--d-ligne);
	color: var(--d-texte);
	font-family: var(--d-texte-f);
	background:
		radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--c, var(--d-lagon)) 22%, transparent), transparent 62%),
		radial-gradient(80% 55% at 100% 100%, rgba(255, 201, 74, .1), transparent 62%),
		linear-gradient(180deg, var(--d-fond-2) 0%, var(--d-fond) 60%);
	box-shadow: 0 30px 70px -30px rgba(4, 8, 18, .8);
}
.defis__boite::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%);
}
@media (min-width: 768px) {
	.defis__boite { padding-left: 36px; padding-right: 36px; }
}
.defis__entete { max-width: 62ch; margin-bottom: 22px; }
.defis__sur {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .7em;
	color: var(--d-or);
	font: 800 .78rem/1.3 var(--d-texte-f);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.defis h2 {
	margin: 0 0 .35em;
	color: #fff;
	font: 800 clamp(1.6rem, 5.5vw, 2.4rem)/1.05 var(--d-titre);
	letter-spacing: -.025em;
}
.defis__intro { margin: 0 0 14px; color: var(--d-gris); line-height: 1.55; }
.defis__bilan {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin: 0;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 201, 74, .35);
	background: var(--d-verre);
	color: #fff;
	font: 800 .95rem/1.2 var(--d-titre);
	font-variant-numeric: tabular-nums;
}
.defis__bilan span { color: var(--d-or); }
.defis.is-complet .defis__bilan { border-color: var(--d-or); box-shadow: 0 0 22px -6px rgba(255, 201, 74, .8); }
.defis__noscript { margin: 16px 0 0; color: var(--d-gris); }

/* Cartes de défi */
.defis__grille {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 760px) {
	.defis__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.defi-carte--lagon { --k: var(--d-lagon); }
.defi-carte--corail { --k: var(--d-corail); }
.defi-carte--or { --k: var(--d-or); }
.defi-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 18px 18px;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--k) 35%, transparent);
	background:
		radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--k) 16%, transparent), transparent 62%),
		linear-gradient(165deg, #1c2657, #0d1527 78%);
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
	scroll-margin-top: 90px;
	transition: transform .2s ease, border-color .2s ease;
}
.defi-carte::before {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	top: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--k);
	box-shadow: 0 0 14px var(--k);
}
.defi-carte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k) 60%, transparent); }
.defi-carte__type {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 12px;
	color: var(--k);
	font: 800 .78rem/1.2 var(--d-texte-f);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.defi-carte__ico {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--k) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--k) 40%, transparent);
}
.defi-carte__ico .ic { width: 20px; height: 20px; }
.defi-carte__titre {
	margin: 0 0 .4em;
	color: #fff;
	font: 800 1.2rem/1.2 var(--d-titre);
	letter-spacing: -.015em;
	overflow-wrap: break-word;
}
.defi-carte__desc { margin: 0 0 16px; color: var(--d-gris); font-size: .95rem; line-height: 1.45; }
.defi-carte__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.defi-carte__etat { margin: 0; }
.defi-carte__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background: var(--k);
	color: #03141a;
	font: 800 1rem/1 var(--d-titre);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 10px 26px -12px var(--k);
	transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.defi-carte__btn[hidden] { display: none; }
.defi-carte__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px var(--k); }
.defi-carte__btn:active { transform: scale(.97); }
.defi-carte.is-reussi { border-color: color-mix(in srgb, var(--k) 60%, transparent); }
.defi-carte.is-reussi .defi-carte__btn { background: rgba(255, 255, 255, .05); border-color: color-mix(in srgb, var(--k) 70%, transparent); color: #fff; box-shadow: none; }
.defi-carte.is-cible { animation: defi-cible 1.4s ease-out 2; }
@keyframes defi-cible {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k) 80%, transparent); }
	100% { box-shadow: 0 0 0 18px transparent; }
}

/* Étoiles (cartes, hub) */
.defi-etoiles { display: inline-flex; gap: 2px; font-size: 1.3rem; line-height: 1; }
.defi-etoiles span { color: rgba(255, 255, 255, .18); transition: color .3s ease, text-shadow .3s ease; }
.defi-etoiles span.is-on { color: var(--d-or); text-shadow: 0 0 12px rgba(255, 201, 74, .7); }

/* ------------------------------------------------------------------ */
/* Hub (page quiz)                                                      */
/* ------------------------------------------------------------------ */
.defis-hub {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 760px) {
	.defis-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.defis-hub__etape {
	min-width: 0;
	padding: 16px;
	border-radius: 18px;
	border: 1px solid var(--d-ligne);
	border-top: 3px solid var(--c, var(--d-lagon));
	background: linear-gradient(165deg, rgba(26, 38, 65, .9), rgba(13, 21, 39, .9));
}
.defis-hub__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 12px;
}
.defis-hub__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c, var(--d-lagon)) 25%, transparent);
	border: 1px solid var(--c, var(--d-lagon));
	color: #fff;
	font: 800 .95rem/1 var(--d-titre);
	flex: none;
}
.defis-hub__nom {
	flex: 1 1 auto;
	margin: 0;
	color: #fff;
	font: 800 1.15rem/1.15 var(--d-titre);
}
.defis-hub__nom small { display: block; margin-top: 2px; color: var(--d-gris); font: 700 .8rem/1.2 var(--d-texte-f); }
.defis-hub__lien-etape {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 44px;
	padding: 0 4px;
	color: var(--d-lagon);
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
}
.defis-hub__lien-etape:hover { color: #fff; }
.defis-hub__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.defis-hub__defi {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 8px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-left: 3px solid var(--k);
	background: rgba(255, 255, 255, .04);
	color: var(--d-texte);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.defis-hub__defi:hover { background: rgba(255, 255, 255, .08); transform: translateX(2px); color: #fff; }
.defis-hub__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); flex: none; }
.defis-hub__txt { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.defis-hub__txt small { color: var(--k); font: 800 .7rem/1.3 var(--d-texte-f); letter-spacing: .07em; text-transform: uppercase; }
.defis-hub__txt strong { color: #fff; font-size: .95rem; overflow-wrap: break-word; }
.defis-hub__etat { flex: none; }
.defis-hub__etat .defi-etoiles { font-size: 1.05rem; }

/* ------------------------------------------------------------------ */
/* Modale                                                               */
/* ------------------------------------------------------------------ */
html.defi-ouvert { overflow: hidden; }
.defi-modale {
	width: min(680px, calc(100% - 32px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--d-texte);
	font-family: var(--d-texte-f);
	overflow: visible;
}
.defi-modale--qualites { --k: var(--d-corail); }
.defi-modale--duo { --k: var(--d-or); }
.defi-modale::backdrop {
	background: rgba(4, 8, 18, .8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
/* Navigateurs sans <dialog> */
.defi-modale--repli[open] {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: rgba(4, 8, 18, .85);
}
.defi-modale__boite {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: min(92vh, 880px);
	max-height: min(92dvh, 880px);
	border-radius: 24px;
	border: 1px solid var(--d-ligne);
	background:
		radial-gradient(100% 50% at 0% 0%, color-mix(in srgb, var(--k) 14%, transparent), transparent 60%),
		linear-gradient(180deg, var(--d-fond-2) 0%, var(--d-fond) 55%);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04);
	overflow: hidden;
}
.defi-modale[open] .defi-modale__boite { animation: defi-entree .28s cubic-bezier(.22, .61, .36, 1); }
@keyframes defi-entree {
	from { opacity: 0; transform: translateY(18px) scale(.98); }
	to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
	.defi-modale {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		margin: 0;
	}
	.defi-modale__boite {
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		border: 0;
	}
}
.defi-modale__tete {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 14px 12px 18px;
	border-bottom: 1px solid var(--d-ligne);
	background: rgba(12, 17, 51, .6);
	flex: none;
}
.defi-modale__titres { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.defi-modale__type {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 4px;
	color: var(--k);
	font: 800 .75rem/1.2 var(--d-texte-f);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.defi-modale__titre {
	margin: 0;
	color: #fff;
	font: 800 clamp(1.1rem, 4.4vw, 1.4rem)/1.2 var(--d-titre);
	letter-spacing: -.015em;
	overflow-wrap: break-word;
}
.defi-modale__fermer {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
	flex: none;
}
.defi-modale__fermer:hover { background: rgba(255, 255, 255, .14); }
.defi-modale__corps {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px 16px 28px;
}
@media (min-width: 601px) {
	.defi-modale__corps { padding: 22px 24px 30px; }
}

/* ------------------------------------------------------------------ */
/* Éléments communs des jeux                                            */
/* ------------------------------------------------------------------ */
.defi-jeu { line-height: 1.5; }
.defi__consigne { margin: 0 0 10px; color: #fff; font-weight: 700; font-size: 1.02rem; }
.defi__aide { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; color: var(--d-gris); font-size: .9rem; }
.defi__aide .ic { margin-top: 2px; color: var(--k); }
.defi__progres { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.defi__progres p { margin: 0; color: var(--d-gris); font: 800 .9rem/1 var(--d-titre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.defi__barre { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.defi__barre span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--k), var(--d-or)); transition: width .4s ease; }
.defi__retour { min-height: 1.5em; margin: 12px 0 0; color: var(--d-gris); font-size: .95rem; }
.defi__retour.is-ko { color: #ffd3c4; }
.defi__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.defi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 50px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: 800 1rem/1.1 var(--d-titre);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease;
}
.defi-btn--plein { background: var(--k); color: #03141a; box-shadow: 0 12px 28px -12px var(--k); }
.defi-btn--plein:hover { transform: translateY(-2px); }
.defi-btn--contour { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .3); color: #fff; }
.defi-btn--contour:hover { background: rgba(255, 255, 255, .1); }
.defi-btn:active { transform: scale(.97); }
@media (max-width: 420px) {
	.defi__actions .defi-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ */
/* Jeu 1 : remettre dans l'ordre                                        */
/* ------------------------------------------------------------------ */
.defi-ordre {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.defi-ordre__item {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	grid-template-rows: auto 1fr;
	grid-template-areas: "num txt fl" "poi txt fl";
	column-gap: 6px;
	padding: 4px;
	border-radius: 14px;
	border: 1.5px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .05);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.defi-ordre__num {
	grid-area: num;
	justify-self: center;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font: 800 .85rem/1 var(--d-titre);
	font-variant-numeric: tabular-nums;
}
.defi-ordre__poignee {
	grid-area: poi;
	display: grid;
	place-items: center;
	min-height: 44px;
	border-radius: 10px;
	color: var(--d-gris);
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.defi-ordre__poignee:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.defi-ordre__poignee .ic { width: 20px; height: 20px; }
.defi-ordre__txt {
	grid-area: txt;
	align-self: stretch;
	min-height: 44px;
	padding: 8px 6px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--d-texte);
	font: 400 .95rem/1.38 var(--d-texte-f);
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.defi-ordre__txt:hover { background: rgba(255, 255, 255, .05); }
.defi-ordre__fleches { grid-area: fl; display: grid; align-content: center; gap: 4px; }
.defi-ordre__fl {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
}
.defi-ordre__fl:hover:not(:disabled) { border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }
.defi-ordre__fl:disabled { opacity: .28; cursor: default; }
/* Toucher pour sélectionner, puis toucher la place */
.defi-ordre__item.is-choisi {
	border-color: var(--d-or);
	background: rgba(255, 201, 74, .09);
	box-shadow: 0 0 0 2px rgba(255, 201, 74, .3), 0 10px 24px -12px rgba(255, 201, 74, .6);
}
.defi-ordre__item.is-choisi .defi-ordre__num { background: var(--d-or); color: #03141a; }
.defi-ordre.a-choisi .defi-ordre__item:not(.is-choisi) .defi-ordre__txt { box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .4); }
/* Glisser-déposer */
.defi-ordre.is-glisse-en-cours { -webkit-user-select: none; user-select: none; }
.defi-ordre__item.is-glisse {
	z-index: 2;
	border-color: var(--k);
	background: #1c2657;
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .85), 0 0 0 2px var(--k);
	transform: scale(1.02);
}
.defi-ordre__item.is-glisse .defi-ordre__poignee { cursor: grabbing; color: var(--k); }
/* Vérification (couleur + symbole) */
.defi-ordre__item.is-ok { border-color: var(--d-vert); background: rgba(61, 220, 151, .1); }
.defi-ordre__item.is-ko { border-color: var(--d-corail); background: rgba(255, 106, 61, .08); }
.defi-ordre__item.is-ok .defi-ordre__num { background: var(--d-vert); color: #03141a; }
.defi-ordre__item.is-ko .defi-ordre__num { background: var(--d-corail); color: #03141a; }
.defi-ordre__item.is-ok::after,
.defi-ordre__item.is-ko::after {
	position: absolute;
	left: 30px;
	top: 0;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font: 800 .7rem/1 var(--d-texte-f);
	color: #03141a;
}
.defi-ordre__item.is-ok::after { content: "✓"; content: "✓" / ""; background: var(--d-vert); }
.defi-ordre__item.is-ko::after { content: "✕"; content: "✕" / ""; background: var(--d-corail); }

/* Le bon déroulé (écran de fin) */
.defi-recap-ordre { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: defi; }
.defi-recap-ordre li {
	position: relative;
	padding: 10px 12px 10px 48px;
	border-radius: 12px;
	border: 1px solid var(--d-ligne);
	background: rgba(255, 255, 255, .04);
	counter-increment: defi;
}
.defi-recap-ordre li::before {
	content: counter(defi);
	position: absolute;
	left: 12px;
	top: 10px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--k);
	color: #03141a;
	font: 800 .85rem/1 var(--d-titre);
}
.defi-recap-ordre strong { display: block; color: #fff; font-weight: 700; line-height: 1.35; }
.defi-recap-ordre span { display: block; margin-top: 3px; color: var(--d-gris); font-size: .92rem; line-height: 1.45; }

/* ------------------------------------------------------------------ */
/* Jeu 2 : les bons réflexes                                            */
/* ------------------------------------------------------------------ */
.defi-q__situation {
	margin: 0 0 14px;
	padding: 16px 16px 16px 18px;
	border-radius: 16px;
	border-left: 4px solid var(--k);
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font: 700 1.06rem/1.45 var(--d-texte-f);
}
.defi-q__choix { display: grid; gap: 10px; }
.defi-choix {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 12px 40px 12px 12px;
	border-radius: 14px;
	border: 1.5px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .04);
	color: var(--d-texte);
	font: 400 .98rem/1.42 var(--d-texte-f);
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .2s ease, background-color .2s ease, transform .15s ease, opacity .2s ease;
}
.defi-choix:hover:not([aria-disabled="true"]) { border-color: var(--k); background: color-mix(in srgb, var(--k) 9%, transparent); transform: translateY(-1px); }
.defi-choix__lettre {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	color: var(--k);
	font: 800 .85rem/1 var(--d-titre);
	flex: none;
}
.defi-choix__txt { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.defi-choix[aria-disabled="true"],
.defi-duo__btn[aria-disabled="true"] { cursor: default; }
.defi-choix.is-ok { border-color: var(--d-vert); background: rgba(61, 220, 151, .12); }
.defi-choix.is-ok .defi-choix__lettre { background: var(--d-vert); color: #03141a; }
.defi-choix.is-ko { border-color: var(--d-corail); background: rgba(255, 106, 61, .1); }
.defi-choix.is-ko .defi-choix__lettre { background: var(--d-corail); color: #03141a; }
.defi-choix.is-terne,
.defi-duo__btn.is-terne { opacity: .5; }
.defi-choix.is-ok::after,
.defi-choix.is-ko::after {
	position: absolute;
	right: 12px;
	top: 14px;
	font: 800 1rem/1 var(--d-texte-f);
}
.defi-choix.is-ok::after { content: "✓"; content: "✓" / ""; color: var(--d-vert); }
.defi-choix.is-ko::after { content: "✕"; content: "✕" / ""; color: var(--d-corail); }
.defi-q__retour { margin-top: 14px; }
.defi-q__retour > p { margin: 0 0 10px; }
.defi-q__verdict { display: flex; align-items: center; gap: 8px; font: 800 1.12rem/1.2 var(--d-titre); }
.defi-q__verdict.is-ok { color: #6ff2b9; }
.defi-q__verdict.is-ko { color: #ffbfa8; }
.defi-q__meilleur {
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(61, 220, 151, .35);
	background: rgba(61, 220, 151, .08);
}
.defi-q__meilleur strong { color: #6ff2b9; }
.defi-q__qualite {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 106, 61, .45);
	background: rgba(255, 106, 61, .12);
	color: #fff;
	font-size: .95rem;
}
.defi-q__qualite .ic { color: var(--d-corail); }
.defi-q__qualite strong { color: var(--d-or); }

/* Qualités travaillées (écran de fin) */
.defi-recap-qualites { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.defi-recap-qualites li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--d-gris);
	font-weight: 700;
	font-size: .92rem;
}
.defi-recap-qualites li.is-ok { border-color: rgba(61, 220, 151, .55); background: rgba(61, 220, 151, .1); color: #d6ffee; }
.defi-recap-qualites li.is-ok .ic { color: var(--d-vert); }

/* ------------------------------------------------------------------ */
/* Jeu 3 : lequel des deux ?                                            */
/* ------------------------------------------------------------------ */
.defi-duo__aff {
	margin: 0 0 12px;
	padding: 22px 18px;
	border-radius: 18px;
	border: 1px solid rgba(255, 201, 74, .35);
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 201, 74, .12), transparent 65%),
		linear-gradient(165deg, #1c2657, #0d1527 80%);
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .85);
	color: #fff;
	font: 800 clamp(1.08rem, 4.4vw, 1.3rem)/1.32 var(--d-titre);
	text-align: center;
	letter-spacing: -.01em;
}
.defi-duo__question { margin: 0 0 10px; color: var(--d-gris); font-weight: 700; text-align: center; }
.defi-duo__choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.defi-duo__btn {
	--b: var(--d-lagon);
	position: relative;
	display: grid;
	place-items: center;
	min-height: 64px;
	padding: 10px 12px;
	border-radius: 16px;
	border: 1.5px solid color-mix(in srgb, var(--b) 55%, transparent);
	background: color-mix(in srgb, var(--b) 9%, transparent);
	color: #fff;
	font: 800 1rem/1.2 var(--d-titre);
	text-align: center;
	overflow-wrap: break-word;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .2s ease, background-color .2s ease, transform .15s ease, opacity .2s ease;
}
.defi-duo__btn--b { --b: var(--d-corail); }
.defi-duo__btn--deux { --b: var(--d-or); grid-column: 1 / -1; min-height: 50px; font-size: .95rem; }
.defi-duo__btn:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--b) 18%, transparent); transform: translateY(-2px); }
.defi-duo__btn.is-ok { border-color: var(--d-vert); background: rgba(61, 220, 151, .16); }
.defi-duo__btn.is-ko { border-color: var(--d-corail); background: rgba(255, 106, 61, .14); }
.defi-duo__btn.is-ok::after,
.defi-duo__btn.is-ko::after { position: absolute; top: 6px; right: 10px; font: 800 .95rem/1 var(--d-texte-f); }
.defi-duo__btn.is-ok::after { content: "✓"; content: "✓" / ""; color: var(--d-vert); }
.defi-duo__btn.is-ko::after { content: "✕"; content: "✕" / ""; color: var(--d-corail); }

/* Tableau comparatif */
.defi-tableau {
	max-width: 100%;
	overflow-x: auto;
	border-radius: 14px;
	border: 1px solid var(--d-ligne);
	background: rgba(255, 255, 255, .03);
}
.defi-tableau table { width: 100%; border-collapse: collapse; font-size: .88rem; line-height: 1.4; }
.defi-tableau caption {
	caption-side: top;
	padding: 12px 12px 10px;
	color: #fff;
	font: 800 .95rem/1.3 var(--d-titre);
	text-align: left;
}
.defi-tableau th,
.defi-tableau td {
	padding: 9px 10px;
	border-top: 1px solid var(--d-ligne);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
.defi-tableau thead th { font: 800 .9rem/1.2 var(--d-titre); }
.defi-tableau thead th:nth-child(2) { color: var(--d-lagon); }
.defi-tableau thead th:nth-child(3) { color: var(--d-corail); }
.defi-tableau tbody th { width: 26%; color: var(--d-gris); font-weight: 700; }
.defi-tableau td { color: var(--d-texte); }
@media (min-width: 601px) {
	.defi-tableau table { font-size: .93rem; }
	.defi-tableau th, .defi-tableau td { padding: 10px 14px; }
}

/* ------------------------------------------------------------------ */
/* Écran de fin                                                         */
/* ------------------------------------------------------------------ */
.defi-fin { text-align: center; }
.defi-fin__etoiles { display: flex; justify-content: center; gap: 8px; margin: 4px 0 6px; font-size: clamp(2.4rem, 11vw, 3rem); line-height: 1; }
.defi-fin__etoiles span { color: rgba(255, 255, 255, .14); }
.defi-fin__etoiles span.is-on {
	color: var(--d-or);
	text-shadow: 0 0 20px rgba(255, 201, 74, .75);
	animation: defi-etoile .55s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(var(--i, 0) * .16s);
}
@keyframes defi-etoile {
	from { opacity: 0; transform: scale(.3) rotate(-30deg); }
	to { opacity: 1; transform: none; }
}
.defi-fin__titre { margin: 0 0 6px; color: #fff; font: 800 clamp(1.5rem, 6vw, 2rem)/1.1 var(--d-titre); letter-spacing: -.02em; }
.defi-fin__score { margin: 0 0 6px; color: var(--d-gris); }
.defi-fin__score strong { color: #fff; }
.defi-fin__record {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 201, 74, .15);
	border: 1px solid rgba(255, 201, 74, .5);
	color: var(--d-or);
	font-weight: 800;
	font-size: .82rem;
}
.defi-fin__conseil { margin: 0 auto; max-width: 44ch; color: var(--d-gris); font-size: .95rem; }
.defi-fin__recap,
.defi-fin__fiches { margin-top: 22px; text-align: left; }
.defi-fin__sous {
	margin: 0 0 10px;
	color: var(--k);
	font: 800 .78rem/1.3 var(--d-texte-f);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.defi-fin__note { margin: 8px 0 0; color: var(--d-gris); font-size: .82rem; }
.defi-fin__fiches ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.defi-fin__fiches a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	min-height: 44px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid rgba(163, 169, 255, .45);
	background: rgba(163, 169, 255, .06);
	color: #fff;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.25;
	text-decoration: none;
}
.defi-fin__fiches a:hover { background: rgba(163, 169, 255, .16); }
.defi-fin__fiches a .ic { color: var(--d-lagon); }
.defi-fin .defi__actions { justify-content: center; margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* Mouvement réduit                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.defis *,
	.defi-modale,
	.defi-modale * {
		animation: none !important;
		transition: none !important;
	}
	.defi-carte:hover,
	.defi-carte__btn:hover,
	.defi-btn--plein:hover,
	.defi-choix:hover:not([aria-disabled="true"]),
	.defi-duo__btn:hover:not([aria-disabled="true"]),
	.defis-hub__defi:hover { transform: none; }
}

/* Contraste élevé (Windows) */
@media (forced-colors: active) {
	.defi-carte,
	.defi-ordre__item,
	.defi-choix,
	.defi-duo__btn,
	.defi-modale__boite { border: 2px solid CanvasText; }
	.defi-etoiles span.is-on,
	.defi-fin__etoiles span.is-on { color: Highlight; }
}