/**
 * CEWEB Pack Element – Member (skin Flip), widget bdt-member
 * Reprise des styles du skin Flip du widget Member d'Element Pack,
 * plus les utilitaires UIkit (bdt-position-*, bdt-inline) dont le balisage dépend,
 * pour fonctionner même si Element Pack est désactivé.
 */

/* ---------- Utilitaires UIkit (limités à la carte) ---------- */

.bdt-member.bdt-inline {
	display: inline-block;
	position: relative;
	max-width: 100%;
	vertical-align: middle;
	-webkit-backface-visibility: hidden;
}

.bdt-member .bdt-position-center,
.bdt-member .bdt-position-bottom-center {
	position: absolute !important;
	max-width: 100%;
	box-sizing: border-box;
	left: 50%;
	width: max-content;
}

.bdt-member .bdt-position-center {
	top: 50%;
	transform: translate(-50%, -50%);
}

.bdt-member .bdt-position-bottom-center {
	bottom: 0;
	transform: translate(-50%, 0);
}

.rtl .bdt-member .bdt-position-center,
.rtl .bdt-member .bdt-position-bottom-center {
	right: 50%;
	left: auto;
}

.rtl .bdt-member .bdt-position-center {
	transform: translate(50%, -50%);
}

.rtl .bdt-member .bdt-position-bottom-center {
	transform: translate(50%, 0);
}

/* ---------- Carte ---------- */

.bdt-member {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	box-sizing: border-box;
	transition: all .25s ease-in-out;
}

.bdt-member *,
.bdt-member *::before,
.bdt-member *::after {
	box-sizing: border-box;
}

