/*
	retro-artiste.css, css de single-artiste.php (fiche d'un artiste, au "parfum" de la fiche d'édition V3).

	Feuille isolée : ne dépend pas de retro-fiche.css (chargée sur les seules fiches d'édition) et n'en partage aucune classe.
	Portée : .retro-artiste (article) et .ra-trame (fond de page) ; classes internes préfixées "ra-".
	Les classes produites par les helpers de maj-mcf-retro (pspeciaux-*, aphoto-*) sont reprises sous .retro-artiste.
	Chargée après style.css (dépendance 'mcf-child-style', functions.php), seulement sur is_singular('artiste').

	Mêmes codes que la fiche d'édition : trame de l'accueil (noir > indigo > violet, halos), titres de chapitre sur la
	trame, contenu dans des encadrés ivoire (rayon 20 px, marge intérieure 3vw).
	Couleurs : variables Redux. Seuls hexa : le dégradé de la trame et les halos bleus et violets.

	Dépend des feuilles des composants maj-mcf-elements : affiches (.mcf-aff49), filigrane (.mcf-filigrane),
	palmares (.mcf-medaille).
*/


/* ---------- Jetons propres à la fiche ---------- */
.ra-trame {
	--ra-indigo: #100c22;
	--ra-indigo-2: #180e34;
	--ra-violet: #220e3e;
	--ra-violet-2: #2e0c40;
	--ra-trait: color-mix(in srgb, var(--nectar-font-color) 13%, transparent);
	--ra-doux: color-mix(in srgb, var(--nectar-font-color) 68%, transparent);
	--ra-teinte: color-mix(in srgb, var(--nectar-extra-color-2) 5%, var(--nectar-extra-color-3));
	--ra-ecart: clamp(18px, 2vw, 30px);
}

/* ---------- Trame : fond continu de la page (halos de la rangée mcf-trame de l'accueil, comme la fiche d'édition) ---------- */
.container-wrap.ra-trame {
	background:
		radial-gradient(70vw 55vw at 92% 19.1%, rgba(58, 46, 214, .34), transparent 70%) 0 -60vw / 100% 470vw repeat-y,
		radial-gradient(65vw 50vw at 96% 54.7%, rgba(48, 60, 230, .28), transparent 70%) 0 -60vw / 100% 470vw repeat-y,
		radial-gradient(60vw 45vw at 6% 73.3%, rgba(110, 36, 200, .30), transparent 70%) 0 -60vw / 100% 470vw repeat-y,
		radial-gradient(50vw 38vw at 0% 30%, color-mix(in srgb, var(--nectar-accent-color) 42%, transparent), transparent 70%) 0 -60vw / 100% 470vw repeat-y,
		radial-gradient(60vw 42vw at 100% 82%, color-mix(in srgb, var(--nectar-accent-color) 34%, transparent), transparent 70%) 0 -60vw / 100% 470vw repeat-y,
		linear-gradient(var(--nectar-extra-color-2) 0%, var(--nectar-extra-color-2) 2.8%, var(--ra-indigo) 28.2%,
			var(--ra-indigo-2) 55.8%, var(--ra-violet) 80.1%, var(--ra-violet-2) 100%);
	overflow-x: clip;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.ra-trame .main-content > .row {
	padding-bottom: 0 !important;
}

.retro-artiste {
	position: relative;
	color: var(--nectar-font-light-color);
}
.retro-artiste a:hover {
	font-weight: inherit;
}
.ra-chapitre, .ra-ouverture {
	position: relative;
}
.ra-chapitre > *, .ra-ouverture > :not(.mcf-filigrane) {
	position: relative;
	z-index: 1;
}

/* ---------- Typographie commune (codes de l'accueil) ---------- */
.retro-artiste h6 {
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: 3.3px;
	text-transform: uppercase;
	margin: 0 0 8px;
	padding: 0;
}
/* Sur la trame, le sur-titre est jaune ; dans un encadré il reste rouge (h6 de Redux) */
#ajax-content-wrap .retro-artiste .ra-kicker {
	color: var(--nectar-extra-color-1);
}
.retro-artiste .ra-kicker b {
	font-weight: inherit;
	color: inherit;
}
.retro-artiste sup.ord {
	font-size: .7em;
	line-height: 1;
	text-transform: lowercase;
	font-weight: inherit;
}
.retro-artiste :is(h1, h2, h3) sup.ord {
	font-size: .34em;
	vertical-align: top;
	position: relative;
	top: .2em;
}

