/**
 * Profil — entête, compte, blocs.
 *
 * LARGEUR : aucun bloc n'impose de largeur maximale. C'est volontaire — c'est la
 * colonne Elementor qui décide, ce qui permet de composer la page en deux
 * colonnes (une étroite pour l'identité, une large pour les contenus) sans que
 * les blocs se figent tous à la même taille et donnent cet effet d'empilement.
 *
 * Les deux dimensions variables (hauteur de bannière, diamètre d'avatar) sont
 * pilotées par des variables CSS posées en style inline par le shortcode, ce
 * qui permet de les régler par attribut sans dupliquer de règle.
 */

.hlj-profil-entete {
	--hlj-hauteur-banniere: 260px;
	--hlj-taille-avatar: 140px;
	--hlj-or: #DCA54A;
	--hlj-parchemin: #FAF5E5;
	--hlj-encre: #1C1B18;
	--hlj-gris: #6B6862;
	--hlj-bordure: #E3DACA;

	position: relative;
	margin: 0 0 28px;
	background: #fff;
	border: 1px solid var(--hlj-bordure);
	border-radius: 14px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- Bannière */

.hlj-profil-banniere {
	position: relative;
	height: var(--hlj-hauteur-banniere);
	background-color: #EFE6D4;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hlj-profil-banniere--vide {
	background-image: linear-gradient(135deg, #F0E6D2 0%, #DCC9A4 55%, #C9B183 100%);
}

/* ------------------------------------------------------------------ Avatar */

/* L'avatar chevauche la bannière — il est positionné en absolu.
   La première version remontait toute la ligne avec une marge négative : le nom
   était tiré vers le haut avec l'avatar et se retrouvait tronqué par le bord de
   la bannière. En sortant l'avatar du flux, seul lui déborde. */
.hlj-profil-avatar {
	position: absolute;
	left: 28px;
	/* Ancré sur la BANDE BLANCHE (.hlj-profil-identite est en position relative),
	   pas sur l'entête : sa moitié haute déborde sur la bannière, sa moitié basse
	   repose sur le blanc.

	   Une version antérieure calculait « hauteur de bannière moins la moitié de
	   l'avatar », ce qui ne valait que tant que l'entête était le seul élément
	   positionné. Le jour où la bande l'est devenue — pour ancrer la figurine du
	   genre — ce calcul s'est appliqué depuis le haut du blanc et a projeté
	   l'avatar hors du cadre, où overflow:hidden l'a fait disparaître.
	   La formule actuelle ne dépend plus de la hauteur de la bannière. */
	top: calc(var(--hlj-taille-avatar) / -2);
	z-index: 2;
	width: var(--hlj-taille-avatar);
	height: var(--hlj-taille-avatar);
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	border: 4px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	box-sizing: content-box;
}

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

/* ---------------------------------------------------------------- Identité */

/* ---- Les deux réserves, nommées une fois pour toutes ----

   La bande blanche n'est pas libre sur toute sa largeur : l'avatar en occupe le
   bord gauche, la figurine du genre le bord droit. Tous deux sont en position
   absolue, et c'est le padding de la bande qui leur garde la place.

   Ces deux réserves étaient jusqu'ici écrites en dur à quatre endroits. Elles
   servent maintenant aussi à CALCULER le vrai milieu de la bande — le centrage
   des compteurs en dépend — donc elles portent un nom. */
.hlj-profil-identite {
	--hlj-reserve-gauche: calc(28px + var(--hlj-taille-avatar) + 22px);
	--hlj-reserve-droite: 28px;

	/* Largeur réservée aux compteurs au centre. Les trois à 64 px, noms
	   compris, mesurent près de 540 px — le nombre grossit avec l'écran. On
	   arrondit à 560. Cette valeur ne dimensionne PLUS le bloc (il se mesure
	   seul) : elle sert uniquement à savoir où le nom doit s'arrêter. */
	--hlj-compteurs: 560px;

	/* position: relative sert d'ancrage à l'avatar, à la figurine ET aux
	   compteurs. Ancrer sur la bande plutôt que sur l'en-tête entier permet de
	   caler la figurine sur la hauteur du blanc, quelle que soit cette hauteur
	   (nom long, présence ou non du lien vers le site). */
	position: relative;

	padding: 16px var(--hlj-reserve-droite) 22px var(--hlj-reserve-gauche);
	min-height: calc(var(--hlj-taille-avatar) / 2);

	/* Fait de la bande un CONTENEUR mesurable.
	   Une media query ne connaît que la largeur de l'écran, or ici c'est la
	   colonne Elementor qui décide — et elle n'est pas la même sur « Mon héros »
	   et sur la page « Profil ». Deux pages, même écran, deux largeurs : aucune
	   media query ne sait les distinguer. Les règles @container mesurent la
	   bande elle-même, donc chaque page se règle toute seule. */
	container-type: inline-size;
	container-name: bande;
}

/* Quand il y a des compteurs, la bande doit être assez haute pour les contenir :
   ils sont en position absolue, donc ils ne la poussent pas eux-mêmes. */
.hlj-profil-identite:has(.hlj-profil-centre) {
	min-height: 112px;
}


/* ---- Pourquoi les compteurs sont en position absolue ----

   « Au milieu de la bande » veut dire au milieu de la BANDE, pas au milieu de
   ce qui reste une fois le nom posé. Or tant que les compteurs sont un bloc
   parmi les autres, leur position dépend de la longueur du nom : un nom court
   les pousse à gauche, un nom long à droite, et deux pages ne se ressemblent
   jamais. C'est exactement ce qu'on observait entre Mon héros et Profil.

   En position absolue à 50 %, ils sont au milieu et rien ne peut les en
   déloger. Le nom, lui, reçoit une largeur maximale qui s'arrête juste avant
   eux : il se coupe en deux lignes plutôt que de passer dessous.

   Le calcul du plafond du nom, ligne à ligne :
     50%                                  le milieu, mesuré sur la zone utile
     + (réserve droite − réserve gauche)/2 correction : la zone utile n'est pas
                                          centrée sur la bande, les deux
                                          réserves n'ont pas la même taille
     − largeur des compteurs / 2          on s'arrête à leur bord gauche
     − 20px                               une gouttière, pour ne pas les toucher
   --------------------------------------------------------------------- */

.hlj-profil-textes {
	max-width: calc(
		50%
		+ (var(--hlj-reserve-droite) - var(--hlj-reserve-gauche)) / 2
		- var(--hlj-compteurs) / 2
		- 20px
	);
	min-width: 0;
}

.hlj-profil-centre {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	/* max-content, et surtout PAS une largeur estimée.
	   J'avais mesuré les trois compteurs à 446 px et réservé 460. Ils en font en
	   réalité près de 540 : le nombre est en clamp() et grimpe à 34 px sur grand
	   écran, ce que mon calcul ignorait. Le bloc était donc trop étroit et les
	   compteurs se cassaient en 2 + 1 malgré la place disponible.
	   Avec max-content, le bloc fait exactement la largeur qu'il faut pour tenir
	   sur une ligne — plus rien à estimer, donc plus rien à sous-estimer. */
	width: max-content;

	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---- Quand la place se resserre ----

   Deux contraintes tiennent le centrage, et elles se referment ensemble :

     — le nom garde au moins 180 px, sinon il tombe en colonne d'un mot par
       ligne ;
     — les compteurs, centrés sur la bande, ne doivent pas toucher la figurine.
       Elle est à droite : plus la bande est courte, plus le milieu s'en
       rapproche.

   Plutôt qu'un seul seuil brutal — au-delà tout va bien, en deçà tout descend
   sous le nom —, on resserre les compteurs par paliers. Ils occupent moins de
   place, donc le milieu reste atteignable plus longtemps, et la carte garde la
   même silhouette sur les deux pages. La largeur réservée et le zoom des images
   descendent ensemble : --hlj-compteurs ici, zoom dans haeros-niveaux.css, aux
   mêmes seuils.

   Ce n'est qu'en dessous de 560 px de zone utile qu'on renonce vraiment : les
   compteurs repassent alors dans le flux, sous le nom, où ils disposent de
   toute la largeur. */

@container bande (max-width: 764px) {
	.hlj-profil-identite { --hlj-compteurs: 460px; }
}

@container bande (max-width: 664px) {
	.hlj-profil-identite { --hlj-compteurs: 400px; }
}

@container bande (max-width: 604px) {

	.hlj-profil-textes {
		max-width: none;
	}

	.hlj-profil-centre {
		position: static;
		transform: none;
		width: auto;
		margin-top: 14px;
	}
}

/* ------------------------------------------------- Figurine du genre choisi */

.hlj-profil-genre {
	position: absolute;
	right: 28px;
	/* La figurine est POSEE dans la bande blanche : ses pieds reposent près du
	   bas du blanc, et c'est sa hauteur qui décide de ce qui dépasse en haut
	   sur la bannière. Plus le personnage est grand, plus il émerge.

	   Une version antérieure calait le bas à 50% de la bande : le personnage se
	   retrouvait alors majoritairement sur la bannière, ce qui n'était pas
	   l'effet recherché. */
	bottom: 14px;
	width: var(--hlj-figurine, 360px);
	z-index: 3;
	/* Purement décoratif : ne doit jamais intercepter un clic destiné à la
	   bannière ou à son bouton de modification. */
	pointer-events: none;
}

.hlj-profil-genre img {
	display: block;
	width: 100%;
	height: auto;
	/* Ombre portée douce au sol, pour que le personnage ne flotte pas. */
	filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .28));
}

/* Réserve la place à droite : sans ça, un nom un peu long passerait sous la
   figurine. La classe n'est posée que lorsqu'une image existe réellement. */
.hlj-profil-entete--avec-genre .hlj-profil-identite {
	--hlj-reserve-droite: calc(28px + var(--hlj-figurine, 360px) + 24px);
}

.hlj-profil-nom {
	/* line-height suffisant et padding-top : sans ça, les lettres à jambage
	   haut (accents, majuscules) se font rogner par le bloc précédent. */
	margin: 0 0 4px;
	padding-top: 2px;
	font-size: 26px;
	line-height: 1.35;
	color: var(--hlj-encre);
}

.hlj-profil-pseudo {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hlj-gris);
}

