/* =========================================================================
   La fiche détaillée d'un membre : son mini-site dans VooX. Même format pour
   tous — XPro, Xpert, XLeader —, comme une page d'établissement sur un
   annuaire de proximité : la galerie d'abord, puis ce qu'il propose et à quel
   prix, où il se trouve, son équipe, ses horaires.
   ========================================================================= */

/* La galerie : une grande photo et quatre petites, comme une devanture. */
.vf-galerie{
  display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:8px;margin:28px 0 0;border-radius:20px;overflow:hidden;
}
.vf-galerie .vf-photo:first-child{grid-row:span 2}
/* Les étiquettes de l'en-tête — statut, métier, secteur, rôle — se
   touchaient : « Xpert Santé · bien-être Santé & Bien-être » se lisait comme
   une seule phrase. Un peu d'air entre elles, et chacune redevient une
   étiquette. */
.voox-profile-id .voox-tag{margin:0 6px 6px 0}

/* Les photos de l'embasement, sur la fiche du membre : des tuiles de même
   taille. La mise en page « une grande et quatre petites » de la vitrine
   suppose cinq photos ; avec deux, elle donnait une image géante et une
   vignette perdue à côté. */
.voox-fiche-photos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;margin:0;
}
.voox-fiche-photos .vf-photo{border-radius:16px;aspect-ratio:4/3;min-height:0}
.vf-photo{position:relative;display:block;background:var(--voox-soft,#F2F5F9);min-height:132px;overflow:hidden}
.vf-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.vf-photo:hover img{transform:scale(1.04)}
.vf-photo-reste{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,15,20,.55);color:#fff;
  font:700 22px/1 var(--voox-font-title,'Oxanium',sans-serif);
}
/* À une ou deux photos, la mosaïque n'a pas de sens : une bande suffit. */
.vf-galerie:has(.vf-photo:only-child){grid-template-columns:1fr;grid-template-rows:1fr}
.vf-galerie:has(.vf-photo:only-child) .vf-photo{min-height:300px}

.vf-bloc{margin-top:40px}
.vf-bloc h2{
  margin:0 0 6px;font-family:var(--voox-font-title,'Oxanium',sans-serif);
  font-size:22px;font-weight:600;letter-spacing:-.2px;color:var(--voox-title,#0B0F14);
}
.vf-bloc-note{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--voox-text,#46536A)}

/* Les prestations : le nom et sa durée à gauche, le prix et le bouton à
   droite — on compare d'un coup d'œil, ligne à ligne. */
.vf-groupe{
  margin:24px 0 10px;font-family:var(--voox-font-title,'Oxanium',sans-serif);
  font-size:16px;font-weight:600;color:var(--voox-title,#0B0F14);
}
.vf-prestations{list-style:none;margin:0;padding:0;border:1px solid var(--voox-line,rgba(11,15,20,.12));border-radius:16px;overflow:hidden;background:#fff}
.vf-prestation{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 18px;
}
.vf-prestation + .vf-prestation{border-top:1px solid var(--voox-line,rgba(11,15,20,.1))}
.vf-prestation-quoi{display:flex;flex-direction:column;gap:3px;min-width:0}
.vf-prestation-quoi strong{font-size:15px;font-weight:600;color:var(--voox-title,#0B0F14)}
.vf-prestation-note{font-size:13.5px;line-height:1.45;color:var(--voox-text,#46536A)}
.vf-prestation-duree{font-size:12.5px;color:var(--voox-text,#46536A);opacity:.85}
.vf-prestation-prix{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.vf-prestation-prix span{
  font-family:var(--voox-font-title,'Oxanium',sans-serif);
  font-size:16px;font-weight:700;color:var(--voox-title,#0B0F14);white-space:nowrap;
}
.vf-prestation-prix .voox-btn{height:38px;padding:0 18px;font-size:14px}

.vf-adresse{margin:0;font-size:15.5px;color:var(--voox-title,#0B0F14)}

/* L'équipe : des visages, pas une liste. */
.vf-equipe{display:flex;flex-wrap:wrap;gap:22px}
.vf-membre{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;text-align:center}
.vf-membre img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.vf-membre strong{font-size:14px;font-weight:600;color:var(--voox-title,#0B0F14)}
.vf-membre span{font-size:12.5px;line-height:1.3;color:var(--voox-text,#46536A)}

/* Les horaires : une colonne de jours, les fermetures en retrait. */
.vf-horaires{list-style:none;margin:0;padding:0;max-width:360px}
.vf-horaires li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;font-size:14.5px;color:var(--voox-text,#46536A);
}
.vf-horaires li + li{border-top:1px solid var(--voox-line,rgba(11,15,20,.08))}
.vf-horaires strong{font-weight:600;color:var(--voox-title,#0B0F14)}
.vf-horaires li.est-ferme strong{font-weight:500;color:var(--voox-text,#46536A);opacity:.75}

@media (max-width:760px){
  .vf-galerie{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .vf-galerie .vf-photo:first-child{grid-column:span 2;grid-row:auto;min-height:200px}
  .vf-prestation{flex-direction:column;align-items:flex-start;gap:10px}
  .vf-prestation-prix{width:100%;justify-content:space-between}
  .vf-bloc h2{font-size:19px}
}

/* Une fiche XPro encore vide, vue par celui qui la tient. */
.vf-a-remplir{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:28px 0;padding:28px;border:2px dashed var(--voox-border,#D5DCE6);border-radius:16px;background:var(--voox-surface,#F7F9FC)}
.vf-a-remplir span{font-size:14.5px;line-height:1.55;color:var(--voox-text,#46536A)}
.vf-a-remplir .voox-btn{margin-top:8px}

/* Le parcours d'une XPro : ce que voit le public, puis les cinq étapes. */
.vp-public{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 40px}
.vp-animateur p,.vp-mag li{font-size:15px;line-height:1.55;color:var(--voox-text,#46536A);margin:0 0 6px}
.vp-animateur a,.vp-mag a{color:var(--voox-title,#0B0F14)}
.vp-mag ul{list-style:none;margin:0;padding:0}
.vp-mag li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0}
.vp-mag li + li{border-top:1px solid var(--voox-line,rgba(11,15,20,.08))}
.vp-tag{font-size:11.5px;padding:2px 8px}
.vp-tag-x360{background:#1B2A4A;color:#fff}
.vp-note{font-size:13.5px;color:var(--voox-text,#46536A)}

.vp-parcours{padding:26px;border:1px solid var(--voox-border,#D5DCE6);border-radius:16px;background:var(--voox-surface,#F7F9FC)}
.vp-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vp-tete h2{margin:0 0 16px}
.vp-compte{font-size:13.5px;font-weight:600;color:var(--voox-text,#46536A)}
.vp-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:none}
.vp-etape{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--voox-line,rgba(11,15,20,.08))}
.vp-pastille{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--voox-line,#E6EAF0);color:var(--voox-text,#46536A);font-weight:700;font-size:13px}
.vp-etape.est-faite .vp-pastille{background:#0E7A4B;color:#fff}
.vp-titre{font-weight:700;color:var(--voox-title,#0B0F14);font-size:15px}
.vp-detail{font-size:13px;line-height:1.4;color:var(--voox-text,#46536A)}

.vp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:20px}
.vp-action{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:12px;background:#fff;border:1px dashed var(--voox-border,#D5DCE6)}
.vp-action .voox-field{width:100%}
.vp-action-titre{font-weight:700;font-size:14px;color:var(--voox-title,#0B0F14)}
.vp-action-ligne{flex-direction:row;align-items:center;justify-content:space-between;grid-column:1 / -1;border-style:solid}
.vp-case{font-size:14px;display:flex;gap:6px;align-items:center}

@media (max-width:760px){
  .vp-etapes{grid-template-columns:1fr 1fr}
}
.vp-parcours .vp-aide{margin:-6px 0 16px;font-size:13.5px;line-height:1.55;color:#46536A;max-width:860px}