/* =====================================================================
   Finesty — tarifs Particuliers « Nos prestations en un coup d'œil » (tarifs.css).
   Balisage : source-live/appliquer-tarifs.py ; comportement : tarifs.js. Portée #prestations.

   Une scène sombre pleine largeur : en-tête ferré à gauche et bascule de profil en regard ; à gauche un index
   éditorial des trois prestations ; à droite une photo propre à chaque prestation, balayée au changement, et
   posé dessus un ticket crème (encoches et pointillés de billet) dont le prix défile sur des rouleaux.
   Aucune ombre portée, aucun halo.
   ===================================================================== */
#prestations.fy-px-section {
  --px-bg: #132B33; --px-deep: #16313A; --px-ink: #1F3A43; --px-gold: #DAAE51; --px-gold-ink: #8C6A2A;
  --px-paper: #FBF8F2; --px-paper-2: #F2ECE0; --px-muted: #5E7278; --px-line: rgba(255, 255, 255, .12);
  --px-ease: cubic-bezier(.16, 1, .3, 1); --px-pad: clamp(26px, 3.2vw, 48px);
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(88px, 10vw, 150px) 0 !important; background: var(--px-bg) !important; color: #FFFFFF;
}
#prestations .fy-px__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
  background: url("/wp-content/finesty/hero/grain.png") repeat; background-size: 140px 140px;
}
#prestations .fy-px { text-align: left; }

/* ---- en-tête ------------------------------------------------------ */
#prestations .fy-px__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 64px; }
#prestations .fy-px__top .fy-section__head { flex: 1 1 520px; max-width: 700px; margin: 0 !important; text-align: left !important; }
#prestations .fy-px__top .fy-title {
  margin: 0 !important; text-align: left !important; color: #FFFFFF !important;
  font-size: clamp(36px, 4.4vw, 64px) !important; line-height: 1.04 !important; letter-spacing: -.025em !important;
}
#prestations .fy-px__top .fy-bar { display: none !important; }
#prestations .fy-px__top .fy-lead { max-width: 54ch; margin: 20px 0 0 !important; text-align: left !important; color: rgba(255, 255, 255, .68) !important; font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.65 !important; }

#prestations .fy-px__switch {
  position: relative; flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
#prestations .fy-px__switch button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap;
  font: 500 15px/1 "Kanit", sans-serif; color: rgba(255, 255, 255, .72); transition: color .45s ease;
}
#prestations .fy-px__switch button i { font-size: 13px; opacity: .85; }
#prestations .fy-px__switch button:hover { color: #FFFFFF; }
#prestations .fy-px__switch button[aria-checked="true"] { color: var(--px-deep); }
#prestations .fy-px__switch button:focus-visible { outline: 2px solid var(--px-gold); outline-offset: 2px; }
#prestations .fy-px__pill {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #FFFFFF;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
#prestations .fy-px__switch[data-profile="duo"] .fy-px__pill { transform: translateX(100%); }

/* ---- rouleaux ----------------------------------------------------- */
/* Chaque chiffre est une fenêtre qui laisse voir une bande 0-9.
   Première version buggée : la fenêtre était découpée avec un débord horizontal (inset -.08em) et des marges
   négatives faisaient se chevaucher les chiffres — d'où un éclat du chiffre voisin, y compris sur la position
   masquée à l'arrêt (le « 1 » devant « 80 ») — et les cellules de 1em laissaient apparaître le haut et le bas
   des chiffres voisins, coupés net, pendant le défilement.
   Désormais : cellules plus hautes que les chiffres (aucun voisin visible à l'arrêt), fenêtre masquée exactement
   à sa largeur, fondu doux en haut et en bas pendant le défilement, et une position qui disparaît s'efface en
   opacité en même temps qu'elle se replie, sans défiler vers zéro. */