/* Lien vers le site web du membre (champ user_url). */
.hlj-profil-site {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.hlj-profil-site a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--hlj-or);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .18s ease;
}

.hlj-profil-site a:hover,
.hlj-profil-site a:focus-visible {
	border-bottom-color: var(--hlj-or);
}

.hlj-profil-site-icone {
	font-size: 12px;
	opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
	.hlj-profil-site a { transition: none; }
}

/* ------------------------------------------------------- Boutons d'édition */

.hlj-profil-declencheur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: rgba(28, 27, 24, .68);
	padding: 8px 16px;
	transition: background .18s ease, opacity .18s ease;
}

.hlj-profil-declencheur:hover,
.hlj-profil-declencheur:focus-visible {
	background: rgba(28, 27, 24, .88);
}

.hlj-profil-declencheur:focus-visible {
	outline: 3px solid var(--hlj-or);
	outline-offset: 2px;
}

/* Bouton de bannière : en bas à droite, apparaît au survol sur grand écran,
   mais reste toujours visible au clavier et sur tactile. */
.hlj-profil-banniere .hlj-profil-declencheur {
	position: absolute;
	right: 16px;
	bottom: 16px;
}

@media (hover: hover) and (min-width: 700px) {
	.hlj-profil-banniere .hlj-profil-declencheur {
		opacity: 0;
	}

	.hlj-profil-banniere:hover .hlj-profil-declencheur,
	.hlj-profil-banniere .hlj-profil-declencheur:focus-visible {
		opacity: 1;
	}
}

