/**
 * Style "pia" — étape 2 : page d'index (panneau d'accueil, liste des forums, colonne de droite) et pied de page.
 * Maquettes : Ordi_index.jpg (clair), Couleur_sombre.jpg (sombre).
 * Tout passe par les tokens de tokens.css → aucune couleur en dur ici.
 */

/* ---------------------------------------------------------------------
   Corps de page
--------------------------------------------------------------------- */
.page-body {
	max-width: 1920px;
	margin: 0 auto;
	padding: 2rem var(--pia-gutter) 0;
	clear: none;
}

:where(.pia-index, .pia-welcome, .pia-footer) a {
	color: inherit;
	text-decoration: none;
}
:where(.pia-index, .pia-welcome, .pia-footer) a:hover {
	color: inherit; /* prosilver : a:hover rouge-rose */
}

/* Titres : Playfair + petit trait rouge dessous (ou dessus pour .pia-heading--below) */
.pia-heading {
	position: relative;
	margin: 0 0 1.1rem;
	padding: 0 0 0.7rem;
	font-family: var(--pia-font-heading);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.1vw, 2.2rem);
	line-height: 1.1;
	color: var(--pia-text);
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}
.pia-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.6rem;
	height: 2px;
	background: var(--pia-accent);
}
.pia-heading--below {
	margin: 1rem 0 0;
	padding: 0.8rem 0 0;
}
.pia-heading--below::after {
	top: 0;
	bottom: auto;
}
.pia-heading--sub {
	margin-top: 2.2rem;
}

/* ---------------------------------------------------------------------
   Panneau d'accueil
--------------------------------------------------------------------- */
.pia-welcome {
	display: grid;
	grid-template-columns: minmax(15rem, 1.1fr) auto auto minmax(16rem, 1.6fr);
	gap: 1.5rem clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
	margin: 0 0 1rem;
	padding: 1.6rem clamp(1.2rem, 2vw, 2.2rem) 1.8rem;
	border: 1px solid var(--pia-bars);
	border-left: 4px solid var(--pia-accent);
	background: var(--pia-bg);
	color: var(--pia-text);
	font-size: 0.78rem;
	line-height: 1.5;
}
/* Avec la colonne « Derniers messages » (maquette : entre les Préliens et les Top-Partenaires) */
.pia-welcome--latest {
	grid-template-columns: minmax(12rem, 1.1fr) auto minmax(11rem, 15rem) auto minmax(13rem, 1.4fr);
	gap: 1.5rem clamp(1rem, 2vw, 2.5rem);
}
.pia-welcome p {
	margin: 0 0 0.7rem;
	font-size: inherit;
	font-weight: 300;
	color: inherit;
}
.pia-welcome strong {
	font-weight: 600;
}

/* Les 3 pictos : SVG en ligne (welcomePanel.html), couleur du texte du thème, sans fond (directement sur le panneau),
   donc justes en clair comme en sombre, sans filtre d'inversion. */
.pia-pictos {
	display: flex;
	flex-wrap: wrap; /* colonne étroite (panneau à 5 colonnes) : les pictos passent à la ligne au lieu de déborder */
	gap: 0.7rem;
	margin-top: 1rem;
}
.pia-picto {
	display: block;
	width: 5.2rem;
	height: auto;
	aspect-ratio: 91 / 97;
	background: none; /* posés directement sur le fond du panneau (demande d'Amaury) */
	color: var(--pia-text);
	font-family: var(--pia-font-body);
}

/* Préliens (valcret/links_manager → prelien.html) : 4 affiches verticales, noms visibles seulement aux lecteurs d'écran */
.pia-welcome .preliens {
	display: flex;
	gap: 0.5rem;
}
.pia-welcome .preliens a {
	display: block;
	position: relative;
}
.pia-welcome .preliens img {
	display: block;
	width: var(--pia-prelien-w);
	height: auto;
	aspect-ratio: 77 / 184;
	object-fit: cover;
}
.pia-welcome .preliens span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Derniers messages (valcret/latestposts) : 4 lignes pleines — blanches en clair, noires en sombre (--pia-extreme) —,
   titre du sujet au-dessus, auteur du dernier message dessous, sur une seule ligne chacun. */
