/**
 * Profil public (3.92) : /author/…
 *
 * En-tête en velours (photo cerclée de rouge, nom en Cormorant, chiffres
 * réels), puis deux colonnes : distinctions et indice de frisson à gauche,
 * lieux et avis à droite.
 *
 * @package HauntedLodgesCore
 */

html body .hl-pp {
	--p-velours: #150e10;
	--p-carte: #1e1518;
	--p-rouge: #961b1b;
	--p-pierre-7: #6b6151;
	--p-pierre-5: #948670;
	--p-pierre-3: #bcb2a1;
	--p-pierre-2: #ddd7cc;
	--p-pierre-1: #eeebe5;
	--p-parchemin: #f7f6f3;
	--p-clair: #fbfaf8;
	--p-courbe: cubic-bezier( 0.22, 1, 0.36, 1 );
	display: block;
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 24px 112px;
}

/* ================================================================ Hero */

html body .hl-pp-hero__carte {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 44px;
	overflow: hidden;
	padding: 52px 56px;
	border-radius: 32px;
	background: var( --p-velours );
	color: var( --p-pierre-2 );
	isolation: isolate;
}

/* Une lune rouge, à peine, derrière les chiffres. */
html body .hl-pp-hero__carte::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -160px;
	right: -120px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 150, 27, 27, 0.42 ) 0%, rgba( 150, 27, 27, 0.12 ) 45%, transparent 70% );
}

html body .hl-pp-avatar {
	position: relative;
	width: 176px;
	height: 176px;
	border-radius: 50%;
	box-shadow: 0 0 0 6px var( --p-velours ), 0 0 0 8px var( --p-rouge );
}