/* Bouton d'avatar : recouvre toute la pastille, invisible jusqu'au survol. */
.hlj-profil-declencheur--avatar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	padding: 0;
	justify-content: center;
	background: rgba(28, 27, 24, 0);
	opacity: 0;
}

.hlj-profil-avatar:hover .hlj-profil-declencheur--avatar,
.hlj-profil-declencheur--avatar:focus-visible {
	opacity: 1;
	background: rgba(28, 27, 24, .5);
}

.hlj-profil-declencheur--avatar .hlj-profil-icone {
	font-size: 26px;
}

/* Étiquette réservée aux lecteurs d'écran. */
.hlj-profil-lecteur-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------- États et messages */

.hlj-profil-entete.hlj-profil-occupe {
	pointer-events: none;
}

.hlj-profil-entete.hlj-profil-occupe .hlj-profil-banniere,
.hlj-profil-entete.hlj-profil-occupe .hlj-profil-avatar {
	opacity: .55;
	transition: opacity .2s ease;
}

.hlj-profil-message {
	margin: 0;
	padding: 0 28px 18px;
	font-size: 14px;
	color: var(--hlj-gris);
	min-height: 0;
}

.hlj-profil-message:empty {
	display: none;
}

.hlj-profil-message.est-erreur {
	color: #B3453A;
	font-weight: 600;
}

