/**
 * Style "pia" — étape 4 : page d'un sujet (viewtopic) + réponse rapide.
 * Maquette : « ordi_sujetrp.jpg ». S'appuie sur les composants de index.css / viewforum.css
 * (.pia-panel, .pia-heading, .pia-actionbar, boutons « contour »). Aucune couleur écrite en dur : uniquement les tokens.
 */

.pia-topicpage {
	min-width: 0;
}

/* ---------------------------------------------------------------------
   Composants partagés avec viewforum.css, étendus à la page d'un sujet
--------------------------------------------------------------------- */
/* les icônes des boutons « contour » (outils du sujet, tri, modération) suivent la couleur du texte */
.pia-actionbar .button .icon,
.pia-actionbar .button:hover .icon,
.pia-post__buttons .button .icon {
	color: inherit;
}
.pia-actionbar .dropdown-container {
	margin: 0;
}
.pia-actionbar .button-secondary {
	color: var(--pia-text);
}

/* Barre d'outils (bouton RÉPONDRE, outils, tri, modération) */
.pia-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}
.pia-tools form {
	margin: 0;
}
/* le clearfix de prosilver (::before/::after) créerait des colonnes fantômes dans un conteneur flex */
.pia-actionbar::before,
.pia-actionbar::after {
	display: none;
}

/* Barre d'actions à l'intérieur du panneau-titre : trait de séparation et marge propres */
.pia-actionbar--panel {
	margin: 0.2rem 0 0;
}
.pia-topichead {
	margin-bottom: 1.2rem;
	padding-bottom: 1.4rem;
}
.pia-topichead .pia-panel__title {
	margin-bottom: 1rem;
}
.pia-topichead .pia-panel__title a {
	color: inherit;
}
.pia-topichead .pia-panel__title a:hover {
	color: var(--pia-accent-text);
	text-decoration: none;
}

/* ---------------------------------------------------------------------
   Un message = un panneau : [avatar] [nom + date + boutons / texte]
--------------------------------------------------------------------- */
.pia-post {
	position: relative;
	margin: 0 0 1.2rem;
	padding: 1.2rem clamp(1rem, 1.6vw, 1.8rem);
	border-radius: 0;
	background: var(--pia-bg);
	background-image: none;
}
.pia-post .anchor {
	position: absolute;
	top: -1rem;
}
.pia-post .inner {
	display: grid;
	grid-template-columns: clamp(10rem, 22%, 15.5rem) minmax(0, 1fr);
	column-gap: clamp(1.2rem, 3vw, 2.6rem);
	align-items: start;
}
.pia-post .inner::before,
.pia-post .inner::after {
	display: none; /* clearfix de prosilver */
}
.pia-post--noavatar .inner,
.pia-post--hidden .inner {
	grid-template-columns: minmax(0, 1fr);
}
.pia-post--noavatar .inner > .postprofile,
.pia-post--hidden .inner > .postprofile {
	display: none;
}
.pia-post > .anchor + .inner,
.pia-post .inner > * {
	min-width: 0;
}

/* Profil à gauche : avatar pleine largeur de colonne (les avatars du forum sont des portraits 400×600).
   Il suit le défilement, sous la barre fixe, jusqu'à la fin du message (le parent .inner) ; sur mobile
   l'avatar est une vignette dans la première ligne, voir plus bas. */
.pia-post .inner > .postprofile {
	position: sticky;
	top: calc(var(--pia-topbar-h) + 1rem);
	float: none;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0;
	overflow: visible;
	color: var(--pia-text);
}
.pia-post .postprofile dt,
.pia-post .postprofile dd {
	margin: 0;
	line-height: 1.3;
}
.pia-post .postprofile .avatar-container,
.pia-post .postprofile .has-avatar .avatar-container {
	max-height: none;
	margin: 0;
	overflow: visible;
}
.pia-post .postprofile .avatar-container::after {
	display: none;
}
.pia-post .postprofile .avatar {
	display: block;
	float: none;
	max-width: none;
	margin: 0;
}
.pia-post .postprofile .avatar img {
	display: block;
	width: 100% !important; /* responsive.css de prosilver force « width:auto; max-height:32px » sur mobile */
	max-width: 100%;
	max-height: none;
	height: auto !important;
	border: 0;
	border-radius: 0;
}
.pia-post .postprofile dd.profile-rank {
	display: block;
	margin: 0.6rem 0 0;
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	color: var(--pia-text);
}
.pia-post .postprofile .profile-rank img {
	max-width: 100%;
}