html body .hl-pp-avatar img,
html body .hl-pp-avatar .hl-pp-avatar__img {
	display: block;
	width: 176px !important;
	height: 176px !important;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

html body .hl-pp-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

html body .hl-pp-etiquette {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba( 247, 246, 243, 0.08 );
	color: var( --p-pierre-3 );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

html body .hl-pp-etiquette.is-role {
	background: var( --p-rouge );
	color: #fff;
}

html body .hl-pp h1.hl-pp-nom {
	margin: 0 0 14px !important;
	color: var( --p-clair ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: clamp( 44px, 5vw, 68px ) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -0.015em !important;
	overflow-wrap: anywhere;
}

html body .hl-pp p.hl-pp-chapo {
	max-width: 56ch;
	margin: 0 0 26px !important;
	color: var( --p-pierre-3 ) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
}

html body .hl-pp p.hl-pp-chapo.is-vide {
	font-style: italic;
}

html body .hl-pp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

html body .hl-pp a.hl-pp-bouton {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 0 26px;
	border-radius: 999px;
	background: var( --p-clair );
	color: var( --p-velours ) !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

html body .hl-pp a.hl-pp-bouton:hover {
	background: var( --p-rouge );
	color: #fff !important;
}

html body .hl-pp a.hl-pp-bouton:active {
	transform: scale( 0.98 );
}

html body .hl-pp a.hl-pp-lien {
	color: var( --p-clair ) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-color: rgba( 247, 246, 243, 0.3 ) !important;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.25s ease;
}

html body .hl-pp a.hl-pp-lien:hover {
	text-decoration-color: var( --p-clair ) !important;
}

/* Chiffres, en colonne à droite. */
html body .hl-pp-chiffres {
	display: grid;
	gap: 0;
	min-width: 190px;
	margin: 0 !important;
	padding: 0 0 0 36px;
	border-left: 1px solid rgba( 247, 246, 243, 0.1 );
}

html body .hl-pp-chiffres > div {
	padding: 14px 0;
	border-bottom: 1px solid rgba( 247, 246, 243, 0.08 );
}

html body .hl-pp-chiffres > div:last-child {
	border-bottom: 0;
}

html body .hl-pp-chiffres dt {
	color: var( --p-pierre-5 );
	font-size: 13px;
	font-weight: 600;
}

html body .hl-pp-chiffres dd {
	margin: 2px 0 0 !important;
	color: var( --p-clair );
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 44px;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
}

html body .hl-pp-chiffres dd small {
	margin-left: 4px;
	color: var( --p-pierre-5 );
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
}

/* ================================================================ Corps */

html body .hl-pp-corps {
	display: grid;
	grid-template-columns: minmax( 0, 340px ) minmax( 0, 1fr );
	align-items: start;
	gap: 32px;
	margin-top: 32px;
}

html body .hl-pp-cote {
	position: sticky;
	top: 112px;
	display: grid;
	gap: 20px;
}

html body .hl-pp-bloc {
	padding: 26px;
	border: 1px solid var( --p-pierre-1 );
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 21, 14, 16, 0.04 ), 0 16px 32px -24px rgba( 21, 14, 16, 0.28 );
}

html body .hl-pp-bloc__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

html body .hl-pp .hl-pp-bloc__tete h2,
html body .hl-pp .hl-pp-section__tete h2 {
	margin: 0 !important;
	color: var( --p-velours ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
}

html body .hl-pp-compte {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	padding: 0 11px;
	border-radius: 999px;
	background: var( --p-pierre-1 );
	color: var( --p-pierre-7 );
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* Distinctions. */
html body .hl-pp-progression {
	height: 6px;
	margin: 0 0 20px;
	overflow: hidden;
	border-radius: 999px;
	background: var( --p-pierre-1 );
}

html body .hl-pp-progression span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient( 90deg, #7a1515, var( --p-rouge ) );
	transform-origin: left;
	animation: hl-pp-progression 1.2s var( --p-courbe ) 0.3s both;
}

@keyframes hl-pp-progression {
	from {
		transform: scaleX( 0 );
	}
}

html body .hl-pp ul.hl-pp-medailles {
	display: grid;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .hl-pp-medaille {
	display: grid;
	grid-template-columns: 48px minmax( 0, 1fr );
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
}

html body .hl-pp-medaille::before {
	display: none !important;
}

html body .hl-pp-medaille__rond {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --p-pierre-1 );
	color: var( --p-pierre-3 );
	transition: transform 0.5s var( --p-courbe );
}

html body .hl-pp-medaille__rond svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

html body .hl-pp-medaille.is-gagnee .hl-pp-medaille__rond {
	background: radial-gradient( circle at 30% 25%, #c23a3a, var( --p-rouge ) 55%, #6e1212 );
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba( 150, 27, 27, 0.35 ), 0 8px 18px -8px rgba( 150, 27, 27, 0.6 );
	color: #fff;
}

html body .hl-pp-medaille.is-gagnee:hover .hl-pp-medaille__rond {
	transform: rotate( -8deg ) scale( 1.06 );
}

html body .hl-pp-medaille__textes {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

html body .hl-pp-medaille__textes strong {
	color: var( --p-velours );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

html body .hl-pp-medaille__textes span {
	color: var( --p-pierre-7 );
	font-size: 13px;
	line-height: 1.45;
}

html body .hl-pp-medaille:not( .is-gagnee ) .hl-pp-medaille__textes strong {
	color: var( --p-pierre-5 );
}

html body .hl-pp-medaille:not( .is-gagnee ) .hl-pp-medaille__textes span {
	color: var( --p-pierre-3 );
}

/* Apparition en cascade, une seule fois. */
html body .hl-pp.is-pret .hl-pp-medaille {
	animation: hl-pp-medaille 0.6s var( --p-courbe ) both;
	animation-delay: calc( var( --i, 0 ) * 70ms + 0.2s );
}

@keyframes hl-pp-medaille {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
}

/* Indice de frisson. */
html body .hl-pp-frisson__jauge {
	display: grid;
	gap: 12px;
}

html body .hl-pp-frisson__barre {
	display: block;
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var( --p-pierre-1 );
}

html body .hl-pp-frisson__barre span {
	display: block;
	width: calc( var( --niveau, 0 ) * 100% );
	min-width: 10px;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient( 90deg, #bcb2a1, var( --p-rouge ) );
	animation: hl-pp-progression 1.4s var( --p-courbe ) 0.4s both;
	transform-origin: left;
}

html body .hl-pp-frisson__tetes {
	display: flex;
	gap: 8px;
}

html body .hl-pp-frisson__tetes img {
	width: 28px;
	height: 28px;
	margin: 0;
	opacity: 0.22;
	filter: grayscale( 1 );
}

html body .hl-pp-frisson__tetes img.is-on {
	opacity: 1;
	filter: none;
}

html body .hl-pp p.hl-pp-frisson__libelle {
	margin: 14px 0 4px !important;
	color: var( --p-velours ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

html body .hl-pp p.hl-pp-frisson__aide {
	margin: 0 !important;
	color: var( --p-pierre-7 ) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* ============================================================ Principal */

html body .hl-pp-principal {
	display: grid;
	gap: 48px;
	min-width: 0;
}

html body .hl-pp-section__tete {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
}

html body .hl-pp .hl-pp-section__tete h2 {
	font-size: 36px !important;
}

html body .hl-pp-texte p {
	color: #373132;
	font-size: 16px;
	line-height: 1.7;
}

html body .hl-pp-lieux {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 24px;
}

html body .hl-pp-lieu {
	min-width: 0;
}

html body .hl-pp-lieu .listing-item-container {
	margin: 0 !important;
}

html body .hl-pp ul.hl-pp-avis {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .hl-pp-avis__carte {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 22px !important;
	border: 1px solid var( --p-pierre-1 );
	border-radius: 22px;
	background: #fff;
}

html body .hl-pp-avis__carte::before {
	display: none !important;
}

html body .hl-pp-avis__tete {
	display: grid;
	grid-template-columns: 44px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

html body .hl-pp-avis__initiale {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --p-velours );
	color: var( --p-clair );
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	font-weight: 600;
}

html body .hl-pp-avis__qui {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

html body .hl-pp-avis__qui strong {
	overflow: hidden;
	color: var( --p-velours );
	font-size: 15px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .hl-pp-avis__qui span {
	color: var( --p-pierre-5 );
	font-size: 13px;
}

html body .hl-pp-avis__note {
	display: flex;
	gap: 2px;
}

html body .hl-pp-avis__note svg {
	width: 14px;
	height: 14px;
	fill: var( --p-pierre-2 );
}

html body .hl-pp-avis__note svg.is-on {
	fill: var( --p-rouge );
}

html body .hl-pp p.hl-pp-avis__texte {
	flex: 1 1 auto;
	margin: 0 0 16px !important;
	color: #373132 !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
}

html body .hl-pp a.hl-pp-avis__lieu {
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --p-parchemin );
	color: var( --p-velours ) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

html body .hl-pp a.hl-pp-avis__lieu:hover {
	background: var( --p-pierre-1 );
}

html body .hl-pp-vide {
	padding: 40px;
	border: 1px dashed var( --p-pierre-2 );
	border-radius: 24px;
	text-align: center;
}

html body .hl-pp-vide strong {
	display: block;
	margin-bottom: 6px;
	color: var( --p-velours );
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 26px;
	font-weight: 500;
}

html body .hl-pp-vide p {
	margin: 0;
	color: var( --p-pierre-7 );
}

/* Fenêtre « Écrire à … ». */
html body #small-dialog textarea#contact-message {
	min-height: 140px;
	padding: 16px 18px !important;
	border: 1px solid #ddd7cc !important;
	border-radius: 18px !important;
	background: #fff !important;
	font-size: 15px !important;
}

html body #small-dialog .button {
	min-height: 48px;
	padding: 0 24px !important;
	border-radius: 999px !important;
	background: #150e10 !important;
	color: #fff !important;
	font-weight: 700 !important;
}

/* ============================================================== Mobile */

@media ( max-width: 1099px ) {
	html body .hl-pp-hero__carte {
		grid-template-columns: auto minmax( 0, 1fr );
		gap: 32px 36px;
	}

	html body .hl-pp-chiffres {
		grid-column: 1 / -1;
		grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
		padding: 24px 0 0;
		border-top: 1px solid rgba( 247, 246, 243, 0.1 );
		border-left: 0;
	}

	html body .hl-pp-chiffres > div {
		padding: 0;
		border: 0;
	}

	html body .hl-pp-corps {
		grid-template-columns: 1fr;
	}

	html body .hl-pp-cote {
		position: static;
		grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
		order: 2;
	}
}

@media ( max-width: 700px ) {
	html body .hl-pp {
		padding: 16px 14px 72px;
	}

	html body .hl-pp-hero__carte {
		grid-template-columns: 1fr;
		justify-items: start;
		padding: 32px 24px;
		border-radius: 26px;
	}

	html body .hl-pp-avatar,
	html body .hl-pp-avatar img,
	html body .hl-pp-avatar .hl-pp-avatar__img {
		width: 112px !important;
		height: 112px !important;
	}

	html body .hl-pp-chiffres dd {
		font-size: 36px;
	}

	html body .hl-pp ul.hl-pp-avis {
		grid-template-columns: 1fr;
	}

	html body .hl-pp .hl-pp-section__tete h2 {
		font-size: 30px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-pp *,
	html body .hl-pp *::before {
		animation: none !important;
		transition: none !important;
	}
}

/* Lieux : six visibles, les autres au clic (3.93). */
html body .hl-pp-lieu.is-cache {
	display: none;
}

html body .hl-pp-plus {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

html body .hl-pp-plus button {
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid #150e10;
	border-radius: 999px;
	background: transparent;
	color: #150e10;
	font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

html body .hl-pp-plus button:hover {
	background: #150e10;
	color: #fff;
}

@media ( max-width: 700px ) {
	html body .hl-pp-chiffres {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 12px;
	}

	html body .hl-pp-chiffres dd {
		font-size: 32px;
	}

	html body .hl-pp-chiffres dt {
		font-size: 12px;
	}
}

/* 3.95 : colonne de gauche qui défile avec la page, distinctions dépliables. */
html body .hl-pp-cote {
	position: static !important;
}

html body .hl-pp-avis__carte.is-cache {
	display: none;
}

html body .hl-pp-chiffres dd a {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-color: rgba( 247, 246, 243, 0.3 );
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

html body .hl-pp-chiffres dd a:hover {
	text-decoration-color: #fbfaf8;
}

html body .hl-pp-medaille {
	display: block !important;
}

html body button.hl-pp-medaille__bouton {
	display: grid;
	grid-template-columns: 48px minmax( 0, 1fr ) 20px;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

html body button.hl-pp-medaille__bouton:hover {
	background: #f7f6f3;
}

html body button.hl-pp-medaille__bouton:focus-visible {
	outline: 2px solid #961b1b;
	outline-offset: 2px;
}

html body .hl-pp-medaille__plus {
	position: relative;
	width: 20px;
	height: 20px;
}

html body .hl-pp-medaille__plus::before,
html body .hl-pp-medaille__plus::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 4px;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: #bcb2a1;
	transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

html body .hl-pp-medaille__plus::after {
	transform: rotate( 90deg );
}

html body .hl-pp-medaille.is-ouverte .hl-pp-medaille__plus::after {
	transform: rotate( 0deg );
}

html body .hl-pp p.hl-pp-medaille__comment {
	max-height: 0;
	margin: 0 0 0 68px !important;
	overflow: hidden;
	color: #6b6151 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	opacity: 0;
	transition: max-height 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.3s ease, margin 0.3s ease;
}

html body .hl-pp-medaille.is-ouverte p.hl-pp-medaille__comment {
	max-height: 120px;
	margin: 4px 0 8px 68px !important;
	opacity: 1;
}

html body .hl-pp p.hl-pp-medaille__comment strong {
	color: #150e10;
}