/* =========================================================
   Ed and Shoulder, feuille de style
   Source de vérité : maquettes/Squelettes Site Physio.dc.html,
   section #1c (hero disque rose plein). Voir CLAUDE.md du projet.
   ========================================================= */

:root {
  --bg-clair: #F0EBE1;
  --bg-fonce: #E8E1CE;
  --noir: #171410;
  --rose: #FF6696;
  --texte-secondaire: #4E4839;
  --texte-tertiaire: #332E24;
  --mono: #84795E;
  --placeholder: #9E9478;
  --bordure-douce: #D8D0BC;

  --font-titres: 'Gloock', serif;
  --font-texte: 'Schibsted Grotesk', sans-serif;
  --font-mono: 'Spline Sans Mono', monospace;

  /* Cap de largeur : le contenu est limité à 1440px (48px de padding inclus
     de chaque côté), les fonds de section restent pleine largeur */
  --pad-lat: max(48px, calc((100vw - 1344px) / 2));

  /* Système de mouvement */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.3, 1.36, .44, 1);
  --dur: .95s;
  --reveal-dist: 26px;
}

@media (max-width: 900px) {
  :root {
    --pad-lat: 24px;
    --dur: .6s;
    --reveal-dist: 14px;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg-clair);
  color: var(--noir);
  font-family: var(--font-texte);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--font-titres); font-weight: 400; }

p { margin: 0; }

button { font-family: inherit; }

/* Anti-flash : le contenu est masqué le temps que content.json soit rendu */
body.is-loading .site-header,
body.is-loading main,
body.is-loading .site-footer {
  opacity: 0;
}
.site-header, main, .site-footer {
  opacity: 1;
  transition: opacity .25s ease;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 14px/1 var(--font-texte);
  padding: 14px 28px;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
.btn:hover { opacity: .88; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-pill { border-radius: 999px; }
.btn-noir { background: var(--noir); color: var(--bg-clair); }
.btn-pink { background: var(--rose); color: var(--noir); }
.btn-outline { background: transparent; color: var(--noir); border-color: var(--noir); }
.btn-outline:hover { opacity: 1; background: var(--noir); color: var(--bg-clair); }

/* Boutons Prendre rendez-vous : le texte glisse a gauche, la fleche entre par la droite */
.btn-rdv { position: relative; overflow: hidden; }
.btn-rdv:hover { opacity: 1; transform: none; }
.btn-rdv .btn-texte { transition: transform .35s var(--ease-out); }
.btn-rdv .btn-fleche {
  position: absolute;
  right: 18px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
@media (hover: hover) {
  .btn-rdv:hover .btn-texte { transform: translateX(-9px); }
  .btn-rdv:hover .btn-fleche { opacity: 1; transform: translateX(0); }
  /* Bouton header plus petit : on aere davantage la fleche */
  .header-cta.btn-rdv .btn-fleche { right: 13px; }
  .header-cta.btn-rdv:hover .btn-texte { transform: translateX(-12px); }
}

.lien-souligne {
  align-self: flex-start;
  font: 500 15px var(--font-texte);
  border-bottom: 2px solid var(--rose);
  padding-bottom: 3px;
  display: inline-block;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) {
  .lien-souligne:hover { transform: translateX(4px); }
}
/* Lien dont la fleche pointe vers le bas : au survol, la fleche descend
   seule (meme ressort que la fleche des boutons de rendez-vous) */
.lien-souligne .lien-fleche {
  display: inline-block;
  transition: transform .35s var(--ease-out);
}
@media (hover: hover) {
  .lien-souligne.lien-bas:hover { transform: none; }
  .lien-souligne.lien-bas:hover .lien-fleche { transform: translateY(5px); }
}

.etiquette {
  font: 400 12px var(--font-mono);
  letter-spacing: .12em;
  color: var(--mono);
}
.etiquette-rose {
  font: 400 13px var(--font-mono);
  letter-spacing: .12em;
  color: var(--rose);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-clair);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px var(--pad-lat);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 22px var(--font-titres);
}
.brand img { height: 40px; width: auto; }
.nav {
  display: flex;
  gap: 26px;
  font: 400 14px var(--font-texte);
}
.nav a { transition: opacity .2s ease; }
.nav a:hover { opacity: .6; }
.header-cta {
  padding: 10px 22px;
  font-size: 14px;
}
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--noir);
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--pad-lat) 24px;
  border-top: 1px solid var(--noir);
  background: var(--bg-clair);
}
.mobile-nav a:not(.btn) {
  padding: 12px 0;
  font: 400 16px var(--font-texte);
  border-bottom: 1px solid var(--bordure-douce);
}
.mobile-nav .mobile-cta {
  margin-top: 14px;
  align-self: flex-start;
}
.mobile-nav.is-open { display: flex; }