#prestations .fy-odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
#prestations .fy-odo.is-built .fy-odo__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#prestations .fy-odo__digits { display: inline-flex; align-items: baseline; }
#prestations .fy-odo__d {
  /* cellule haute (1.6em) : le chiffre en occupe à peu près 25 % à 70 % ; les voisins restent hors fenêtre
     à l'arrêt et ne traversent que les zones fondues pendant le défilement. Les marges négatives rendent à la
     ligne la hauteur que la cellule ajoute. */
  --cell: 1.6em;
  position: relative; display: inline-block; height: var(--cell); line-height: var(--cell); max-width: 1em;
  margin: -.3em var(--odo-track, 0em) -.3em 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 71%, transparent 97%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 71%, transparent 97%);
  transition: max-width .65s var(--px-ease), margin-right .65s var(--px-ease), opacity .4s ease;
}
/* chiffre fantôme : il donne à la fenêtre sa largeur exacte et sa ligne de base */
#prestations .fy-odo__d::before { content: "0"; visibility: hidden; }
#prestations .fy-odo__d.is-off { max-width: 0; margin-right: 0; opacity: 0; }
#prestations .fy-odo__strip {
  position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column;
  transform: translateY(calc(var(--n, 0) * -1 * var(--cell))); transition: transform 1s var(--px-ease) calc(var(--i, 0) * 70ms);
}
#prestations .fy-odo__strip > span { display: block; height: var(--cell); line-height: var(--cell); text-align: center; }
#prestations .fy-odo.is-instant :is(.fy-odo__strip, .fy-odo__d) { transition: none !important; }

/* ---- index des prestations ---------------------------------------- */
#prestations .fy-px__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: clamp(52px, 6vw, 96px); }
#prestations .fy-px__index { border-top: 1px solid var(--px-line); }
#prestations .fy-px__row {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; grid-template-areas: "num name go" "num price go";
  align-items: center; column-gap: 14px; width: 100%; margin: 0; padding: clamp(22px, 2.2vw, 30px) 0;
  border: 0; border-bottom: 1px solid var(--px-line); border-radius: 0; background: transparent;
  color: rgba(255, 255, 255, .4); text-align: left; cursor: pointer; font: inherit; transition: color .5s ease;
}
#prestations .fy-px__row:focus-visible { outline: 2px solid var(--px-gold); outline-offset: 4px; }
#prestations .fy-px__row-num { grid-area: num; align-self: start; padding-top: .55em; font: 500 14px/1 "Kanit", sans-serif; letter-spacing: .06em; font-variant-numeric: tabular-nums; transition: color .5s ease; }
#prestations .fy-px__row-name {
  grid-area: name; font: 600 clamp(22px, 2.1vw, 30px)/1.14 "Kanit", sans-serif; letter-spacing: -.012em; text-wrap: balance;
  transition: transform .7s var(--px-ease);
}
#prestations .fy-px__row-price { grid-area: price; display: inline-flex; align-items: baseline; gap: 6px; margin-top: 10px; font: 600 20px/1 "Kanit", sans-serif; }
#prestations .fy-px__row-cur { font: 500 13px/1 "Kanit", sans-serif; letter-spacing: .04em; }
#prestations .fy-px__row-go {
  grid-area: go; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--px-gold); color: var(--px-deep); opacity: 0; transform: translateX(-14px) scale(.7);
  transition: opacity .45s ease, transform .7s var(--px-ease);
}
#prestations .fy-px__row-go i { font-size: 14px; }
#prestations .fy-px__row-bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(255, 255, 255, .85);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
#prestations .fy-px__row.is-timing .fy-px__row-bar { transform: scaleX(1); transition: transform 7s linear; }
#prestations .fy-px__row:hover { color: rgba(255, 255, 255, .72); }
#prestations .fy-px__row:hover .fy-px__row-name { transform: translateX(6px); }
#prestations .fy-px__row[aria-selected="true"] { color: #FFFFFF; }
#prestations .fy-px__row[aria-selected="true"] .fy-px__row-num { color: var(--px-gold); }
#prestations .fy-px__row[aria-selected="true"] .fy-px__row-name { transform: none; }
#prestations .fy-px__row[aria-selected="true"] .fy-px__row-go { opacity: 1; transform: none; }