.bdt-member.skin-flip {
	block-size: 360px;
	position: relative;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bdt-member.skin-flip:focus {
	outline: none;
}

.bdt-member.skin-flip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.bdt-member-content {
	padding: 1em 1.5em;
}

.bdt-member.skin-flip .bdt-member-content {
	padding: 0;
	inline-size: 100%;
}

.bdt-member-name {
	display: block;
	margin-block-end: .2em;
	font-size: 1.2em;
	font-weight: 700;
}

.bdt-member-role {
	display: block;
	margin-block-end: 1em;
	font-size: .9em;
	opacity: .5;
}

.bdt-member.skin-flip .bdt-member-text {
	color: #fff;
}

/* ---------- Icônes sociales ---------- */

.bdt-member-icons {
	border-block-start: 1px solid rgba(0, 0, 0, .05);
	padding: 1em;
}

.bdt-member.skin-flip .bdt-member-icons {
	border: 0;
	padding: 0;
}

.bdt-member-icons a {
	display: inline-flex;
	text-align: center;
	line-height: 1;
}

.bdt-member-icons a:first-child {
	margin-inline-start: 0;
}

.bdt-member-icons a:last-child {
	margin-inline-end: 0 !important;
}

.bdt-member-icons a + a {
	margin-inline-start: .8em;
}

.bdt-member-icons a i {
	display: inline-block;
	min-inline-size: 16px;
	text-align: center;
}

.bdt-member-icons a i:before {
	font-size: 16px;
}

.bdt-member-icon {
	padding: 5px;
}

.bdt-member-icon svg {
	inline-size: 1em;
	block-size: 1em;
}

.bdt-member.skin-flip .bdt-member-icon {
	color: #fff;
	transition: all .2s ease;
}

.bdt-member.skin-flip .bdt-member-icon:hover {
	color: #f5f5f5;
}

.skin-flip .bdt-member-icon i {
	color: #fff;
}

.skin-flip .bdt-member-icon svg {
	fill: #fff;
}

/* ---------- Faces ---------- */

.bdt-skin-flip-layer {
	position: absolute;
	inline-size: 100%;
	block-size: 100%;
	transition: all .6s ease-in-out;
}

.bdt-skin-flip-layer.bdt-skin-flip-front,
.bdt-skin-flip-layer.bdt-skin-flip-back {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bdt-skin-flip-back {
	background-color: #1e87f0;
	display: block;
}

.bdt-skin-flip-layer-overlay {
	display: flex;
	inline-size: 100%;
	block-size: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	text-align: center;
	padding: 35px;
}

.bdt-member.skin-flip .bdt-skin-flip-layer-inner {
	position: relative;
	block-size: 100%;
	inline-size: 100%;
}

/* ---------- Profondeur 3D ---------- */

.bdt-skin-flip-3d-yes .bdt-skin-flip-layer-inner {
	transform: translateZ(90px) scale(.95);
}

.bdt-skin-flip-3d-yes .bdt-skin-flip-layer-overlay {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform: translateZ(.1px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ---------- Effet « Flip » ---------- */

.bdt-skin-flip-effect-flip {
	overflow: inherit !important;
}

.bdt-skin-flip-effect-flip .skin-flip {
	perspective: 1000px;
	transform-style: preserve-3d;
	overflow: inherit;
}

.bdt-skin-flip-effect-flip .bdt-skin-flip-layer {
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bdt-skin-flip-effect-flip .bdt-skin-flip-front {
	transform: none;
	z-index: 1;
}

.bdt-skin-flip-effect-flip .skin-flip:hover .bdt-skin-flip-back,
.bdt-skin-flip-effect-flip .skin-flip:focus-within .bdt-skin-flip-back {
	transform: none;
	z-index: 1;
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-left .bdt-skin-flip-back {
	transform: rotateX(0) rotateY(180deg);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-left .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-left .skin-flip:focus-within .bdt-skin-flip-front {
	transform: rotateX(0) rotateY(-180deg);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-right .bdt-skin-flip-back {
	transform: rotateX(0) rotateY(-180deg);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-right .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-right .skin-flip:focus-within .bdt-skin-flip-front {
	transform: rotateX(0) rotateY(180deg);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-up .bdt-skin-flip-back {
	transform: rotateX(-180deg) rotateY(0);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-up .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-up .skin-flip:focus-within .bdt-skin-flip-front {
	transform: rotateX(180deg) rotateY(0);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-down .bdt-skin-flip-back {
	transform: rotateX(180deg) rotateY(0);
}

.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-down .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-flip.bdt-skin-flip-direction-down .skin-flip:focus-within .bdt-skin-flip-front {
	transform: rotateX(-180deg) rotateY(0);
}

/* ---------- Effet « Push » ---------- */

.bdt-skin-flip-effect-push .bdt-skin-flip-front {
	transform: none;
}

.bdt-skin-flip-effect-push .skin-flip {
	overflow: hidden;
}

.bdt-skin-flip-effect-push .skin-flip:hover .bdt-skin-flip-back,
.bdt-skin-flip-effect-push .skin-flip:focus-within .bdt-skin-flip-back {
	transform: none;
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-right .bdt-skin-flip-back {
	transform: translateX(-100%) translateY(0);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-right .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-push.bdt-skin-flip-direction-right .skin-flip:focus-within .bdt-skin-flip-front {
	transform: translateX(100%) translateY(0);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-left .bdt-skin-flip-back {
	transform: translateX(100%) translateY(0);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-left .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-push.bdt-skin-flip-direction-left .skin-flip:focus-within .bdt-skin-flip-front {
	transform: translateX(-100%) translateY(0);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-up .bdt-skin-flip-back {
	transform: translateX(0) translateY(100%);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-up .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-push.bdt-skin-flip-direction-up .skin-flip:focus-within .bdt-skin-flip-front {
	transform: translateX(0) translateY(-100%);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-down .bdt-skin-flip-back {
	transform: translateX(0) translateY(-100%);
}

.bdt-skin-flip-effect-push.bdt-skin-flip-direction-down .skin-flip:hover .bdt-skin-flip-front,
.bdt-skin-flip-effect-push.bdt-skin-flip-direction-down .skin-flip:focus-within .bdt-skin-flip-front {
	transform: translateX(0) translateY(100%);
}

/* ---------- Effet « Slide » ---------- */

.bdt-skin-flip-effect-slide .skin-flip {
	overflow: hidden;
}

.bdt-skin-flip-effect-slide .skin-flip:hover .bdt-skin-flip-back,
.bdt-skin-flip-effect-slide .skin-flip:focus-within .bdt-skin-flip-back {
	transform: none;
}

.bdt-skin-flip-effect-slide.bdt-skin-flip-direction-right .bdt-skin-flip-back {
	transform: translateX(-100%) translateY(0);
}

.bdt-skin-flip-effect-slide.bdt-skin-flip-direction-left .bdt-skin-flip-back {
	transform: translateX(100%) translateY(0);
}

.bdt-skin-flip-effect-slide.bdt-skin-flip-direction-up .bdt-skin-flip-back {
	transform: translateX(0) translateY(100%);
}

.bdt-skin-flip-effect-slide.bdt-skin-flip-direction-down .bdt-skin-flip-back {
	transform: translateX(0) translateY(-100%);
}

/* ---------- Mouvement réduit : bascule sans animation ---------- */

@media (prefers-reduced-motion: reduce) {
	.bdt-skin-flip-layer {
		transition: none;
	}
}