@media (max-width: 900px) {
  .nav, .header-cta { display: none; }
  .burger { display: flex; }
}

/* ---------- Barre de rendez-vous fixe (telephone) ----------
   Le bouton du header disparait sous 900px : cette barre prend le relais une
   fois le hero depasse. Elle glisse depuis le bas et reste hors du parcours
   clavier tant qu'elle est masquee (visibility). */
.barre-rdv { display: none; }
@media (max-width: 900px) {
  .barre-rdv {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px var(--pad-lat) calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(240, 235, 225, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bordure-douce);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .4s var(--ease-out), visibility 0s linear .4s;
  }
  .barre-rdv.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform .4s var(--ease-out), visibility 0s;
  }
  .barre-rdv .btn {
    display: flex;
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .barre-rdv, .barre-rdv.is-visible { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  /* Centré dans le cap de largeur : pas de gouttière interne qui écrase le titre en très grand écran */
  max-width: 1440px;
  margin-inline: auto;
}
.hero-text {
  padding: 90px 48px 70px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.hero-titre {
  font: 400 68px/1.06 var(--font-titres);
  text-wrap: balance;
}
.hero-sous-titre {
  font: 400 20px/1.4 var(--font-texte);
  color: var(--texte-secondaire);
}
.hero-texte {
  font: 400 15px/1.65 var(--font-texte);
  color: var(--texte-tertiaire);
  max-width: 440px;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-portrait {
  background: var(--bg-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
}
.hero-disque {
  position: absolute;
  /* Largeur fluide a ratio carre : reste un rond parfait quand la colonne se resserre */
  width: min(320px, 89%);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 999px;
  background-color: var(--rose);
}
.hero-portrait-img {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 999px;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  border: 8px solid var(--bg-clair);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 24px var(--pad-lat) 56px; order: 2; }
  .hero-titre { font-size: 44px; }
  .hero-portrait { padding: 48px var(--pad-lat) 8px; order: 1; }
  .hero-disque { width: 240px; height: 240px; }
  .hero-portrait-img { width: 260px; height: 260px; border-width: 6px; }
}
@media (min-width: 1280px) {
  /* Grands écrans : le portrait grandit avec la place disponible pour ne pas paraître perdu */
  .hero { grid-template-columns: 1fr 560px; }
  .hero-disque { width: min(420px, 89%); }
  .hero-portrait-img { width: min(470px, 100%); }
}
@media (max-width: 420px) {
  .hero-titre { font-size: 36px; }
  .hero-disque { width: 200px; height: 200px; }
  .hero-portrait-img { width: 220px; height: 220px; }
}

/* ---------- Bandeau défilant ---------- */
.bandeau {
  background: var(--noir);
  color: var(--bg-clair);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.bandeau-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 26s linear infinite;
  font: 400 13px var(--font-mono);
  letter-spacing: .14em;
}
.bandeau-item { padding: 0 10px; white-space: nowrap; }
.bandeau-sep { color: var(--rose); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-track { animation-play-state: paused; }
}

/* ---------- Sections génériques ---------- */
.section { padding: 96px var(--pad-lat); }

/* Qui suis-je */
.qui-suis-je {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  padding: 110px var(--pad-lat);
  align-items: start;
}
.qui-suis-je-titre { font: 400 42px/1.15 var(--font-titres); }
.qui-suis-je-texte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: 400 15px/1.7 var(--font-texte);
  color: var(--texte-tertiaire);
  padding-top: 10px;
}
@media (max-width: 900px) {
  .qui-suis-je { grid-template-columns: 1fr; gap: 24px; padding: 64px var(--pad-lat); }
  .qui-suis-je-texte { padding-top: 0; }
}

/* Pathologies */
.pathologies {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pathologies h2 { font: 400 34px var(--font-titres); }
.pathologies-grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 32px;
}
.pathologies-grille div {
  position: relative;
  padding-top: 12px;
  font: 400 16px/1.5 var(--font-texte);
}
/* Ligne noire de base, tracée au reveal ; ligne rose par-dessus au survol */
.pathologies-grille div::before,
.pathologies-grille div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}
.pathologies-grille div::before { background: var(--noir); }
.pathologies-grille div::after {
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
@media (hover: hover) {
  .pathologies-grille div:hover::after { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .pathologies-grille { grid-template-columns: 1fr; }
}

/* Suivi à distance */
.suivi {
  background: var(--bg-fonce);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: start;
}
.suivi-texte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.suivi-texte h2 { font: 400 34px/1.2 var(--font-titres); }
.suivi-texte p { font: 400 15px/1.7 var(--font-texte); color: var(--texte-tertiaire); }
.suivi-carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--noir);
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
}
.suivi-carte .ligne {
  padding: 20px 24px;
  border-bottom: 1px solid var(--noir);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 14px var(--font-texte);
}
.suivi-carte .ligne .coche { color: var(--rose); font-weight: 500; }
.suivi-carte .ligne-prix {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: none;
}
.suivi-carte .prix { font: 400 26px var(--font-titres); }
.suivi-carte .periode { font: 400 13px var(--font-texte); }
.suivi-carte .cta {
  font: 500 13px var(--font-texte);
  border-bottom: 2px solid var(--rose);
}
@media (max-width: 900px) {
  .suivi { grid-template-columns: 1fr; gap: 32px; padding: 64px var(--pad-lat); }
}

/* Avis */
.avis { background: var(--bg-clair); display: flex; flex-direction: column; gap: 36px; }
.avis h2 { font: 400 34px var(--font-titres); }
.avis-grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.avis-carte {
  position: relative;
  padding: 0 28px 0 22px;
  font: 400 15px/1.65 var(--font-texte);
}
.avis-carte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rose);
}
.avis-carte .avis-auteur {
  display: block;
  margin-top: 14px;
  font: 400 12px var(--font-mono);
  color: var(--mono);
}
@media (max-width: 900px) {
  .avis-grille { grid-template-columns: 1fr; gap: 28px; }
}