.pia-latest {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pia-latest__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0.45rem 0.8rem;
	background: var(--pia-extreme);
	color: var(--pia-text);
	line-height: 1.3;
}
.pia-latest__title,
.pia-latest__author {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pia-latest__title:hover {
	color: var(--pia-accent-text);
}
/* Ancienneté (« il y a 12 minutes ») après l'auteur : même couleur, atténuée (pas de nouvelle couleur hors palette) */
.pia-latest__sep,
.pia-latest__time {
	opacity: 0.7;
}

/* Top-Partenaires (valcret/links_manager → vip.html) : grille de 4 colonnes, le dernier carré est le « + ».
   3 rangées réservées : la taille des carrés est calculée pour que la grille ait exactement la hauteur des affiches
   des Préliens (largeur × 184/77, même clamp que ci-dessus) → les titres « Préliens » et « Top-Partenaires »
   tombent sur la même ligne. Les carrés viennent de l'ACP de l'extension (11 partenaires + le « + » = 3 rangées pleines). */
.pia-welcome {
	--pia-prelien-w: clamp(4rem, 4.4vw, 5rem);
	--pia-vip-gap: 0.4rem;
	--pia-vip-size: calc((var(--pia-prelien-w) * 184 / 77 - 2 * var(--pia-vip-gap)) / 3);
}
.pia-welcome .vip {
	display: grid;
	grid-template-columns: repeat(4, var(--pia-vip-size));
	grid-auto-rows: var(--pia-vip-size);
	grid-template-rows: repeat(3, var(--pia-vip-size));
	gap: var(--pia-vip-gap);
}
.pia-welcome .vip a {
	display: block;
}
.pia-welcome .vip img {
	display: block;
	width: var(--pia-vip-size);
	height: var(--pia-vip-size);
	object-fit: cover;
}

/* ---------------------------------------------------------------------
   Index : 2 colonnes (forums | colonne de droite)
--------------------------------------------------------------------- */
.pia-index {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	column-gap: clamp(1.5rem, 3.4vw, 4rem);
	align-items: start;
}
.pia-index__main,
.pia-index__side {
	min-width: 0;
}
/* La colonne de droite (« Qui est en ligne ? », légende, partenaires) suit le défilement, sous la barre fixe,
   jusqu'à la fin de la colonne de gauche (le parent .pia-index). Si elle est plus haute que l'écran, elle défile
   en interne plutôt que de rester coupée. Désactivé en une seule colonne (≤ 1100 px, voir plus bas). */
.pia-index__side {
	position: sticky;
	top: calc(var(--pia-topbar-h) + 1rem);
	max-height: calc(100vh - var(--pia-topbar-h) - 2rem);
	max-height: calc(100dvh - var(--pia-topbar-h) - 2rem);
	overflow-y: auto;
	scrollbar-width: thin;
}
/* la colonne de droite commence à la hauteur du 1er panneau, pas de la ligne « marquer comme lu » */
.pia-index--markread .pia-index__side {
	margin-top: var(--pia-markread-h);
}

.pia-markread {
	display: flex;
	align-items: center;
	height: var(--pia-markread-h);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pia-markread a {
	color: var(--pia-text);
}
.pia-markread a:hover {
	color: var(--pia-accent);
}

/* Panneau (une catégorie, ou un bloc de la colonne de droite) */
.pia-panel {
	margin: 0 0 2rem;
	padding: 1.6rem clamp(1rem, 1.6vw, 1.8rem) 1.4rem;
	border: 1px solid var(--pia-bars);
	background: var(--pia-bg);
	color: var(--pia-text);
}
/* Dernier cadre de la liste des forums : pas de marge dessous, pour que son bas s'aligne sur celui de la colonne
   de droite (« Qui est en ligne ? »), qui s'arrête au bas de la colonne de gauche. */
.pia-index__main > :last-child > .pia-panel:last-child {
	margin-bottom: 0;
}
.pia-panel__title {
	font-size: clamp(1.8rem, 2.4vw, 2.6rem);
	margin-bottom: 1.2rem;
}
.pia-panel__title a:hover {
	color: var(--pia-accent);
}
.pia-panel--nocat {
	padding-top: 0.6rem;
}

/* ---------------------------------------------------------------------
   Lignes de forum
--------------------------------------------------------------------- */
.pia-forum-list {
	list-style: none;
	margin: 0 0.5rem;
	padding: 0;
}
.pia-forum {
	display: grid;
	grid-template-columns: 2.2rem minmax(0, 1fr) 5rem minmax(0, 15rem) 2rem;
	align-items: center;
	column-gap: 1.1rem;
	padding: 1rem 0.2rem;
	border-bottom: 2px solid var(--pia-bars);
	margin: 0;
	background: none;
}

.pia-forum__icon {
	display: block;
	width: 30px;
	height: 35px;
	background: url(images/forums/reglementetinformations.png) center / contain no-repeat;
	filter: invert(var(--pia-icon-invert));
}

.pia-forum__title {
	font-family: var(--pia-font-body);
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pia-accent-text);
}
.pia-forum__title:hover {
	text-decoration: underline;
}
/* pastille « nouveaux messages » : on ne se repose pas que sur la couleur */
.pia-forum--unread .pia-forum__title {
	font-weight: 600;
}
.pia-forum__subforums {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	font-weight: 300;
}
.pia-forum__subforums a:hover {
	color: var(--pia-accent);
}

.pia-forum__count {
	text-align: center;
	line-height: 1.2;
}
.pia-forum__count strong {
	display: block;
	font-weight: 400;
	font-size: 1.3rem;
}
.pia-forum__count span {
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
}

.pia-forum__last {
	min-width: 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--pia-text);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	font-weight: 300;
}
.pia-forum__last > * {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pia-forum__last-title {
	font-weight: 400;
}
.pia-forum__last-title:hover {
	color: var(--pia-accent);
}
/* le pseudo prend la couleur du groupe (style en ligne de phpBB) ; sans couleur de groupe : rouge */
.pia-forum__last .username,
.pia-forum__last .username-coloured {
	color: var(--pia-accent-text);
	font-weight: 400;
}
.pia-forum__last-none {
	font-style: normal;
	opacity: 0.8;
}

.pia-forum__flag img {
	display: block;
	width: 24px;
	height: auto;
}

/* ---------------------------------------------------------------------
   Colonne de droite
--------------------------------------------------------------------- */
/* Annonce (valcret/announcements) : bandeau rouge, « Annonce » en Playfair à gauche, texte centré à droite, en blanc.
   Rouge plein dans les deux thèmes (maquette). Liens et pseudo (couleur de rang) en blanc : illisibles sur rouge sinon. */
.pia-announce {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.8rem 1.5rem;
	margin: 0 0 0.9rem;
	padding: 1.1rem clamp(1rem, 1.6vw, 1.8rem);
	background: var(--pia-accent);
	color: var(--pia-on-accent);
}
.pia-announce__title {
	margin: 0;
	font-family: var(--pia-font-heading);
	font-weight: 400;
	font-size: clamp(1.8rem, 2.3vw, 2.5rem);
	line-height: 1.1;
	color: inherit;
	text-transform: none;
	letter-spacing: 0;
}
.pia-announce__body {
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.pia-announce__body p {
	margin: 0;
}
.pia-announce__intro + .pia-announce__subject {
	margin-top: 0.9rem;
}
.pia-announce__author {
	display: block;
}
.pia-announce a,
.pia-announce .username-coloured {
	color: inherit !important;
}
.pia-announce a:hover,
.pia-announce a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pia-side-panel .pia-panel__title {
	font-size: clamp(1.8rem, 2.3vw, 2.5rem);
}

.pia-stats {
	font-size: 0.82rem;
	line-height: 1.5;
	font-weight: 300;
}
.pia-stats p {
	margin: 0 0 0.9rem;
	font-size: inherit;
	color: inherit;
}
.pia-stats strong {
	font-weight: 600;
}
.pia-stats__counts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0;
}
.pia-stats__counts span + span::before {
	content: "·";
	margin: 0 1.2rem;
	font-weight: 600;
}
.pia-stats__sub {
	margin: 1rem 0 0.6rem;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--pia-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--pia-text);
}
.pia-avatars {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr));
	gap: 0.5rem;
	margin-bottom: 1.2rem;
}
.pia-avatar {
	display: block;
	overflow: hidden;
	font-size: 0; /* image introuvable : le navigateur écrirait son texte alternatif (« AVATAR_SMALL ») à la place */
}
.pia-avatar img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}
/* posé par js/index-stats.js sur une tuile dont l'image n'a pas pu être chargée */
.pia-avatar--broken {
	display: none;
}
/* aucun avatar à montrer (que des robots connectés) : pas de titre orphelin */
.pia-stats__sub:has(+ .pia-avatars:not(:has(.pia-avatar))) {
	display: none;
}
.pia-stats__recent {
	text-align: justify;
}
.pia-stats__recent a:hover,
.pia-stats__names a:hover {
	color: var(--pia-accent);
}

