/**
 * Fiche de présentation des personnages : HTML produit par les BBCodes du forum (classes form_*),
 * affiché dans le sujet de présentation (viewtopic) et dans le profil (valcret/fiche_in_profile).
 * Structure reprise de l'ancien design (customBase.css), en version légère : fonds clairs du thème, rouge réservé aux
 * accents (nom, traits sous les titres, contour de l'image) :
 *   bandeau (image ronde + « Ressources ») · nom en grand · grille 3 × 2 d'infos · grille 2 colonnes d'adjectifs ·
 *   sections « Anecdotes » / « Derniers mots » / « Avatar » titrées comme le reste du site.
 * La largeur s'adapte au conteneur (message ou colonne du profil) grâce aux requêtes de conteneur.
 */

.forum_topic_form_general {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin: 0;
	text-align: left;
	hyphens: none;
}
.forum_topic_form_general .form_prelien {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

/* ---- Bandeau du haut : image ronde à gauche, « RESSOURCES » + phrase à droite ---- */
.form_fichepresentation_top {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 1.4rem;
	padding: 1.2rem 1.4rem;
	background: var(--pia-bg-stats);
	color: var(--pia-text);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: right;
}
.form_fichepresentation_top img,
.form_fichepresentation_top .postimage {
	grid-row: span 2;
	width: 6.2rem !important;
	height: 6.2rem !important;
	max-width: none;
	border: 2px solid var(--pia-accent);
	border-radius: 50%;
	object-fit: cover;
}
.form_fichepresentation_top .div_form_bidouillage {
	display: block;
	margin: 0 0 0.3rem;
	padding: 0;
}
.form_fichepresentation_top .form_sstitre {
	padding: 0;
	background: none;
	color: var(--pia-accent-text);
	font-family: var(--pia-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Bandeau vide (fiche dont l'image et « Ressources » n'ont pas été remplis) : on ne montre pas un cadre vide.
   (Le texte libre du bandeau n'est pas détectable en CSS ; sans image ni titre « Ressources », il n'y en a pas en pratique.) */
.form_fichepresentation_top:not(:has(img:not([src=""]))):not(:has(.form_sstitre:not(:empty))) {
	display: none;
}

/* ---- Nom du personnage ---- */
.form_titre {
	display: block;
	margin: 0.4rem 0 1.2rem;
	font-family: var(--pia-font-heading);
	font-size: clamp(1.8rem, 6cqi, 2.8rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--pia-accent-text);
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

/* ---- Infos (âge, nationalité, orientation, situation, revenus, groupe) : grille 3 × 2 à filets rouges ---- */
.form_info_fiche {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 92%;
	margin: 0 auto;
	border-top: 1px solid var(--pia-bars);
	border-left: 1px solid var(--pia-bars);
}
.form_info_fiche_anedoctes {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.2rem;
	padding: 0.35rem 0.5rem;
	border-right: 1px solid var(--pia-bars);
	border-bottom: 1px solid var(--pia-bars);
	font-size: 0.75rem;
	font-style: italic;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---- Adjectifs : 2 colonnes de pavés ---- */
.form_adjectif_fiche {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
	width: 92%;
	margin: 1.8rem auto 0;
}
.form_info_fiche_adj {
	padding: 0.45rem 0.6rem;
	background: var(--pia-bg-stats);
	font-size: 0.9rem;
	font-weight: 400;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---- Section posée directement dans la fiche, sans bloc (ex. « Histoire » : titre + liste) : même allure ---- */
:is(.forum_topic_form_general, .pia-fiche__droite) > .div_form_bidouillage {
	display: block;
	margin: 0;
	padding: 0.4rem 0 0;
	border-top: 1px solid var(--pia-bars);
}
:is(.forum_topic_form_general, .pia-fiche__droite) > .div_form_bidouillage + * {
	margin-top: -0.4rem;
}
:is(.forum_topic_form_general, .pia-fiche__droite) > ul {
	margin-left: 0; /* prosilver décale les listes des messages (.content ul) */
	margin-bottom: 0;
	padding-left: 1.2rem;
	font-size: 0.88rem;
	line-height: 1.65;
	list-style: disc;
}
:is(.forum_topic_form_general, .pia-fiche__droite) > ul li {
	margin: 0 0 0.35rem;
}
:is(.forum_topic_form_general, .pia-fiche__droite) > ul li::marker {
	color: var(--pia-accent);
}

/* Enveloppe des sections du milieu, posée par js/fiche-layout.js (voir plus bas) : simple pile, même espacement */
.pia-fiche__droite {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	min-width: 0;
}

/* ---- Blocs « Anecdotes », « Derniers mots », « Avatar » : rouge plein, étiquette claire ---- */
.form_info_joueur {
	padding: 0.4rem 0 0;
	border-top: 1px solid var(--pia-bars);
	color: var(--pia-text);
	font-size: 0.88rem;
	line-height: 1.65;
}
.form_info_joueur .div_form_bidouillage {
	display: block;
	margin: 1.4rem 0 1rem;
	padding: 0;
}
.form_info_joueur .div_form_bidouillage:first-child {
	margin-top: 0;
}
.form_sstitre {
	display: inline-block;
	position: relative;
	padding: 0 0 0.55rem;
	background: none;
	color: var(--pia-text);
	font-family: var(--pia-font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.3;
}
/* petit trait rouge sous le titre, comme les titres du site (.pia-heading) — pas dans le bandeau du haut */
.forum_topic_form_general .form_sstitre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.6rem;
	height: 2px;
	background: var(--pia-accent);
}
.form_info_joueur ul {
	margin: 0;
	padding-left: 1.2rem;
	list-style: disc;
}
.form_info_joueur li {
	margin: 0 0 0.35rem;
	text-align: left;
}
@container (min-width: 30rem) {
	.form_info_joueur li {
		text-align: justify;
	}
}
.form_info_joueur li::marker {
	color: var(--pia-accent);
}
.form_info_joueur strong,
.form_info_joueur .text-strong {
	font-weight: 600;
	color: inherit;
}
/* liens : couleur du thème, un seul soulignement */
.pia-post .postbody .content .form_info_joueur a,
.form_info_joueur a,
.form_fichepresentation_top a {
	color: var(--pia-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}
/* citation (engagement au règlement) et code (avatar) : encarts sur le fond des stats, filet rouge à gauche */
.pia-post .content .form_info_joueur blockquote,
.pia-post .content .form_info_joueur blockquote.uncited,
.form_info_joueur blockquote,
.form_info_joueur blockquote.uncited {
	margin: 1.2rem 0;
	padding: 0.9rem 1.1rem;
	border: 0;
	border-left: 2px solid var(--pia-accent);
	background: var(--pia-bg-stats);
	color: var(--pia-text);
}
.form_fichepresentation_top .form_sstitre::after {
	display: none;
}
/* pas d'icône « guillemet » de prosilver au-dessus de la déclaration */
.form_info_joueur blockquote.uncited::before {
	display: none;
}
.form_info_joueur blockquote a {
	color: var(--pia-accent-text);
}
.mise_en_avant_post {
	font-weight: 600;
	color: var(--pia-accent-text);
}
.pia-post .content .form_info_joueur .codebox,
.form_info_joueur .codebox {
	margin: 0.8rem 0 0;
	background: var(--pia-bg-stats);
	color: var(--pia-text);
}
.form_info_joueur .codebox a {
	color: var(--pia-accent-text);
}

/* ---- Large (message sur ordinateur) : deux colonnes, identité à gauche, anecdotes / derniers mots à droite ----
   Seulement dans un MESSAGE : la requête vise le conteneur nommé « pia-message » (le .content du message). Dans le
   profil, la fiche n'a pas ce conteneur au-dessus d'elle : elle reste toujours sur une colonne, quelle que soit la largeur. */
.pia-post .postbody .content {
	container: pia-message / inline-size;
}
/* prosilver met .content en overflow auto/hidden : c'est alors lui qui défile, et la colonne collée (sticky) ne suit plus
   la page. « clip » coupe pareil ce qui dépasse sans créer de zone de défilement. Seulement pour un message-fiche. */
.pia-post .postbody .content:has(> .forum_topic_form_general) {
	overflow: visible;
	overflow-x: clip;
}
@container pia-message (min-width: 56rem) {
	/* Seulement une FICHE : l'identité (.form_prelien) en tête, suivie d'autres sections.
	   Pas un prélien (un seul bloc) ni un message sans identité (message de bienvenue du validateur…). */
	.forum_topic_form_general:has(> .form_prelien + *) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-auto-rows: min-content;
		column-gap: clamp(2rem, 4cqi, 3.5rem);
		row-gap: 0; /* la colonne de gauche couvre 20 lignes : un écart entre lignes vides creuserait le bas */
		align-items: start;
	}
	.forum_topic_form_general:has(> .form_prelien + *) > :not(.form_prelien) ~ :not(.form_prelien) {
		margin-top: 1.6rem;
	}
	.forum_topic_form_general:has(> .form_prelien + *) > .div_form_bidouillage + :not(.form_prelien) {
		margin-top: 1rem;
	}
	/* identité à gauche, collée sous la barre du haut pendant qu'on lit la colonne de droite (souvent bien plus longue) */
	.forum_topic_form_general:has(> .form_prelien + *) > .form_prelien {
		grid-column: 1;
		grid-row: 1 / span 20;
		position: sticky;
		top: calc(var(--pia-topbar-h, 0px) + 1rem);
	}
	.forum_topic_form_general:has(> .form_prelien + *) > :not(.form_prelien) {
		grid-column: 2;
	}
	/* à droite, la 1re section n'a pas besoin du filet du haut : elle s'aligne sur le bandeau */
	.forum_topic_form_general:has(> .form_prelien + *) > :nth-child(2) {
		padding-top: 0;
		border-top: 0;
	}
}

/* ---- Grand écran, fiche découpée par js/fiche-layout.js : identité + « Derniers mots » à gauche,
   le reste (dans .pia-fiche__droite) à droite. Sans le script, ou si la fiche ne suit pas le modèle, on garde
   la mise en page ci-dessus (identité collée à gauche). ---- */
/* (sélecteurs préfixés par .forum_topic_form_general : ils doivent passer devant la règle de la colonne collée,
    plus haut, qui fait occuper toute la colonne à l'identité) */
@container pia-message (min-width: 56rem) {
	.forum_topic_form_general.pia-fiche--split {
		grid-template-rows: auto 1fr;
	}
	.forum_topic_form_general.pia-fiche--split > .form_prelien {
		grid-column: 1;
		grid-row: 1;
		position: static;
	}
	.forum_topic_form_general.pia-fiche--split > .pia-fiche__droite {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
	}
	.forum_topic_form_general.pia-fiche--split > .pia-fiche__dm {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin-top: 2rem;
	}
	/* 1re section de droite alignée sur le haut de l'identité : pas de filet au-dessus */
	.pia-fiche__droite > :first-child {
		padding-top: 0;
		border-top: 0;
	}
}

/* ---- Étroit (colonne du profil, téléphone) ---- */
@container (max-width: 30rem) {
	.form_fichepresentation_top {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 0.6rem;
		text-align: center;
	}
	.form_fichepresentation_top img,
	.form_fichepresentation_top .postimage {
		grid-row: auto;
	}
	.form_info_fiche {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	.form_adjectif_fiche {
		width: 100%;
	}
}
@container (max-width: 17rem) {
	.form_info_fiche,
	.form_adjectif_fiche {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------
   Préliens (même famille de BBCodes) — ambiance « fiche confidentielle » (choix d'Amaury, proposition C) :
   cadre à double filet avec l'étiquette « PRÉ-LIEN » posée dessus ; infos en capitales à gauche, photos
   rectangulaires en couleur avec une ombre rouge décalée ; titre espacé ; sections
   « Histoire », « Liens »… titrées comme le reste du site.
   Portée : un .form_prelien qui contient .form_top_prelien (la fiche de présentation n'est pas concernée).
--------------------------------------------------------------------- */
.form_prelien:has(> .form_top_prelien) {
	position: relative;
	gap: 0;
	margin-top: 0.8rem; /* place pour l'étiquette posée sur le cadre */
	padding: 1.9rem clamp(1rem, 3cqi, 2.2rem) 1.6rem;
	border: 1px solid var(--pia-bars);
	outline: 1px solid var(--pia-bars);
	outline-offset: -6px;
}
.form_prelien:has(> .form_top_prelien)::before {
	content: "Pré-lien";
	position: absolute;
	top: -0.75rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 0.9rem;
	background: var(--pia-bg);
	color: var(--pia-accent-text);
	font-family: var(--pia-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.5rem;
	text-transform: uppercase;
	white-space: nowrap;
}
.form_top_prelien {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; /* texte calé en haut, à la même hauteur que les photos */
	justify-content: flex-start;
	gap: 1.4rem 2.2rem; /* l'ombre rouge déborde de 6 px à droite : il faut de l'air entre deux photos */
	padding: 0 6px 1.4rem 0; /* 6 px à droite = débord de l'ombre rouge : même marge visuelle à droite qu'à gauche */
	border-bottom: 1px solid var(--pia-bars);
	color: var(--pia-text);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.75;
	text-align: left;
	text-transform: uppercase;
}
.form_top_prelien a {
	color: var(--pia-accent-text);
}
.form_top_prelien a:has(> img) {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}
/* infos à gauche, photos groupées à droite (la 1re photo prend la place libre devant elle) */
.form_top_prelien > a:has(> .form_icon):first-of-type,
.form_top_prelien > img.form_icon:first-of-type {
	margin-left: auto;
}
/* un <br> entre deux photos devient un élément vide de la rangée et double l'espace : on le retire
   (seulement celui qui suit une photo ; les <br> des lignes de texte ne sont pas concernés) */
.form_top_prelien > a:has(> img) + br,
.form_top_prelien > img + br {
	display: none;
}
/* Photos : rectangles en couleur, ombre rouge décalée (le noir et blanc a été retiré à la demande d'Amaury).
   L'ombre est une drop-shadow : le sélecteur :root… passe devant la règle du thème sombre (layout.css)
   qui retire tout filtre aux images. */
.form_icon,
:root .form_top_prelien .form_icon {
	display: block;
	width: 7rem;
	height: 9.5rem !important; /* les anciens messages imposent une hauteur en ligne */
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	filter: drop-shadow(6px 6px 0 var(--pia-accent));
}
.form_prelien_bottom {
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	text-align: left;
}
.form_prelien_bottom .form_titre {
	margin: 1.3rem 0 0.4rem;
	font-size: clamp(1.9rem, 5cqi, 2.8rem);
	letter-spacing: 0.04em;
}
.form_prelien_bottom .div_form_bidouillage {
	display: block;
	margin: 1.4rem 0 0.8rem;
	padding: 0;
	border-top: 0;
}
.form_prelien_bottom a {
	color: var(--pia-accent-text);
}

/* Prélien découpé par js/fiche-layout.js : sur grand écran, Histoire + Liens à gauche, Attentes à droite
   (séparées par un filet), titre sur toute la largeur. Sans le script, ou sans section « Attentes » : une colonne.
   Largeurs : le script les règle selon la quantité de texte de chaque côté (--pia-prelien-g / -d), pour que les
   deux colonnes finissent à peu près ensemble ; à défaut, moitié-moitié. */
.pia-prelien__gauche > .div_form_bidouillage:first-child,
.pia-prelien__droite > .div_form_bidouillage:first-child {
	margin-top: 1.4rem;
}
@container pia-message (min-width: 56rem) {
	.form_prelien_bottom.pia-prelien--split {
		display: grid;
		grid-template-columns: minmax(0, var(--pia-prelien-g, 1fr)) minmax(0, var(--pia-prelien-d, 1fr));
		column-gap: clamp(2rem, 4cqi, 3.5rem);
		align-items: start;
	}
	.pia-prelien--split > :not(.pia-prelien__gauche, .pia-prelien__droite) {
		grid-column: 1 / -1; /* le titre */
	}
	.pia-prelien--split > .pia-prelien__droite {
		padding-left: clamp(1.4rem, 3cqi, 2.4rem);
		border-left: 1px solid var(--pia-bars);
	}
}

/* étroit : photos centrées quand elles passent à la ligne (après la règle de base ci-dessus) */
@container (max-width: 30rem) {
	.form_top_prelien {
		justify-content: center; /* photos centrées quand elles passent à la ligne */
	}
	.form_top_prelien > a:has(> .form_icon):first-of-type,
	.form_top_prelien > img.form_icon:first-of-type {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------
   Encart sans identité (même BBCode [border], ex. message de bienvenue posté par valcret/fiche_validator :
   [titre] + texte + [sstitre] + liste de liens) : petite carte au cadre double filet, comme les préliens ;
   les liens de la liste deviennent des boutons à contour, côte à côte (préfixe .pia-post … .content : passe devant
   le soulignement des liens des messages).
--------------------------------------------------------------------- */
.forum_topic_form_general:not(:has(> .form_prelien)) {
	gap: 0.9rem;
	max-width: 44rem;
	margin: 0.4rem auto;
	padding: 1.6rem clamp(1rem, 4cqi, 2.4rem) 1.8rem;
	border: 1px solid var(--pia-bars);
	outline: 1px solid var(--pia-bars);
	outline-offset: -6px;
	font-size: 0.92rem;
	line-height: 1.7;
	text-align: center;
}
.forum_topic_form_general:not(:has(> .form_prelien)) .form_titre {
	margin: 0 0 0.2rem;
	font-size: clamp(1.7rem, 6cqi, 2.4rem);
	letter-spacing: 0.04em;
}
.forum_topic_form_general:not(:has(> .form_prelien)) > .div_form_bidouillage {
	margin-top: 0.6rem;
	padding: 0;
	border-top: 0;
}
.forum_topic_form_general:not(:has(> .form_prelien)) .form_sstitre::after {
	left: 50%;
	transform: translateX(-50%);
}
.forum_topic_form_general:not(:has(> .form_prelien)) > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}
.forum_topic_form_general:not(:has(> .form_prelien)) > ul li {
	margin: 0;
}
.pia-post .postbody .content .forum_topic_form_general:not(:has(> .form_prelien)) > ul a {
	display: inline-flex;
	align-items: center;
	min-height: 2.2rem;
	padding: 0 1rem;
	border: 1px solid var(--pia-text);
	color: var(--pia-text);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pia-post .postbody .content .forum_topic_form_general:not(:has(> .form_prelien)) > ul a:hover,
.pia-post .postbody .content .forum_topic_form_general:not(:has(> .form_prelien)) > ul a:focus-visible {
	background: var(--pia-accent);
	border-color: var(--pia-accent);
	color: var(--pia-on-accent);
}