/* ==========================================================================
   Dofus Guide — feuille de styles unique
   Direction : éditoriale monochrome. Le dessin repose sur la typographie,
   la grille et des filets. Aucun dégradé, aucune ombre portée, aucun arrondi.
   ========================================================================== */

/* 1. Police ---------------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* 2. Jetons ---------------------------------------------------------------- */

:root {
	--font: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Échelle typographique : fort contraste entre titrage et texte courant. */
	--fs-micro: 0.6875rem;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
	--fs-2xl: clamp(2rem, 1.6rem + 1.9vw, 3rem);
	--fs-3xl: clamp(2.5rem, 1.85rem + 3.1vw, 4.25rem);

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	--wrap: 76rem;
	--measure: 42rem;
	--gutter: clamp(1.25rem, 4vw, 3rem);

	--speed: 120ms;
}

:root,
:root[data-theme="light"] {
	color-scheme: light;

	--bg: #ffffff;
	--bg-alt: #f6f6f4;
	--bg-invert: #111110;

	--text: #111110;
	--text-2: #56544e;
	--text-3: #6e6b64;

	--rule: #e2e1dc;
	--rule-mid: #c9c7c0;
	--rule-strong: #111110;

	--accent: #b4261a;
	--text-invert: #fbfbf9;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #0f0f0e;
	--bg-alt: #171716;
	--bg-invert: #f2f1ed;

	--text: #f2f1ed;
	--text-2: #a5a29a;
	--text-3: #8d8a82;

	--rule: #2a2a28;
	--rule-mid: #3d3c39;
	--rule-strong: #f2f1ed;

	--accent: #ff5a4d;
	--text-invert: #0f0f0e;
}

/* 3. Base ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.6;
	font-synthesis-weight: none;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4 {
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.021em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p, li { text-wrap: pretty; }

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rule-mid);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color var(--speed) linear, text-decoration-color var(--speed) linear;
}

a:hover {
	color: var(--accent);
	text-decoration-color: currentColor;
}

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

::selection { background: var(--text); color: var(--bg); }

hr { border: none; border-top: 1px solid var(--rule); }

/* Libellé éditorial : petites capitales espacées, omniprésentes dans la grille. */
.label {
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
	line-height: 1.4;
}

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

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 100;
	padding: var(--sp-3) var(--sp-4);
	background: var(--text);
	color: var(--bg);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.skip-link:focus { top: 0; color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* 4. Grille ---------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

main { flex: 1 0 auto; }

/* Titre de section : un filet noir épais, un libellé, un compteur. */
.section { padding-block: var(--sp-7); }
.section + .section { padding-top: 0; }

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--rule-strong);
	margin-bottom: var(--sp-1);
}

.section__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.section__link {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--text-2);
	white-space: nowrap;
}

.section__link:hover { color: var(--accent); }

/* 5. En-tête : bandeau Almanax, grande recherche, navigation --------------- */

.header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	transition: transform 180ms ease;
}

.header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	height: 4.25rem;
}

.brand {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}

.brand:hover { color: var(--text); }
.brand img { height: 1.5rem; width: auto; }
.brand .logo { display: block; height: 1.75rem; width: auto; }
.footer .brand .logo { height: 1.5rem; }

/* Grande barre de recherche, résultats instantanés. */
.bigsearch {
	position: relative;
	flex: 1 1 auto;
	max-width: 44rem;
}

.bigsearch__form {
	display: flex;
	align-items: center;
	height: 2.75rem;
	border: 1px solid var(--rule-mid);
	background: var(--bg-alt);
	transition: border-color var(--speed), background var(--speed);
}

.bigsearch__form:focus-within { border-color: var(--text); background: var(--bg); }
.bigsearch.is-open .bigsearch__form { border-color: var(--text); background: var(--bg); }

.bigsearch__icon { display: grid; place-items: center; width: 2.75rem; flex: none; color: var(--text-2); }

.bigsearch__form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 var(--sp-3) 0 0;
	border: 0;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: var(--fs-base);
	-webkit-appearance: none;
	appearance: none;
}

.bigsearch__form input::placeholder { color: var(--text-3); }
.bigsearch__form input:focus { outline: none; }
.bigsearch__form input::-webkit-search-cancel-button { cursor: pointer; }

.bigsearch__kbd {
	flex: none;
	margin-right: var(--sp-3);
	padding: 0 0.4rem;
	border: 1px solid var(--rule-mid);
	color: var(--text-3);
	font: 600 var(--fs-xs) / 1.5 var(--font-mono);
}

.bigsearch__form:focus-within .bigsearch__kbd { display: none; }

.bigsearch__results {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: min(70svh, 36rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--bg);
	border: 1px solid var(--rule-strong);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}

.sr-group {
	margin: 0;
	padding: var(--sp-3) var(--sp-4) var(--sp-1);
	color: var(--text-3);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sr-item {
	display: block;
	padding: 0.4rem var(--sp-4) 0.4rem 3.25rem;
	color: var(--text);
	text-decoration: none;
	background: no-repeat var(--sp-4) center / 1.5rem;
}

/* Icône du jeu selon le type de résultat. */
.sr-item--q { background-image: url("../img/jeu/icone-quete.webp"); }
.sr-item--d { background-image: url("../img/jeu/icone-boss.webp"); }
.sr-item--o { background-image: url("../img/jeu/icone-dofus.webp"); }
.sr-item--m { background-image: url("../img/jeu/icone-monstres.webp"); }
.sr-item--a { background-image: url("../img/jeu/icone-almanax.webp"); }
.sr-item--z { background-image: url("../img/jeu/icone-salles.webp"); }
.sr-item--p { background-image: url("../img/jeu/icone-quetes.webp"); }

.sr-item__title { display: block; font-weight: 600; }
.sr-item__meta { display: block; color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item__meta mark { color: var(--text); }
.sr-item mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sr-item__via { color: var(--text); }

.sr-item[aria-selected="true"], .sr-all[aria-selected="true"] { background-color: var(--bg-alt); }

.sr-all {
	display: block;
	margin-top: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	border-top: 1px solid var(--rule);
	color: var(--text);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.header__tools {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex: none;
	margin-inline-start: auto;
}

.iconbtn {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: var(--text-2);
}

.iconbtn:hover { color: var(--text); }

[data-theme="light"] .iconbtn__moon,
[data-theme="dark"] .iconbtn__sun { display: none; }

.nav-toggle { display: none; }

/* Seconde ligne de l'en-tête : la navigation, et l'Almanax du jour à droite. */
.header__sub { border-top: 1px solid var(--rule); }

.header__subinner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	height: 2.75rem;
}

.nav { min-width: 0; }

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Almanax du jour : mêmes codes que la navigation (texte courant, filet). */
.almanax-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
	margin-inline-start: auto;
	padding-inline-start: var(--sp-5);
	border-left: 1px solid var(--rule);
	color: var(--text-2);
	font-size: var(--fs-sm);
	text-decoration: none;
	white-space: nowrap;
}

.almanax-bar__label {
	color: var(--text-3);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.almanax-bar__offrande { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text); }
.almanax-bar__offrande img { flex: none; width: 22px; height: 22px; }
.almanax-bar__offrande strong { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.almanax-bar__bonus { overflow: hidden; text-overflow: ellipsis; }
.almanax-bar__bonus::before { content: "·"; margin-right: var(--sp-3); color: var(--text-3); }
.almanax-bar__cta { color: var(--text); transition: transform var(--speed); }

.almanax-bar:hover { color: var(--text); }
.almanax-bar:hover .almanax-bar__offrande strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.almanax-bar:hover .almanax-bar__cta { transform: translateX(2px); }

@media (max-width: 75rem) {
	.almanax-bar__bonus { display: none; }
}

.nav__list a {
	font-size: var(--fs-sm);
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	padding-block: var(--sp-2);
	border-bottom: 2px solid transparent;
}

.nav__list a:hover { color: var(--text); border-bottom-color: var(--text); }

.nav__list .current-menu-item > a,
.nav__list .current_page_item > a {
	color: var(--text);
	border-bottom-color: var(--accent);
}

/* Téléphone et tablette : marque et outils, puis la recherche sur toute la largeur.
   En descendant, la première ligne se replie : la recherche reste en haut. */
@media (max-width: 62rem) {
	.header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand tools" "search search";
		gap: 0 var(--sp-3);
		height: auto;
		padding-block: var(--sp-2) var(--sp-3);
	}

	.brand { grid-area: brand; align-self: center; height: 2.5rem; display: flex; align-items: center; }
	.header__tools { grid-area: tools; }
	.bigsearch { grid-area: search; max-width: none; }

	.header.is-tucked { transform: translateY(-3rem); }

	.nav-toggle { display: grid; }

	.header__subinner { height: 2.5rem; }
	.almanax-bar { margin-inline-start: 0; padding-inline-start: 0; border-left: 0; width: 100%; }
	.almanax-bar__cta { margin-inline-start: auto; }

	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--bg);
		border-bottom: 1px solid var(--rule);
		padding: 0 var(--gutter) var(--sp-4);
	}

	.nav[data-open="true"] { display: block; }

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: auto;
	}

	.nav__list a {
		display: block;
		padding: var(--sp-3) 0;
		font-size: var(--fs-md);
		border-bottom: 1px solid var(--rule);
	}

	.bigsearch__kbd { display: none; }

	.bigsearch__results {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		max-height: calc(100svh - 7rem);
		border-inline: 0;
		box-shadow: 0 16px 32px rgb(0 0 0 / 0.18);
	}
}