/* Bandeau « Bienvenue à … | membres | messages » */
.pia-welcome-new {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	margin: 1.2rem 0 1rem;
	padding: 1rem 1.2rem;
	background: var(--pia-bg-stats);
}
.pia-welcome-new__who {
	min-width: 0;
	font-size: 0.8rem;
}
.pia-welcome-new__who strong {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--pia-font-heading);
	font-size: 1.3rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--pia-accent-text);
}
.pia-welcome-new__who .username,
.pia-welcome-new__who .username-coloured {
	color: var(--pia-accent-text);
}
.pia-welcome-new__totals {
	display: flex;
	text-align: center;
	font-size: 0.7rem;
	line-height: 1.2;
}
.pia-welcome-new__totals span {
	padding: 0 1.4rem;
}
.pia-welcome-new__totals span + span {
	border-left: 1px solid var(--pia-bars);
}
.pia-welcome-new__totals strong {
	display: block;
	font-size: 1.4rem;
	font-weight: 400;
}

/* Légende des groupes */
.pia-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}
.pia-pill {
	flex: 1 1 auto;
	margin: 0;
	padding: 0.55rem 0.8rem;
	text-align: center;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pia-pill-text);
}
.pia-pill--clueless { background: var(--pia-group-clueless); }
.pia-pill--dungeonners { background: var(--pia-group-dungeonners); }
.pia-pill--inbetween { background: var(--pia-group-inbetween); }
.pia-pill--circlers { background: var(--pia-group-circlers); }
.pia-pill--slaves { background: var(--pia-group-slaves); }