/* Vidéos */
.videos {
  background: var(--noir);
  color: var(--bg-clair);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.videos h2 { font: 400 34px var(--font-titres); color: var(--bg-clair); }
.videos-sous-titre {
  flex-basis: 100%;
  max-width: 560px;
  font: 400 15px/1.7 var(--font-texte);
  color: rgba(240, 235, 225, .75);
}
/* Défilement continu : la fenêtre masque, le rail avance seul et se met en pause au survol */
.videos-fenetre { overflow: hidden; }
.videos-rail { display: flex; width: max-content; }
.videos-serie { display: flex; gap: 24px; padding-right: 24px; }
.video-carte {
  width: 240px;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  border: 1px solid rgba(240, 235, 225, .22);
  padding: 22px;
  display: flex;
  flex-direction: column;
  color: var(--bg-clair);
  overflow: hidden;
}
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: grayscale(1) contrast(1.05);
  transition: filter .45s ease;
}
.video-carte::after {
  /* Voile pour garder le numéro et l'étiquette lisibles sur la miniature */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(23, 20, 16, .55) 0%, rgba(23, 20, 16, .1) 45%, rgba(23, 20, 16, .65) 100%);
  pointer-events: none;
}
.video-carte > :not(.video-poster, .video-media) { position: relative; z-index: 1; }
.video-num {
  font: 400 38px var(--font-titres);
  line-height: 1;
  color: var(--bg-clair);
}
.video-play {
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding-left: 4px;
  transition: transform .35s var(--ease-pop), background .3s ease, opacity .3s ease;
}
.video-titre { font: 400 15px/1.4 var(--font-texte); margin-bottom: 10px; }
.video-etiquette {
  font: 400 11px var(--font-mono);
  letter-spacing: .12em;
  color: var(--placeholder);
}
.video-carte-live { cursor: pointer; }
.video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: grayscale(1) contrast(1.05);
  transition: filter .45s ease;
}
.video-carte.is-playing .video-media { filter: none; }
.video-carte::after { transition: opacity .45s ease; }
.video-carte.is-playing::after { opacity: .4; }
.video-carte.is-playing .video-play { opacity: 0; transform: scale(.6); }
.videos-lien { color: var(--bg-clair); }
@media (hover: hover) {
  .video-carte:hover { border-color: var(--rose); }
  .video-carte:hover .video-play { transform: scale(1.12); }
  .video-carte:hover .video-poster { filter: grayscale(0) contrast(1); }
}
@media (max-width: 900px) {
  .video-carte { width: 200px; }
}

