/* ==========================================================================
   KEEPUP v5 - pages-a.css (theme clair)
   --------------------------------------------------------------------------
   Styles propres aux pages training.html, studio.html et equipe.html.
   Charge APRES style.css, qui reste la source unique des tokens, de la typo,
   des boutons, du header, du hero, du footer et du reveal.
   Ici : uniquement les composants que l'accueil n'avait pas.

   SOMMAIRE
     1.  Accent de la page Equipe (bleu de marque)
     2.  Fil d'ariane (le repere d'etage du hero est .lvl dans style.css)
     3.  Grille des services (Training)
     4.  Planning de la semaine
     5.  Tarifs
     6.  Formulaires
     7.  Deroule d'une seance (Studio)
     8.  Bloc photo + texte
     9.  Roster de l'equipe
     10. Bande des therapeutes
     11. Mouvement reduit
   ========================================================================== */

/* -------------------------------------------------- 1. Accent page Equipe */
/* L'equipe n'est pas un etage : elle porte le bleu de marque #005cb9.
   Sur fond clair ce bleu tient 5.9:1, il sert donc aussi au texte : plus
   besoin de la variante eclaircie de la v4. --accent-lift est conserve comme
   alias de --accent-text pour ne pas toucher au balisage des composants.
   La substitution de var() se fait sur l'element qui DECLARE la variable :
   on redeclare l'alias sur chaque conteneur qui redefinit les tokens. */
:root,
[data-univers],
.cta { --accent-lift: var(--accent-text); }

[data-univers="equipe"] {
  --accent: #005cb9;
  --accent-text: #005cb9;
  --accent-ink: #ffffff;
  --tint-soft: rgba(0, 92, 185, 0.07);
  --glow: rgba(32, 143, 255, 0.28);
  --veil: #005cb9;
  --hero-em: #9fd0ff;
}

/* -------------------------------------------------- 2. Fil d'ariane */
/* fil d'ariane discret sous le header */
.crumb {
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: var(--grey);
}
.crumb a:hover { color: var(--accent-lift); }

/* -------------------------------------------------- 3. Services (Training) */
.svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(1.8rem, 4vw, 3rem);
}
/* Le nombre de colonnes est fixe plutot que laisse a auto-fit : neuf services
   veulent 3 x 3, quatre formules veulent 4 x 1 (Training : 4 x 2 puis 4 x 1). */
@media (min-width: 620px) {
  .svc--3,
  .svc--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .svc--3 { grid-template-columns: repeat(3, 1fr); }
  .svc--4 { grid-template-columns: repeat(4, 1fr); }
}
/* v5 : la photo passe en tete de carte, en couleur, et le titre se pose
   dessous sur le blanc (plus de voile noir sur l'image). */
.svc__item {
  position: relative;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(1.2rem, 2.4vw, 1.9rem);
}
.svc__ph {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-3);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
/* Training : cadrage des photos de cours proche des choix de Saverio (25.10.2026) */
#services .svc__ph,
#ages .svc__ph,
#formules .svc__ph { aspect-ratio: 7 / 6; }
.svc__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) contrast(1.02);
  transition: filter 0.6s var(--ease);
}
.svc__item:hover .svc__ph img,
.svc__item:focus-within .svc__ph img { filter: grayscale(0) contrast(1.02); }
/* `.svc__item p` (0,1,1) battrait `.svc__n` (0,1,0) : on remonte la
   specificite du numero. Pastille posee sur la photo. */
.svc__item .svc__n {
  position: absolute;
  top: clamp(0.8rem, 1.6vw, 1.1rem);
  left: clamp(1.2rem, 2.4vw, 1.9rem);
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.55rem 0.2rem;
  border-radius: var(--r);
  font-family: var(--ff-display);
  font-size: 1.5rem;
  line-height: 1;
  background: var(--accent);
  color: var(--accent-ink);
}
.svc__item h3 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  margin: 0 clamp(1.2rem, 2.4vw, 1.9rem) 0.55rem;
}
.svc__item p {
  margin: 0 clamp(1.2rem, 2.4vw, 1.9rem);
  color: var(--ink-soft);
  font-size: 0.94rem;
  max-width: 38ch;
}
.svc__tag {
  position: absolute;
  top: clamp(0.8rem, 1.6vw, 1.1rem);
  right: clamp(1.2rem, 2.4vw, 1.9rem);
  z-index: 2;
  padding: 0.35rem 0.55rem;
  border-radius: var(--r);
  background: #fff;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  color: var(--ink);
}

