/*
 * Bloc : Médaillon des fiches de kiné (composant propre au client)
 * Description : un médaillon de l'emblème or, sur une pastille claire, centré à cheval sur le bord haut de chaque fiche de portrait ; il fait un tour lent quand la fiche apparaît, puis au survol (Monsieur, 29/09/2026 : « une légère animation […] qui incite à cliquer » ; forme validée sur maquette le 29/09 à 17h14)
 * Famille : contenu
 * Regles : UX-E1 (échelle d'espacement), protocole motion P1-P2 (un mouvement court, jamais en boucle), WCAG 2.2.2 (un seul tour de moins de 5 s : aucun arrêt requis)
 * Variantes : aucune
 * Tokens : consomme --dt-bg, --dt-surface-alt, --dt-border, --dt-text, --dt-space-3, --ease-standard
 * Reduced-motion : géré -- aucun tour, le médaillon reste de face
 * Statut : client
 * Inspirations : maquette B du 29/09/2026 ; médaillon d'une carte à collectionner (image de Monsieur, pas au pied de la lettre)
 * Reference : quête PERINEA-LOT-DE-RETOUCHES-DU-SITE-DU-29-09 (I6) ; tour à l'apparition posé par medaillon-perinea.js ; emblème produit par clients/perinea/fabriquer_favicon_perinea.py ; design/web-blocks/LIFECYCLE.md §7
 * Clients : PERINEA
 * Conteneurs : .dtb-gallery-portraits .dtb-gallery-card (fiches de ls/gallery, variante portraits -- équipe et pages de soins)
 * Derogations : N/A
 *
 * Le bloc commun `ls/gallery` n'est pas touché : le médaillon est un pseudo-élément de la fiche,
 * décoratif (aucun texte, invisible aux technologies d'assistance), qui suit l'inclinaison au survol.
 */

/* `--perinea-embleme` : l'adresse VERSIONNÉE de l'emblème, posée par functions.php (le même
   ?ver= que l'en-tête) -- un emblème régénéré ne reste pas en cache ici. À défaut, le fichier. */
.dtb-gallery-portraits {
	--perinea-medaillon: 60px;
}

/* De la place au-dessus des fiches, et entre deux rangées, pour la moitié du médaillon qui déborde. */
.dtb-gallery-portraits .dtb-gallery-grid {
	padding-top: calc(var(--perinea-medaillon) / 2);
	row-gap: calc(var(--perinea-medaillon) / 2 + var(--dt-space-3));
}

/* À plat : la fiche inclinée au survol (`.incline`, preserve-3d, inclinaison-perinea.js) partageait son
   espace 3D avec le médaillon, et pendant le tour sa moitié passait DERRIÈRE le plan de la fiche, où la
   photo la masquait (capture de Monsieur du 29/09/2026). La fiche s'incline toujours d'un seul tenant ;
   le médaillon garde son propre relief. */
.dtb-gallery-portraits .dtb-gallery-card {
	position: relative;
	transform-style: flat;
}

.dtb-gallery-portraits .dtb-gallery-card::before {
	content: "";
	position: absolute;
	top: calc(var(--perinea-medaillon) / -2);
	left: 50%;
	z-index: 3;
	width: var(--perinea-medaillon);
	height: var(--perinea-medaillon);
	margin-left: calc(var(--perinea-medaillon) / -2);
	border: 1px solid var(--dt-border);
	border-radius: 50%;
	background:
		var(--perinea-embleme, url("assets/embleme/perinea-embleme-or.png")) center / 70% no-repeat,
		radial-gradient(circle, var(--dt-bg) 60%, var(--dt-surface-alt) 100%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--dt-text) 12%, transparent);
	pointer-events: none;
}

/* Un tour, jamais une boucle : à l'apparition (classe posée puis retirée par le script), puis à chaque
   survol. Deux animations de même tracé et de noms distincts : un nom qui ne change pas ne relance rien. */
@keyframes perinea-medaillon-tour {
	from { transform: perspective(400px) rotateY(0deg); }
	to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes perinea-medaillon-tour-survol {
	from { transform: perspective(400px) rotateY(0deg); }
	to   { transform: perspective(400px) rotateY(360deg); }
}

.dtb-gallery-portraits .dtb-gallery-card.perinea-medaillon-tourne::before {
	animation: perinea-medaillon-tour 2.4s var(--ease-standard, ease) 1;
}
.dtb-gallery-portraits .dtb-gallery-card:hover::before {
	animation: perinea-medaillon-tour-survol 2.4s var(--ease-standard, ease) 1;
}

/* Le CSS arrête le mouvement à lui seul, sans compter sur le script : la règle couvre aussi la classe
   du tour d'apparition, qui l'emporterait sinon par sa spécificité (audit Columbo du 29/09/2026). */
@media (prefers-reduced-motion: reduce) {
	.dtb-gallery-portraits .dtb-gallery-card::before,
	.dtb-gallery-portraits .dtb-gallery-card:hover::before,
	.dtb-gallery-portraits .dtb-gallery-card.perinea-medaillon-tourne::before {
		animation: none;
	}
}