/* FAQ */
.faq { background: var(--bg-clair); display: flex; flex-direction: column; gap: 36px; }
.faq h2 { font: 400 34px var(--font-titres); }
.faq-liste { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--noir); }
.faq-item:last-child { border-bottom: 1px solid var(--noir); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font: 400 17px var(--font-texte);
  color: var(--noir);
  text-align: left;
  cursor: pointer;
}
.faq-icon {
  flex: 0 0 auto;
  font: 400 18px var(--font-mono);
  color: var(--rose);
  transition: transform .35s var(--ease-pop);
}
@media (hover: hover) {
  .faq-question:hover .faq-icon { transform: scale(1.25); }
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-answer-wrap.is-open { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer {
  font: 400 15px/1.7 var(--font-texte);
  color: var(--texte-tertiaire);
  padding-bottom: 24px;
  max-width: 760px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.faq-answer-wrap.is-open .faq-answer {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer-wrap, .faq-answer, .faq-icon { transition: none; }
  .faq-answer { opacity: 1; transform: none; }
}

/* Formations */
.formations { background: var(--bg-clair); display: flex; flex-direction: column; gap: 40px; padding: 110px var(--pad-lat) 120px; }
.formations h2 { font: 400 34px var(--font-titres); }
.formations-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.formations-dates { margin-top: -8px; }
.formations-dates[hidden] { display: none; }
.formation-carte {
  border: 1px solid var(--noir);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formation-carte h3 { font: 400 26px/1.25 var(--font-titres); }
.formation-carte p { font: 400 14px/1.7 var(--font-texte); color: var(--texte-tertiaire); }

/* La carte n'est plus un lien : elle se déplie sur « Programme & dates »
   pour révéler les villes et les dates, une ligne par session. */
.formation-bascule {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--noir);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.formation-icone {
  font: 400 18px var(--font-mono);
  color: var(--rose);
  transition: transform .35s var(--ease-pop);
}
.formation-bascule[aria-expanded="true"] .formation-icone { transform: rotate(45deg); }
@media (hover: hover) {
  .formation-bascule:hover .lien-souligne { transform: translateX(4px); }
  .formation-bascule:hover .formation-icone { transform: scale(1.25); }
  .formation-bascule[aria-expanded="true"]:hover .formation-icone { transform: rotate(45deg) scale(1.25); }
}
.formation-sessions-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.formation-sessions-wrap.is-open { grid-template-rows: 1fr; }
.formation-sessions-inner { overflow: hidden; }
.formation-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.formation-sessions-wrap.is-open .formation-sessions {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}
.formation-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--bordure-douce);
}
.formation-session:first-child { margin-top: 6px; }
.formation-session-infos { display: flex; flex-direction: column; gap: 3px; }
.formation-session-lieu { font: 500 15px var(--font-texte); }
.formation-session-dates { font: 400 14px var(--font-texte); color: var(--texte-tertiaire); }
.formation-session-organisateur {
  font: 400 11px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mono);
}
.formation-session-lien {
  flex: 0 0 auto;
  border: 1px solid var(--noir);
  border-radius: 999px;
  padding: 9px 18px;
  font: 500 13px var(--font-texte);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
@media (hover: hover) {
  .formation-session-lien:hover { background: var(--noir); color: var(--bg-clair); }
}
@media (max-width: 540px) {
  .formation-session { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .formation-sessions-wrap, .formation-sessions, .formation-icone { transition: none; }
  .formation-sessions { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .formations-grille { grid-template-columns: 1fr; }
  .formations { padding: 64px var(--pad-lat) 72px; }
}

/* Contact */
.contact {
  background: var(--bg-fonce);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}
.contact-texte { display: flex; flex-direction: column; gap: 16px; }
.contact-texte h2 { font: 400 34px/1.2 var(--font-titres); }
.contact-texte p { font: 400 15px/1.7 var(--font-texte); color: var(--texte-tertiaire); }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label {
  font: 400 12px var(--font-mono);
  letter-spacing: .05em;
  color: var(--mono);
}
.champ input, .champ textarea {
  border: none;
  border-bottom: 1px solid var(--noir);
  background: transparent;
  padding-bottom: 10px;
  font: 400 15px var(--font-texte);
  color: var(--noir);
  min-width: 0;
}
.champ textarea { min-height: 60px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--placeholder); }
/* Focus clavier : un seul anneau pour tout le site, visible sur les fonds
   beige comme sur le bloc final noir */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.champ input:focus, .champ textarea:focus {
  outline: none;
  border-bottom-color: var(--rose);
}
.contact-form button { align-self: flex-start; }
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 32px; padding: 64px var(--pad-lat); }
  .contact-form-row { grid-template-columns: 1fr; }
}

/* Fin */
/* Derniere adresse au visiteur : le titre grandit avec l'ecran pour tenir
   la pleine largeur d'un grand moniteur au lieu d'y paraitre timide. */
.fin {
  background: var(--noir);
  color: var(--bg-clair);
  padding: clamp(110px, 11vw, 190px) var(--pad-lat);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(26px, 2.6vw, 46px);
}
.fin h2 {
  font: 400 clamp(38px, 5.2vw, 96px)/1.05 var(--font-titres);
  max-width: min(1180px, 92%);
  text-wrap: balance;
}
/* La reserve sous la ligne laisse passer les jambages et la cedille de
   « commencait » : elle suit la taille du titre, jusqu'a 96px. */
.fin-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .18em; margin-bottom: -.18em; }
.fin-mot-int { display: inline-block; }
.fin-ligne { font: 400 11px var(--font-mono); color: var(--placeholder); margin-top: 20px; }
.fin-ligne a { color: inherit; text-decoration: none; transition: color .2s ease; }
.fin-ligne a:hover { color: var(--bg-clair); }
@media (min-width: 1280px) {
  /* Le bouton suit l'echelle du titre pour ne pas se perdre sous lui */
  .fin .btn { padding: 20px 40px; font-size: 17px; }
}
@media (max-width: 900px) {
  .fin { padding: 80px var(--pad-lat); }
  .fin h2 { font-size: 32px; line-height: 1.15; }
}