/* -------------------------------------------------- 4. Planning */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 1.8rem;
}
.filters button {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  padding: 0.68rem 1.2rem;
  min-height: 44px;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.filters button:hover { border-color: var(--accent-lift); color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* Training : 7 jours, sur une ligne en tres grand ecran, 4 + 3 sinon (25.10.2026) */
#planning .day { min-width: 0; }
/* Couleurs des cours, reprises de l'appli de reservation (25.10.2026) */
#planning [data-c="workout"]       { border-left-color: #3a6fd8; background: #e4ecfb; }
#planning [data-c="keepfit"]       { border-left-color: #d9569f; background: #fbe4f1; }
#planning [data-c="cardio"]        { border-left-color: #d94343; background: #fbe3e3; }
#planning [data-c="keeprox"]       { border-left-color: #cfa917; background: #fbf3cd; }
#planning [data-c="running"]       { border-left-color: #4caf50; background: #e3f5e1; }
#planning [data-c="running-avg"]   { border-left-color: #2e7d32; background: #d5ebd6; }
#planning [data-c="mobilite"]      { border-left-color: #26a69a; background: #dcf3f0; }
#planning [data-c="halterophilie"] { border-left-color: #2f6f46; background: #d3e7da; }
#planning [data-c="conditioning"]  { border-left-color: #ee8a3a; background: #fde7d6; }
#planning [data-c="gymnastique"]   { border-left-color: #8a5cc8; background: #ece2f9; }
#planning [data-c="jeunes"]        { border-left-color: #b07a4f; background: #f3e8de; }
#planning [data-c="seniors"]       { border-left-color: #5f7d8c; background: #e2eaee; }
@media (min-width: 900px) {
  #planning .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  #planning .week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #planning .day { padding: 1rem 0.45rem; }
}
#planning .lede--mob { display: none; }

/* 4b. Onglets de jours : telephone et tablette uniquement, un jour a la fois (01.11.2026) */
.daytabs { display: none; }
@media (max-width: 899px) {
  .daytabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin: 1.6rem 0 1.2rem;
  }
  /* sur telephone et tablette, le jour suffit : pas de filtre matin / midi / soir */
  #planning .filters { display: none; }
  #planning .lede--desk { display: none; }
  #planning .lede--mob { display: inline; }
  .daytabs button {
    font-family: var(--ff-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
    min-height: 44px;
    padding: 0 0.2rem;
    background: #fff;
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }
  .daytabs button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  #planning .week--tabs { grid-template-columns: 1fr; }
  .week--tabs .day:not(.is-current) { display: none; }
}

.day {
  background: var(--bg-2);
  padding: clamp(1rem, 2vw, 1.4rem);
  min-height: 200px;
}
.day > h3 {
  font-size: 1.5rem;
  color: var(--ink);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.slot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.62rem 0.7rem;
  margin-bottom: 0.45rem;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  transition: background 0.3s, transform 0.3s var(--ease);
}
.slot:hover { background: var(--tint-soft); transform: translateX(3px); }
.slot b {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  color: var(--ink);
}
.slot span {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--accent-lift);
  flex: none;
}
.slot[hidden] { display: none; }
.day__empty {
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--grey);
  margin: 0.4rem 0 0;
}

