/*
 * WinWin : page Slider, diaporama plein ecran des fiches des membres (shortcode [slider_membres]).
 * Photos de la fiche a gauche (en haut sur mobile), texte a droite ; navigation en bas a droite.
 */

body.elementor-template-canvas {
	background: var(--ww-cream);
}

.elementor .e-con.ww-membres-page {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.ww-membres {
	position: relative;
	width: 100%;
	min-height: 100svh;
	background: var(--ww-cream);
}

/* Une fiche tient toujours sur un ecran : photos en haut (mobile) ou a gauche, texte dans le reste ;
   si la description est trop longue, c'est elle seule qui defile (.ww-membre-defile). */
.ww-membre {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 38svh minmax(0, 1fr);
	height: 100svh;
	overflow: hidden;
	background: var(--ww-cream);
}

/* Photos : passe-partout sable, image entiere (logos, plans, portraits...) */
.ww-membre-photos {
	position: relative;
	overflow: hidden;
	background: var(--ww-sand-light);
}

/* .ww-membres devant : l'emporte sur ".elementor img { height: auto }" d'Elementor */
.ww-membres .ww-membre-photo {
	position: absolute;
	inset: clamp(18px, 3vw, 44px);
	width: calc(100% - 2 * clamp(18px, 3vw, 44px));
	height: calc(100% - 2 * clamp(18px, 3vw, 44px));
	object-fit: contain;
	max-width: none;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 1.2s var(--ww-ease), transform 7s linear;
}

.ww-membres .ww-membre-photo.is-active {
	opacity: 1;
	transform: none;
}

/* Les medias caches ne captent pas les clics (glisser d'une fiche a l'autre) */
.ww-membres .ww-membre-photo:not(.is-active) {
	pointer-events: none;
}

.ww-membres .ww-membre-video {
	background: transparent;
}

.ww-membre-texte {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 18px;
	min-height: 0;
	overflow: hidden;
	/* En bas : place pour la barre de navigation flottante (diaporama) */
	padding: clamp(24px, 5vw, 48px) var(--ww-gutter) 92px;
}

.ww-membre-texte > * {
	flex: none;
}

.ww-membre-texte p {
	margin: 0;
}

.ww-membre-nom {
	margin: 0 0 8px;
	font-family: var(--ww-serif);
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--ww-ink);
	text-wrap: balance;
}

.ww-membre-nom::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin-bottom: 22px;
	background: var(--ww-bronze);
}

/* Metier : juste sous le nom */
.ww-membre-metier {
	margin-top: -10px !important;
	font-family: var(--ww-sans);
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ww-bronze);
}

/* Description (souvent longue) : separee des informations du haut par un filet, et seule a defiler.
   Elle prend la place qui reste (et pas plus) ; fondu en haut et/ou en bas quand du texte y est cache. */
.ww-membre-texte > .ww-membre-corps {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 0;
}

.ww-membre-texte > :not(.ww-membre-nom) + .ww-membre-corps {
	margin-top: 6px;
	padding-top: 24px;
	border-top: 1px solid var(--ww-sand-light);
}

.ww-membre-defile {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	outline: none;
}

.ww-membre-defile::-webkit-scrollbar {
	display: none;
}

.ww-membre-defile.ww-defile--bas {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}

.ww-membre-defile.ww-defile--haut {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px);
	mask-image: linear-gradient(to bottom, transparent, #000 36px);
}

.ww-membre-defile.ww-defile--haut.ww-defile--bas {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 56px), transparent);
}

.ww-membre-defile p {
	max-width: 56ch;
	font-family: var(--ww-sans);
	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--ww-ink-soft);
}

.ww-membre-defile p + p {
	margin-top: 18px;
}

/* Coordonnees : regroupees et en petit (icone + lien), les unes a la suite des autres ; l'icone LinkedIn se range
   au bout, sans prendre une ligne a elle seule. La description garde ainsi le plus de place possible. */
.ww-membre-contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
}

.ww-membre-contact {
	position: relative;
	padding-left: 25px;
	font-family: var(--ww-sans);
	font-size: .9rem;
	line-height: 1.5;
}

.ww-membre-contact::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--ww-bronze);
	-webkit-mask: var(--ww-icon) center / contain no-repeat;
	mask: var(--ww-icon) center / contain no-repeat;
}

.ww-membre-email {
	--ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
}