.fin-credit {
  font: 400 11px var(--font-mono);
  color: var(--placeholder);
  opacity: .7;
  transition: opacity .2s ease, color .2s ease;
}
.fin-credit:hover { opacity: 1; color: var(--bg-clair); }

/* =========================================================
   Page Suivi a distance (suivi-a-distance.html)
   Page soeur de l'accueil : memes sections generiques, memes
   composants (.suivi-carte, .faq-item, .fin). Seules les pieces
   sans equivalent sur l'accueil vivent ici : hero sans portrait,
   conviction avec citation, cartes adapte / preferable, deroule.
   ========================================================= */

/* Hero sans portrait : une seule colonne, les classes hero-* de
   l'accueil portent la typographie et l'entree orchestree. */
.ps-hero { padding: 88px var(--pad-lat) 76px; }
.ps-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 880px;
}
.ps-hero .etiquette-rose { margin-bottom: -4px; }
.ps-hero .hero-sous-titre {
  font-weight: 500;
  max-width: 720px;
}
.ps-hero .hero-texte { max-width: 600px; }
.ps-hero .hero-cta-row { align-items: center; gap: 14px 28px; }
.ps-hero .lien-souligne { align-self: center; }

/* Conviction : tete a gauche, argument a droite (grille de qui-suis-je),
   la citation traverse les deux colonnes avant le dernier paragraphe. */
.ps-conviction {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 44px 56px;
  padding: 110px var(--pad-lat);
  align-items: start;
}
.ps-conviction-head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ps-conviction-head h2 { font: 400 42px/1.15 var(--font-titres); text-wrap: balance; }
.ps-conviction-texte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: 400 15px/1.7 var(--font-texte);
  color: var(--texte-tertiaire);
}
.ps-conviction-avant { grid-column: 2; grid-row: 1; padding-top: 10px; }
.ps-conviction-citation {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  margin: 8px 0;
  padding: 6px 0 6px 32px;
  max-width: 1040px;
  font: italic 400 30px/1.3 var(--font-titres);
  text-wrap: balance;
}
.ps-conviction-citation::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rose);
}
.ps-conviction-apres { grid-column: 2; grid-row: 3; }

/* Est-ce fait pour vous : la carte pleine repond oui, la carte filaire
   renvoie au cabinet. */
.ps-adapte {
  background: var(--bg-fonce);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ps-adapte h2 { font: 400 34px var(--font-titres); }
.ps-adapte-cartes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.ps-carte {
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ps-carte { background: var(--bg-clair); }
.ps-carte h3 { font: 500 17px/1.35 var(--font-texte); }
.ps-carte-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-carte-liste li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font: 400 15px/1.55 var(--font-texte);
  color: var(--texte-tertiaire);
}
.ps-marque {
  font: 500 15px/1.55 var(--font-mono);
  color: var(--rose);
}
.ps-carte-non .ps-marque { color: var(--noir); }

/* Comment ca marche : une ligne par etape, numero en serif rose. */
.ps-deroule {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ps-deroule h2 { font: 400 34px var(--font-titres); }
.ps-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ps-etape {
  position: relative;
  display: grid;
  /* Numero, texte a largeur de lecture, extraits dans le reste de la ligne */
  grid-template-columns: 112px minmax(0, 520px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 30px 0;
}
.ps-etape::before,
.ps-etape:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--noir);
}
.ps-etape::before { top: 0; }
.ps-etape:last-child::after { bottom: 0; }
.ps-etape-num {
  font: 400 32px/1 var(--font-titres);
  color: var(--rose);
  padding-top: 2px;
}
.ps-etape-corps { display: flex; flex-direction: column; gap: 8px; }
.ps-etape-corps h3 { font: 500 17px/1.35 var(--font-texte); }
.ps-etape-corps p { font: 400 15px/1.65 var(--font-texte); color: var(--texte-tertiaire); }

/* Extraits d'une etape : ce que le patient recoit a ce moment (video
   d'exercice, ecran de l'application). Dessines avec l'encre du deroule :
   cadre 1px noir comme les lignes, disque de lecture rose comme le
   numero. Le cadre a une hauteur fixe et prend le ratio reel du fichier
   (--ps-ratio, pose par app.js ; 9/16 en attendant) : aucune deformation,
   aucun recadrage, une capture reste lisible. */
.ps-etape-medias {
  --ps-media-h: 320px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Les extraits s'alignent sur le bord droit des lignes, comme
     l'etiquette de la section s'aligne a droite du titre */
  justify-content: flex-end;
  gap: 20px 16px;
}
.ps-media { flex: 0 0 auto; max-width: 100%; }
.ps-media figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
}
.ps-media-cadre {
  position: relative;
  height: var(--ps-media-h);
  aspect-ratio: var(--ps-ratio, 9 / 16);
  max-width: 100%;
  border: 1px solid var(--noir);
  border-radius: 14px;
  background: var(--bg-fonce);
  overflow: hidden;
}
.ps-media-cadre > img,
.ps-media-cadre > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Un extrait en paysage occupe la place de deux portraits dans la rangee
   (deux cadres 9/16 et leur ecart) : il tient a cote d'un portrait sans
   dominer la ligne, sa hauteur suit son rapport reel */