/* -------------------------------------------------- 5. Tarifs */
.tar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.tar__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--bg-2);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  transition: border-color 0.4s, box-shadow 0.5s var(--ease);
}
.tar__card:hover, .tar__card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.tar__card--hero {
  border-color: var(--accent);
  border-top-width: 4px;
  background:
    radial-gradient(90% 70% at 50% 0%, var(--tint-soft), transparent 70%),
    var(--bg-2);
}
.tar__name {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  color: var(--accent-lift);
  margin: 0;
}
.tar__n {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--ff-display);
  font-size: clamp(3.6rem, 8vw, 5.6rem);
  line-height: 0.82;
  color: var(--ink);
  margin: 0.8rem 0 0.35rem;
}
.tar__n small {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--grey);
}
.tar__alt {
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--grey);
  margin: 0 0 1.2rem;
}
.tar__card ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.6rem;
  flex: 1;
}
.tar__card li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
/* Tarifs : presentation reprise de l'ancien site (annuel, mensuel, puis inclus / non inclus barres), 25.10.2026 */
.tar__lbl {
  margin: 0.4rem 0 0.35rem;
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  color: var(--ink);
}
.tar__n--sm { font-size: clamp(2.6rem, 5.5vw, 3.8rem); }
.tar__card .btn--block { margin: 0.4rem 0 1.4rem; }
.tar__card li.is-off { color: var(--grey); text-decoration: line-through; opacity: 0.6; }
.tar__card li.is-off svg { color: var(--grey); }
.tar__card li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.25rem;
  color: var(--accent-lift);
}

.minis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}
.mini {
  background: var(--bg-2);
  padding: clamp(1rem, 2vw, 1.4rem);
}
.mini > span {
  display: block;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.66rem;
  color: var(--grey);
}
.mini > b {
  display: block;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--accent-lift);
  margin: 0.5rem 0 0.4rem;
}
.mini > p { margin: 0; font-size: 0.86rem; color: var(--grey); }
/* Training : rangee sous les abonnements, titres 25 px et texte 20 px (25.10.2026) */
#tarifs .mini > span { font-size: 25px; letter-spacing: 0.12em; line-height: 1.2; margin-bottom: 0.5rem; }
#tarifs .mini > p { font-size: 20px; line-height: 1.45; }

/* 5b. Telephone et tablette (< 900 px) : abonnements en onglets, un seul affiche,
   petits tarifs en grille 2 x 2 avec des tailles reduites (01.11.2026) */
.tartabs { display: none; }
@media (max-width: 899px) {
  .tartabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: clamp(1.4rem, 4vw, 2rem);
  }
  .tartabs button {
    position: relative;
    font-family: var(--ff-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    min-height: 48px;
    background: #fff;
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }
  .tartabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  /* pastille orange « Le plus choisi », meme couleur que la vignette */
  .tartabs__dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%; background: #ffa346;
  }
  #tarifs .tar--tabs { margin-top: 0.8rem; grid-template-columns: 1fr; }
  .tar--tabs .tar__card:not(.is-current) { display: none; }

  #tarifs .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tarifs .mini > span { font-size: 0.95rem; letter-spacing: 0.08em; }
  #tarifs .mini > p { font-size: 0.9rem; line-height: 1.4; }
}

/* -------------------------------------------------- 6. Formulaires */
.form {
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(1.3rem, 3vw, 2.6rem);
}
.fgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}
@media (min-width: 720px) { .fgrid { grid-template-columns: 1fr 1fr; } }
.field { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.field--wide { grid-column: 1 / -1; }

.form label,
.form .legend {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.form .legend { display: block; margin-bottom: 0.8rem; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  min-height: 48px;
  padding: 0.85rem 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.form select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent-lift);
  box-shadow: 0 0 0 3px var(--tint-soft);
}
.form input::placeholder,
.form textarea::placeholder { color: var(--grey); }

.opts { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* Les choix multiples sont des pastilles : meme langage que les filtres du
   planning, condense et en capitales, mais moins espacees pour rester lisibles
   sur des libelles longs. */
.form .opt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  background: #fff;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.form .opt:hover { border-color: var(--ink); color: var(--ink); }
.form .opt input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.form .opt:has(input:checked) {
  border-color: var(--accent-lift);
  background: var(--tint-soft);
  color: var(--ink);
}
.form .opt:has(input:focus-visible) { outline: 2px solid var(--accent-lift); outline-offset: 2px; }

.consent {
  font-size: 0.84rem;
  color: var(--grey);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.form__msg {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--tint-soft);
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--ink);
}
.form__msg[hidden] { display: none; }

/* -------------------------------------------------- 7. Deroule d'une seance */
.steps {
  list-style: none;
  counter-reset: step;
  margin: clamp(1.8rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.step {
  background: var(--bg-2);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 0.8;
  color: var(--accent-text);
  margin-bottom: 1.2rem;
}
.step h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 0.6rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.step__time {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.66rem;
  color: var(--grey);
}

/* -------------------------------------------------- 8. Bloc photo + texte */
.shot {
  position: relative;
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-3);
}
.shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.shot--tall img { aspect-ratio: 3 / 4; }
.shot figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  color: var(--ink);
}

.checks {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.checks li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--ink-soft);
}
.checks svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 0.3rem;
  color: var(--accent-lift);
}