/* Titre de chapitre, sur la trame */
.retro-artiste .ra-ch-tete {
	margin: 0 0 var(--ra-ecart);
}
.retro-artiste .ra-ch-tete h2 {
	font-family: var(--font-2), sans-serif;
	font-weight: 700;
	font-size: clamp(39px, 5vw, 72px);
	line-height: .944;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--nectar-font-light-color);
	border: 0;
	padding: 0;
	margin: 0;
}

/* ---------- Chapitres et encadrés ivoire ---------- */
.ra-chapitre {
	padding-top: 6vw;
}
.ra-boites {
	display: grid;
	gap: var(--ra-ecart);
}
.ra-boite {
	min-width: 0;
	background:
		radial-gradient(at 15% 90%, color-mix(in srgb, var(--nectar-accent-color) 8%, transparent), transparent 60%),
		var(--nectar-extra-color-3);
	color: var(--nectar-font-color);
	border-radius: 20px;
	padding: 3vw;
}
.ra-boite a {
	color: inherit;
}
.ra-boite-tete {
	margin: 0 0 30px;
}
.retro-artiste .ra-boite-tete h3 {
	font-family: var(--font-2), sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 49px);
	line-height: 1;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--nectar-font-color);
	margin: 0;
}

/* Pastilles (sur la trame) */
.retro-artiste .pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 200px;
	text-decoration: none;
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
	border: 1px solid color-mix(in srgb, var(--nectar-font-light-color) 40%, transparent);
	color: var(--nectar-font-light-color);
}
.retro-artiste .ra-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.retro-artiste .ra-badges .mcf-medaille {
	font-size: 15px;
	padding: 8px 16px;
	white-space: nowrap;
}

/* ---------- Ouverture ---------- */
.ra-ouverture {
	padding: 6vw 0 0;
}
.ra-filigrane.mcf-filigrane {
	top: 1vw;
	right: auto;
	left: -1vw;
	z-index: 0;
}
.ra-ouverture__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 5vw;
	align-items: center;
}
.ra-ouverture__grille--sans-photo {
	grid-template-columns: minmax(0, 1fr);
}
.retro-artiste .ra-ouverture h1 {
	font-family: var(--font-2), sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	font-size: clamp(39px, 4.6vw, 72px);
	line-height: 1;
	letter-spacing: .5px;
	color: var(--nectar-font-light-color);
	margin: 0 0 24px;
	overflow-wrap: break-word;
}
.ra-discipline {
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: 3.3px;
	text-transform: uppercase;
	color: var(--nectar-extra-color-1);
	margin: 0 0 28px;
	padding: 0;
}
.ra-sep {
	padding: 0 .2em;
}
.ra-ouverture__photo {
	justify-self: center;
	width: 100%;
	max-width: 460px;
}
.retro-artiste .ra-photo-trigger {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
.retro-artiste .ra-ouverture__photo img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
}
.retro-artiste .ra-zoom {
	position: absolute;
	inset: auto auto -14px 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 8px 16px;
	border-radius: 200px;
	background: var(--nectar-extra-color-1);
	color: var(--nectar-extra-color-2);
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .15s ease;
}
.retro-artiste .ra-photo-trigger:hover .ra-zoom,
.retro-artiste .ra-photo-trigger:focus-visible .ra-zoom {
	opacity: 1;
}

/* Retour à l'édition : tuile ivoire avec l'affiche (comme les éditions voisines de la fiche d'édition) */
.ra-retour {
	display: flex;
	margin-top: 5vw;
}
.ra-retour a, .ra-tuile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 22px 10px 10px;
	border-radius: 15px;
	background: var(--nectar-extra-color-3);
	color: var(--nectar-font-color);
	text-decoration: none;
	transition: transform .25s;
}
.ra-retour a:hover, .ra-tuile:hover {
	transform: translateY(-3px);
}
.ra-retour img, .ra-tuile img {
	display: block;
	flex: 0 0 auto;
	width: 52px;
	height: auto;
	border-radius: 4px;
}
.ra-retour small, .ra-tuile small {
	display: block;
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nectar-accent-color);
}
.ra-retour b, .ra-tuile b {
	display: block;
	font-family: var(--font-2), sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
}

/* ---------- Chapitre 1 : le numéro en bref, biographie ---------- */
.ra-kv {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 4vw;
	margin: 0;
	padding: 0;
}
/* Libellés courts (Numéro, Discipline, Pays…) : colonne étroite, la valeur prend le reste (titre d'édition sur une ligne) */
.ra-kv > div {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 4px 16px;
	padding: 12px 0;
	border-top: 1px solid var(--ra-trait);
}
.ra-kv > .ra-kv--large {
	grid-column: 1 / -1;
}
.ra-kv dt {
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nectar-accent-color);
}
.ra-kv dd {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 26px;
}
.ra-kv dd a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ra-kv dd a:hover {
	color: var(--nectar-accent-color);
}
/* « Monte-Carlo » jamais coupé au trait d'union */
.ra-insecable {
	white-space: nowrap;
}