/* « Qui est en ligne ? » : pas de soulignement au survol (prosilver souligne tous les liens, a:hover) ;
   le clavier garde le contour de focus du navigateur. */
.pia-online a:hover,
.pia-online a:focus {
	text-decoration: none;
}

/* Partenaires (valcret/links_manager → partos.html) */
.pia-online .vipFooter {
	display: grid;
	grid-template-columns: repeat(auto-fill, 3.1rem);
	gap: 0.5rem;
}
.pia-online .vipFooter a {
	display: block;
}
.pia-online .vipFooter img {
	display: block;
	width: 3.1rem;
	height: 3.1rem;
	object-fit: cover;
}
/* emplacements libres déjà affichés en « + » : pas de « + » de fin en plus */
.pia-online .vipFooter:has(.pia-parto--libre) > .pia-parto--plus {
	display: none;
}

/* Blocs ajoutés par les extensions dans la colonne de droite (whowashere, activity24hours) */
.pia-online #day_list,
.pia-online .stat-block {
	margin: 1rem 0 0;
	font-size: 0.8rem;
}

/* ---------------------------------------------------------------------
   Pied de page : silhouette de la ville + barre de liens
--------------------------------------------------------------------- */
.pia-footer {
	margin-top: 2rem;
	background: none;
	color: var(--pia-text);
}
/* La silhouette (1283 × 628) a un fond légèrement plus clair que la page en thème clair (#f8f2ef) :
   on estompe ses bords haut et gauche ; son bord bas se fond dans la barre (même couleur). */
