/* Planche Institutionnelle — page de profil (trois colonnes) */

body.pi-profil-page {
	margin: 0;
	background: #ffffff;
}

.pi-profil {
	--pf-bleu: #1877f2;
	--pf-rouge: #e41e3f;
	--pf-bandeau: #3a3b3c;
	--pf-bordure: #dddfe2;
	--pf-fond: #ffffff;
	--pf-texte: #050505;
	--pf-gris: #65676b;
	--pf-survol: #f0f2f5;
	--pf-rayon: 22px;
	--pf-rayon-s: calc(var(--pf-rayon) * 0.55);
	--pf-largeur: 1680px;
	--pf-col-g: 300px;
	--pf-col-d: 340px;
	--pf-gap: 24px;
	--pf-avatar: 168px;
	--pf-gcol: 3;
	--pf-ratio: 4 / 3;
	--pf-police: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--pf-top: 0px;
	--pf-tpl: var(--pf-col-g) minmax(0, 1fr) var(--pf-col-d);

	container-type: inline-size;
	container-name: pf;
	box-sizing: border-box;
	width: 100%;
	background: var(--pf-fond);
	color: var(--pf-texte);
	font-family: var(--pf-police);
	font-size: 15px;
	line-height: 1.35;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.pi-profil.pi-pf-sans-gauche { --pf-tpl: minmax(0, 1fr) var(--pf-col-d); }
.pi-profil.pi-pf-sans-droite { --pf-tpl: var(--pf-col-g) minmax(0, 1fr); }
.pi-profil.pi-pf-sans-gauche.pi-pf-sans-droite { --pf-tpl: minmax(0, 1fr); }

.pi-profil.pi-pf-autonome {
	--pf-top: 56px;
	min-height: 100vh;
}

.pi-profil.pi-pf-pleine {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Remise à zéro locale (le thème ne doit pas déformer la page) */
.pi-profil.pi-profil *,
.pi-profil.pi-profil *::before,
.pi-profil.pi-profil *::after {
	box-sizing: border-box;
}

.pi-profil.pi-profil ul,
.pi-profil.pi-profil li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi-profil.pi-profil h1,
.pi-profil.pi-profil h2,
.pi-profil.pi-profil p {
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.pi-profil.pi-profil a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.pi-profil.pi-profil img {
	max-width: none;
	border: 0;
	box-shadow: none;
}

.pi-profil.pi-profil a:focus-visible,
.pi-profil.pi-profil button:focus-visible,
.pi-profil.pi-profil summary:focus-visible {
	outline: 3px solid var(--pf-bleu);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Barre supérieure */

.pi-profil.pi-profil .pi-pf-barre {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 18px;
	height: 56px;
	padding: 0 var(--pf-gap);
	background: #ffffff;
	border-bottom: 1px solid var(--pf-bordure);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.pi-profil.pi-profil .pi-pf-retour {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px 0 12px;
	border-radius: 999px;
	background: #e4e6eb;
	font-weight: 700;
	font-size: 15px;
}

.pi-profil.pi-profil .pi-pf-retour:hover {
	background: #d8dadf;
}

.pi-profil.pi-profil .pi-pf-site {
	font-size: 20px;
	font-weight: 800;
	color: var(--pf-bleu);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -------------------------------------------------------------------- Colonnes */

.pi-profil.pi-profil .pi-pf-cols {
	display: grid;
	grid-template-columns: var(--pf-tpl);
	gap: var(--pf-gap);
	align-items: start;
	max-width: var(--pf-largeur);
	margin: 0 auto;
	padding: var(--pf-gap);
}

.pi-profil.pi-profil .pi-pf-centre {
	container-type: inline-size;
	container-name: pc;
	min-width: 0;
}

.pi-profil.pi-pf-collant .pi-pf-gauche,
.pi-profil.pi-pf-collant .pi-pf-droite {
	position: sticky;
	top: calc(var(--pf-top) + var(--pf-gap));
	max-height: calc(100vh - var(--pf-top) - 2 * var(--pf-gap));
	overflow-y: auto;
	scrollbar-width: thin;
}

.pi-profil.pi-profil .pi-pf-panneau {
	padding: 18px 14px 12px;
	border: 1px solid var(--pf-bordure);
	border-radius: var(--pf-rayon-s);
	background: #ffffff;
}

.pi-profil.pi-profil .pi-pf-h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 6px 12px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--pf-texte);
}

.pi-profil.pi-profil .pi-pf-nb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 13px;
	background: var(--pf-rouge);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
}

/* Petite photo ronde (image mise en avant d'un article) */
.pi-profil.pi-profil .pi-pf-rond {
	display: block;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: #e4e6eb;
}

.pi-profil.pi-profil .pi-pf-sans-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e4e6eb;
	color: var(--pf-gris);
	font-weight: 700;
	font-size: 18px;
}

.pi-profil.pi-profil .pi-pf-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pi-profil.pi-profil .pi-pf-photo.pi-pf-sans-image {
	display: flex;
	font-size: 34px;
}

/* -------------------------------------------------------------- Colonne gauche */

.pi-profil.pi-profil .pi-pf-liste a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	border-radius: 10px;
}

.pi-profil.pi-profil .pi-pf-liste a:hover {
	background: var(--pf-survol);
}

.pi-profil.pi-profil .pi-pf-liste-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pi-profil.pi-profil .pi-pf-liste-titre {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

.pi-profil.pi-profil .pi-pf-liste time {
	font-size: 12.5px;
	color: var(--pf-gris);
}

/* --------------------------------------------------------------- Zone centrale */

.pi-profil.pi-profil .pi-pf-tete {
	display: flex;
	align-items: center;
	gap: clamp(18px, 4cqi, 36px);
	margin-bottom: var(--pf-gap);
	padding-bottom: var(--pf-gap);
	border-bottom: 1px solid var(--pf-bordure);
}

.pi-profil.pi-profil .pi-pf-avatar {
	flex: none;
	width: var(--pf-avatar);
	height: var(--pf-avatar);
	padding: 4px;
	border: 4px solid var(--pf-bleu);
	border-radius: 50%;
	background: #ffffff;
}

.pi-profil.pi-profil .pi-pf-avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 18%;
}

.pi-profil.pi-profil .pi-pf-ident {
	min-width: 0;
}

.pi-profil.pi-profil .pi-pf-civ,
.pi-profil.pi-profil .pi-pf-fct {
	font-size: clamp(17px, 3cqi, 24px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--pf-texte);
}

.pi-profil.pi-profil .pi-pf-nom {
	margin: 2px 0 4px;
	font-size: clamp(28px, 5.6cqi, 50px);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--pf-texte);
	overflow-wrap: anywhere;
}