.ps-media.is-paysage .ps-media-cadre {
  height: auto;
  width: calc(2 * var(--ps-media-h) * 9 / 16 + 16px);
}
/* La legende ne fixe jamais la largeur du cadre : elle se replie dessous */
.ps-media-legende {
  width: 0;
  min-width: 100%;
  font: 400 12px/1.5 var(--font-mono);
  color: var(--texte-secondaire);
}
.ps-media-legende:empty { display: none; }
/* Video : le disque rose dit que ca se lit ; il s'efface pendant la lecture */
.ps-media-video .ps-media-cadre { cursor: pointer; }
.ps-media-video .ps-media-cadre::after {
  content: "\25B6";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding-left: 3px;
  box-sizing: border-box;
  pointer-events: none;
}
.ps-media-cadre.is-playing::after { opacity: 0; transform: scale(.6); }

/* Formule : composant .suivi de l'accueil, deux paragraphes au lieu d'un */
.ps-formule-texte { display: flex; flex-direction: column; gap: 14px; }

/* Portable : les trois colonnes tiennent si trois portraits font une
   rangee un peu plus basse (3 x 158px + ecarts dans les 520px restants) */
@media (max-width: 1365px) {
  .ps-etape-medias { --ps-media-h: 280px; }
}
/* Tablette et petit portable : plus assez de place a droite pour une
   rangee entiere, les extraits passent sous le texte, dans sa colonne,
   et reviennent a la ligne si besoin */
