/*
 * Bloc : Nous joindre (bande de la page Contact, composant propre au client)
 * Description : la carte de visite en 3D sur une photo floutée du cabinet, et à côté le téléphone, l'e-mail et les réseaux, avant « Écrire au cabinet » (retour de Léa du 27/09/2026, forme validée par Monsieur sur l'aperçu servi le 29/09/2026)
 * Famille : conversion
 * Regles : UX-E1 (échelle d'espacement), UX-E3 (cible tactile, pastille 48 px), UX-V7 (voile teinté clair de la fondation), WCAG 2.2.2 (bouton de pause de la fondation)
 * Variantes : aucune
 * Tokens : consomme --dt-space-1..5, --dt-space-section, --dt-target-min, --dt-radius-1, --dt-radius-pill, --dt-text, --dt-text-muted, --dt-bg, --dt-font-heading, --dt-fs-h2, --dt-fs-body, --dt-fs-small
 * Reduced-motion : géré par carte-3d-perinea.js (aucune rotation au repos, bouton de pause masqué, et donc aucune réserve sous la liste)
 * Statut : client
 * Inspirations : aperçu servi du 29/09/2026 ; posts Instagram du cabinet (photo floutée sous voile crème)
 * Reference : quête RETOUR-PERINEA-20260927-EAVZDC8QFF ; balisage généré par clients/perinea/generer_joindre_perinea.py ; design/web-blocks/LIFECYCLE.md §7 (bloc dérivé pour un client, vit avec le site)
 * Clients : PERINEA
 * Conteneurs : .dtb-inner (anatomie partagée)
 * Derogations : N/A
 *
 * Le fond (photo, voile teinté) et le bouton de pause viennent de la fondation média partagée :
 * consommés ici, jamais redéclarés. La pose de départ de la carte vit dans deux propriétés
 * personnalisées, lues aussi par carte-3d-perinea.js (une seule source).
 */

.perinea-joindre-inner {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--dt-space-5);
	align-items: center;
}

/* Tant que le bouton de pause est là (la carte tourne : `data-anime`, posé par carte-3d-perinea.js), la colonne
   réserve sous la liste la place de son icône, une cible posée au coin bas droit de la bande par la fondation : sans
   elle, l'icône mordait sur la ligne LinkedIn au téléphone et en tablette, jusqu'à 1100 px (placement B validé sur la
   planche le 17/10/2026). Sans bouton (mouvement réduit, script absent), aucune réserve. */
.perinea-joindre[data-anime] .perinea-joindre-inner {
	padding-bottom: var(--dt-target-min);
}

/* La carte : une scène en perspective, deux faces dos à dos. Rapport des faces : 508 / 258
   (TAILLE_FACE, generer_joindre_perinea.py). */
.perinea-carte {
	--perinea-carte-rx: 8;
	--perinea-carte-ry: -22;
	perspective: 1400px;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 508 / 258;
	justify-self: center;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}
.perinea-carte:active {
	cursor: grabbing;
}
.perinea-carte-corps {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateX(calc(var(--perinea-carte-rx) * 1deg)) rotateY(calc(var(--perinea-carte-ry) * 1deg));
}
.perinea-carte-face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--dt-radius-1);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-user-drag: none;
	box-shadow: 0 24px 48px color-mix(in srgb, var(--dt-text) 32%, transparent),
		0 2px 6px color-mix(in srgb, var(--dt-text) 25%, transparent);
}
.perinea-carte-verso {
	transform: rotateY(180deg);
}

/* Les coordonnées : pastille à pictogramme, libellé discret, valeur au corps du texte. */
.perinea-joindre-titre {
	margin: 0 0 var(--dt-space-3);
	font-family: var(--dt-font-heading);
	font-size: var(--dt-fs-h2);
	font-weight: 500;
	color: var(--dt-text);
}
.perinea-joindre-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dt-space-3);
}
.perinea-joindre-liste a,
.perinea-joindre-liste a:visited {
	display: flex;
	align-items: center;
	gap: var(--dt-space-2);
	color: var(--dt-text);
	text-decoration: none;
}
.perinea-joindre-liste a:hover .perinea-joindre-val,
.perinea-joindre-liste a:focus-visible .perinea-joindre-val {
	text-decoration: underline;
}
.perinea-joindre-pastille {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--dt-space-5);
	height: var(--dt-space-5);
	border-radius: var(--dt-radius-pill);
	background: var(--dt-bg);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--dt-text) 15%, transparent);
}
.perinea-joindre-pastille svg {
	width: var(--dt-space-3);
	height: var(--dt-space-3);
	stroke: var(--dt-text);
}
.perinea-joindre-texte {
	display: grid;
}
.perinea-joindre-lib {
	font-size: var(--dt-fs-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dt-text-muted);
}
.perinea-joindre-val {
	font-size: var(--dt-fs-body);
	overflow-wrap: anywhere;
}

/* À partir de la tablette : carte et coordonnées côte à côte, séparées par l'espace de section
   (retour de Monsieur du 29/09/2026 : « fort collé » à 56 px). */
@media (min-width: 48rem) {
	.perinea-joindre-inner {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--dt-space-section);
	}
	.perinea-carte {
		max-width: 460px;
	}
}