.ww-membre-telephone {
	--ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.1 6.1l1.4-2.3L20 15.5V19a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.ww-membre-site {
	--ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E");
}

.ww-membre-contact a {
	color: var(--ww-ink);
	text-decoration: none;
	background: linear-gradient(var(--ww-sand), var(--ww-sand)) no-repeat 0 100% / 100% 1px;
	transition: background-size .4s var(--ww-ease), color .3s;
	overflow-wrap: anywhere;
}

.ww-membre-contact a:hover,
.ww-membre-contact a:focus-visible {
	color: var(--ww-bronze);
	background-size: 100% 2px;
}

/* LinkedIn : l'icone seule, qui porte le lien, au bout de la derniere coordonnee (jamais seule sur une ligne) */
.ww-membre-contact .ww-membre-lien-linkedin {
	--ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 10.5V16M8 7.6v.1M11.5 16v-5.5M11.5 13.2c0-1.6 1-2.7 2.4-2.7s2.1 1 2.1 2.7V16'/%3E%3C/svg%3E");
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-left: 14px;
	vertical-align: -4px;
	background: var(--ww-bronze);
	-webkit-mask: var(--ww-icon) center / contain no-repeat;
	mask: var(--ww-icon) center / contain no-repeat;
	transition: background-color .3s, transform .3s var(--ww-ease);
}

/* Survol et focus clavier : l'icone fonce et grossit (le masque effacerait un contour) */
.ww-membre-contact .ww-membre-lien-linkedin:is(:hover, :focus-visible) {
	background: var(--ww-ink);
	transform: scale(1.12);
}

/* LinkedIn sans autre coordonnee : seule, sans icone devant */
.ww-membre-linkedin {
	padding-left: 0;
}

.ww-membre-linkedin::before {
	display: none;
}

.ww-membre-linkedin .ww-membre-lien-linkedin {
	margin-left: 0;
}

/* Telephone : nom et metier remontes, espacements resserres, pour une description plus haute */
@media (max-width: 899px) {
	.ww-membre-texte {
		gap: 10px;
		padding-top: 16px;
	}

	.ww-membre-nom {
		margin-bottom: 4px;
		font-size: 2.1rem;
	}

	.ww-membre-nom::before {
		width: 36px;
		margin-bottom: 12px;
	}

	.ww-membre-metier {
		margin-top: -6px !important;
		font-size: .74rem;
	}

	.ww-membre-texte > :not(.ww-membre-nom) + .ww-membre-corps {
		margin-top: 2px;
		padding-top: 12px;
	}

	.ww-membre-defile p {
		font-size: .98rem;
		line-height: 1.65;
	}
}

/* Aux coins de la zone des medias : les quatre premiers en miniature, sans lien, dans l'ordre haut gauche,
   haut droite, bas droite, bas gauche */
.ww-membres-vignette {
	--ww-coin: clamp(14px, 2.5vw, 28px);
	position: absolute;
	top: var(--ww-coin);
	left: var(--ww-coin);
	z-index: 10;
	width: clamp(52px, 5vw, 72px);
	box-shadow: 0 10px 30px -12px rgba(42, 35, 32, .45);
}

.ww-membres-vignette--2,
.ww-membres-vignette--3 {
	left: auto;
	right: var(--ww-coin);
}

.ww-membres-vignette--3,
.ww-membres-vignette--4 {
	top: auto;
	bottom: var(--ww-coin);
}

/* Coin deja pris : la miniature se range juste a cote. Telephone, diaporama : sous le bouton du menu */
@media (max-width: 899px) {
	.ww-membres[data-mode="diaporama"] .ww-membres-vignette--2 {
		top: calc(var(--ww-coin) + 58px);
	}
}

/* Grand ecran : sous la date de l'event (elle deborde sur la zone des medias), au-dessus du bouton de retour */
@media (min-width: 900px) {
	.ww-membres-rdv ~ .swiper-wrapper .ww-membres-vignette--2 {
		top: calc(var(--ww-coin) + 36px);
	}

	.ww-membres-vignette--4 {
		bottom: 90px;
	}
}

/* Diaporama : le menu du site en haut a droite (bouton rond, liste en dessous) */
.ww-membres-menu {
	position: absolute;
	top: clamp(14px, 2.5vw, 28px);
	right: clamp(14px, 2.5vw, 28px);
	z-index: 40; /* au-dessus de la photo en vol vers la miniature */
}

.ww-membres-menu summary {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 12px 30px -14px rgba(42, 35, 32, .55);
	list-style: none;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ww-membres-menu summary::-webkit-details-marker {
	display: none;
}

.ww-membres-menu summary:focus-visible {
	outline: 2px solid var(--ww-bronze);
	outline-offset: 3px;
}

/* Trois traits, qui deviennent une croix menu ouvert */
.ww-membres-menu summary span,
.ww-membres-menu summary span::before,
.ww-membres-menu summary span::after {
	display: block;
	width: 20px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--ww-ink);
	transition: transform .3s var(--ww-ease), background-color .3s;
}

.ww-membres-menu summary span {
	position: relative;
}

.ww-membres-menu summary span::before,
.ww-membres-menu summary span::after {
	content: "";
	position: absolute;
	left: 0;
}

.ww-membres-menu summary span::before {
	top: -6px;
}

.ww-membres-menu summary span::after {
	top: 6px;
}

.ww-membres-menu[open] summary span {
	background-color: transparent;
}

.ww-membres-menu[open] summary span::before {
	transform: translateY(6px) rotate(45deg);
}

.ww-membres-menu[open] summary span::after {
	transform: translateY(-6px) rotate(-45deg);
}

.ww-membres-menu nav {
	position: absolute;
	top: 58px;
	right: 0;
	min-width: 210px;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 24px 50px -24px rgba(42, 35, 32, .55);
}

.ww-membres-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ww-membres-menu a {
	display: block;
	padding: 12px 14px;
	border-radius: 8px;
	font-family: var(--ww-sans);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ww-ink);
	text-decoration: none;
	transition: background-color .3s, color .3s;
}