/* -------------------------------------------------- 9. Roster de l'equipe */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: clamp(1.8rem, 4vw, 3rem);
}
.person { position: relative; }
.person__ph {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
}
.person__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s var(--ease);
}
.person:hover .person__ph img,
.person.is-open .person__ph img,
.person:focus-within .person__ph img { filter: grayscale(0); }

.person__ini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 4.4rem);
  color: var(--accent-lift);
  background:
    radial-gradient(70% 70% at 50% 35%, var(--tint-soft), transparent 70%),
    var(--bg-3);
  transition: color 0.5s;
}

/* bio : posee sur la photo au survol sur grand ecran, depliee au clic ailleurs */
.person__bio {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.97);
  border-top: 3px solid var(--accent);
  color: var(--ink-soft);
  font-size: 0.88rem;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
.person:hover .person__bio,
.person:focus-within .person__bio,
.person.is-open .person__bio { transform: translateY(0); }

.person__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.9rem;
}
.person__name { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 0; }
.person__role {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.92rem;
  color: var(--grey);
  margin: 0.25rem 0 0;
}
.person__more {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.35s var(--ease);
}
.person__more svg { width: 15px; height: 15px; }
.person__more:hover { border-color: var(--accent-lift); color: var(--accent-lift); }
.person__more[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: rotate(45deg);
}

/* -------------------------------------------------- 10. Bande des therapeutes */
.thera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.thera__p { text-align: center; }
.thera__ph {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.thera__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s var(--ease);
}
.thera__p:hover .thera__ph img { filter: grayscale(0); }
.thera__n {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  color: var(--ink);
}
.thera__r {
  display: block;
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
  color: var(--grey);
}

/* -------------------------------------------------- 11. Mouvement reduit */
/* Mouvement reduit ou pas de JS : la bio ne glisse plus, elle est simplement
   posee sur le bas du portrait et le bouton de bascule devient inutile. */
@media (prefers-reduced-motion: reduce) {
  .person__bio { transform: none; }
  .person__more { display: none; }
  .slot:hover { transform: none; }
  .tar__card:hover, .tar__card:focus-within { box-shadow: 0 0 0 1px var(--accent); }
}

.no-js .person__bio { transform: none; }
.no-js .person__more { display: none; }