.pi-profil.pi-profil .pi-pf-compte {
	margin-top: 10px;
	font-size: 16px;
	color: var(--pf-gris);
}

.pi-profil.pi-profil .pi-pf-compte strong {
	color: var(--pf-bleu);
	font-weight: 700;
}

.pi-profil.pi-profil .pi-pf-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.pi-profil.pi-profil .pi-pf-pastilles a {
	display: block;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--pf-bordure);
	transition: transform 0.15s ease;
}

.pi-profil.pi-profil .pi-pf-pastilles a:hover {
	transform: scale(1.08);
}

.pi-profil.pi-profil .pi-pf-pastilles .pi-pf-rond {
	width: 42px;
	height: 42px;
	border: 2px solid #ffffff;
}

.pi-profil.pi-profil .pi-pf-corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
	gap: var(--pf-gap);
	align-items: start;
}

.pi-profil.pi-profil .pi-pf-corps > :only-child {
	grid-column: 1 / -1;
}

.pi-profil.pi-profil .pi-pf-grille-zone .pi-pf-h2 {
	margin: 0 0 14px;
}

.pi-profil.pi-profil .pi-pf-grille {
	display: grid;
	grid-template-columns: repeat(var(--pf-gcol), minmax(0, 1fr));
	gap: 14px 12px;
}

.pi-profil.pi-profil .pi-pf-grille a {
	display: block;
}

.pi-profil.pi-profil .pi-pf-grille-img {
	display: block;
	aspect-ratio: var(--pf-ratio);
	border-radius: 12px;
	background: #e4e6eb;
	overflow: hidden;
}

.pi-profil.pi-profil .pi-pf-grille-img .pi-pf-photo {
	transition: transform 0.25s ease;
}

.pi-profil.pi-profil .pi-pf-grille a:hover .pi-pf-photo {
	transform: scale(1.05);
}

.pi-profil.pi-profil .pi-pf-grille-titre {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.pi-profil.pi-profil .pi-pf-grille a:hover .pi-pf-grille-titre {
	text-decoration: underline;
}

.pi-profil.pi-profil .pi-pf-grille li[hidden] {
	display: none;
}

.pi-profil.pi-profil .pi-pf-plus {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 11px 16px;
	border: 0;
	border-radius: 8px;
	background: #e4e6eb;
	color: var(--pf-texte);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pi-profil.pi-profil .pi-pf-plus:hover {
	background: #d8dadf;
}

/* Publication (article le plus récent), façon réseau social */
.pi-profil.pi-profil .pi-pf-pub {
	border: 1px solid var(--pf-bordure);
	border-radius: var(--pf-rayon-s);
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pi-profil.pi-profil .pi-pf-pub-tete {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 10px;
}

.pi-profil.pi-profil .pi-pf-pub-avatar .pi-pf-rond {
	width: 42px;
	height: 42px;
	object-position: 50% 18%;
}

.pi-profil.pi-profil .pi-pf-pub-qui {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 13px;
	color: var(--pf-gris);
}

.pi-profil.pi-profil .pi-pf-pub-qui strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--pf-texte);
}

.pi-profil.pi-profil .pi-pf-badge {
	flex: none;
	margin-left: auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pf-rouge);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.pi-profil.pi-profil .pi-pf-pub-texte {
	padding: 0 16px 12px;
}

.pi-profil.pi-profil .pi-pf-pub-texte h2 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.pi-profil.pi-profil .pi-pf-pub-texte h2 a:hover {
	text-decoration: underline;
}

.pi-profil.pi-profil .pi-pf-pub-texte p {
	margin-top: 6px;
	font-size: 15px;
}

.pi-profil.pi-profil .pi-pf-pub-img {
	display: block;
	aspect-ratio: 16 / 10;
	background: #e4e6eb;
	overflow: hidden;
}

.pi-profil.pi-profil .pi-pf-pub-stats {
	padding: 10px 16px;
	font-size: 13.5px;
	color: var(--pf-gris);
}

.pi-profil.pi-profil .pi-pf-pub-actions {
	display: flex;
	gap: 4px;
	padding: 4px 8px;
	border-top: 1px solid var(--pf-bordure);
}

.pi-profil.pi-profil .pi-pf-pub-actions > a,
.pi-profil.pi-profil .pi-pf-partage > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 6px;
	border-radius: 8px;
	color: var(--pf-gris);
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}