.ww-membres-menu a:is(:hover, :focus-visible),
.ww-membres-menu .current-menu-item > a {
	background: var(--ww-cream);
	color: var(--ww-bronze);
}

@media (prefers-reduced-motion: no-preference) {
	.ww-membres-menu[open] nav {
		animation: ww-rise .4s var(--ww-ease) both;
	}
}

/* Meme format que le logo (261 x 272), photo (ou 1re image d'une video) recadree sans deformation */
.ww-membres .ww-membres-vignette :is(img, canvas) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 261 / 272;
	object-fit: cover;
}

/* Carrousel : miniature cachee (mais a sa place, pour viser l'envol) tant que son media n'a pas laisse la place */
.ww-membres-vignette--attente {
	visibility: hidden;
}

/* Retour au 1er media : les miniatures s'effacent ensemble (membres.js, FONDU) */
.ww-membres-vignette--efface {
	opacity: 0;
	transition: opacity .6s var(--ww-ease);
}

/* Un media en vol vers sa miniature (membres.js) */
.ww-membres .ww-membres-envol {
	position: fixed;
	z-index: 30;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

/* Navigation : pastille flottante en bas */
.ww-membres-nav {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 16px 40px -18px rgba(42, 35, 32, .55);
	transform: translateX(-50%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ww-membres-prev,
.ww-membres-next {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ww-sand);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color .3s, border-color .3s;
}

.ww-membres-prev::before,
.ww-membres-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 1.5px solid var(--ww-ink);
	border-right: 1.5px solid var(--ww-ink);
	transform: translate(-65%, -50%) rotate(45deg);
}

.ww-membres-prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.ww-membres-prev:hover,
.ww-membres-next:hover,
.ww-membres-prev:focus-visible,
.ww-membres-next:focus-visible {
	border-color: var(--ww-bronze);
	background: var(--ww-sand-light);
}

.ww-membres-prev.swiper-button-disabled,
.ww-membres-next.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

.ww-membres-pagination.swiper-pagination-fraction {
	position: static;
	width: auto;
	min-width: 5.5ch;
	font-family: var(--ww-serif);
	font-size: 1.25rem;
	font-style: italic;
	text-align: center;
	color: var(--ww-ink-soft);
}

.ww-membres-pagination .swiper-pagination-current {
	color: var(--ww-ink);
}

/* Diaporama d'un rendez-vous : sa date, en haut au centre (entre la miniature et le logo) */
.ww-membres-rdv {
	position: fixed;
	top: clamp(14px, 2.5vw, 28px);
	left: 50%;
	z-index: 20;
	max-width: calc(100% - 2 * clamp(84px, 9vw, 120px));
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 12px 30px -16px rgba(42, 35, 32, .5);
	font-family: var(--ww-sans);
	font-size: .62rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .14em;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--ww-bronze);
	transform: translateX(-50%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* QR code (diaporama) vers la fiche en mode visiteur : pour la garder sur son telephone pendant une presentation.
   Inutile sur un telephone : affiche seulement sur grand ecran. */
.ww-membre {
	position: relative;
}

.ww-membre-qr {
	display: none;
}

/* Mode visiteur : une seule fiche, sans barre de navigation en bas ; la place des deux pastilles flottantes (retour,
   partage) reste libre sous la description, qui ne passe jamais derriere elles */
.ww-membres--visiteur .ww-membre-texte {
	padding-bottom: 96px;
}

/* Diaporama d'un event : la diapo "Nos invites du jour", entre les membres et les invites */
.ww-membres-intercalaire {
	display: grid;
	place-items: center;
	height: 100svh;
	padding: 32px var(--ww-gutter);
	background:
		radial-gradient(closest-side at 50% 42%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 80%),
		var(--ww-sand);
	text-align: center;
}

.ww-membres-intercalaire h2 {
	margin: 0;
	font-family: var(--ww-serif);
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 500;
	line-height: 1.05;
	color: var(--ww-ink);
	text-wrap: balance;
}

.ww-membres-intercalaire h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin: 0 auto 22px;
	background: var(--ww-bronze);
}

.ww-membres-intercalaire p {
	margin: 18px 0 0;
	font-family: var(--ww-sans);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ww-bronze);
}

