/* ==========================================================================
   KEEPUP v5 - pages-b.css (theme clair)
   --------------------------------------------------------------------------
   Styles propres a therapy.html et contact.html uniquement.
   Charge APRES style.css, qui reste la source unique des tokens, de la typo,
   du header, du footer, des boutons et des utilitaires (.wrap .sec .rv .btn
   .label .eyebrow .lede .note .tag .stats .grid-2 ...).
   Rien ici ne modifie style.css, app.js ou index.html.

   SOMMAIRE
     1. Respiration propre au 2e etage
     2. Hero des pages interieures
     3. Formulaires
     4. Grilles de cartes
     5. Therapeutes
     6. Galerie de la salle
     7. Avis
     8. Rappel des trois etages
     9. Infos pratiques, horaires, carte
    10. Mouvement reduit
    11. Bandeau du hero
   ========================================================================== */

/* -------------------------------------------------- 1. Respiration therapy */
/* Le 2e etage est un autre monde : meme typo, meme structure, mais plus d'air
   et un reveal plus lent que sur les etages du dessous. */
[data-univers="therapy"] .sec { padding-block: clamp(5rem, 11vw, 11rem); }
[data-univers="therapy"] .rv {
  transform: translate3d(0, 40px, 0);
  transition-duration: 1.25s;
}
[data-univers="therapy"] .rv--right { transform: translate3d(-40px, 0, 0); }
[data-univers="therapy"] .rv.is-in { transform: none; }
[data-univers="therapy"] .lede { max-width: 54ch; }

/* -------------------------------------------------- 2. Hero interieur */
.hero--calm .hero__in { padding-bottom: clamp(3rem, 9vh, 6.5rem); }
.hero--calm .hero__title { margin-bottom: 1.8rem; }

.hero--short { min-height: min(72svh, 720px); }

/* filet fin sous le hero, comme une ligne de plancher */
.hero--calm::after,
.hero--short::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 62%);
  z-index: 3;
}

/* -------------------------------------------------- 3. Formulaires */
.pgrid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .pgrid { grid-template-columns: 5fr 7fr; }
  .pgrid--even { grid-template-columns: 1fr 1fr; }
  .pgrid__sticky { position: sticky; top: 120px; }
}

.form {
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  position: relative;
}
.form::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
}

.fgrid {
  display: grid;
  gap: 1.1rem 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .fgrid { grid-template-columns: 1fr 1fr; } }
.fld { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.fld--wide { grid-column: 1 / -1; }

.fld label,
.legend {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--ink-soft);
  padding: 0;
}

.fld input,
.fld select,
.fld 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, background 0.3s, box-shadow 0.3s;
}
.fld textarea { min-height: 150px; resize: vertical; }
.fld input::placeholder,
.fld textarea::placeholder { color: var(--grey); }
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  background: #fff;
  box-shadow: 0 0 0 3px var(--tint-soft);
}

/* fleche du select dessinee en SVG inline, pas de police ni d'image externe */
.fld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6a79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 17px 17px;
}
.fld select option { background: #fff; color: var(--ink); }

/* champ rempli depuis une carte therapeute : on le signale sans voler le focus */
.fld select.is-prefilled {
  border-color: var(--accent-text);
  background-color: var(--tint-soft);
  box-shadow: 0 0 0 3px var(--tint-soft);
}

fieldset.fld {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: #fff;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.opt input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.opt:hover { border-color: var(--ink); color: var(--ink); }
.opt:has(input:checked) {
  border-color: var(--accent-text);
  color: var(--accent-text);
  background: var(--tint-soft);
}

.consent { font-size: 0.85rem; color: var(--grey); margin: 0; }
.form__msg {
  margin: 0;
  border-left: 2px solid var(--accent);
  padding: 0.7rem 0.9rem;
  background: var(--tint-soft);
  color: var(--ink);
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
}

/* liste a puces des garanties */
.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.ticks li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  flex: none;
  background: var(--accent);
}

/* -------------------------------------------------- 4. Grilles de cartes */
.gcards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 680px) { .gcards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px) { .gcards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .gcards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .gcards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .gcards--4 { grid-template-columns: repeat(4, 1fr); } }