/* 6. Formulaires et boutons ------------------------------------------------ */

.searchform { display: flex; }

.searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--rule-mid);
	border-right: none;
	background: var(--bg);
	color: var(--text);
	font-size: var(--fs-sm);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.searchform input::placeholder { color: var(--text-3); }

.searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--text);
}

.searchform button {
	display: grid;
	place-items: center;
	padding-inline: 0.6rem;
	border: 1px solid var(--rule-mid);
	background: var(--bg);
	color: var(--text-2);
}

.searchform button:hover {
	background: var(--text);
	border-color: var(--text);
	color: var(--bg);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--text);
	background: var(--text);
	color: var(--bg);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.btn:hover { background: var(--bg); color: var(--text); }

.btn--ghost { background: none; color: var(--text); border-color: var(--rule-mid); }
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* 7. Étiquettes de taxonomie ----------------------------------------------- */

.badge {
	font-size: var(--fs-xs);
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
}

.badge:hover { color: var(--accent); }

.badge + .badge::before {
	content: "·";
	margin-inline: 0.4em;
	color: var(--rule-mid);
}

/* 8. Listes de contenus : des lignes, pas des cartes ----------------------- */

.rows { border-bottom: 1px solid var(--rule); }

.row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--sp-2) var(--sp-5);
	padding-block: var(--sp-4);
	border-top: 1px solid var(--rule);
}

.row:hover { background: var(--bg-alt); }

.row__main { min-width: 0; }

.row__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: 0.3rem;
}

.row__type {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
}

.row__title {
	font-size: var(--fs-md);
	font-weight: 550;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.row__title a { text-decoration: none; }

.row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.row:hover .row__title { color: var(--accent); }

.row__excerpt {
	margin-top: 0.3rem;
	font-size: var(--fs-sm);
	color: var(--text-2);
	max-width: 46rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.row__meta {
	display: flex;
	align-items: baseline;
	gap: var(--sp-5);
	font-size: var(--fs-xs);
	color: var(--text-3);
	white-space: nowrap;
}

.row__level { color: var(--text-2); font-weight: 600; }

@media (max-width: 40rem) {
	.row { grid-template-columns: 1fr; }
	.row__meta { gap: var(--sp-4); }
}

/* 9. Grille de rubriques : une vraie grille au filet ----------------------- */

/* Huit cellules : 2 colonnes en mobile, 4 au-delà — jamais de cellule orpheline. */
.hubs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

@media (min-width: 52rem) {
	.hubs { grid-template-columns: repeat(4, 1fr); }
}

.hub {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding: var(--sp-4);
	min-height: 6.5rem;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}

.hub:hover { background: var(--text); color: var(--bg); }
.hub:hover .hub__count { color: var(--bg); }

.hub__index {
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--text-3);
}

.hub:hover .hub__index { color: var(--bg); }

.hub__name {
	font-size: var(--fs-md);
	font-weight: 550;
	letter-spacing: -0.015em;
	margin-top: auto;
}

.hub__count { font-size: var(--fs-xs); color: var(--text-3); }

/* 10. Accueil -------------------------------------------------------------- */

.masthead {
	padding-block: var(--sp-8) var(--sp-7);
	border-bottom: 2px solid var(--rule-strong);
}

.masthead h1 {
	font-size: var(--fs-3xl);
	max-width: 18ch;
	margin-bottom: var(--sp-4);
}

.masthead__text {
	font-size: var(--fs-md);
	color: var(--text-2);
	max-width: 44ch;
}

.masthead__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-5);
	margin-top: var(--sp-6);
}

.masthead__stat {
	font-size: var(--fs-xs);
	color: var(--text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.masthead__stat b {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--text);
	margin-right: 0.35em;
}


/* 11. En-tête d'archive ---------------------------------------------------- */

.archive-header {
	padding-block: var(--sp-7) var(--sp-5);
	border-bottom: 2px solid var(--rule-strong);
}

.archive-header h1 {
	font-size: var(--fs-2xl);
	margin-top: var(--sp-2);
}

.archive-header__text {
	margin-top: var(--sp-3);
	color: var(--text-2);
	max-width: 52ch;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2) var(--sp-4);
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--rule);
}

.filters__label {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
}

.filters__group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}

.filters a {
	font-size: var(--fs-sm);
	color: var(--text-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.filters a:hover { color: var(--text); border-bottom-color: var(--text); }

/* 12. Fil d'Ariane --------------------------------------------------------- */

.breadcrumb {
	padding-top: var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	padding: 0;
}

.breadcrumb li { display: flex; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: var(--rule-mid); }
.breadcrumb a { text-decoration: none; color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }

/* 13. Article -------------------------------------------------------------- */

.layout {
	display: grid;
	gap: var(--sp-7);
	align-items: start;
	padding-block: var(--sp-6) var(--sp-8);
}

@media (min-width: 64rem) {
	/* La colonne de texte est bornée à la justification : tous les filets de
	   l'article s'alignent alors sur la même longueur. */
	.layout--sidebar {
		grid-template-columns: minmax(0, var(--measure)) 15rem;
		justify-content: space-between;
		gap: var(--sp-8);
	}

	.layout__aside {
		position: sticky;
		top: 8.25rem;
		display: flex;
		flex-direction: column;
		gap: var(--sp-6);
		max-height: calc(100svh - 10rem);
		overflow-y: auto;
	}
}

@media (max-width: 63.99rem) {
	.layout__aside { order: -1; }
}

.entry-header {
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--sp-6);
}

.entry-header__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
}

.entry-header h1 {
	font-size: var(--fs-2xl);
	max-width: 22ch;
}

.entry-header__standfirst {
	margin-top: var(--sp-4);
	font-size: var(--fs-md);
	color: var(--text-2);
	max-width: 54ch;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin-top: var(--sp-5);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

.entry-thumb {
	margin-bottom: var(--sp-6);
	border: 1px solid var(--rule);
}

.entry-thumb img { width: 100%; }

/* Corps de texte */

.prose {
	font-size: var(--fs-md);
	line-height: 1.7;
}

.prose > * + * { margin-top: var(--sp-4); }

.prose h2 {
	margin-top: var(--sp-7);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--rule);
	scroll-margin-top: 8.5rem;
	font-size: var(--fs-lg);
}

.prose h3 {
	margin-top: var(--sp-6);
	scroll-margin-top: 8.5rem;
	font-size: var(--fs-md);
}

.prose h4 { margin-top: var(--sp-5); font-size: var(--fs-base); }

.prose > h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.prose .lead {
	font-size: var(--fs-lg);
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--text);
}

.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--text-3); }

.prose figure { margin-block: var(--sp-6); }

/* Les images gardent leur taille naturelle : une icône de 48 px ne doit pas
   être étirée à la largeur de la colonne. Seules les figures s'y ajustent. */
.prose img {
	max-width: 100%;
	height: auto;
}

.prose figure img {
	width: 100%;
	border: 1px solid var(--rule);
	background: var(--bg-alt);
}

/* Icônes en ligne dans les tableaux : alignées sur le texte. */
.prose td img {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}

.prose figcaption {
	margin-top: var(--sp-2);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--rule);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

/* Les cartes de donjon vont par paire — plan puis vue tactique. */
@media (min-width: 52rem) {
	.prose figure + figure { margin-top: var(--sp-5); }
}

/* Illustration à la une : cadrage sobre, sans effet. */
.entry-thumb img { width: 100%; }

.prose blockquote {
	border-left: 2px solid var(--text);
	padding-left: var(--sp-4);
	font-size: var(--fs-lg);
	line-height: 1.45;
	letter-spacing: -0.015em;
}