/* Fiche introuvable (mode visiteur) */
.ww-membres-introuvable {
	display: grid;
	place-content: center;
	gap: 14px;
	min-height: 100svh;
	padding: 32px var(--ww-gutter);
	text-align: center;
}

.ww-membres-introuvable h1 {
	margin: 0;
	font-family: var(--ww-serif);
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	font-weight: 500;
	color: var(--ww-ink);
}

.ww-membres-introuvable p {
	margin: 0;
	font-family: var(--ww-sans);
	font-weight: 300;
	color: var(--ww-ink-soft);
}

@media (min-width: 900px) {
	.ww-membre-qr {
		position: absolute;
		bottom: clamp(20px, 4vh, 40px);
		left: calc(55% + clamp(40px, 5vw, 96px));
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 10px 18px 10px 10px;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 16px 40px -18px rgba(42, 35, 32, .45);
	}

	.ww-membre-qr-code {
		width: 118px;
		height: 118px;
	}

	.ww-membre-qr-code svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.ww-membre-qr p {
		max-width: 15ch;
		margin: 0;
		font-family: var(--ww-sans);
		font-size: .72rem;
		font-weight: 500;
		line-height: 1.45;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--ww-ink-soft);
	}

	/* Place pour le QR code sous le texte (le texte defile au-dessus) */
	.ww-membres[data-mode="diaporama"] .ww-membre-texte {
		padding-bottom: 190px;
	}

	.ww-membre {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		grid-template-rows: minmax(0, 1fr);
	}

	.ww-membres-prev,
	.ww-membres-next {
		width: 46px;
		height: 46px;
	}

	.ww-membre-texte {
		justify-content: center;
		padding: clamp(48px, 8vh, 110px) clamp(40px, 5vw, 96px) 140px;
	}

	.ww-membres-nav {
		position: absolute;
		left: auto;
		right: clamp(24px, 4vw, 56px);
		bottom: clamp(20px, 4vh, 40px);
		transform: none;
	}
}

/* Ecran trop bas pour tout faire tenir (telephone a l'horizontale) : la page defile normalement */
@media (max-height: 520px) {
	.ww-membre {
		grid-template-rows: 70svh auto;
		height: auto;
		min-height: 100svh;
		overflow: visible;
	}

	.ww-membre-texte,
	.ww-membre-defile {
		overflow: visible;
	}

	.ww-membre-defile {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}

@media (min-width: 900px) and (max-height: 520px) {
	.ww-membre {
		grid-template-rows: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-membres .ww-membre-photo {
		transition: none;
		transform: none;
	}
}

/* Retour a l'annuaire : en bas a gauche, comme la navigation (pastille blanche, cercle fin, fleche) */
.ww-membres-retour {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 20;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: var(--ww-ink);
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 16px 40px -18px rgba(42, 35, 32, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ww-membres-retour svg {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 1px solid var(--ww-sand);
	border-radius: 50%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: background-color .3s, border-color .3s, transform .3s var(--ww-ease);
}

.ww-membres-retour:is(:hover, :focus-visible) svg {
	border-color: var(--ww-bronze);
	background: var(--ww-sand-light);
	transform: translateX(-2px);
}

@media (min-width: 900px) {
	.ww-membres-retour {
		left: clamp(16px, 2.5vw, 28px);
		width: 62px;
		height: 62px;
	}

	.ww-membres-retour svg {
		width: 46px;
		height: 46px;
		padding: 12px;
	}
}

/* Partage (telephone et tablette, montre par membres.js) : le pendant du retour, en bas a droite */
.ww-membres .ww-membres-partage {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 20;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--ww-ink);
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 16px 40px -18px rgba(42, 35, 32, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}

.ww-membres .ww-membres-partage[hidden] {
	display: none;
}

.ww-membres-partage svg {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 1px solid var(--ww-sand);
	border-radius: 50%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: background-color .3s, border-color .3s;
}

.ww-membres-partage:is(:hover, :focus-visible) svg {
	border-color: var(--ww-bronze);
	background: var(--ww-sand-light);
}

@media (min-width: 900px) {
	.ww-membres .ww-membres-partage {
		right: clamp(16px, 2.5vw, 28px);
		width: 62px;
		height: 62px;
	}

	.ww-membres-partage svg {
		width: 46px;
		height: 46px;
		padding: 12px;
	}
}