.hlj-profil-message.est-succes {
	color: #3F7A56;
}

.hlj-profil-vide {
	padding: 22px 24px;
	border: 1px dashed #E3DACA;
	border-radius: 12px;
	color: #6B6862;
	font-style: italic;
}

/* ------------------------------------------------------------ Petits écrans */

/* La figurine se réduit par paliers. Le principe : elle ne doit jamais occuper
   plus du tiers de la largeur, sinon la réserve de place qu'elle impose à sa
   gauche écrase le nom — on l'a vu sur mobile, « Paige J. Eligia » tombait sur
   trois lignes d'un mot chacune. */
@media (max-width: 1000px) {
	.hlj-profil-entete--avec-genre {
		--hlj-figurine: 260px;
	}
}

@media (max-width: 740px) {
	.hlj-profil-entete--avec-genre {
		--hlj-figurine: 150px;
	}
}

@media (max-width: 640px) {
	.hlj-profil-entete {
		--hlj-hauteur-banniere: 160px;
		--hlj-taille-avatar: 96px;
	}

	/* Sur petit écran l'avatar repasse dans le flux, au-dessus du texte :
	   il n'y a pas la place de le mettre en colonne à gauche. */
	.hlj-profil-avatar {
		position: static;
		margin: calc(var(--hlj-taille-avatar) / -2) 0 12px;
	}

	/* Les deux réserves tombent à la marge simple : l'avatar est repassé dans le
	   flux, la figurine est montée sur la bannière (voir plus bas). La bande
	   dispose donc de toute sa largeur. */
	.hlj-profil-identite {
		--hlj-reserve-gauche: 18px;
		--hlj-reserve-droite: 18px;
		padding-top: 12px;
		padding-bottom: 18px;
		min-height: 0;
	}

	.hlj-profil-identite:has(.hlj-profil-centre) {
		min-height: 0;
	}

	/* Sur téléphone il n'y a pas de milieu à occuper : le nom prend la ligne, les
	   compteurs prennent la suivante. Le centrage absolu n'aurait rien à centrer
	   et poserait les compteurs par-dessus le nom. */
	.hlj-profil-textes {
		max-width: none;
	}

	.hlj-profil-centre {
		position: static;
		transform: none;
		width: auto;
		margin-top: 14px;
	}

	/* ---- La figurine passe sur la bannière ----

	   Sur grand écran, elle se tient dans la bande blanche et on lui réserve la
	   place à sa gauche : c'est ce qui lui permet de poser les pieds sur le
	   blanc sans marcher sur le nom.

	   Sur téléphone, cette réserve devient le problème. 138 px sur un écran de
	   375, c'est plus du tiers de la bande retiré au contenu : tout se tasse à
	   gauche, le nom se casse, et les compteurs n'ont plus de quoi s'aligner.

	   On la fait donc remonter sur la bannière, où il n'y a rien à bousculer.
	   Elle ne garde qu'un pied dans le blanc — 26 px, de quoi rester posée
	   plutôt que flottante — et la bande retrouve toute sa largeur. */
	.hlj-profil-entete--avec-genre {
		--hlj-figurine: 104px;
	}

	.hlj-profil-genre {
		right: 8px;
		/* Le bas de la figurine se cale 26 px sous le haut de la bande : le
		   reste vit sur la bannière. « 100% » se mesure ici sur la hauteur de
		   .hlj-profil-identite, qui sert d'ancrage. */
		bottom: calc(100% - 26px);
	}

	/* Plus de réserve à droite : la figurine n'est plus dans la bande, elle est
	   au-dessus. Ces 26 px de chevauchement tombent sur du blanc vide, à droite
	   de l'avatar, avant que le nom ne commence. */
	.hlj-profil-entete--avec-genre .hlj-profil-identite {
		--hlj-reserve-droite: 18px;
	}

	.hlj-profil-nom {
		font-size: 21px;
	}

	.hlj-profil-message {
		padding: 0 18px 14px;
	}
}

