/* ============================================================
 *  BKH Transformations — front styles (v2.5.1)
 *  Direction : premium, minimaliste, éditorial (Nike / Apple).
 *  Noir & blanc, typographie Manrope, aucune couleur d'accent.
 *  Namespace : .fb-transformations
 * ============================================================ */

.fb-transformations{
  /* palette */
  --fb-ink:#111111;          /* texte principal / éléments sombres */
  --fb-paper:#ffffff;        /* fond clair / éléments clairs */
  --fb-mist:#f5f5f5;         /* fond image / surfaces neutres */
  --fb-muted:#6b6b6e;        /* texte secondaire (sur clair) */
  --fb-line:rgba(17,17,17,.12);
  --fb-tile:#f7f7f7;         /* fond de la tuile (fiche) */
  --fb-tile-line:rgba(17,17,17,.07);
  --fb-tile-dark:#161619;    /* tuile sur fond sombre */
  /* réglages */
  --fb-ratio:4 / 5;          /* ratio homogène des photos */
  --fb-radius:16px;          /* rayon de la tuile */
  --fb-media-radius:10px;    /* rayon de la photo (imbriquée) */
  --fb-img-filter:grayscale(.55) contrast(1.12) brightness(1.02); /* filtre N&B pour harmoniser les photos */
  --fb-gap:24px;
  --fb-font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--fb-font);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:16px;
  color:var(--fb-ink);
}
.fb-transformations *,
.fb-transformations *::before,
.fb-transformations *::after{box-sizing:border-box}

/* ================= CARTE / SLIDE (tuile) ================= */
.fb-transformations__slide{
  display:flex;
  flex-direction:column;
  background:var(--fb-tile);
  border:1px solid var(--fb-tile-line);
  border-radius:var(--fb-radius);
  padding:12px 12px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .3s ease, box-shadow .3s ease;
}
@media (hover:hover){
  .fb-transformations__slide:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px -16px rgba(0,0,0,.22);
  }
}
.fb-transformations__media{
  position:relative;
  aspect-ratio:var(--fb-ratio);
  overflow:hidden;
  border-radius:var(--fb-media-radius);
  background:var(--fb-mist);
}
.fb-transformations__image{
  width:100% !important;height:100% !important;
  object-fit:cover;object-position:center;
  display:block;
  filter:var(--fb-img-filter);
  transition:transform .5s ease, filter .5s ease;
}
@media (hover:hover){
  .fb-transformations__slide:hover .fb-transformations__image{transform:scale(1.03)}
}

/* bloc texte sous la photo — hiérarchie : résultat > prénom > durée */
.fb-transformations__info{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:15px 4px 0;
}
.fb-transformations__name{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--fb-ink);
}
.fb-transformations__result{
  font-size:clamp(24px,2.4vw,30px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--fb-ink);
}
.fb-transformations__result-sub{
  font-size:.5em;
  font-weight:600;
  color:var(--fb-muted);
  letter-spacing:0;
}
.fb-transformations__meta{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--fb-muted);
}
.fb-transformations__duration{font-weight:500}
.fb-transformations__sep{opacity:.5}
.fb-transformations__objective{font-weight:400}

/* ================= SLIDER (accueil) ================= */
.fb-transformations--slider{max-width:none;padding-inline:0}
.fb-transformations__title{
  font-size:clamp(26px,4vw,40px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 28px;
  color:var(--fb-ink);
}
.fb-transformations__wrap{position:relative}

.fb-transformations__viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.fb-transformations__viewport::-webkit-scrollbar{display:none}
.fb-transformations__viewport:active{cursor:grabbing}
.fb-transformations__viewport:focus-visible{
  outline:2px solid var(--fb-ink);
  outline-offset:4px;
  border-radius:2px;
}

.fb-transformations__track{
  display:flex;
  gap:var(--fb-gap);
  padding:8px 0 28px;
}
/* ~3 cartes visibles sur desktop */
.fb-transformations__track .fb-transformations__slide{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 2 * var(--fb-gap)) / 3);
  max-width:460px;
}