.prose code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--bg-alt);
	padding: 0.1em 0.35em;
}

.prose pre {
	background: var(--bg-alt);
	border: 1px solid var(--rule);
	padding: var(--sp-4);
	overflow-x: auto;
	font-size: var(--fs-sm);
}

.prose pre code { background: none; padding: 0; }

.prose hr { margin-block: var(--sp-6); }

/* Tableaux */

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.prose :is(th, td) {
	padding: 0.55rem 0.75rem 0.55rem 0;
	text-align: left;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.prose th {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-3);
	border-bottom: 1px solid var(--rule-strong);
}

.table-scroll { overflow-x: auto; margin-block: var(--sp-5); }

/* Encadrés : un filet et un libellé, aucune couleur de fond. */

.callout {
	border-left: 2px solid var(--text);
	padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
	font-size: var(--fs-base);
}

.callout > * + * { margin-top: var(--sp-2); }

.callout::before {
	content: "Astuce";
	display: block;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
	margin-bottom: var(--sp-2);
}

.callout--info::before { content: "Information"; }
.callout--warning::before { content: "Attention"; color: var(--accent); }
.callout--warning { border-left-color: var(--accent); }

/* Étapes numérotées */

.prose { counter-reset: dg-step; }

.step {
	counter-increment: dg-step;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--rule);
}

.step::before {
	content: counter(dg-step, decimal-leading-zero);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--text-3);
	letter-spacing: 0.04em;
	line-height: 1.7;
}

/* 14. Colonne latérale ----------------------------------------------------- */

.aside-block + .aside-block { margin-top: var(--sp-6); }

.aside-block__title {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--rule-strong);
	margin-bottom: var(--sp-3);
}

/* Sommaire */

.toc__list {
	list-style: none;
	padding: 0;
	counter-reset: toc;
}

.toc__item a {
	display: block;
	padding: 0.25rem 0 0.25rem var(--sp-3);
	border-left: 1px solid var(--rule);
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--text-2);
	text-decoration: none;
}

.toc__item a:hover { color: var(--text); border-left-color: var(--text-3); }

.toc__item--h3 a { padding-left: var(--sp-5); font-size: var(--fs-xs); }

.toc__item a[aria-current="true"] {
	color: var(--text);
	font-weight: 600;
	border-left-color: var(--accent);
}

/* Fiche technique */

.statblock__list { display: flex; flex-direction: column; }

.statblock__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-4);
	padding-block: 0.4rem;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-sm);
}

.statblock__row dt { color: var(--text-3); }
.statblock__row dd { font-weight: 600; text-align: right; }

/* 15. Listes de méta (prérequis, butin, succès…) --------------------------- */

.metalist {
	margin-top: var(--sp-7);
	padding-top: var(--sp-3);
	border-top: 2px solid var(--rule-strong);
}

/* Le « à retenir » ouvre l'article : il respire avant le corps de texte. */
.metalist--intro {
	margin-top: 0;
	margin-bottom: var(--sp-7);
}

.metalist__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--sp-3);
}

.metalist__items { list-style: none; padding: 0; }

.metalist__items li {
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-sm);
	color: var(--text-2);
}

/* Déroulé d'une quête : une liste numérotée, alignée sur la grille. */

.steplist { list-style: none; padding: 0; counter-reset: none; }

.steplist__item {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: var(--sp-2);
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-sm);
}

.steplist__num {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--text-3);
	letter-spacing: 0.04em;
	line-height: 1.7;
}

.steplist__label { color: var(--text-2); }

/* 16. Pagination ----------------------------------------------------------- */

.pagination { margin-top: var(--sp-6); }

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	list-style: none;
	padding: 0;
}

.pagination a,
.pagination span {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--rule);
	font-size: var(--fs-sm);
	text-decoration: none;
	color: var(--text-2);
}

.pagination a:hover { border-color: var(--text); color: var(--text); }

.pagination .current {
	background: var(--text);
	border-color: var(--text);
	color: var(--bg);
	font-weight: 600;
}

/* 17. États vides et 404 --------------------------------------------------- */

.empty {
	padding-block: var(--sp-8);
	max-width: var(--measure);
}

.empty h1, .empty h2 { margin-bottom: var(--sp-3); }
.empty p { color: var(--text-2); margin-bottom: var(--sp-5); }

.empty__code {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
	margin-bottom: var(--sp-3);
}

.empty__search { max-width: 22rem; margin-bottom: var(--sp-7); }

/* 18. Pied de page --------------------------------------------------------- */

.footer {
	margin-top: var(--sp-8);
	border-top: 2px solid var(--rule-strong);
	padding-block: var(--sp-6) var(--sp-5);
	font-size: var(--fs-sm);
}

.footer__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	padding-bottom: var(--sp-6);
}

.footer__about p {
	color: var(--text-2);
	margin-top: var(--sp-3);
	max-width: 30ch;
}

.footer__title {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
	margin-bottom: var(--sp-3);
}

.footer ul { list-style: none; padding: 0; }
.footer li + li { margin-top: var(--sp-2); }
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--text); }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--rule);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	list-style: none;
	padding: 0;
}

.footer__legal li + li { margin-top: 0; }

.footer__disclaimer {
	margin-top: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--text-3);
	max-width: 60ch;
}

/* 19. Fiches de jeu : portraits, tableaux clé-valeur, cellules à icône ----- */

/* Un portrait de monstre est un petit sprite : il garde sa taille naturelle,
   calé à gauche, au lieu d'être étiré sur toute la colonne. */
.prose .figure--portrait { margin-block: var(--sp-4) var(--sp-5); }

.prose .figure--portrait img {
	width: auto;
	max-width: 14rem;
	background: var(--bg-alt);
}

.prose .figure--portrait figcaption { max-width: 14rem; }

/* Tableau clé-valeur : pas d'en-tête, première colonne en libellé. */
.prose table.kv thead { display: none; }

.prose table.kv td:first-child {
	color: var(--text-3);
	width: 11rem;
	white-space: nowrap;
}

/* Icône + libellé sur une seule ligne, l'icône ne pousse jamais le texte en dessous. */
.prose .item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.prose .item img { margin-right: 0; }

.prose td:first-child .item { min-width: 9rem; }

/* 20. Fiches de jeu : cartes de stats, salles en duo, positions copiables -- */

/* Carte de caractéristiques d'un monstre : portrait, stats, résistances. */
.prose .statcard {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--sp-3) var(--sp-5);
	align-items: start;
	padding: var(--sp-4) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-block: var(--sp-4) var(--sp-5);
}

@media (max-width: 40rem) {
	.prose .statcard { grid-template-columns: 1fr; }
}

.prose .statcard__portrait { margin: 0; }

.prose .statcard__portrait img {
	width: 100%;
	max-width: 8.5rem;
	background: var(--bg-alt);
	border: 1px solid var(--rule);
}

.prose .statcard__title {
	font-size: var(--fs-md);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 var(--sp-2);
}

.prose .statcard__title small {
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--text-3);
	margin-left: 0.5em;
}

.prose .stats,
.prose .resists {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}

.prose .stats { margin-bottom: var(--sp-3); }

.prose .stats li,
.prose .resists li {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--fs-sm);
	margin: 0;
}

.prose .stats img,
.prose .resists img {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	border: none;
}

.prose .stats b { font-weight: 650; }
.prose .resists li { color: var(--text-2); }

/* Une résistance négative est une faiblesse : c'est là qu'il faut frapper. */
.prose .resists .neg { color: var(--accent); font-weight: 650; }

.prose .resists__label {
	flex-basis: 100%;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-3);
}

/* Élément ou caractéristique en ligne dans une cellule. */
.prose .el {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	white-space: nowrap;
}

.prose .el img { width: 1.1rem; height: 1.1rem; margin: 0; border: none; vertical-align: middle; }

/* Taux de drop : le chiffre, et une barre pour le lire d'un coup d'œil. */
.prose .rate {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	white-space: nowrap;
}

.prose .rate__bar {
	display: inline-block;
	width: 4.5rem;
	height: 6px;
	background: var(--rule);
}

.prose .rate__bar i {
	display: block;
	height: 100%;
	width: var(--w, 0%);
	background: var(--text);
}

/* Salles en duo : le plan à gauche, la vue tactique à droite. */
.prose .rooms-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
	margin-block: var(--sp-4) var(--sp-6);
}

.prose .rooms-pair figure { margin: 0; }
.prose .rooms-pair img { cursor: zoom-in; }

@media (max-width: 40rem) {
	.prose .rooms-pair { grid-template-columns: 1fr; }
}