/* Très petits écrans. La figurine ne coûte plus de largeur au contenu — elle est
   sur la bannière — mais elle ne doit pas non plus l'avaler : la bannière ne fait
   que 160 px de haut, et une figurine trop grande sortirait par le haut, où
   l'overflow:hidden de l'en-tête la couperait à la taille. */
@media (max-width: 400px) {
	.hlj-profil-entete--avec-genre {
		--hlj-figurine: 84px;
	}
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	.hlj-profil-declencheur,
	.hlj-profil-entete.hlj-profil-occupe .hlj-profil-banniere,
	.hlj-profil-entete.hlj-profil-occupe .hlj-profil-avatar {
		transition: none;
	}
}

/* ==========================================================================
   Réglages de compte — [haeros_profil_compte]
   ========================================================================== */

.hlj-compte {
	max-width: 100%;
	margin: 0 0 32px;
	padding: 26px 28px 22px;
	background: #fff;
	border: 1px solid #E3DACA;
	border-radius: 14px;
}

.hlj-compte-titre {
	margin: 0 0 4px;
	font-size: 20px;
	color: #1C1B18;
}

.hlj-compte-identifiant {
	margin: 0 0 22px;
	font-size: 14px;
	color: #6B6862;
}

/* Deux colonnes sur grand écran ; les champs longs prennent toute la largeur. */
.hlj-compte-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 22px;
}

.hlj-compte-champ--large {
	grid-column: 1 / -1;
}

.hlj-compte-champ label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: #1C1B18;
}

.hlj-compte-requis {
	color: #B3453A;
}

.hlj-compte-champ input[type="text"],
.hlj-compte-champ input[type="url"],
.hlj-compte-champ input[type="email"],
.hlj-compte-champ select,
.hlj-compte-champ textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #D3C4A7;
	border-radius: 6px;
	background: #fff;
	color: #1C1B18;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}

.hlj-compte-champ textarea {
	resize: vertical;
	min-height: 110px;
}

.hlj-compte-champ input:focus,
.hlj-compte-champ select:focus,
.hlj-compte-champ textarea:focus {
	outline: 2px solid #DCA54A;
	outline-offset: 1px;
	border-color: #DCA54A;
}

.hlj-compte-aide {
	margin: 5px 0 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.45;
	color: #6B6862;
}

.hlj-compte-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #E3DACA;
}

.hlj-compte-bouton {
	border: none;
	border-radius: 8px;
	background: #DCA54A;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 28px;
	cursor: pointer;
	transition: background .18s ease;
}