.kcard {
  background: var(--bg-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background 0.5s var(--ease);
}
.kcard:hover { background: var(--bg); }
.kcard__ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--accent-text);
}
.kcard__ico svg { width: 21px; height: 21px; }
.kcard h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.kcard p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.kcard b { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------- 5. Therapeutes */
.thera {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .thera { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .thera { grid-template-columns: repeat(4, 1fr); } }

.thera__card { display: flex; flex-direction: column; }
.thera__ph {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  background: var(--bg-3);
}
.thera__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.7s var(--ease);
}
.thera__card:hover .thera__ph img,
.thera__card:focus-within .thera__ph img { filter: grayscale(0); }
.thera__ini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--accent-text);
  background:
    radial-gradient(70% 70% at 50% 34%, var(--tint-soft), transparent 72%),
    var(--bg-3);
}
.thera__ini::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.thera__name { margin: 0.9rem 0 0.25rem; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.thera__role {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--grey);
  margin: 0 0 0.7rem;
}
.thera__book {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--accent-text);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.thera__book:hover { border-bottom-color: currentColor; }

/* -------------------------------------------------- 6. Galerie de la salle */
.gal {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .gal { grid-template-columns: repeat(3, 1fr); } }

.gal__f {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
}
/* l'image deborde volontairement de son cadre : le parallaxe la fait glisser
   sans jamais laisser apparaitre de bande vide. */
.gal__f img {
  width: 100%;
  height: 124%;
  margin-top: -12%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
  will-change: transform;
}
.gal__f--tall { aspect-ratio: 4 / 5; }
.gal__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.5rem 0.8rem;
  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.64rem;
  color: var(--ink);
}

/* -------------------------------------------------- 7. Avis */
.avis { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .avis { grid-template-columns: repeat(3, 1fr); } }
.avis__item {
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(1.3rem, 2.8vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stars { display: flex; gap: 0.2rem; color: var(--accent-text); }
.stars svg { width: 17px; height: 17px; }
.avis__item p { color: var(--ink-soft); font-size: 0.99rem; margin: 0; }
.avis__item footer {
  margin-top: auto;
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.68rem;
  color: var(--grey);
}

/* -------------------------------------------------- 8. Rappel des etages */
.floors { display: grid; gap: clamp(0.8rem, 2vw, 1.2rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .floors { grid-template-columns: repeat(3, 1fr); } }

.floor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 260px;
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--accent);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  transition: border-color 0.45s, box-shadow 0.5s var(--ease);
}
.floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 100% at 20% 100%, var(--tint-soft), transparent 68%);
}
.floor > * { position: relative; z-index: 2; }
a.floor:hover { border-color: var(--line-strong); border-top-color: var(--accent); box-shadow: var(--shadow); }
.floor__n {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 0.8;
  color: var(--accent-text);
}
.floor h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--accent-text); }
.floor p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }
.floor__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--ink);
}
.floor__go svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
a.floor:hover .floor__go svg { transform: translateX(4px); }
.floor--here { border-style: dashed; border-top-style: solid; }

/* -------------------------------------------------- 9. Infos et carte */
.info { margin: 0; display: grid; border-top: 1px solid var(--line); }
.info__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 520px) { .info__row { grid-template-columns: 11rem 1fr; } }
.info dt {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.7rem;
  color: var(--grey);
  padding-top: 0.2rem;
}
.info dd { margin: 0; color: var(--ink-soft); }
.info dd a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.info dd a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

.map {
  position: relative;
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  background: var(--bg-3);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media (max-width: 640px) { .map { aspect-ratio: 4 / 3; } }
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* fond clair : la carte OSM garde ses couleurs, juste desaturee */
  filter: grayscale(0.35);
}
/* la carte OSM capte la molette : on la verrouille tant qu'on n'a pas cliqué,
   sinon le defilement lisse de la page se fait manger par le zoom de la carte. */
.map--lock iframe { pointer-events: none; }
.map__lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.map__lock:hover,
.map__lock:focus-visible { opacity: 1; }
.map__lock span {
  border: 1px solid var(--accent-text);
  border-radius: var(--r);
  background: #fff;
  padding: 0.7rem 1.2rem;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  color: var(--accent-text);
}

.map__pin {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.6rem 0.9rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  pointer-events: none;
}

/* bloc social */
.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--bg-2);
}
.social svg { width: 22px; height: 22px; color: var(--accent-text); flex: none; }
.social p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.social .lnk { margin-left: auto; }
@media (max-width: 620px) { .social .lnk { margin-left: 0; } }

/* -------------------------------------------------- 10. Mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  .pgrid__sticky { position: static; }
  .gal__f img { height: 100%; margin-top: 0; }
  a.floor:hover { box-shadow: none; }
  [data-univers="therapy"] .rv { transform: none; }
}

/* -------------------------------------------------- 11. Bandeau du hero */
/* Au 2e etage le bandeau se fait discret : plus d'espacement, moins de contraste. */
[data-univers="therapy"] .marquee__item {
  color: #fff;
  letter-spacing: 0.3em;
  font-size: clamp(0.72rem, 1.2vw, 0.88rem);
}
[data-univers="therapy"] .marquee__wolf { opacity: 0.7; }