/* ==========================================================================
   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. */
@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);
}
.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);
}
.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 { border-color: var(--line-strong); box-shadow: 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);
}
.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); }

/* -------------------------------------------------- 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 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.68rem;
  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 { box-shadow: none; }
}

.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; }