.hlj-compte-bouton:hover,
.hlj-compte-bouton:focus-visible {
	background: #C8912F;
}

.hlj-compte-mdp {
	font-size: 14px;
	color: #6B6862;
}

/* -------------------------------------------------------------- Messages */

.hlj-compte-avis {
	max-width: 100%;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
	border-left: 4px solid #3F7A56;
	background: #EDF5F0;
}

.hlj-compte-avis.est-erreur {
	border-left-color: #B3453A;
	background: #FBEDEB;
}

.hlj-compte-avis p {
	margin: 0;
}

.hlj-compte-avis ul {
	margin: 6px 0 0;
	padding-left: 20px;
}

@media (max-width: 640px) {
	.hlj-compte {
		padding: 20px 18px 18px;
	}

	.hlj-compte-grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hlj-compte-bouton {
		transition: none;
	}
}

/* ==========================================================================
   Dernière campagne — [haeros_derniere_campagne]
   ========================================================================== */

.hlj-campagne-bloc {
	max-width: 100%;
	margin: 0 0 32px;
}

.hlj-campagne-etiquette {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #D09A40;
}

.hlj-campagne-carte {
	display: flex;
	gap: 22px;
	background: #fff;
	border: 1px solid #E3DACA;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow .18s ease;
}

.hlj-campagne-carte:hover {
	box-shadow: 0 6px 22px rgba(15, 23, 42, .1);
}

/* Le visuel superpose deux images de nature différente :
   le fond est l'ambiance de la campagne (image mise en avant), recadrée ;
   la couverture est le livre, affiché ENTIER — d'où object-fit: contain.
   Les intervertir écraserait un portrait dans un cadre paysage. */
.hlj-campagne-visuel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 210px;
	max-width: 210px;
	min-height: 170px;
	padding: 18px;
	background-color: #EFE6D4;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Voile sombre : sans lui, une ambiance chargée rend la couverture illisible. */
.hlj-campagne-visuel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .32);
}