/* ---- photo de fond ------------------------------------------------ */
/* Une photo par prestation, en fond de toute la section, sous un voile bleu nuit plus dense à gauche (où se lit
   l'index) qu'à droite. Au changement : fondu enchaîné, la nouvelle photo passant du flou au net.
   Pas de zoom, et une hauteur fixe : le calque avait la hauteur de la section, qui change avec celle du ticket ;
   object-fit: cover recadrait alors l'image en continu pendant la transition (effet de redimensionnement). Sa
   hauteur est maintenant celle de la section avec le ticket le plus long (--px-shots-h, posé par tarifs.js) :
   l'image ne bouge plus, la section la découpe simplement en bas. */
#prestations .fy-px__shots { position: absolute; top: 0; left: 0; right: 0; height: var(--px-shots-h, 100%); z-index: -2; overflow: hidden; background: var(--px-bg); pointer-events: none; }
/* Le fondu est une animation relancée par tarifs.js à chaque changement, et non une transition : en revenant à
   la photo précédente (3 → 2, 2 → 1), celle-ci était encore visible sous la nouvelle (opacité 1) ; une transition
   n'avait alors rien à animer et l'image apparaissait d'un coup. */
#prestations .fy-px__shot { position: absolute; inset: 0; margin: 0; z-index: 0; opacity: 0; }
#prestations .fy-px__shot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0 !important; }
#prestations .fy-px__shot.is-prev { z-index: 1; opacity: 1; }
#prestations .fy-px__shot.is-on { z-index: 2; opacity: 1; animation: fyPxShotIn 1.1s ease both; }
#prestations .fy-px__shot.is-on img { animation: fyPxShotFocus 1.1s var(--px-ease) both; }
@keyframes fyPxShotIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fyPxShotFocus { from { filter: blur(16px); } to { filter: blur(0); } }
#prestations .fy-px__shots::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(90deg, rgba(19, 43, 51, .94) 0%, rgba(19, 43, 51, .82) 42%, rgba(19, 43, 51, .62) 100%),
    linear-gradient(180deg, rgba(19, 43, 51, .55) 0%, rgba(19, 43, 51, 0) 30%, rgba(19, 43, 51, 0) 70%, rgba(19, 43, 51, .7) 100%);
}

/* ---- ticket ------------------------------------------------------- */
#prestations .fy-px__tickets { position: relative; z-index: 4; transition: height .75s var(--px-ease); }
#prestations .fy-px__ticket {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: var(--px-pad); border-radius: clamp(22px, 2.2vw, 30px); background: var(--px-paper); color: var(--px-ink);
}
#prestations .fy-px__ticket::before {          /* grain papier */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .18; mix-blend-mode: multiply;
  background: url("/wp-content/finesty/hero/grain.png") repeat; background-size: 140px 140px;
}
#prestations .fy-px__t-head { display: flex; align-items: center; gap: 16px; }
#prestations .fy-px__t-ico {
  flex: 0 0 52px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--px-deep); color: var(--px-gold);
  --fy-ico-accent: #DAAE51;
}
#prestations .fy-px__t-ico svg { width: 24px; height: 24px; }
#prestations .fy-px__t-heading { min-width: 0; }
#prestations .fy-px__t-num { display: block; font: 600 12px/1 "Kanit", sans-serif; letter-spacing: .14em; color: var(--px-gold-ink); font-variant-numeric: tabular-nums; }
#prestations .fy-px__t-title { margin: 7px 0 0 !important; font: 600 clamp(19px, 1.6vw, 23px)/1.22 "Kanit", sans-serif !important; letter-spacing: -.005em; color: var(--px-deep) !important; text-align: left; text-wrap: balance; }