.pia-footer::before {
	content: "";
	display: block;
	height: clamp(12rem, 22vw, 24rem);
	aspect-ratio: 1283 / 628;
	max-width: 100%;
	margin-left: auto;
	background: url(images/RPG_JDR_new_york_forum.webp) center / 100% 100% no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, transparent 0, #000 30%);
	mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, transparent 0, #000 30%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
}
html.darkmode .pia-footer::before {
	background-image: url(images/RPG_JDR_new_york_forum2.webp);
}

.pia-footer__bar {
	background: var(--pia-bg-footer);
	padding: 0 var(--pia-gutter);
}
.pia-footer__bar ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.pia-footer__bar li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.85rem 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.pia-footer__bar li + li::before {
	content: "";
	width: 2px;
	height: 1.1rem;
	margin: 0 clamp(1.2rem, 4vw, 4.5rem);
	background: var(--pia-accent);
}
.pia-footer__bar a:hover {
	color: var(--pia-accent);
}

.pia-footer__small {
	padding: 0.8rem var(--pia-gutter) 1.4rem;
	background: var(--pia-bg-footer);
	color: var(--pia-text);
	text-align: left;
	font-size: 0.68rem;
	font-weight: 300;
}
.pia-footer__small .footer-row {
	margin: 0.2rem 0;
}
.pia-footer__small a {
	text-decoration: underline;
}
.pia-footer__small a:hover {
	color: var(--pia-accent);
}
/* Sans rien dedans (aucune extension n'y écrit, pas de debug), la bande du bas disparaît : le pied de page
   se réduit à la barre de liens. */
.pia-footer__small:has(> .pia-footer__ext:only-child):not(:has(.pia-footer__ext > *)) {
	display: none;
}
/* Ligne réservée aux extensions (sitemap, phpbb/pages…) : invisible tant qu'aucune n'y écrit */
.pia-footer__ext:empty {
	display: none;
}
.pia-footer__ext > * + * {
	margin-left: 1rem;
}

/* ---------------------------------------------------------------------
   Mobile / tablette
--------------------------------------------------------------------- */
/* 5 colonnes : elles ne tiennent plus sous ~1240px, on passe plus tôt sur 2 colonnes */
@media (max-width: 1240px) {
	.pia-welcome--latest {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1100px) {
	.pia-welcome {
		grid-template-columns: 1fr 1fr;
	}
	.pia-index {
		grid-template-columns: minmax(0, 1fr);
	}
	.pia-index__side {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.pia-index--markread .pia-index__side {
		margin-top: 0;
	}
}

@media (max-width: 782px) {
	.page-body {
		padding-top: 1.2rem;
	}
	.pia-welcome {
		grid-template-columns: minmax(0, 1fr);
	}
	.pia-welcome .preliens img {
		width: clamp(4rem, 17vw, 5.5rem);
	}

	.pia-panel {
		padding: 1.2rem 0.9rem 1rem;
	}
	.pia-forum-list {
		margin: 0;
	}
	.pia-forum {
		grid-template-columns: 2.2rem 4.5rem minmax(0, 1fr) 1.6rem;
		row-gap: 0.7rem;
	}
	.pia-forum__name {
		grid-column: 2 / 4;
	}
	.pia-forum__flag {
		grid-column: 4;
		grid-row: 1;
	}
	.pia-forum__count {
		grid-column: 2;
	}
	.pia-forum__last {
		grid-column: 3 / 5;
	}

	.pia-welcome-new {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.8rem;
	}
	.pia-welcome-new__totals {
		justify-content: flex-start;
	}
	.pia-welcome-new__totals span:first-child {
		padding-left: 0;
	}

	.pia-footer__bar li {
		padding: 0.5rem 0;
	}
	.pia-footer__bar li + li::before {
		margin: 0 1rem;
	}
}