/* ============================================================
   CoeurFusion — Style carte membre annuaire
============================================================ */

/* ---------- Bypass complet du masonry JS (positionnement absolu) ----------
   Spécificité renforcée (html body ...) pour battre la règle native UM
   ".um-members-grid.masonry .um-member" ajoutée dynamiquement après
   l'initialisation du script masonry (plus spécifique qu'un simple
   ".um-directory .um-member"). */
html body .um-directory .um-members.um-members-grid,
html body .um-directory .um-members.um-members-grid.masonry{
	display:grid !important;
	grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) !important;
	gap:20px !important;
	position:static !important;
	height:auto !important;
}
html body .um-directory .um-gutter-sizer{
	display:none !important;
}
html body .um-directory .um-members-grid .um-member,
html body .um-directory .um-members-grid.masonry .um-member{
	position:static !important;
	left:auto !important;
	top:auto !important;
	width:100% !important;
	max-width:200px;
	margin:0 !important;
}

/* ---------- Carte ---------- */
.um-directory .um-member{
	border-radius:16px !important;
	overflow:hidden !important;
	box-shadow:0 6px 20px rgba(0,0,0,0.12) !important;
	background:#fff !important;
}

/* ---------- Photo carrée plein cadre ----------
   Le conteneur .um-member-photo doit être en position:relative pour
   servir d'ancre à l'overlay d'icônes (.cf-member-overlay) en
   position:absolute. Sans ça, l'overlay remonte au premier ancêtre
   positionné trouvé dans le DOM (souvent body), d'où un mauvais
   centrage par rapport à la page entière. */
html body .um-directory .um-member-photo{
	position:relative !important;
	aspect-ratio:1/1 !important;
	overflow:hidden !important;
	border-radius:0 !important;
	width:100% !important;
	height:auto !important;
	min-height:150px; /* garde une zone visible même si aucune photo n'est trouvée */
	background:#f1e9f2; /* fond neutre visible si le compte n'a pas encore de photo */
}

/* Sélecteur volontairement aussi long que le sélecteur natif d'UM
   (.um-directory .um-members-wrapper .um-members.um-members-grid
   .um-member .um-member-photo a img) pour être sûr de le battre en
   spécificité, même avec !important des deux côtés. UM pose aussi un
   border:5px solid #fff + background:#fff sur ce même sélecteur : on
   les neutralise ici pour retirer le cadre blanc autour de la photo. */
html body .um-directory .um-members-wrapper .um-members .um-member .um-member-photo.radius-1 a img.um-avatar{
	border-radius:0 !important;
	border:0 !important;
	background:transparent !important;
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	box-sizing:border-box !important;
}

/* UM pose un padding:40px 0 20px 0 + text-align:center nativement sur
   .um-member-photo : on l'annule pour que la photo colle aux bords. */
html body .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo.radius-1{
	padding:0 !important;
	text-align:left !important;
}

/* ---------- Overlay icônes (like / favori / message), collé en bas de la PHOTO uniquement ---------- */
.cf-member-overlay{
	position:absolute !important;
	bottom:8px;
	left:8px;
	right:8px;
	display:flex;
	justify-content:center;
	gap:16px;
	align-items:center;
	z-index:3;
}

.cf-member-overlay .umdp-action{
	background:rgba(255,255,255,0.92);
	border-radius:50%;
	width:54px;
	height:54px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	font-size:34px;
	box-shadow:0 2px 8px rgba(0,0,0,0.2);
	position:relative;
	transition:transform .15s ease;
}
.cf-member-overlay .umdp-action:hover{
	transform:translateY(-2px);
}

.cf-member-overlay .umdp-action .umdp-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	color:#a74aaa; /* couleur du contour au repos */
}

.cf-member-overlay .umdp-action .umdp-icon svg{
	width:22px;
	height:22px;
	display:block;
}

/* Au clic (état actif) : l'icône se remplit en plus d'avoir son contour */
.cf-member-overlay .umdp-action.umdp-active .umdp-icon{
	color:#fff;
}
.cf-member-overlay .umdp-action.umdp-active .umdp-icon svg path{
	fill:currentColor;
}
.cf-member-overlay .umdp-action.umdp-active{
	background:#a74aaa;
	color:#fff;
}

.cf-member-overlay .umdp-count{
	position:absolute;
	top:-5px;
	right:-5px;
	background:#a74aaa;
	color:#fff;
	font-size:9px;
	line-height:1;
	padding:2px 5px;
	border-radius:10px;
	min-width:12px;
	text-align:center;
}

/* ---------- Corps de carte sous la photo ----------
   ATTENTION : ces classes .cf-member-* ne correspondent à aucun
   élément du HTML généré actuellement par le template UM. Le HTML
   réel utilise .um-member-card, .um-member-name,
   .um-member-tagline-age, .um-member-tagline-country,
   .um-member-tagline-Ville. Ce bloc est conservé tel quel (inactif,
   sans conflit) en attendant qu'on retravaille l'affichage nom/âge/
   ville/pays avec les vraies classes. */