#prestations .fy-px__t-price { display: flex; align-items: baseline; gap: clamp(8px, .8vw, 14px); margin-top: clamp(20px, 2.4vw, 34px); color: var(--px-deep); }
#prestations .fy-px__t-cur, #prestations .fy-px__t-tax { font: 500 clamp(17px, 1.4vw, 22px)/1 "Kanit", sans-serif; letter-spacing: .04em; color: var(--px-gold-ink); }
#prestations .fy-odo--xl { font: 600 clamp(84px, 9vw, 140px)/1 "Kanit", sans-serif; letter-spacing: 0; --odo-track: -.02em; }
#prestations .fy-px__t-who { display: grid; justify-items: start; margin: 12px 0 0 !important; }
#prestations .fy-px__t-who > span { grid-area: 1 / 1; font: 600 12px/1 "Kanit", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--px-muted); }
#prestations .fy-px__t-from { max-width: 58ch; margin: 16px 0 0 !important; font-size: 15.5px !important; line-height: 1.65 !important; color: #4A5E64 !important; text-align: left; }

/* pointillés et encoches de billet. Les encoches sont découpées dans le ticket par un masque (hauteur posée par
   tarifs.js dans --perf-y) : avec une photo en fond, deux disques couleur de scène se seraient vus. */
#prestations .fy-px__perf { position: relative; height: 0; margin: clamp(26px, 3vw, 40px) calc(22px - var(--px-pad)); border-top: 2px dashed rgba(22, 49, 58, .16); }
#prestations .fy-px__ticket[style*="--perf-y"] {
  -webkit-mask: radial-gradient(circle 15px at 0 var(--perf-y), transparent 14.5px, #000 15px), radial-gradient(circle 15px at 100% var(--perf-y), transparent 14.5px, #000 15px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 15px at 0 var(--perf-y), transparent 14.5px, #000 15px), radial-gradient(circle 15px at 100% var(--perf-y), transparent 14.5px, #000 15px);
  mask-composite: intersect;
}

/* le ticket est trop étroit pour loger les options à côté de la liste (libellés sur quatre lignes) :
   la liste s'étale sur deux colonnes, les options suivent en pleine largeur */
#prestations .fy-px__t-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 2.6vw, 34px); }
#prestations .fy-px__list { column-gap: clamp(22px, 2.8vw, 40px); }
@media (min-width: 768px) { #prestations .fy-px__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#prestations .fy-px__label { margin: 0 0 18px !important; font: 600 12px/1 "Kanit", sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--px-gold-ink) !important; text-align: left; }
#prestations .fy-px__list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 14px; }
#prestations .fy-px__list li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font-size: 15px; line-height: 1.55; color: var(--px-ink); text-align: left; }
#prestations .fy-px__list li::before { content: none !important; }
#prestations .fy-px__list .fy-ico {
  --fy-ico-accent: #DAAE51;
  position: static !important; flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 !important; border-radius: 50%;
  background: var(--px-deep); color: #FFFFFF; transform: none !important;
}
#prestations .fy-px__list .fy-ico svg { width: 15px; height: 15px; }
/* picto centré en hauteur sur son texte, quel que soit le nombre de lignes */
#prestations .fy-px__list .fy-ico + span { padding-top: 0; }

#prestations .fy-px__opts { padding: 20px 20px 16px; border-radius: 18px; background: var(--px-paper-2); }
#prestations .fy-px__opts ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; }
#prestations .fy-px__opts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(22, 49, 58, .1); }
#prestations .fy-px__opts li:first-child { border-top: 0; padding-top: 0; }
#prestations .fy-px__opts li::before { content: none !important; }
#prestations .fy-px__opt-name { font-size: 14.5px; line-height: 1.45; color: var(--px-ink); }
#prestations .fy-px__opt-val { display: grid; justify-items: end; flex: 0 0 auto; }
#prestations .fy-px__opt-val > span { grid-area: 1 / 1; font: 600 15px/1.45 "Kanit", sans-serif; color: var(--px-deep); white-space: nowrap; }
#prestations .fy-px__opts-note { margin: 8px 0 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #6B7C81 !important; text-align: left; }