/* Champ piège anti-robots des formulaires d'essai : hors écran, ignoré des humains */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Studio, section Sur mesure : photo plus petite que la liste (26.10.2026) */
#sur-mesure .sur-mesure__grid { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
#sur-mesure .shot img { aspect-ratio: auto; }
@media (min-width: 900px) {
  #sur-mesure .sur-mesure__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* Cartes de tarifs (Training, Studio) : textes au-dessus en 25 px, en dessous en 20 px,
   comme la rangee sous les abonnements (26.10.2026) */
.tar__card .tar__name { font-size: 25px; letter-spacing: 0.12em; line-height: 1.2; }
.tar__card .tar__lbl { font-size: 20px; letter-spacing: 0.1em; }
.tar__card .tar__alt { font-size: 20px; letter-spacing: 0.06em; line-height: 1.4; }
.tar__card .tar__n small { font-size: 20px; letter-spacing: 0.08em; }

/* Planning compact : une ligne par heure, cours de la même heure côte à côte (26.10.2026) */
#planning .slot {
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: 0.3rem;
  padding: 0; margin-bottom: 0.35rem; background: none; border-left: 0;
}
#planning .slot:hover { background: none; transform: none; }
#planning .slot[hidden] { display: none; }
#planning .slot > span { font-size: 0.98rem; }
#planning .slot__c { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
#planning .slot__c b {
  flex: 1 1 3.2rem; min-width: 0;
  font-size: 0.68rem; letter-spacing: 0.02em; line-height: 1.2;
  padding: 0.4rem 0.3rem; border-left: 3px solid; overflow-wrap: break-word; hyphens: auto;
}
.legend-c { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.legend-c li {
  font-family: var(--ff-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.74rem; color: var(--ink);
  padding: 0.3rem 0.6rem; border-left: 3px solid;
}

/* Vignette « Le plus choisi » (Abo Beta, Carnet 32) : orange #ffa346, complémentaire du bleu KeepUp #005cb9 ; texte ardoise 9.3:1 */
.tar__badge {
  position: absolute; top: clamp(0.9rem, 1.8vw, 1.3rem); right: clamp(0.9rem, 1.8vw, 1.3rem);
  padding: 0.5rem 0.8rem; border-radius: var(--r); background: #ffa346;
  box-shadow: 0 6px 20px -6px rgba(255, 163, 70, 0.55);
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.85rem; color: var(--ink);
}
/* Studio (Carnet 32) : bleu #3675b4, complémentaire du cuivre #c98a4b ; texte blanc 4.8:1 */
[data-univers="studio"] .tar__badge {
  background: #3675b4; color: #fff;
  box-shadow: 0 6px 20px -6px rgba(54, 117, 180, 0.55);
}

/* Abos : coût par séance de l'annuel payé en une fois (validé par Saverio, 26.10.2026) */
.tar__seance { margin: 0.7rem 0 0.1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.tar__seance b {
  display: inline-block; padding: 0.3rem 0.55rem; border-radius: var(--r);
  background: var(--tint-soft); color: var(--accent-text);
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.7rem;
}
.tar__seance span { font-size: 0.68rem; color: var(--grey); }

/* Abos : « Soit une économie de … CHF » en léger gras */
.tar__eco { font-weight: 600; }

/* Classes Training sur telephone : liste compacte, vignette + titre + debut du texte,
   un toucher deplie le texte (initSvcList dans pages-a.js) (01.11.2026) */
@media (max-width: 619px) {
  #ages .svc__item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 24px;
    column-gap: 0.95rem;
    align-items: start;
    padding: 0.9rem 1rem;
    cursor: pointer;
  }
  #ages .svc__ph {
    grid-row: 1 / span 2;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: var(--r);
  }
  #ages .svc__ph img { filter: none; }
  #ages .svc__item .svc__n { display: none; }
  #ages .svc__item h3 { grid-column: 2; font-size: 1.35rem; margin: 0.1rem 0 0.3rem; }
  #ages .svc__item p:not(.svc__n) {
    grid-column: 2 / span 2;
    margin: 0;
    font-size: 0.9rem;
    max-width: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  #ages .svc__item.is-open p:not(.svc__n) { -webkit-line-clamp: unset; display: block; }
  /* pastille + / - a droite du titre */
  #ages .svc__item::after {
    content: "+";
    grid-column: 3;
    grid-row: 1;
    font-family: var(--ff-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent-text);
    text-align: center;
    margin-top: 0.15rem;
  }
  #ages .svc__item.is-open::after { content: "\2212"; }
}

/* Training, abos (05.11.2026, validé par Saverio sur démo) : bascule Mensuel / Annuel,
   prix toujours par mois, ancien prix barré + étiquette orange « Économie » en annuel,
   « Le plus choisi » en bleu à gauche. Portée : section .abos (Studio non touché). */