/* Sur grand écran, le duo déborde dans la marge libre entre le texte et la
   colonne latérale : chaque carte gagne 40 % de largeur. */
@media (min-width: 82rem) {
	.prose .rooms-pair { width: 58rem; }
}

/* Position copiable : un clic met « /travel x,y » dans le presse-papiers. */
.prose .pos {
	font: inherit;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	padding: 0 0.1em;
	border: none;
	border-bottom: 1px dashed var(--text-3);
	background: none;
	color: inherit;
	cursor: copy;
	white-space: nowrap;
}

.prose .pos:hover { color: var(--accent); border-bottom-color: var(--accent); }
.prose .pos.pos--fixe { cursor: default; border-bottom-color: transparent; }
.prose .pos.pos--fixe:hover { color: inherit; }

.prose .pos[data-copied]::after {
	content: "copié";
	margin-left: 0.5em;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
}

/* Visionneuse plein écran pour les cartes. */
.lightbox {
	padding: 0;
	border: none;
	background: transparent;
	max-width: 96vw;
}

.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }

.lightbox img {
	display: block;
	max-width: 96vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	cursor: zoom-out;
}

.lightbox figcaption {
	color: #f2f1ed;
	text-align: center;
	font-size: var(--fs-sm);
	padding: var(--sp-3) 0 0;
}

/* Glyphes blancs de l'interface du jeu (éléments, PV, PM) : noirs sur le thème
   clair, tels quels sur le sombre. */
.prose img.mono { filter: invert(1); }
:root[data-theme="dark"] .prose img.mono { filter: none; }

/* La colonne « Effet » doit pouvoir passer à la ligne : un bloc inline-flex
   insécable débordait sur la cellule voisine. */
.prose .el {
	display: inline;
	white-space: normal;
}

.prose .el img {
	display: inline-block;
	vertical-align: -0.2em;
	margin-right: 0.3em;
}

/* Tableaux de sorts : coût et portée tiennent sur une ligne, l'espace va aux effets. */
.prose table.spells td:nth-child(2),
.prose table.spells td:nth-child(3) { white-space: nowrap; }
.prose table.spells td:first-child { min-width: 9rem; }

/* 21. Fiche donjon : l'essentiel d'abord ----------------------------------
   Une seule colonne pleine largeur. Le texte courant reste à 46rem, les blocs
   visuels (.wide) et les titres de partie occupent toute la largeur. */

.dj { padding-block: var(--sp-5) var(--sp-7); }

.dj__header {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: var(--sp-5);
}

.dj__header h1 { font-size: var(--fs-3xl); max-width: none; }
.dj__header .entry-header__standfirst { max-width: 46rem; }

.dj .prose { max-width: none; }
.dj .prose > * { max-width: 46rem; }
.dj .prose > h2,
.dj .prose > .wide { max-width: none; }

.dj .prose > h2 { margin-top: var(--sp-8); }

.dj__updated {
	margin-top: var(--sp-7);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

/* En-tête : le donjon à gauche, sa carte d'identité à droite. */
.dj-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--sp-5) var(--sp-6);
	align-items: start;
}

@media (max-width: 56rem) {
	/* minmax(0, …) : la ligne de liens défilante ne doit pas élargir la colonne. */
	.dj-hero { grid-template-columns: minmax(0, 1fr); }
}

.dj-hero > * { min-width: 0; }

.prose .dj-hero__visual { margin: 0; }
.prose .dj-hero__visual img { aspect-ratio: 16 / 10; object-fit: cover; }

.dj-card { border-top: 2px solid var(--rule-strong); }

.dj-card__boss {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-block: var(--sp-3);
	border-bottom: 1px solid var(--rule);
}

.prose .dj-card__boss img { width: 88px; height: 88px; margin: 0; flex: none; }

.dj-card__boss strong { display: block; font-size: var(--fs-md); line-height: 1.25; }
.dj-card__boss span { font-size: var(--fs-xs); color: var(--text-3); }

.prose .dj-card__facts { margin: 0; }

.dj-card__facts > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-3);
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-sm);
}

.dj-card__facts dt { color: var(--text-3); flex: none; }
.dj-card__facts dd { margin: 0; text-align: right; font-weight: 600; }
.dj-card__facts dd small { display: block; font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.prose .dj-card__facts img { display: inline-block; width: 1.4rem; height: 1.4rem; margin: 0 0.3em 0 0; vertical-align: -0.35em; }

/* Bouton principal : copier la commande de voyage. */
.prose .pos.pos--cta {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--sp-4);
	padding: 0.75rem 1rem;
	border: 1px solid var(--text);
	background: var(--text);
	color: var(--bg);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.prose .pos.pos--cta:hover { background: var(--bg); color: var(--text); }
.prose .pos.pos--cta[data-copied]::after { color: inherit; }

.dj-card__hint { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }

/* Navigation de page. */
.prose .onpage { margin: var(--sp-6) 0 0; }

.prose .onpage ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.prose .onpage li { margin: 0; }

.prose .onpage a {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--rule-mid);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
}

.prose .onpage a:hover { border-color: var(--text); color: var(--text); }

/* Salles : plan et vue tactique occupent toute la largeur. */
.dj .prose .rooms-pair { width: auto; margin-block: var(--sp-3) var(--sp-6); }

/* Monstres : une grille de fiches, portrait net à taille réelle. */
.mgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: var(--sp-6);
}

.mcard { border-top: 1px solid var(--rule-strong); padding-top: var(--sp-4); }

.mcard__head {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-3);
}

.prose .mcard__head img { width: 96px; height: 96px; margin: 0; flex: none; }
.mgrid--boss .mcard__head img { width: 128px; height: 128px; }

.prose .mcard__name { font-size: var(--fs-md); font-weight: 650; margin: 0; letter-spacing: -0.015em; }
.prose .mcard__lvl { font-size: var(--fs-xs); color: var(--text-3); margin: 0.15rem 0 0; }
.prose .mcard__note { font-size: var(--fs-sm); color: var(--text-2); margin: var(--sp-3) 0; line-height: 1.55; }

.prose .mcard__spells { list-style: none; padding: 0; margin: var(--sp-3) 0 0; border-top: 1px solid var(--rule); }

.prose .mcard__spells li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 0 var(--sp-3);
	padding-block: 0.6rem;
	margin: 0;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.prose .mcard__spells > li > img { width: 32px; height: 32px; margin: 0; }
.prose .mcard__spells b { display: block; font-size: var(--fs-sm); }
.prose .mcard__spells .meta { color: var(--text-2); }
.prose .mcard__spells p { margin: 0.2rem 0 0; color: var(--text-3); }

/* Le boss : une seule fiche, sur deux colonnes (identité, puis sorts). */
.mgrid--boss { grid-template-columns: 1fr; }

@media (min-width: 56rem) {
	.mgrid--boss .mcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 var(--sp-6); }
	.mgrid--boss .mcard__spells { margin-top: 0; }
}

/* Butin : une grille façon inventaire plutôt qu'un long tableau. */
.prose .loot {
	list-style: none;
	padding: 0;
	margin: var(--sp-3) 0 var(--sp-5);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0 var(--sp-5);
}

.prose .loot li {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding-block: 0.55rem;
	margin: 0;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-sm);
}

.prose .loot img { width: 40px; height: 40px; margin: 0; }
.prose .loot small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.prose .loot .rate__bar { width: 3rem; }

/* Butin : trois colonnes suffisent, à quatre les noms passaient sur trois lignes. */
.prose .loot { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.prose .loot .rate { justify-self: end; }

/* Sur téléphone, les liens de section tiennent sur une ligne qui défile
   au doigt : neuf boutons empilés occupaient tout un écran. */
@media (max-width: 40rem) {
	.prose .onpage ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
	}
	.prose .onpage ul::-webkit-scrollbar { display: none; }
	.prose .onpage li { flex: none; }
	.prose .onpage a { white-space: nowrap; }
}

/* 22. Navigation de page illustrée et quêtes ------------------------------
   Chaque lien de section porte l'icône du menu du jeu correspondante. */

.prose .onpage a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.75rem 0.3rem 0.5rem;
}

.prose .onpage img {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
}

/* Quêtes : une fiche courte par quête, l'essentiel en une phrase. */
.qgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: var(--sp-5) var(--sp-6);
	margin-block: var(--sp-4) var(--sp-5);
}

.qcard {
	display: flex;
	flex-direction: column;
	border-top: 2px solid var(--rule-strong);
	padding-top: var(--sp-4);
}

.qcard__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