@media (max-width: 1279px) {
  .ps-etape { grid-template-columns: 112px minmax(0, 640px); }
  .ps-etape-medias {
    --ps-media-h: 300px;
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (max-width: 900px) {
  .ps-hero { padding: 36px var(--pad-lat) 56px; }
  .ps-hero-text { gap: 20px; }
  .ps-hero .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ps-hero .lien-souligne { align-self: flex-start; }
  .ps-conviction {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 64px var(--pad-lat);
  }
  .ps-conviction-head h2 { font-size: 32px; }
  .ps-conviction-avant { padding-top: 0; }
  .ps-conviction-citation {
    margin: 12px 0;
    padding-left: 22px;
    font-size: 23px;
    line-height: 1.35;
  }
  .ps-adapte { gap: 28px; padding: 64px var(--pad-lat); }
  .ps-adapte h2, .ps-deroule h2 { font-size: 30px; }
  .ps-adapte-cartes { grid-template-columns: 1fr; gap: 16px; }
  .ps-carte { padding: 26px 22px; gap: 18px; }
  .ps-deroule { gap: 24px; padding: 64px var(--pad-lat); }
  .ps-etape { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .ps-etape-num { font-size: 28px; }
  /* Telephone : la rangee d'extraits couvre les deux colonnes, part sous
     le numero, file jusqu'au bord droit de l'ecran et defile au doigt ;
     le deuxieme extrait, coupe au bord, dit qu'il y a une suite. La page
     ne s'elargit pas. */
  .ps-etape-medias {
    --ps-media-h: 300px;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 2px calc(-1 * var(--pad-lat)) 0 0;
    padding-right: var(--pad-lat);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-right: var(--pad-lat);
    scrollbar-width: none;
  }
  .ps-etape-medias::-webkit-scrollbar { display: none; }
  .ps-media { scroll-snap-align: start; max-width: calc(100vw - 2 * var(--pad-lat)); }
  /* Une capture ou une video en paysage prend toute la largeur au lieu
     d'etre reduite a la hauteur des portraits */
  .ps-media.is-paysage .ps-media-cadre { height: auto; width: calc(100vw - 2 * var(--pad-lat)); }
  .ps-faq { padding: 64px var(--pad-lat); }
}

/* =========================================================
   Mouvement
   Tous les états initiaux masqués vivent sous
   prefers-reduced-motion: no-preference : en mouvement réduit,
   la page est nativement visible, sans aucune transition.
   Propriétés animées : opacity, translate, scale, transform
   (compositeur uniquement). Les reveals utilisent les propriétés
   individuelles translate / scale pour ne jamais entrer en
   conflit avec les transform des survols.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ----- Entrée du hero, orchestrée au chargement ----- */
  .site-header {
    opacity: 0;
    translate: 0 -10px;
    transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
  }
  .hero-titre, .hero-sous-titre, .hero-texte, .hero-cta-row {
    opacity: 0;
    translate: 0 var(--reveal-dist);
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  }
  .hero-disque {
    opacity: 0;
    scale: .55;
    translate: 0 var(--parallax, 0px);
    transition: opacity .65s ease .3s, scale 1.15s var(--ease-pop) .3s;
  }
  .hero-portrait-img {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .9s var(--ease-out) .5s, translate .9s var(--ease-out) .5s;
  }
  .bandeau { opacity: 0; transition: opacity 1s ease .7s; }

  body.is-ready .site-header,
  body.is-ready .hero-titre,
  body.is-ready .hero-sous-titre,
  body.is-ready .hero-texte,
  body.is-ready .hero-cta-row,
  body.is-ready .hero-portrait-img,
  body.is-ready .bandeau {
    opacity: 1;
    translate: 0 0;
  }
  body.is-ready .hero-disque {
    opacity: 1;
    scale: 1;
    /* la translate n'est pas transitionnée : le parallax reste instantané */
    translate: 0 var(--parallax, 0px);
  }
  body.is-ready .hero-sous-titre { transition-delay: .14s; }
  body.is-ready .hero-texte { transition-delay: .24s; }
  body.is-ready .hero-cta-row { transition-delay: .34s; }

  /* ----- Reveals au scroll : états initiaux ----- */
  .reveal-group .section-head,
  .reveal-group .qui-suis-je-titre,
  .reveal-group .qui-suis-je-texte,
  .reveal-group .suivi-texte,
  .reveal-group .suivi-carte,
  .reveal-group .contact-texte,
  .reveal-group .contact-form,
  .fin .btn, .fin-ligne,
  .pathologies-grille > div,
  .avis-carte,
  .videos-fenetre,
  .faq-item,
  .formation-carte {
    opacity: 0;
    translate: 0 var(--reveal-dist);
  }

  /* ----- Reveals au scroll : arrivée ----- */
  .reveal-group.is-visible .section-head,
  .reveal-group.is-visible .qui-suis-je-titre,
  .reveal-group.is-visible .qui-suis-je-texte,
  .reveal-group.is-visible .suivi-texte,
  .reveal-group.is-visible .suivi-carte,
  .reveal-group.is-visible .contact-texte,
  .reveal-group.is-visible .contact-form,
  .fin.is-visible .btn, .fin.is-visible .fin-ligne,
  .reveal-group.is-visible .pathologies-grille > div,
  .reveal-group.is-visible .avis-carte,
  .reveal-group.is-visible .videos-fenetre,
  .reveal-group.is-visible .faq-item,
  .reveal-group.is-visible .formation-carte,
  .reveal-group .is-in {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  }

  /* Décalages internes des blocs en deux temps */
  .reveal-group.is-visible .qui-suis-je-texte,
  .reveal-group.is-visible .contact-form { transition-delay: .12s; }
  .reveal-group.is-visible .suivi-carte { transition-delay: .16s; }
  /* Telephone : chaque element entre seul (classe is-in posee par app.js),
     --i ne compte que les elements entres dans le meme temps */
  .reveal-group .is-in { transition-delay: calc(var(--i, 0) * 80ms); }
  .fin.is-visible .btn { transition-delay: .45s; }
  .fin.is-visible .fin-ligne { transition-delay: .6s; }

  /* Titre de fin : chaque mot monte depuis son masque, en cascade */
  .fin .fin-mot-int {
    translate: 0 118%;
    rotate: 3deg;
    transform-origin: left bottom;
  }
  .fin.is-visible .fin-mot-int {
    translate: 0 0;
    rotate: 0deg;
    transition:
      translate .9s var(--ease-out) calc(var(--m, 0) * 60ms),
      rotate .9s var(--ease-out) calc(var(--m, 0) * 60ms);
  }

  /* Stagger des grilles : --i est posé par app.js sur chaque enfant */
  .reveal-group.is-visible .pathologies-grille > div { transition-delay: calc(80ms + var(--i, 0) * 70ms); }
  .reveal-group.is-visible .avis-carte { transition-delay: calc(60ms + var(--i, 0) * 110ms); }
  .reveal-group.is-visible .faq-item { transition-delay: calc(60ms + var(--i, 0) * 70ms); }
  /* Défilement continu des vidéos : durée posée en JS selon le nombre de cartes */
  .videos-rail { animation: videos-defile var(--videos-dur, 32s) linear infinite; }
  .videos-fenetre:hover .videos-rail { animation-play-state: paused; }
  @keyframes videos-defile {
    to { transform: translateX(-50%); }
  }
  /* Délais par propriété : le stagger du reveal ne retarde pas le lift au survol */
  .reveal-group.is-visible .formation-carte,
  .reveal-group .formation-carte.is-in {
    transition:
      opacity var(--dur) var(--ease-out) calc(80ms + var(--i, 0) * 120ms),
      translate var(--dur) var(--ease-out) calc(80ms + var(--i, 0) * 120ms),
      transform .35s var(--ease-out) 0s;
  }

  /* Lignes qui se tracent */
  .pathologies-grille div::before {
    transform: scaleX(0);
    transform-origin: left;
  }
  .reveal-group.is-visible .pathologies-grille div::before,
  .pathologies-grille div.is-in::before {
    transform: scaleX(1);
    transition: transform 1.05s var(--ease-out) calc(140ms + var(--i, 0) * 70ms);
  }
  .avis-carte::before {
    transform: scaleY(0);
    transform-origin: top;
  }
  .reveal-group.is-visible .avis-carte::before,
  .avis-carte.is-in::before {
    transform: scaleY(1);
    transition: transform .95s var(--ease-out) calc(160ms + var(--i, 0) * 110ms);
  }

  /* ----- Page Suivi a distance ----- */
  /* Le hero reprend les classes hero-* : son entree est deja orchestree
     par body.is-ready. L'etiquette entre avec le titre. */
  .ps-hero .etiquette-rose {
    opacity: 0;
    translate: 0 var(--reveal-dist);
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  }
  body.is-ready .ps-hero .etiquette-rose { opacity: 1; translate: 0 0; }

  /* Etats initiaux */
  .ps-conviction-head,
  .ps-conviction-texte,
  .ps-conviction-citation,
  .ps-carte,
  .ps-etape {
    opacity: 0;
    translate: 0 var(--reveal-dist);
  }

  /* Arrivee (le telephone passe par .reveal-group .is-in, deja defini) */
  .reveal-group.is-visible .ps-conviction-head,
  .reveal-group.is-visible .ps-conviction-texte,
  .reveal-group.is-visible .ps-conviction-citation,
  .reveal-group.is-visible .ps-carte,
  .reveal-group.is-visible .ps-etape {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  }
  .reveal-group.is-visible .ps-conviction-avant { transition-delay: .12s; }
  .reveal-group.is-visible .ps-conviction-citation { transition-delay: .26s; }
  .reveal-group.is-visible .ps-conviction-apres { transition-delay: .4s; }
  .reveal-group.is-visible .ps-carte { transition-delay: calc(60ms + var(--i, 0) * 130ms); }
  .reveal-group.is-visible .ps-etape { transition-delay: calc(80ms + var(--i, 0) * 90ms); }

  /* La barre rose de la citation se trace de haut en bas, apres le texte */
  .ps-conviction-citation::before {
    transform: scaleY(0);
    transform-origin: top;
  }
  .reveal-group.is-visible .ps-conviction-citation::before,
  .ps-conviction-citation.is-in::before {
    transform: scaleY(1);
    transition: transform .95s var(--ease-out) .45s;
  }

  /* Les lignes du deroule se tracent de gauche a droite, en cascade */
  .ps-etape::before,
  .ps-etape:last-child::after {
    transform: scaleX(0);
    transform-origin: left;
  }
  .reveal-group.is-visible .ps-etape::before,
  .ps-etape.is-in::before {
    transform: scaleX(1);
    transition: transform 1.05s var(--ease-out) calc(140ms + var(--i, 0) * 90ms);
  }
  .reveal-group.is-visible .ps-etape:last-child::after,
  .ps-etape.is-in:last-child::after {
    transform: scaleX(1);
    transition: transform 1.05s var(--ease-out) calc(320ms + var(--i, 0) * 90ms);
  }

  /* Extraits du deroule : ils arrivent avec leur etape, sans mouvement
     propre ; seul le disque de lecture s'efface et revient. */
  .ps-media-video .ps-media-cadre::after {
    transition: opacity .3s ease, transform .35s var(--ease-pop);
  }
}