/* Corps du message */
.pia-post .postbody {
	float: none;
	display: block;
	width: auto;
	padding: 0;
	line-height: 1.5;
	color: var(--pia-text);
}

.pia-post .postHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8rem 1.5rem;
	margin: 0 0 1.4rem;
}
.pia-post .authorNameAndDate {
	position: relative;
	min-width: 0;
	padding-bottom: 0.9rem;
}
/* petit trait rouge sous la date, comme sous les titres */
.pia-post .authorNameAndDate::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.6rem;
	height: 2px;
	background: var(--pia-accent);
}
.pia-post .authorName {
	margin: 0;
	font-family: var(--pia-font-body);
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
/* le pseudo est toujours rouge d'accent (maquette) — même pour un groupe coloré, dont la couleur est écrite en ligne par phpBB */
.pia-post .authorName a,
.pia-post .authorName strong,
.pia-post .authorName .username,
.pia-post .authorName .username-coloured {
	color: var(--pia-accent-text) !important;
	font-weight: 400;
}
.pia-post .authorName a:hover {
	text-decoration: none;
	opacity: 0.8;
}
.pia-post .postHeader p.author {
	margin: 0.25rem 0 0;
	padding: 0;
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--pia-accent-text);
}
.pia-post .postHeader p.author a {
	color: inherit;
}
.pia-post .postHeader p.author .icon,
.pia-post .postHeader p.author .fa-solid {
	margin-right: 0.15rem;
	font-size: 0.8em;
	color: inherit;
	opacity: 0.7;
}

/* Boutons du message : MODIFIER / SUPPRIMER / CITER / (COPIER LE POST, ajouté par valcret/quickcopy) */
.pia-post .postHeader .buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
	float: none;
	width: auto;
}
.pia-post .postHeader .buttons > li {
	float: none;
	margin: 0;
	padding: 0;
}
.pia-post .postHeader .buttons .button {
	/* même hauteur pour tous (texte ou icône) : boîte fixe, contenu centré */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	height: 1.85rem;
	padding: 0 0.9rem;
	border: 1px solid var(--pia-text);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	color: var(--pia-text);
	font-family: var(--pia-font-body);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pia-post .postHeader .buttons .button span {
	font-size: inherit;
	color: inherit;
}
.pia-post .postHeader .buttons .button:hover,
.pia-post .postHeader .buttons .button:focus-visible {
	background: var(--pia-text);
	color: var(--pia-bg);
	text-decoration: none;
	text-shadow: none;
}
.pia-post .postHeader .buttons .pia-button--icon {
	width: 1.85rem;
	padding: 0;
}
.pia-post .postHeader .buttons .button .icon {
	font-size: 0.8rem;
	line-height: 1;
}
/* Retour visuel de « Copier le post » (classe .quickcopy-done posée par quickcopy.js ; l'extension la colore en vert) */
.pia-post .postHeader .buttons .button.quickcopy-done {
	background: var(--pia-accent);
	border-color: var(--pia-accent);
	color: var(--pia-extreme);
}

/* Texte du message : justifié, Poppins Light, comme la maquette */
.pia-post .postbody .content {
	overflow-x: auto;
	font-family: var(--pia-font-body);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	text-align: justify;
	hyphens: auto;
	overflow-wrap: break-word;
	color: var(--pia-text);
}
.pia-post:target .postbody .content {
	color: var(--pia-text);
}
.pia-post .postbody .content a {
	color: var(--pia-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pia-post .postbody .content a:hover {
	text-decoration: none;
}
.pia-post .postbody .content img.postimage {
	max-width: 100%;
	height: auto;
}
.pia-post .postbody .ignore {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	font-weight: 300;
}
.pia-post .postbody .ignore a {
	color: var(--pia-accent-text);
}

/* Citations : filet rouge à gauche, texte du thème, auteur en petites capitales */
.pia-post .content blockquote {
	margin: 1.2rem 0 1.2rem 0.4rem;
	padding: 0.4rem 0 0.4rem 1rem;
	border: 0;
	border-left: 2px solid var(--pia-accent);
	background: transparent;
	color: var(--pia-text);
	font-size: 0.9rem;
}
/* prosilver réserve 25 px en haut d'une citation sans auteur (.uncited) : inutile ici */
.pia-post .content blockquote.uncited {
	padding-top: 0.4rem;
}
.pia-post .content blockquote blockquote {
	margin-left: 0.2rem;
	background: transparent;
	opacity: 0.85;
}
.pia-post .content blockquote cite {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pia-accent-text);
}
.pia-post .content blockquote cite > span {
	color: var(--pia-text);
	letter-spacing: 0.04em;
}
.pia-post .content blockquote cite a {
	color: inherit;
	text-decoration: none;
}

/* Code, pièces jointes, avis */
.pia-post .content .codebox,
.pia-post .attachbox {
	border: 1px solid var(--pia-bars);
	border-radius: 0;
	background: var(--pia-bg-stats);
	color: var(--pia-text);
}
.pia-post .content .codebox p {
	border-bottom-color: var(--pia-bars);
	color: var(--pia-text);
}
.pia-post .content .codebox code {
	color: var(--pia-text);
}
.pia-post .attachbox {
	float: none;
	clear: both;
	margin: 1.2rem 0 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.8rem;
}
.pia-post .attachbox dt {
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pia-accent-text);
}
.pia-post .attachbox dd,
.pia-post .attachbox p,
.pia-post .attachbox p.stats {
	border-top-color: var(--pia-bars);
	color: var(--pia-text);
}
.pia-post .notice {
	clear: both;
	margin: 1.4rem 0 0;
	padding: 0.5rem 0 0;
	border-top: 1px dashed var(--pia-bars);
	font-family: var(--pia-font-body);
	font-size: 0.72rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--pia-text);
}
.pia-post .notice a {
	color: var(--pia-accent-text);
}
.pia-post p.post-notice,
.pia-post div.rules {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--pia-bars);
	border-left: 4px solid var(--pia-accent);
	background: var(--pia-bg-stats);
	color: var(--pia-text);
	font-size: 0.8rem;
}
.pia-post p.post-notice a,
.pia-post div.rules a {
	color: var(--pia-accent-text);
}
.pia-post p.post-notice input {
	margin-left: 0.5rem;
}
.pia-post .content .posthilit {
	background: var(--pia-accent);
	color: var(--pia-extreme);
}