.cf-member-card-body{
	padding:0 !important;
}

.cf-member-info{
	padding:10px 14px 14px !important;
}

.cf-member-nameage{
	display:flex;
	align-items:baseline;
	gap:6px;
	font-weight:700;
	font-size:15px;
	color:#2c2233;
	min-height:20px;
}

.cf-member-name{
	font-weight:700;
}

.cf-member-age{
	font-weight:400;
	color:#6b5b6f;
	font-size:13px;
}

.cf-member-city,
.cf-member-country{
	font-size:12px;
	color:#6b5b6f;
	line-height:1.5;
	min-height:18px; /* garde l'espace même si le champ est vide */
}

/* ---------- Masque le badge de statut "Approuvés" ---------- */
.um-directory .um-member-status{
	display:none !important;
}

/* ---------- Masque le bouton "Modifier le profil" dans la grille (optionnel, décommente si tu veux le cacher ici) ---------- */
/*
.um-directory .um-members-edit-btn{
	display:none !important;
}
*/


/* ============================================================
   Pages autonomes : [um_mes_favoris] / [um_mes_matchs] / [um_qui_ma_like]

   Ces 3 pages ne sont PAS dans le contexte ".um-directory" (elles ne
   passent pas par le moteur AJAX de l'annuaire UM) : tout le CSS
   ci-dessus, scopé ".um-directory ...", ne s'applique donc pas ici.
   On donne un habillage complet et indépendant, qui neutralise aussi
   les styles globaux d'Ultimate Member (ex: placeholder "ajouter une
   couverture") qui peuvent s'appliquer par défaut aux classes
   .um-member-photo / .um-member-card réutilisées ici.
============================================================ */

.umdp-favorites-grid,
.umdp-matches-grid,
.umdp-admirers-grid{
	display:grid !important;
	grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap:20px !important;
}

.umdp-favorites-grid .um-member,
.umdp-matches-grid .um-member,
.umdp-admirers-grid .um-member{
	border-radius:16px !important;
	overflow:hidden !important;
	box-shadow:0 6px 20px rgba(0,0,0,0.12) !important;
	background:#fff !important;
	width:100% !important;
	max-width:260px;
	margin:0 !important;
	position:static !important;
}

.umdp-favorites-grid .um-member-photo,
.umdp-matches-grid .um-member-photo,
.umdp-admirers-grid .um-member-photo{
	position:relative !important;
	aspect-ratio:1/1 !important;
	overflow:hidden !important;
	border-radius:0 !important;
	width:100% !important;
	height:auto !important;
	min-height:150px;
	background:#f1e9f2 !important;
	padding:0 !important;
	text-align:left !important;
}

/* Neutralise tout élément natif UM injecté dans le conteneur photo
   (ex: placeholder "ajouter une couverture") : on ne garde visible
   que le lien + l'avatar qu'on a nous-mêmes générés. */
.umdp-favorites-grid .um-member-photo > *:not(a),
.umdp-matches-grid .um-member-photo > *:not(a),
.umdp-admirers-grid .um-member-photo > *:not(a){
	display:none !important;
}
.umdp-favorites-grid .um-member-photo::before,
.umdp-favorites-grid .um-member-photo::after,
.umdp-matches-grid .um-member-photo::before,
.umdp-matches-grid .um-member-photo::after,
.umdp-admirers-grid .um-member-photo::before,
.umdp-admirers-grid .um-member-photo::after{
	content:none !important;
	display:none !important;
}

.umdp-favorites-grid .um-member-photo a,
.umdp-matches-grid .um-member-photo a,
.umdp-admirers-grid .um-member-photo a{
	display:block !important;
	width:100% !important;
	height:100% !important;
}

.umdp-favorites-grid .um-member-photo img,
.umdp-matches-grid .um-member-photo img,
.umdp-admirers-grid .um-member-photo img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	border-radius:0 !important;
	border:0 !important;
	background:transparent !important;
}

.umdp-favorites-grid .um-member-card,
.umdp-matches-grid .um-member-card,
.umdp-admirers-grid .um-member-card{
	padding:10px 14px 14px !important;
	background:#fff !important;
}

.umdp-favorites-grid .um-member-name,
.umdp-matches-grid .um-member-name,
.umdp-admirers-grid .um-member-name{
	font-weight:700;
	font-size:15px;
	margin-bottom:8px;
}

.umdp-favorites-grid .um-member-name a,
.umdp-matches-grid .um-member-name a,
.umdp-admirers-grid .um-member-name a{
	color:#2c2233;
	text-decoration:none;
}

/* Le bloc d'icônes (like/favori/écrire) reste en overlay bas de photo,
   comme dans l'annuaire — géré par .cf-member-overlay (déjà non-scopé
   plus haut dans ce fichier), rendu possible ici grâce au
   position:relative posé sur .um-member-photo ci-dessus. */
.umdp-standalone-overlay{
	bottom:8px;
}

.umdp-notice{
	padding:16px 20px;
	background:#faf6f9;
	border-radius:10px;
	color:#6b5b6f;
	font-size:14px;
}