/* L'icône de quête du jeu, décorative : posée en CSS, hors du contenu. */
.qcard__head::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	background: url("../img/jeu/icone-quete.webp") center / contain no-repeat;
}

.prose .qcard__when {
	margin: 0;
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}

.prose .qcard__name { margin: 0.1rem 0 0; font-size: var(--fs-md); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.prose .qcard__lvl { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
.prose .qcard__why { margin: var(--sp-3) 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.prose .qcard__why strong { color: var(--text); }

.prose .qcard__facts { margin: 0 0 var(--sp-3); }
.qcard__facts > div:first-child { border-top: 1px solid var(--rule); }

.prose .qcard__reward {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: 0 var(--sp-3);
	margin: auto 0 0;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.prose .qcard__reward img { width: 32px; height: 32px; margin: 0; }
.prose .qcard__reward small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }

/* Quêtes d'événement : une ligne chacune, icône de quête répétable du jeu. */
.prose .qlist { list-style: none; padding: 0; }

.prose .qlist li {
	position: relative;
	padding: 0.6rem 0 0.6rem 2.5rem;
	margin: 0;
	border-bottom: 1px solid var(--rule);
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--text-2);
}

.prose .qlist li:first-child { border-top: 1px solid var(--rule); }

.prose .qlist li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.7rem;
	width: 24px;
	height: 24px;
	background: url("../img/jeu/icone-quete-repetable.webp") center / contain no-repeat;
}

.prose .qlist .qname { font-weight: 650; color: var(--text); }
.prose .qlist .meta { margin-left: 0.4rem; font-size: var(--fs-xs); color: var(--text-3); }

/* En-tête sur grand écran : la navigation de page se loge sous l'image, dans
   la hauteur laissée libre par la carte d'identité. Sur téléphone, l'ordre
   du document suffit : image, carte, puis navigation. */
.dj-hero > .onpage { margin: 0; }

@media (min-width: 56.0625rem) {
	.dj-hero {
		grid-template-areas: "visual card" "nav card";
		grid-template-rows: auto 1fr;
	}
	.dj-hero__visual { grid-area: visual; }
	.dj-hero > .dj-card { grid-area: card; }
	.dj-hero > .onpage { grid-area: nav; align-self: start; }
}

@media (max-width: 56rem) {
	.dj-hero > .onpage { margin-top: var(--sp-2); }
}

/* 23. Fiche quête --------------------------------------------------------
   Même charpente que les donjons ; les étapes forment le cœur de la page. */

/* Carte d'identité : l'icône de quête du jeu à la place du portrait de boss. */
.dj-card__boss--quest::before {
	content: "";
	flex: none;
	width: 56px;
	height: 56px;
	background: url("../img/jeu/icone-quete.webp") center / 28px no-repeat, var(--bg-alt);
	border: 1px solid var(--rule);
}

/* Étapes : une ligne par étape, le texte à gauche, la carte du lieu à droite. */
.prose .qsteps {
	list-style: none;
	padding: 0;
	margin: var(--sp-4) 0 var(--sp-6);
}

.prose .qstep {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
	margin: 0;
	padding-block: var(--sp-5);
	border-top: 1px solid var(--rule);
}

.prose .qstep:first-child { border-top: 2px solid var(--rule-strong); }

@media (min-width: 56.0625rem) {
	.prose .qstep { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-6); }
	.prose .qstep--nomap { grid-template-columns: minmax(0, 46rem); }
}

.prose .qstep__body > * + * { margin-top: var(--sp-3); }

.prose .qstep__title {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin: 0;
	font-size: var(--fs-lg);
	line-height: 1.3;
}

.qstep__num {
	flex: none;
	display: inline-grid;
	place-items: center;
	min-width: 2rem;
	height: 2rem;
	padding-inline: 0.4rem;
	background: var(--text);
	color: var(--bg);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transform: translateY(-0.1em);
}

.prose .qstep__where {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--text-2);
}

.prose .qstep__places { list-style: none; padding: 0; }
.prose .qstep__places li { margin: 0; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.prose .qstep__places li + li { margin-top: 0; }

/* Choix de dialogue : à cliquer tels quels dans le jeu. */
.prose .choices { padding: var(--sp-3) var(--sp-4); background: var(--bg-alt); border-left: 2px solid var(--text); }
.prose .choices .label { margin: 0 0 var(--sp-2); }
.prose .choices ol { margin: 0; padding-left: 1.25rem; }
.prose .choices li { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.prose .choices li + li { margin-top: 0.3rem; }

.prose .qstep .callout { margin-top: var(--sp-3); }

/* Cartes des lieux. */
.prose .qstep__maps { display: grid; gap: var(--sp-3); align-content: start; }
.prose .qstep__map { margin: 0; }
.prose .qstep__map img { aspect-ratio: 950 / 593; object-fit: cover; cursor: zoom-in; }
.prose .qstep__map figcaption { font-variant-numeric: tabular-nums; }

/* Objets : à donner, reçus, à prévoir. */
.prose .qitems {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}

.prose .qitem {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

.prose .qitem img { width: 32px; height: 32px; margin: 0; flex: none; object-fit: contain; }
.prose .qitem small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }
.prose .qitem--donne small { color: var(--accent); }

.qitem__xp {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--rule-mid);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* Variante liste : une ligne par objet, avec d'où il vient. */
.prose .qitems--list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0 var(--sp-5); }
.prose .qitems--list .qitem { padding-block: 0.55rem; border-bottom: 1px solid var(--rule); }

/* Sorts décrits sans icône (monstres de quête). */
.prose .mcard__spells--text li { grid-template-columns: 1fr; }

/* Série d'un succès : la quête en cours est signalée. */
.prose .qlist--serie li::before { background-image: url("../img/jeu/icone-quete.webp"); }
.prose .qlist--serie li.is-current { background: var(--bg-alt); }
.prose .qlist--serie li.is-current .qname { text-decoration: underline; text-underline-offset: 3px; }

/* Plusieurs lieux pour une étape : vignettes côte à côte. */
.prose .qstep__maps--grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.prose .qstep__maps--grid figcaption { font-size: var(--fs-micro); }

/* Quête sans capture du lieu de départ : la carte d'identité seule, puis la navigation. */
@media (min-width: 56.0625rem) {
	.dj-hero--solo { grid-template-columns: minmax(0, 30rem); grid-template-areas: "card" "nav"; }
}

/* 24. Almanax : le calendrier sur une page -------------------------------
   Une ligne par jour : la date à gauche, la Méryde, l'offrande et le bonus. */
.prose .almanax-list {
	list-style: none;
	padding: 0;
	margin: var(--sp-4) 0 var(--sp-6);
	border-top: 2px solid var(--rule-strong);
}

.prose .almanax-jour {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: var(--sp-4);
	margin: 0;
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--rule);
	scroll-margin-top: 8.5rem;
}