/* ---------------------------------------------------------------------
   Sondage
--------------------------------------------------------------------- */
.pia-poll {
	margin-bottom: 1.2rem;
}
.pia-poll .content h2.pia-panel__title {
	margin-bottom: 1.2rem;
	font-size: clamp(1.4rem, 1.9vw, 1.9rem);
	color: var(--pia-text); /* prosilver : .content h2 { color: bleu; border-bottom } */
	border: 0;
}
.pia-poll fieldset.polls dt,
.pia-poll fieldset.polls dt label,
.pia-poll fieldset.polls dd {
	color: inherit;
}
.pia-poll__meta {
	margin: -0.4rem 0 1rem;
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--pia-text);
}
.pia-poll fieldset.polls {
	border: 0;
}
.pia-poll fieldset.polls dl {
	margin: 0;
	padding: 0.5rem 0;
	border-top: 1px solid var(--pia-bars);
	color: var(--pia-text);
	font-size: 0.85rem;
}
.pia-poll fieldset.polls dl.voted {
	color: var(--pia-text);
	font-weight: 600;
}
.pia-poll fieldset.polls dd div {
	color: var(--pia-extreme);
}
/* les 5 niveaux de barre : même rouge d'accent, plus ou moins soutenu */
.pia-poll .pollbar1,
.pia-poll .pollbar2,
.pia-poll .pollbar3,
.pia-poll .pollbar4,
.pia-poll .pollbar5 {
	border: 0;
	background: var(--pia-accent);
}
.pia-poll .pollbar1 { opacity: 0.55; }
.pia-poll .pollbar2 { opacity: 0.65; }
.pia-poll .pollbar3 { opacity: 0.75; }
.pia-poll .pollbar4 { opacity: 0.88; }
.pia-poll .pollbar5 { opacity: 1; }
.pia-poll .poll_view_results a {
	color: var(--pia-accent-text);
}