.ra-bio {
	font-size: 18px;
	line-height: 31px;
	columns: 2 24em;
	column-gap: 4vw;
	text-align: justify;
}
.ra-bio p {
	margin: 0 0 1em;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	widows: 3;
	orphans: 3;
}

/* ---------- Chapitre 2 : récompenses (cartes des helpers : .pspeciaux-*) ---------- */
.retro-artiste .pspeciaux-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.retro-artiste .pspeciaux-card {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 20px;
	align-items: start;
	padding: 12px;
	border-radius: 15px;
	background: var(--ra-teinte);
}
.retro-artiste .pspeciaux-photo {
	position: relative;
	display: block;
	width: 100%;
	grid-row: 1 / span 2;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 10px !important;
	background: var(--nectar-extra-color-2);
	cursor: pointer;
	font: inherit;
}
/* Pas de photo : cadre vide des helpers (« + Photo ») masqué, la carte passe sur une colonne */
.retro-artiste div.pspeciaux-photo {
	display: none;
}
.retro-artiste .pspeciaux-card:not(:has(> button.pspeciaux-photo)) {
	grid-template-columns: minmax(0, 1fr);
}
/* Le prix en titre ; le lauréat, c'est l'artiste de la page : pas répété */
.retro-artiste .pspeciaux-nom {
	margin: 4px 0 0;
	font-family: var(--font-2), sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--nectar-font-color);
}
.retro-artiste .pspeciaux-laureat {
	display: none;
}
/* Carte de la médaille, en tête de la grille : la médaille à la place du nom du prix */
.retro-artiste .ra-carte-medaille .mcf-medaille {
	justify-self: start;
	margin: 4px 0 10px;
	font-size: 15px;
	padding: 7px 14px;
	white-space: nowrap;
}

/* Photos cliquables (mécanique aphoto-bg/fg de Michel, en « cover ») */
.retro-artiste .aphoto-bg, .retro-artiste .aphoto-fg {
	position: absolute;
	inset: 0;
	display: block;
	background-image: var(--aphoto-img);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 30%;
	transition: transform .6s;
}
.retro-artiste .aphoto-bg {
	display: none;
}
.retro-artiste .aphoto-zoom {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--nectar-extra-color-2) 35%, transparent);
	color: var(--nectar-font-light-color);
	font-family: var(--font-2), sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .15s ease;
}
.retro-artiste button:hover .aphoto-fg {
	transform: scale(1.05);
}
.retro-artiste button:hover .aphoto-zoom, .retro-artiste button:focus-visible .aphoto-zoom {
	opacity: 1;
}

/* ---------- Chapitre 3 : autres éditions du même numéro ---------- */
.ra-recurrence {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.ra-recurrence .ra-tuile {
	background: var(--ra-teinte);
	padding: 12px 22px 12px 12px;
}
.ra-recurrence .ra-tuile b {
	font-size: 22px;
	text-transform: uppercase;
}
.ra-recurrence .ra-tuile em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	color: var(--ra-doux);
}

/* Fin de page : l'air de 6 % sous la dernière section */
.ra-fin {
	height: 6vw;
}

/* ---------- Tablette ---------- */
@media (max-width: 999px) {
	.ra-ouverture__grille {
		grid-template-columns: minmax(0, 1fr);
	}
	.ra-ouverture__photo {
		max-width: 400px;
	}
	.retro-artiste .pspeciaux-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Téléphone ---------- */
@media (max-width: 690px) {
	.ra-boite {
		padding: 22px;
	}
	.ra-boite-tete {
		margin-bottom: 22px;
	}
	.ra-discipline {
		font-size: 18px;
		letter-spacing: 3px;
	}
	.ra-filigrane.mcf-filigrane {
		font-size: 200px;
		top: 4vw;
	}
	.ra-ouverture__photo {
		max-width: none;
	}
	.ra-retour a {
		flex: 1 1 100%;
	}
	.ra-kv, .ra-kv > div {
		grid-template-columns: minmax(0, 1fr);
	}
	.ra-bio {
		font-size: 16px;
		line-height: 28px;
	}
	.retro-artiste .pspeciaux-card {
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 14px;
		padding: 10px;
	}
	.retro-artiste .pspeciaux-nom {
		font-size: 19px;
	}
	.ra-fin {
		height: 40px;
	}
}