#prestations .fy-px__t-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: clamp(28px, 3vw, 40px); }
#prestations .fy-px__more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 15px/1 "Kanit", sans-serif; color: var(--px-deep) !important; text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 11px) / 0 1px no-repeat; transition: background-size .35s ease;
}
#prestations .fy-px__more i { font-size: 12px; transition: transform .35s ease; }
#prestations .fy-px__more:hover { background-size: calc(100% - 20px) 1px; }
#prestations .fy-px__more:hover i { transform: translateY(3px); }

/* ---- montants du profil choisi (libellés, suppléments) ------------ */
#prestations .fy-px.is-js :is(.fy-px__t-who > span, .fy-px__opt-val > span) {
  opacity: 0; visibility: hidden; transform: translateY(.5em); filter: blur(5px);
  transition: opacity .35s ease, transform .6s var(--px-ease), filter .35s ease, visibility 0s linear .6s;
}
#prestations .fy-px.is-js[data-profile="solo"] :is(.fy-px__t-who > span, .fy-px__opt-val > span)[data-profile="solo"],
#prestations .fy-px.is-js[data-profile="duo"] :is(.fy-px__t-who > span, .fy-px__opt-val > span)[data-profile="duo"] {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .35s ease .12s, transform .6s var(--px-ease) .12s, filter .35s ease .12s, visibility 0s;
}

/* ---- un ticket à la fois, contenu en cascade ---------------------- */
#prestations .fy-px.is-js .fy-px__ticket:not(.is-on) { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; pointer-events: none; }
@keyframes fyPxIn { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
#prestations .fy-px__ticket.is-enter > :is(.fy-px__t-head, .fy-px__t-price, .fy-px__t-who, .fy-px__t-from, .fy-px__t-body, .fy-px__t-actions) { animation: fyPxIn .85s var(--px-ease) both; }
#prestations .fy-px__ticket.is-enter > .fy-px__t-price { animation-delay: .05s; }
#prestations .fy-px__ticket.is-enter > .fy-px__t-who { animation-delay: .1s; }
#prestations .fy-px__ticket.is-enter > .fy-px__t-from { animation-delay: .14s; }
#prestations .fy-px__ticket.is-enter > .fy-px__t-body { animation-delay: .2s; }
#prestations .fy-px__ticket.is-enter > .fy-px__t-actions { animation-delay: .3s; }
#prestations .fy-px__ticket.is-enter > .fy-px__perf { animation: fyPxPerf .9s var(--px-ease) .16s both; }
@keyframes fyPxPerf { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px -20px -20px -20px); } }
#prestations .fy-px__ticket.is-enter .fy-px__list li { animation: fyPxIn .7s var(--px-ease) both; }
#prestations .fy-px__ticket.is-enter .fy-px__list li:nth-child(1) { animation-delay: .26s; }
#prestations .fy-px__ticket.is-enter .fy-px__list li:nth-child(2) { animation-delay: .31s; }
#prestations .fy-px__ticket.is-enter .fy-px__list li:nth-child(3) { animation-delay: .36s; }
#prestations .fy-px__ticket.is-enter .fy-px__list li:nth-child(4) { animation-delay: .41s; }
#prestations .fy-px__ticket.is-enter .fy-px__list li:nth-child(5) { animation-delay: .46s; }
#prestations .fy-px__ticket.is-enter .fy-px__list li:nth-child(6) { animation-delay: .51s; }