.abos .tarsw {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: clamp(1.4rem, 3vw, 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
}
.abos .tarsw button {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.55rem 1.4rem; border: 0; border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer;
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.05rem; transition: background 0.3s, color 0.3s;
}
.abos .tarsw button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.abos .tarsw em {
  font-style: normal; white-space: nowrap; background: #ffa346; color: var(--ink);
  font-size: 0.8rem; letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 999px;
}
.no-js .abos .tarsw { display: none; }
.abos [data-show="a"] { display: none; }
.abos.is-annuel [data-show="m"] { display: none; }
.abos.is-annuel .tar__n [data-show="a"] { display: inline; }
.abos.is-annuel p[data-show="a"] { display: block; }
.abos .tar { margin-top: 2.2rem; }
.abos .tar__badge {
  top: -14px; right: auto; left: clamp(1.4rem, 2.6vw, 2rem);
  padding: 0.35rem 0.75rem; background: var(--blue); color: #fff;
  box-shadow: none; font-size: 0.85rem; letter-spacing: 0.1em;
}
.abos .tar__save {
  position: absolute; top: -16px; right: 18px; margin: 0;
  padding: 0.35rem 0.8rem 0.4rem; border-radius: var(--r); text-align: center;
  background: #ffa346; color: var(--ink); transform: rotate(3deg);
  box-shadow: 0 8px 20px -8px rgba(255, 163, 70, 0.95);
  font-family: var(--ff-display); font-size: 1.9rem; line-height: 1; white-space: nowrap;
}
.abos .tar__save small {
  display: block; font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.75rem;
}
.abos .tar__pitch { margin: 0.3rem 0 0; color: var(--grey); font-size: 1.05rem; min-height: 2.8em; }
.abos .tar__was {
  margin: 0.6rem 0 0; min-height: 1.3em; visibility: hidden;
  font-family: var(--ff-cond); font-weight: 500; font-size: 1.35rem;
  color: var(--grey); text-decoration: line-through;
}
.abos.is-annuel .tar__was { visibility: visible; }
.abos .tar__n { margin-top: 0.2rem; }
.abos .tar__sub {
  margin: 0.4rem 0 1.2rem; min-height: 2.7em;
  font-family: var(--ff-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 1.05rem; line-height: 1.3; color: var(--ink);
}
.abos .tar__sub span { display: block; font-weight: 500; color: var(--grey); }
.abos .tar__card ul { align-content: start; }
.abos .tar__note { margin: 1rem 0 0; font-size: 0.75rem; color: var(--grey); }
@media (max-width: 899px) {
  .abos .tarsw { display: flex; }
  .abos .tarsw button { flex: 1; padding: 0.55rem 0.5rem; }
  .no-js .abos .tarsw { display: none; }
  #tarifs.abos .tar--tabs { margin-top: 1.9rem; }
}

/* Training, « Huit façons de bien bouger » en carrousel (05.11.2026) : une rangée
   qu'on fait glisser (doigt, trackpad, souris, flèches), la carte suivante coupée
   à moitié pour montrer qu'il y a une suite. Photo carrée, texte dessous sur le blanc.
   Téléphone 1,5 carte, tablette 2,5, ordinateur 3,5. */
#services .svc--car {
  --gap: clamp(12px, 1.6vw, 20px);
  display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 6px;
  background: none; border: 0;
  scrollbar-width: none;
}
#services .svc--car::-webkit-scrollbar { display: none; }
#services .svc--car.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
#services .svc--car.is-drag img { pointer-events: none; }
#services .svc--car .svc__item {
  flex: 0 0 calc((100% - var(--gap)) / 1.5);
  scroll-snap-align: start;
  border: 1px solid var(--card-line); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 620px) {
  #services .svc--car .svc__item { flex-basis: calc((100% - 2 * var(--gap)) / 2.5); }
}
@media (min-width: 1000px) {
  #services .svc--car .svc__item { flex-basis: calc((100% - 3 * var(--gap)) / 3.5); }
}
#services .svc--car .svc__ph { aspect-ratio: 1 / 1; }
#services .svc--car .svc__ph img { filter: none; }
#services .svc--car .svc__item h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
#services .svc--car .svc__item p:not(.svc__n) { font-size: 0.95rem; max-width: none; }
.svc-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1rem; }
.svc-nav button {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.svc-nav button:hover { background: var(--ink); color: #fff; }
.svc-nav button[disabled] { opacity: 0.3; pointer-events: none; }
.svc-nav svg { width: 20px; height: 20px; }
.no-js .svc-nav { display: none; }

/* Abos, annuel (05.11.2026) : « Engagement annuel » + total par an en noir, un peu plus grand */
.abos .tar__sub--a { font-size: 1.15rem; }
.abos .tar__sub--a span { color: var(--ink); }