.prose .almanax-jour__date { margin: 0; color: var(--text-2); line-height: 1.2; }
.prose .almanax-jour__num {
	display: block;
	color: var(--text);
	font-size: var(--fs-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.prose .almanax-jour__body > * { margin: 0; }
.prose .almanax-jour__body > * + * { margin-top: var(--sp-2); }
.prose .almanax-jour__meryde { font-size: var(--fs-md); font-weight: 650; }
.prose .almanax-jour__fete { margin-left: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 400; }
.prose .almanax-jour__offrande { display: flex; align-items: center; gap: var(--sp-2); }
.prose .almanax-jour__offrande img { flex: none; width: 32px; height: 32px; }
.prose .almanax-jour__bonus { color: var(--text-2); font-size: var(--fs-sm); }
.prose .almanax-jour__bonus strong { display: block; color: var(--text); }

.prose .almanax-source { color: var(--text-2); font-size: var(--fs-sm); }

.prose .almanax-fetes { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.prose .almanax-fetes li { margin: 0; border-bottom: 1px solid var(--rule); }
.prose .almanax-fetes a { display: block; padding: var(--sp-3) 0; color: var(--text-2); text-decoration: none; }
.prose .almanax-fetes a strong { color: var(--text); }
.prose .almanax-fetes a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Le jour même, dans le calendrier. */
.prose .almanax-jour.is-today { background: var(--bg-alt); box-shadow: -0.75rem 0 0 var(--bg-alt), 0.75rem 0 0 var(--bg-alt); }

/* En tête : les sept prochains jours (rendus par le thème, selon la date à Paris). */
.prose .almanax-week { margin: 0 0 var(--sp-6); }
.prose .almanax-week h2 { margin-top: 0; padding-top: 0; border-top: 0; }

.prose .almanax-week__list {
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
	border-top: 2px solid var(--rule-strong);
}

.prose .almanax-week__day { margin: 0; border-bottom: 1px solid var(--rule); }

.prose .almanax-week__day > a {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 13rem);
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	color: inherit;
	text-decoration: none;
}

.prose .almanax-week__day > a:hover .almanax-week__offrande strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.prose .almanax-week__when { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.3; }
.prose .almanax-week__when strong { display: block; color: var(--text); font-size: var(--fs-base); }
.prose .almanax-week__offrande { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.prose .almanax-week__offrande img { flex: none; }
.prose .almanax-week__meryde { color: var(--text-2); font-size: var(--fs-sm); }

/* Ordinateur : l'icône à gauche, l'offrande et sa Méryde l'une sous l'autre. */
@media (min-width: 40.0625rem) {
	.prose .almanax-week__offrande { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--sp-3); }
	.prose .almanax-week__offrande img { grid-row: span 2; }
	.prose .almanax-week__offrande strong { line-height: 1.3; }
	.prose .almanax-week__meryde { line-height: 1.3; }
}
.prose .almanax-week__bonus { color: var(--text-2); font-size: var(--fs-sm); }
.prose .almanax-week__bonus strong { color: var(--text); font-weight: 600; }
.prose .almanax-week__desc { display: block; margin-top: var(--sp-1); }

/* Aujourd'hui : la ligne mise en avant. */
.prose .almanax-week__day.is-today { border-bottom: 2px solid var(--rule-strong); }
.prose .almanax-week__day.is-today > a { grid-template-columns: 11rem minmax(0, 1fr); padding: var(--sp-4) 0; }
.prose .almanax-week__day.is-today .almanax-week__when strong { font-size: var(--fs-lg); }
.prose .almanax-week__day.is-today .almanax-week__offrande { font-size: var(--fs-md); }
.prose .almanax-week__day.is-today .almanax-week__bonus { grid-column: 2; }

@media (max-width: 40rem) {
	.prose .almanax-week__day > a,
	.prose .almanax-week__day.is-today > a { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
	.prose .almanax-week__day.is-today .almanax-week__bonus { grid-column: auto; }
	.prose .almanax-week__when strong { display: inline; margin-right: var(--sp-2); }
}

.prose .almanax-steps li + li { margin-top: var(--sp-2); }

@media (max-width: 40rem) {
	.prose .almanax-jour { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sp-3); }
}

/* Mois du calendrier : accès direct sur téléphone, où le sommaire latéral est masqué. */
.prose .almanax-mois ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
	gap: var(--sp-2);
	margin: 0 0 var(--sp-6);
	padding: 0;
	list-style: none;
}
.prose .almanax-mois li { margin: 0; }
.prose .almanax-mois a {
	display: block;
	padding: var(--sp-2) 0;
	border: 1px solid var(--rule-mid);
	color: inherit;
	font-size: var(--fs-sm);
	font-weight: 650;
	text-align: center;
	text-decoration: none;
}
.prose .almanax-mois a:hover { border-color: var(--rule-strong); }

@media (max-width: 63.99rem) {
	.layout--almanax .layout__aside { display: none; }
}
@media (min-width: 64rem) {
	.prose .almanax-mois { display: none; }
}

/* 25. Habillage du jeu : icônes, portraits de boss, tuiles --------------------
   Les visuels viennent des fichiers du jeu ; la grille reste celle du site
   (filets, fond clair, petites capitales). */

/* Lignes de liste : le visuel du jeu à gauche. */
.row--visual { grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; }

.row__visual {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	background: var(--bg-alt);
	border: 1px solid var(--rule);
}

.row__portrait { width: 52px; height: 52px; object-fit: contain; }
.row__icon { width: 30px; height: 30px; object-fit: contain; }

@media (max-width: 40rem) {
	.row--visual { grid-template-columns: 3rem minmax(0, 1fr); }
	.row--visual .row__visual { width: 3rem; height: 3rem; align-self: start; }
	.row--visual .row__portrait { width: 44px; height: 44px; }
	.row--visual .row__meta { grid-column: 2; }
}

/* Tuiles de donjon : le boss en grand. */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.tile__visual {
	position: relative;
	display: grid;
	place-items: center;
	height: 9.5rem;
	background: var(--bg-alt);
	border-bottom: 1px solid var(--rule);
	overflow: hidden;
}

.tile__visual img { width: 112px; height: 112px; object-fit: contain; transition: transform 200ms ease; }
.tile__visual .tile__icon { width: 48px; height: 48px; opacity: 0.6; }
.tile:hover .tile__visual img { transform: scale(1.07); }

.tile__level {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--rule-mid);
	background: var(--bg);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tile__body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.tile__kicker {
	color: var(--text-3);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tile__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.tile__title a { text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: 0; }
.tile:hover .tile__title { color: var(--accent); }

.tile__boss { color: var(--text-2); font-size: var(--fs-sm); }
.tile__boss span { margin-right: 0.3em; color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tile__meta { margin-top: auto; padding-top: var(--sp-2); color: var(--text-3); font-size: var(--fs-xs); }

.tiles--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

@media (max-width: 40rem) {
	.tiles, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile__visual { height: 7.5rem; }
	.tile__visual img { width: 88px; height: 88px; }
	.tile__body { padding: var(--sp-3); }
	.tile__title { font-size: var(--fs-base); }
}

.section--tiles { scroll-margin-top: 8.5rem; }

/* Rubriques de l'accueil : l'icône du jeu de chaque rubrique. */
.hub { min-height: 8.5rem; }
.hub__icon { width: 44px; height: 44px; object-fit: contain; }
.hub__name { margin-top: auto; }
.hub--soon { color: var(--text-2); }
.hub--soon .hub__icon { filter: grayscale(1); opacity: 0.45; }
.hub:hover .hub__icon { filter: none; opacity: 1; }

/* Accueil : le titre et l'Almanax du jour côte à côte. */
.masthead--home { display: grid; gap: var(--sp-6); align-items: end; }

@media (min-width: 64rem) {
	.masthead--home { grid-template-columns: minmax(0, 1fr) 26rem; }
}

.masthead__stat { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.masthead__stat img { width: 28px; height: 28px; object-fit: contain; }
.masthead__stat:hover b { color: var(--accent); }

.home-almanax { padding: var(--sp-4) var(--sp-5) var(--sp-5); border: 2px solid var(--rule-strong); background: var(--bg); }

.home-almanax__kicker {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-almanax__kicker img { width: 28px; height: 28px; }
.home-almanax__date { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }

.home-almanax__today { display: block; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.home-almanax__offrande { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); line-height: 1.2; }
.home-almanax__offrande img { flex: none; }
.home-almanax__meryde { display: block; margin-top: 0.3rem; color: var(--text-2); font-size: var(--fs-sm); }
.home-almanax__bonus { display: block; margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
.home-almanax__bonus strong { display: block; color: var(--text); }
.home-almanax__today:hover .home-almanax__offrande strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.home-almanax__next { margin: 0; padding: 0; list-style: none; }
.home-almanax__next a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; }
.home-almanax__next a:hover strong { color: var(--accent); }
.home-almanax__when { flex: none; width: 6.5rem; color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.home-almanax__small { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text); }
.home-almanax__small strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.home-almanax__all { display: inline-block; margin-top: var(--sp-3); border-bottom: 1px solid var(--text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.home-almanax__all:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Zones de l'accueil. */
.zones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.zone {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-3) var(--sp-4);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}

.zone img { grid-row: span 2; width: 28px; height: 28px; }
.zone__name { font-weight: 600; }
.zone__count { color: var(--text-3); font-size: var(--fs-xs); }
.zone:hover { background: var(--bg-alt); }
.zone:hover .zone__name { color: var(--accent); }

/* En-tête d'archive illustré. */
.archive-header--icon { display: flex; align-items: flex-start; gap: var(--sp-5); }
.archive-header__icon { flex: none; width: 64px; height: 64px; margin-top: var(--sp-4); object-fit: contain; }

@media (max-width: 40rem) {
	.archive-header__icon { width: 44px; height: 44px; }
}

.filters a small { color: var(--text-3); font-size: var(--fs-xs); }
.filters--zones .filters__group { gap: var(--sp-2) var(--sp-4); }

.filters__more { flex-basis: 100%; }
.filters__more summary { display: inline-block; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.filters__more summary:hover { color: var(--text); }
.filters__more[open] summary { margin-bottom: var(--sp-2); }

/* 26. Zones et sous-zones : carte du jeu, sous-zones, monstres ---------------
   La carte est l'image du jeu ; le calque SVG porte les sous-zones cliquables,
   les entrées de donjon (portrait du boss) et les zaaps. */
.zone-prose > p, .zone-prose > h3 { max-width: var(--measure); }

.zmap { margin: 0 0 var(--sp-6); }
.zmap__canvas { position: relative; width: 100%; max-height: 80svh; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--bg-alt); }
.zmap__canvas img, .zmap__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zmap__canvas img { object-fit: cover; }
.zmap__canvas svg { overflow: visible; }

.zmap__fill { fill: transparent; transition: fill var(--speed); shape-rendering: crispEdges; }
.zmap__edge { fill: none; stroke: rgb(17 17 16 / 0.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.zmap a .zmap__zone:hover .zmap__fill,
.zmap a:focus-visible .zmap__fill { fill: rgb(255 255 255 / 0.28); }
.zmap__zone.is-current .zmap__fill { fill: rgb(255 255 255 / 0.2); }
.zmap__zone.is-current .zmap__edge { stroke: #111110; stroke-width: 3; }
.zmap__zone.is-muted .zmap__fill { fill: rgb(17 17 16 / 0.28); }
.zmap__zone.is-muted:hover .zmap__fill { fill: rgb(17 17 16 / 0.12); }

.zmap__label {
	fill: #111110;
	paint-order: stroke;
	stroke: rgb(255 255 255 / 0.85);
	stroke-width: 3px;
	font: 700 12px/1 var(--font);
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}
.zmap__label.is-current { font-size: 16px; }

.zmap__dungeon circle { fill: #fff; stroke: #111110; stroke-width: 2; vector-effect: non-scaling-stroke; }
.zmap__dungeon:hover circle { stroke: var(--accent); stroke-width: 3; }
.zmap__zaap circle { fill: #111110; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.zmap__zaap text { fill: #fff; font: 700 12px/1 var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }

.zmap figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-xs); }
.zmap__legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.zmap__key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.zmap__key::before { content: ""; width: 14px; height: 14px; border: 2px solid #111110; }
.zmap__key--dungeon::before { border-radius: 50%; background: #fff; }
.zmap__key--zaap::before { border-radius: 50%; background: #111110; border-color: #111110; }

@media (max-width: 40rem) {
	.zmap__label { display: none; }
	.zmap__canvas { max-height: none; }
}

/* Sous-zones : cartes au filet. */
.prose .subzones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	margin: var(--sp-4) 0 var(--sp-6);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.prose .subzones li { margin: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prose .subzones a { display: flex; flex-direction: column; gap: 0.15rem; height: 100%; padding: var(--sp-3) var(--sp-4); color: inherit; text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; }
.prose .subzones a:hover { background: var(--bg-alt); }
.prose .subzones a:hover strong { color: var(--accent); }
.prose .subzones strong { font-size: var(--fs-base); }
.prose .subzones span { color: var(--text-2); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.prose .subzones small { color: var(--text-3); font-size: var(--fs-xs); }

/* Monstres : grille de portraits. */
.prose .mcells {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: 0;
	margin: var(--sp-4) 0 var(--sp-6);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.prose .mcell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	margin: 0;
	padding: var(--sp-3) var(--sp-2);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-align: center;
	line-height: 1.25;
}
.prose .mcell img { width: 64px; height: 64px; object-fit: contain; }
.prose .mcell__none { width: 64px; height: 64px; background: var(--bg-alt); }
.prose .mcell__name { font-size: var(--fs-sm); font-weight: 600; }
.prose .mcell__lvl { color: var(--text-2); font-size: var(--fs-xs); }
.prose .mcell__where { color: var(--text-3); font-size: var(--fs-xs); }

/* Sous-zone : repères. */
.prose .zfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0; margin: 0 0 var(--sp-6); border-top: 2px solid var(--rule-strong); }
.prose .zfacts div { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.prose .zfacts dt { color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.prose .zfacts dd { margin: 0.2rem 0 0; font-size: var(--fs-sm); }

/* Quêtes d'une zone, par sous-zone : listes compactes. */
.qzones { margin: 0; }
.qzone { border-top: 1px solid var(--rule); }
.qzone > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	cursor: pointer;
	list-style: none;
}
.qzone > summary::-webkit-details-marker { display: none; }
.qzone > summary::before { content: "+"; width: 1.25rem; flex: none; color: var(--text-3); font-weight: 700; }
.qzone[open] > summary::before { content: "−"; }
.qzone__name { flex: 1; font-size: var(--fs-md); font-weight: 600; }
.qzone__count { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.qzone__link { display: inline-flex; align-items: center; min-height: 24px; margin: -0.25rem -0.5rem; padding: 0.25rem 0.5rem; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.qzone ul { columns: 2 18rem; column-gap: var(--sp-6); margin: 0 0 var(--sp-4) 1.25rem; padding: 0; list-style: none; }
.qzone li { break-inside: avoid; display: flex; align-items: center; gap: var(--sp-2); padding: 0.3rem 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.qzone li img { flex: none; width: 20px; height: 20px; }
.qzone li a { flex: 1; text-decoration: none; }
.qzone li a:hover { color: var(--accent); }
.qzone li small { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }

/* Page « Zones » : une carte par zone. */
.zone-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.zone-card { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: var(--sp-4); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-decoration: none; }
.zone-card__visual { display: block; aspect-ratio: 16 / 10; margin-bottom: var(--sp-3); overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--rule); }
.zone-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease; }
.zone-card:hover .zone-card__visual img { transform: scale(1.04); }
.zone-card__name { padding-inline: var(--sp-4); font-size: var(--fs-md); font-weight: 600; }
.zone-card:hover .zone-card__name { color: var(--accent); }
.zone-card__meta { padding-inline: var(--sp-4); color: var(--text-3); font-size: var(--fs-xs); }
.zmap__mask { fill: rgb(17 17 16 / 0.42); pointer-events: none; }

/* 27. Signaler une erreur, commentaires ------------------------------------ */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.report {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-5);
	margin-top: var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--rule-mid);
	background: var(--bg-alt);
}
.report__title { margin: 0; font-weight: 650; }
.report__text { margin: 0.2rem 0 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 52ch; }

.report-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); margin: auto; padding: 0; border: 2px solid var(--rule-strong); background: var(--bg); color: var(--text); }
.report-dialog::backdrop { background: rgb(17 17 16 / 0.5); }
.report-form { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.report-dialog__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.report-dialog__page { margin: -0.6rem 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.report-form__status { min-height: 1.3em; margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.report-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }

.prose .contact-form { display: grid; gap: var(--sp-4); max-width: 36rem; margin: var(--sp-5) 0; padding: var(--sp-5); border: 1px solid var(--rule); }
.prose .contact-form__note { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.field { display: grid; gap: 0.35rem; margin: 0; }
.field > span, .field > label { color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.field input, .field select, .field textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--rule-mid);
	border-radius: 0;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); }
.field textarea { resize: vertical; }

.comments { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 2px solid var(--rule-strong); max-width: 46rem; }
.comments__title { font-size: var(--fs-lg); }
.comments__notice { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent); background: var(--bg-alt); font-size: var(--fs-sm); }
.comments__empty, .comments__note { color: var(--text-2); font-size: var(--fs-sm); }
.comments__list, .comments__list .children { margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.comments__list .children { margin-left: var(--sp-5); padding-left: var(--sp-4); border-left: 1px solid var(--rule); }
.comments__list .comment article { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.comment__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; margin: 0; font-size: var(--fs-sm); }
.comment__meta time { color: var(--text-3); font-size: var(--fs-xs); }
.comment__text { margin-top: var(--sp-2); font-size: var(--fs-base); line-height: 1.6; }
.comment__text p { margin: 0 0 var(--sp-2); }
.comment-reply-link { font-size: var(--fs-xs); font-weight: 600; }
.comment-respond { margin-top: var(--sp-6); }
.comments__form-title { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 700; }
.comment-form { display: grid; gap: var(--sp-4); }
.comment-form-cookies-consent { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--text-2); font-size: var(--fs-xs); }
.comment-form .form-submit { margin: 0; }
#cancel-comment-reply-link { margin-left: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; }

/* Page des quêtes : par zone, par succès, par niveau. */
.vues { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); margin: var(--sp-5) 0 var(--sp-2); border-bottom: 1px solid var(--rule); }
.vues a { margin-bottom: -1px; padding: var(--sp-2) var(--sp-4); border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 600; text-decoration: none; }
.vues a:hover { color: var(--text); }
.vues a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.vues__intro { max-width: 62ch; margin: 0 0 var(--sp-4); color: var(--text-2); }
.filters--jump { margin-bottom: var(--sp-4); }
.qzone__body { padding: 0 0 var(--sp-4) 1.25rem; }
.qzone .qzone__sub { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-1); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--rule-mid); font-size: var(--fs-sm); font-weight: 700; }
.qzone .qzone__sub:first-child { margin-top: 0; }
.qzone .qzone__sub a { text-decoration: none; }
.qzone .qzone__sub a:hover { color: var(--accent); }
.qzone .qzone__sub small { flex: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.qzone .qzone__dofus { margin: 0 0 var(--sp-1); color: var(--text-2); font-size: var(--fs-xs); }
.qzone .qzone__dofus a { font-weight: 600; }
.qzone .qmini, .qsucces .qmini { columns: 2 18rem; column-gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }
.qzone .qmini li, .qsucces .qmini li { break-inside: avoid; display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.qzone ul.qmini li::before, .qsucces ul.qmini li::before { content: ""; flex: none; width: 20px; height: 20px; background: url("../img/jeu/icone-quete.webp") center / contain no-repeat; }
.qzone ul.qmini li.is-rep::before, .qsucces ul.qmini li.is-rep::before { background-image: url("../img/jeu/icone-quete-repetable.webp"); }
.qzone ol.qmini, .qsucces ol.qmini { counter-reset: q; }
.qzone ol.qmini li, .qsucces ol.qmini li { counter-increment: q; }
.qzone ol.qmini li::before, .qsucces ol.qmini li::before { content: counter(q); flex: none; width: 20px; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: center; }
.qzone .qmini a, .qsucces .qmini a, .qsucces .qmini li > span { flex: 1; text-decoration: none; }
.qzone .qmini a:hover, .qsucces .qmini a:hover { color: var(--accent); }
.qzone .qmini small, .qsucces .qmini small { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }

/* Succès : icône du jeu, en tête de groupe et dans les listes. */
.ach-icon { flex: none; object-fit: contain; }
.qzone__name { display: inline-flex; align-items: center; gap: var(--sp-2); }
.qzone .qzone__sub--ach { justify-content: flex-start; align-items: center; gap: var(--sp-2); }
.qzone .qzone__sub--ach > span { flex: 1; }
.dj-card__facts .ach-fact { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); text-decoration: none; }
.dj-card__facts .ach-fact + .ach-fact { margin-top: var(--sp-1); }
.dj-card__facts .ach-fact:hover span { color: var(--accent); }

.prose .dofus-ach { display: flex; align-items: center; gap: var(--sp-4); }
.prose .dofus-ach img { flex: none; margin: 0; }
.prose .dofus-ach p { margin: 0; }
.dj-card__facts dd .ach-fact { display: inline-flex; }

/* Fiche quête : le succès dont elle fait partie. */
.qsucces { margin: var(--sp-7) 0 var(--sp-5); padding: var(--sp-5); border: 1px solid var(--rule); }
.qsucces + .qsucces { margin-top: var(--sp-4); }
.qsucces__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.qsucces__kicker { margin: 0; color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.qsucces__title { margin: 0.15rem 0; font-size: var(--fs-lg); }
.qsucces__meta { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.qsucces .qsucces__desc { margin: 0 0 var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }
.prose .qsucces { margin: var(--sp-5) 0; }
.prose .qsucces__title { margin: 0.15rem 0; }
.prose .qsucces__head p, .prose .qsucces__head .ach-icon { margin: 0; }
.qsucces .qzone__dofus { margin: 0 0 var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }
.qsucces .qzone__dofus a { font-weight: 600; }
.qsucces .qmini { margin: 0; padding: 0; list-style: none; }
.qsucces .qmini li.is-current { font-weight: 700; }
.qsucces .qmini li.is-current::before { color: var(--accent); font-weight: 700; }
.qsucces__nav { display: flex; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-4) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.qsucces__nav a { text-decoration: none; }
.qsucces__nav a:hover { color: var(--accent); }
.qsucces__next { margin-left: auto; text-align: right; }

@media (max-width: 40rem) {
	/* Mobile : le compte passe sous le nom du groupe. */
	.qzone > summary { flex-wrap: wrap; gap: 0 var(--sp-3); }
	.qzone__count { order: 3; flex-basis: 100%; padding-left: calc(1.25rem + var(--sp-3)); white-space: normal; }
	.qzone__body { padding-left: 0; }
	.qzone .qzone__sub { flex-wrap: wrap; }
	.qzone .qzone__sub small { white-space: normal; }
	.qsucces { padding: var(--sp-4); }
	.qsucces__nav { flex-direction: column; }
	.qsucces__next { margin-left: 0; text-align: left; }
}

/* 28. Fiches Dofus ---------------------------------------------------------
   L'œuf en grand sur un halo clair, ses effets, son passif, le parcours. */
.dofus-visual {
	display: grid;
	place-items: center;
	min-height: 20rem;
	margin: 0;
	background: radial-gradient(circle at 50% 45%, var(--bg) 0%, var(--bg-alt) 70%);
	border: 1px solid var(--rule);
}
.dofus-visual img { width: 240px; height: 240px; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.12)); }

.dj-card__boss--dofus::before {
	content: "";
	flex: none;
	width: 56px;
	height: 56px;
	background: url("../img/jeu/icone-dofus.webp") center / 30px no-repeat, var(--bg-alt);
	border: 1px solid var(--rule);
}

.prose .dofus-effects { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; padding: 0; list-style: none; }
.prose .dofus-effects li { margin: 0; padding: 0.35rem 0.75rem; border: 1px solid var(--rule-strong); font-size: var(--fs-sm); font-weight: 650; }

.prose .dofus-passive { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--accent); background: var(--bg-alt); }
.prose .dofus-passive p { margin: 0; }
.prose .dofus-passive p + p { margin-top: var(--sp-2); }
.prose .dofus-passive__name { color: var(--text-2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.prose .qstep__title a { text-decoration: none; }
.prose .qstep__title a:hover { color: var(--accent); }
.prose .dofus-step__label { margin-bottom: calc(-1 * var(--sp-2)); color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.prose .dofus-step__meta { color: var(--text-2); font-size: var(--fs-sm); }
.prose .dofus-step__more { font-size: var(--fs-sm); font-weight: 600; }
.prose .dofus-step__more a { text-decoration: none; border-bottom: 1px solid var(--text); }
.prose .dofus-step__more a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Les succès à terminer : chaque sous-succès et ses quêtes, en liste compacte. */
.prose .ach-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6); }
.prose .ach-group { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--rule); }
.prose .ach-group--sub { margin-top: var(--sp-3); padding: 0; border: 0; }
.prose .ach-group__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.prose .ach-group__sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-1); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); font-weight: 700; }
.prose .ach-group__title small, .prose .ach-group__sub small { flex: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; }
.prose .ach-group__note, .prose .ach-group__txt { margin: var(--sp-2) 0; color: var(--text-2); font-size: var(--fs-sm); }
.prose .ach-list { margin: 0; padding: 0; list-style: none; counter-reset: ach; font-size: var(--fs-sm); }
.prose .ach-list li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0 var(--sp-3); align-items: baseline; margin: 0; padding: 0.3rem 0; border-bottom: 1px dashed var(--rule); counter-increment: ach; }
.prose .ach-list li::before { content: counter(ach) "."; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.prose .ach-list li small { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose .ach-list a { text-decoration: none; }
.prose .ach-list a:hover { color: var(--accent); }

/* Les autres Dofus : une frise d'icônes. */
.dofus-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.dofus-strip li { margin: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dofus-strip a { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); height: 100%; padding: var(--sp-3) var(--sp-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; }
.dofus-strip a:hover { background: var(--bg-alt); color: var(--accent); }
.dofus-strip img { width: 56px; height: 56px; object-fit: contain; transition: transform 200ms ease; }
.dofus-strip a:hover img { transform: scale(1.08); }

.tile--dofus .tile__visual { background: radial-gradient(circle at 50% 45%, var(--bg) 0%, var(--bg-alt) 72%); }
.tile--dofus .tile__visual img { filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.12)); }

@media (max-width: 40rem) {
	.dofus-visual { min-height: 14rem; }
	.dofus-visual img { width: 180px; height: 180px; }
}
.prose .dj-hero__visual.dofus-visual img { width: 240px; height: 240px; aspect-ratio: auto; object-fit: contain; border: 0; background: none; }
@media (max-width: 40rem) { .prose .dj-hero__visual.dofus-visual img { width: 180px; height: 180px; } }
.callout--prerequis::before { content: "Prérequis"; }
.callout--savoir::before { content: "À savoir"; }