/* flèches minimalistes en surimpression sur les bords */
.fb-transformations__arrow{
  position:absolute;z-index:5;
  top:calc(50% - 44px);        /* centrées visuellement sur la photo */
  transform:translateY(-50%);
  width:46px;height:46px;
  display:grid;place-items:center;
  padding:0;border-radius:50%;
  -webkit-appearance:none;appearance:none;
  background:var(--fb-paper);
  border:1px solid var(--fb-line);
  color:var(--fb-ink);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  cursor:pointer;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease;
}
.fb-transformations__arrow svg{display:block}
.fb-transformations__arrow--prev{left:-8px}
.fb-transformations__arrow--next{right:-8px}
@media (hover:hover){
  .fb-transformations__arrow:hover{background:var(--fb-ink);color:var(--fb-paper);border-color:var(--fb-ink)}
}
.fb-transformations__arrow:focus-visible{
  outline:2px solid var(--fb-ink);outline-offset:2px;
}
.fb-transformations__arrow:disabled{opacity:0;pointer-events:none}

/* ================= GALERIE (page résultats) ================= */
.fb-transformations__filters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 32px;
}
.fb-transformations__chip{
  -webkit-appearance:none;appearance:none;
  background:transparent;
  border:1px solid var(--fb-line);
  color:var(--fb-muted);
  font-family:var(--fb-font);
  font-size:14px;font-weight:600;
  padding:9px 18px;border-radius:999px;
  cursor:pointer;box-shadow:none;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
@media (hover:hover){
  .fb-transformations__chip:hover{color:var(--fb-ink);border-color:var(--fb-ink)}
}
.fb-transformations__chip:focus-visible{outline:2px solid var(--fb-ink);outline-offset:2px}
.fb-transformations__chip.is-active,
.fb-transformations__chip.is-active:hover{
  background:var(--fb-ink);border-color:var(--fb-ink);color:var(--fb-paper);
}

.fb-transformations__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:32px 24px;
}
.fb-transformations__slide.fb-is-hidden{display:none}

/* ================= FOND SOMBRE (ex. Accueil noir) ================= */
/* ajouter la classe .fb-on-dark sur un conteneur parent (section Elementor) */
.fb-on-dark .fb-transformations__title,
.fb-on-dark .fb-transformations__name,
.fb-on-dark .fb-transformations__result{color:#fff}
.fb-on-dark .fb-transformations__result-sub,
.fb-on-dark .fb-transformations__meta{color:rgba(255,255,255,.6)}
.fb-on-dark .fb-transformations__slide{
  background:var(--fb-tile-dark);
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}
@media (hover:hover){
  .fb-on-dark .fb-transformations__slide:hover{box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
}
.fb-on-dark .fb-transformations__media{background:#0f0f11}
.fb-on-dark .fb-transformations__arrow{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.24);
  color:#fff;box-shadow:none;
}
.fb-on-dark .fb-transformations__viewport:focus-visible,
.fb-on-dark .fb-transformations__arrow:focus-visible{outline-color:#fff}
@media (hover:hover){
  .fb-on-dark .fb-transformations__arrow:hover{background:#fff;color:var(--fb-ink);border-color:#fff}
  .fb-on-dark .fb-transformations__chip:hover{color:#fff;border-color:rgba(255,255,255,.6)}
}
.fb-on-dark .fb-transformations__chip{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.fb-on-dark .fb-transformations__chip.is-active,
.fb-on-dark .fb-transformations__chip.is-active:hover{background:#fff;border-color:#fff;color:var(--fb-ink)}

/* ================= RESPONSIVE ================= */
/* tablette : ~2 cartes */
@media (max-width:1024px){
  .fb-transformations__track .fb-transformations__slide{
    flex-basis:calc((100% - var(--fb-gap)) / 2);
  }
}
/* mobile : 1 carte + aperçu de la suivante */
@media (max-width:640px){
  .fb-transformations{--fb-gap:16px}
  .fb-transformations__track{padding:6px 0 22px}
  .fb-transformations__track .fb-transformations__slide{
    flex-basis:82%;
    max-width:none;
  }
  .fb-transformations__arrow{display:none}       /* navigation au swipe */
  .fb-transformations__grid{grid-template-columns:1fr;gap:26px}
  .fb-transformations__result{font-size:clamp(22px,7vw,28px)}
}

/* ================= ACCESSIBILITÉ ================= */
@media (prefers-reduced-motion:reduce){
  .fb-transformations *{transition:none !important}
  .fb-transformations__viewport{scroll-behavior:auto}
  .fb-transformations__slide:hover .fb-transformations__image{transform:none}
}