/* ---- apparition au défilement ------------------------------------- */
#prestations .fy-px.is-js:not(.is-done) :is(.fy-px__switch, .fy-px__row, .fy-px__tickets) {
  transition: opacity .9s ease, translate 1.15s var(--px-ease), filter .9s ease, color .5s ease, height .75s var(--px-ease);
}
#prestations .fy-px.is-js:not(.is-in) :is(.fy-px__switch, .fy-px__row, .fy-px__tickets) { opacity: 0; translate: 0 44px; filter: blur(10px); }
#prestations .fy-px.is-in .fy-px__row:nth-child(1) { transition-delay: .1s; }
#prestations .fy-px.is-in .fy-px__row:nth-child(2) { transition-delay: .2s; }
#prestations .fy-px.is-in .fy-px__row:nth-child(3) { transition-delay: .3s; }
#prestations .fy-px.is-in .fy-px__tickets { transition-delay: .35s; }
#prestations .fy-px__shots { transition: opacity 1.4s ease; }
#prestations.fy-px-section.is-px-js:not(.is-in) .fy-px__shots { opacity: 0; }
#prestations .fy-px.is-done .fy-px__row { transition: color .5s ease; }

/* ---- sans JS : pas d'index, les trois tickets et les deux prix ---- */
#prestations .fy-px:not(.is-js) :is(.fy-px__switch, .fy-px__index) { display: none; }
#prestations .fy-px:not(.is-js) .fy-px__tickets { display: grid; gap: 24px; margin: 0; }
#prestations .fy-px:not(.is-js) .fy-odo__txt + .fy-odo__txt::before { content: " / "; }
#prestations .fy-px:not(.is-js) :is(.fy-px__t-who, .fy-px__opt-val) { display: flex; gap: 10px; }

/* ---- ordinateur : index à gauche, scène à droite ------------------ */
/* Colonnes de même hauteur : à gauche l'index puis la photo, qui prend toute la hauteur restante ; à droite le
   ticket. La photo grandit ou se réduit avec le ticket quand on change de prestation. */
/* l'index accompagne la lecture d'un ticket long */
@media (min-width: 1025px) {
  #prestations .fy-px__main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(36px, 4vw, 72px); align-items: start; }
  #prestations .fy-px__side { position: sticky; top: clamp(100px, 13vh, 150px); }
  }
/* ---- tablette, mobile --------------------------------------------- */
@media (max-width: 1024px) {
  #prestations .fy-px__main { max-width: 720px; }
  #prestations .fy-px__side { display: contents; }
  #prestations .fy-px__index { order: 1; }
  #prestations .fy-px__stage { order: 2; }
  }
@media (max-width: 767px) {
  #prestations.fy-px-section { --px-pad: 22px; }
  #prestations .fy-px__top { flex-direction: column; align-items: stretch; gap: 26px; }
  #prestations .fy-px__top .fy-section__head { flex: none; }
  #prestations .fy-px__switch button { padding: 0 10px; font-size: 14px; gap: 7px; }
  #prestations .fy-px__row { grid-template-columns: 34px minmax(0, 1fr) 38px; column-gap: 10px; padding: 20px 0; }
  #prestations .fy-px__row-name { font-size: 19px; }
  #prestations .fy-px__row-price { font-size: 17px; margin-top: 8px; }
  #prestations .fy-px__row-go { width: 38px; height: 38px; }
  #prestations .fy-odo--xl { font-size: clamp(72px, 22vw, 96px); }
  #prestations .fy-px__t-head { align-items: flex-start; }
  #prestations .fy-px__t-ico { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
  #prestations .fy-px__opts { padding: 16px 16px 12px; }
  #prestations .fy-px__t-actions { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #prestations .fy-px *, #prestations .fy-px { transition: none !important; animation: none !important; }
  #prestations .fy-px.is-js :is(.fy-px__switch, .fy-px__row, .fy-px__tickets) { opacity: 1 !important; translate: none !important; filter: none !important; }
  #prestations .fy-px__shots { opacity: 1 !important; }
}