/* ---------------------------------------------------------------------
   Réponse rapide
--------------------------------------------------------------------- */
.pia-quickreply {
	margin: 0 0 1.2rem;
}
.pia-quickreply .pia-panel {
	margin-bottom: 0;
	min-height: 15rem;
}
.pia-quickreply .pia-panel__title {
	font-size: clamp(1.3rem, 1.7vw, 1.7rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.pia-quickreply fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.pia-quickreply dl {
	margin: 0 0 0.8rem;
}
.pia-quickreply dt,
.pia-quickreply dd {
	margin: 0;
}
.pia-quickreply label {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pia-text);
}
.pia-quickreply .inputbox,
.pia-quickreply .inputbox:hover,
.pia-quickreply .message-box textarea,
.pia-quickreply .message-box textarea:hover {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--pia-bars);
	border-radius: 0;
	background: var(--pia-bg);
	box-shadow: none;
	color: var(--pia-text);
	font-family: var(--pia-font-body);
	font-size: 0.9rem;
	font-weight: 300;
}
.pia-quickreply .inputbox:focus,
.pia-quickreply .message-box textarea:focus {
	border-color: var(--pia-accent);
	outline: 0;
	background: var(--pia-bg);
	color: var(--pia-text);
}
.pia-quickreply .message-box {
	margin: 0;
	width: 100%;
}
.pia-quickreply textarea.inputbox {
	min-height: 9em;
	resize: vertical;
}
.pia-quickreply fieldset.submit-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6rem;
	margin: 1rem 0 0;
	text-align: right;
}
.pia-quickreply fieldset.submit-buttons input {
	margin: 0;
}
.pia-poll input.button1,
.pia-poll input.button1:focus,
.pia-quickreply input.button1,
.pia-quickreply input.button1:focus {
	padding: 0.6rem 1.3rem;
	border: 1px solid var(--pia-text);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	color: var(--pia-text);
	font-family: var(--pia-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pia-poll input.button1:hover,
.pia-quickreply input.button1:hover {
	background: var(--pia-text);
	border-color: var(--pia-text);
	color: var(--pia-bg);
}
/* ENVOYER : bouton plein, rouge d'accent (même logique que les boutons du hero) */
.pia-quickreply input.button1.pia-submit,
.pia-quickreply input.button1.pia-submit:focus {
	border-color: var(--pia-btn-bg);
	background: var(--pia-btn-bg);
	color: var(--pia-btn-text);
}
.pia-quickreply input.button1.pia-submit:hover {
	border-color: var(--pia-btn-text-hover);
	background: var(--pia-btn-bg-hover);
	color: var(--pia-btn-text-hover);
}

/* « Qui est en ligne » en bas de page (maquette : absent ; conservé car utile) */
.pia-online {
	margin: 1.5rem 0 0;
	font-size: 0.75rem;
	color: var(--pia-text);
}
.pia-online h3 {
	margin: 0 0 0.4rem;
	font-family: var(--pia-font-heading);
	font-size: 1.1rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pia-text);
	border: 0;
}
.pia-online a {
	color: var(--pia-accent-text);
}

/* ---------------------------------------------------------------------
   Mobile : l'avatar passe en vignette à gauche du nom, le texte prend toute la largeur dessous
--------------------------------------------------------------------- */
@media (max-width: 782px) {
	.pia-post .inner {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		column-gap: 1rem;
	}
	.pia-post--noavatar .inner,
	.pia-post--hidden .inner {
		grid-template-columns: minmax(0, 1fr);
	}
	/* .postbody « disparaît » de la grille : son en-tête va à droite de l'avatar, tout le reste dessous */
	.pia-post .postbody {
		display: contents;
	}
	.pia-post .postbody > * {
		grid-column: 1 / -1;
	}
	.pia-post .postbody > .postHeader {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		margin-bottom: 0;
	}
	.pia-post .inner > .postprofile {
		position: static;
		grid-column: 1;
		grid-row: 1;
	}
	.pia-post--noavatar .postbody > .postHeader,
	.pia-post--hidden .postbody > .postHeader {
		grid-column: 1 / -1;
	}
	.pia-post .postbody > #post_content,
	.pia-post .postbody > [id^="post_content"],
	.pia-post .postbody > .ignore {
		margin-top: 1.2rem;
	}
	.pia-post .postprofile dd.profile-rank {
		display: none;
	}
	.pia-post .postHeader .buttons {
		justify-content: flex-start;
		gap: 0.4rem;
	}
	.pia-post .postbody .content {
		text-align: left;
		hyphens: none;
	}
	.pia-actionbar--panel,
	.pia-actionbar--bottom {
		justify-content: flex-start;
	}
}