.hlj-campagne-couverture {
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 3px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Aucune image du tout : un aplat plutôt qu'un cadre vide. */
.hlj-campagne-visuel--vide {
	background-image: linear-gradient(135deg, #F0E6D2, #DCC9A4 55%, #C9B183);
}

.hlj-campagne-visuel--vide::before {
	display: none;
}

.hlj-campagne-corps {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 24px 20px 0;
}

.hlj-campagne-titre {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

.hlj-campagne-titre a {
	color: #D09A40;
	text-decoration: none;
}

.hlj-campagne-titre a:hover {
	color: #B8842C;
	text-decoration: underline;
}

.hlj-campagne-extrait {
	flex: 1 1 auto;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: #0F172A;
}

.hlj-campagne-lien {
	align-self: flex-start;
	margin-top: auto;
	background: #D09A40;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	padding: 10px 22px;
	border-radius: 999px;
	transition: background .18s ease;
}

.hlj-campagne-lien:hover,
.hlj-campagne-lien:focus-visible {
	background: #B8842C;
	color: #fff;
}

.hlj-campagne-vide {
	max-width: 100%;
	margin: 0 0 32px;
	padding: 18px 22px;
	border: 1px dashed #E3DACA;
	border-radius: 12px;
	color: #6B6862;
	font-style: italic;
}

@media (max-width: 640px) {
	.hlj-campagne-carte {
		flex-direction: column;
		gap: 0;
	}

	.hlj-campagne-visuel {
		flex-basis: auto;
		max-width: none;
		min-height: 190px;
	}

	.hlj-campagne-couverture {
		max-height: 160px;
	}

	.hlj-campagne-corps {
		padding: 18px 20px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hlj-campagne-carte,
	.hlj-campagne-lien {
		transition: none;
	}
}

/* ==========================================================================
   Blocs de profil — bio, livres à jouer, service presse, compagnon, lien
   ========================================================================== */

.hlj-bloc {
	max-width: 100%;
	margin: 0 0 32px;
}

.hlj-bloc-titre {
	margin: 0 0 14px;
	font-size: 20px;
	color: #1C1B18;
}

.hlj-bloc-vide {
	margin: 0;
	color: #6B6862;
	font-style: italic;
}

/* ---------------------------------------------------------------- Biographie */

.hlj-bloc-bio {
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #E3DACA;
	border-radius: 14px;
	font-size: 16px;
	line-height: 1.7;
	color: #1C1B18;
}

.hlj-bloc-bio p {
	margin: 0 0 12px;
}

.hlj-bloc-bio p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ Service presse */

.hlj-sp-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

.hlj-sp-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #E3DACA;
	border-radius: 12px;
}

.hlj-sp-visuel {
	flex: 0 0 58px;
	width: 58px;
	height: 84px;
	overflow: hidden;
	border-radius: 4px;
	background: #EFE6D4;
}

.hlj-sp-visuel img,
.hlj-sp-visuel-vide {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hlj-sp-visuel-vide {
	background: linear-gradient(135deg, #F0E6D2, #C9B183);
}

.hlj-sp-corps {
	min-width: 0;
}

.hlj-sp-titre {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #D09A40;
	text-decoration: none;
}

.hlj-sp-titre:hover {
	color: #B8842C;
	text-decoration: underline;
}

.hlj-sp-formats {
	margin: 7px 0 0;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.hlj-sp-format {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: #FAF5E5;
	color: #8A6417;
}

/* ---------------------------------------------------------------- Compagnon */

.hlj-compagnon {
	padding: 20px 24px;
	background: linear-gradient(135deg, #FAF5E5, #F3EAD3);
	border: 1px solid #DCC9A4;
	border-radius: 14px;
}

.hlj-compagnon-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8A6417;
}

.hlj-compagnon-puce {
	font-size: 16px;
	color: #D09A40;
}

.hlj-compagnon-metiers {
	margin: 0 0 10px;
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.hlj-compagnon-metier {
	font-size: 13px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #DCC9A4;
	color: #1C1B18;
}

.hlj-compagnon-desc {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: #3A3833;
}

.hlj-compagnon-lien,
.hlj-profil-lien-bouton {
	display: inline-block;
	background: #D09A40;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	padding: 10px 24px;
	border-radius: 999px;
	transition: background .18s ease;
}

.hlj-compagnon-lien:hover,
.hlj-compagnon-lien:focus-visible,
.hlj-profil-lien-bouton:hover,
.hlj-profil-lien-bouton:focus-visible {
	background: #B8842C;
	color: #fff;
}

.hlj-profil-lien-simple {
	color: #D09A40;
	text-decoration: underline;
}

.hlj-profil-lien-simple:hover {
	color: #B8842C;
}

@media (max-width: 640px) {
	.hlj-sp-liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hlj-compagnon-lien,
	.hlj-profil-lien-bouton {
		transition: none;
	}
}

/* ==========================================================================
   Genre de prédilection — [haeros_genre]
   ========================================================================== */

.hlj-genre {
	--hlj-genre-largeur: 140px;
	--hlj-genre-couleur: #D09A40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
}

.hlj-genre-visuel {
	width: var(--hlj-genre-largeur);
	max-width: 100%;
}

.hlj-genre-visuel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Repli quand aucune image n'est encore associée au genre : une pastille
   colorée à l'initiale, plutôt qu'une image cassée. Le profil reste
   présentable avant que les visuels ne soient en place. */
.hlj-genre-pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hlj-genre-largeur);
	height: var(--hlj-genre-largeur);
	max-width: 100%;
	border-radius: 50%;
	background: var(--hlj-genre-couleur);
	color: #fff;
	font-size: calc(var(--hlj-genre-largeur) / 2.2);
	font-weight: 600;
	line-height: 1;
}

.hlj-genre-libelle {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hlj-genre-couleur);
	text-align: center;
}