.pi-profil.pi-profil .pi-pf-pub-actions > a,
.pi-profil.pi-profil .pi-pf-partage {
	flex: 1 1 0;
}

.pi-profil.pi-profil .pi-pf-pub-actions > a:hover,
.pi-profil.pi-profil .pi-pf-partage > summary:hover {
	background: var(--pf-survol);
}

.pi-profil.pi-profil .pi-pf-partage {
	position: relative;
}

.pi-profil.pi-profil .pi-pf-partage > summary {
	list-style: none;
}

.pi-profil.pi-profil .pi-pf-partage > summary::-webkit-details-marker {
	display: none;
}

.pi-profil.pi-profil .pi-pf-partage-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 5;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--pf-bordure);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.pi-profil.pi-profil .pi-pf-partage-lien {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--pf-texte);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.pi-profil.pi-profil .pi-pf-partage-lien:hover {
	background: var(--pf-survol);
}

.pi-profil.pi-profil .pi-pf-vide {
	padding: 40px var(--pf-gap);
	font-size: 16px;
	color: var(--pf-gris);
	text-align: center;
}

.pi-profil.pi-profil.pi-profil .pi-pf-vide a {
	color: var(--pf-bleu);
	font-weight: 700;
}

/* -------------------------------------------------------------- Colonne droite */

.pi-profil.pi-profil .pi-pf-suivre {
	border: 1px solid var(--pf-bordure);
	border-radius: var(--pf-rayon);
	background: #ffffff;
	overflow: hidden;
}

.pi-profil.pi-profil.pi-profil .pi-pf-suivre h2 {
	padding: 16px 20px;
	background: var(--pf-bandeau);
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.pi-profil.pi-profil.pi-profil .pi-pf-suivre ul {
	padding: 10px 12px 14px;
}

.pi-profil.pi-profil .pi-pf-suivre a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 8px;
	color: #000000;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.pi-profil.pi-profil .pi-pf-suivre .pi-pf-ic {
	flex: none;
	margin-top: 1px;
	color: #000000;
}

.pi-profil.pi-profil .pi-pf-suivre a:hover span {
	text-decoration: underline;
}

/* ------------------------------------------------------------------- Adaptatif */

@container pc (max-width: 760px) {
	.pi-profil.pi-profil .pi-pf-corps {
		grid-template-columns: minmax(0, 1fr);
	}
	.pi-profil.pi-profil .pi-pf-pub {
		order: -1;
	}
}

@container pc (max-width: 520px) {
	.pi-profil.pi-profil .pi-pf-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pi-profil.pi-profil .pi-pf-tete {
		flex-direction: column;
		align-items: flex-start;
	}
}

@container pf (max-width: 1180px) {
	.pi-profil.pi-profil .pi-pf-cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.pi-profil.pi-profil .pi-pf-centre {
		grid-column: 1 / -1;
		order: -1;
	}
	.pi-profil.pi-pf-sans-gauche .pi-pf-droite,
	.pi-profil.pi-pf-sans-droite .pi-pf-gauche {
		grid-column: 1 / -1;
	}
	.pi-profil.pi-pf-collant .pi-pf-gauche,
	.pi-profil.pi-pf-collant .pi-pf-droite {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@container pf (max-width: 720px) {
	.pi-profil.pi-profil .pi-pf-cols {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}
	.pi-profil.pi-profil .pi-pf-avatar {
		width: min(var(--pf-avatar), 128px);
		height: min(var(--pf-avatar), 128px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pi-profil * {
		transition: none !important;
	}
}

@media print {
	.pi-profil.pi-profil .pi-pf-barre,
	.pi-profil.pi-profil .pi-pf-pub-actions {
		display: none;
	}
}