/* global React */
/* Page Massothérapie */

const PageMasso = () =>
<div className="v1">
    <style dangerouslySetInnerHTML={{ __html: V1_CSS + V1_CSS_PART2 + V1_CSS_PART3 + PAGE_CSS }}></style>
    <V1Nav active="massotherapie" />

    <section className="page-hero-split">
      <div className="phs-txt">
        <div className="ey">Massothérapie sportive & thérapeutique</div>
        <h1>Pour un corps qui <em>récupère vraiment.</em></h1>
        <p>Un travail manuel précis et adapté pour les personnes actives qui veulent récupérer entre les entraînements, diminuer les tensions et retrouver une fluidité de mouvement.</p>
        <div style={{ marginTop: 32 }}>
          <a href="rendez-vous.html" className="btn btn--orange">
            Réserve une séance
            {Icon.arrow(14)}
          </a>
        </div>
      </div>
      <div className="phs-pic">
        <img src="assets/catherine-massotherapie.png" alt="Catherine en séance de massothérapie sportive" />
      </div>
    </section>

    <Wave from="#faf7f2" to="#f5f0e8" variant={0} />

    {/* BÉNÉFICES */}
    <section className="page-sec beige">
      <div className="container">
        <div className="page-sec-inner" style={{ textAlign: 'center' }}>
          <div className="ey">Ce que ça fait pour toi</div>
          <h2>Plus qu'un massage — <em>une récupération ciblée.</em></h2>
          <div className="cards-3" style={{ marginTop: 48 }}>
            <div className="card-num">
              <div className="n">01</div>
              <h3>Récupération musculaire</h3>
              <p>On cible les zones surutilisées pour accélérer la récupération entre les entraînements et éviter l'accumulation de fatigue.</p>
            </div>
            <div className="card-num">
              <div className="n">02</div>
              <h3>Réduction des tensions</h3>
              <p>Travail profond sur les fascias et les chaînes musculaires : un relâchement passif et ciblé, en complément de ton travail actif d'étirement et de mobilité.</p>
            </div>
            <div className="card-num">
              <div className="n">03</div>
              <h3>Mobilité et fluidité</h3>
              <p>Pour bouger mieux — pas juste sans douleur. Une amplitude retrouvée se traduit par de meilleures performances et moins de blessures.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Wave from="#f5f0e8" to="#faf7f2" variant={1} />

    {/* APPROCHE */}
    <section className="page-sec cream">
      <div className="container">
        <div className="page-sec-inner">
          <div className="ey ey--blue">Mon approche</div>
          <h2>Le massage sportif et thérapeutique, <em>enrichi par mon expérience clinique.</em></h2>
          <p style={{ maxWidth: 720 }}>Ce n'est pas un massage générique. Chaque séance commence par une lecture rapide de ton corps : où sont les tensions, qu'est-ce qui compense, qu'est-ce qui a besoin de relâcher. Le travail manuel est ensuite ciblé — précis, adapté à ton sport et à ce que tu vis.

        </p>
          <p style={{ maxWidth: 720 }}>
            Si une douleur récurrente sort en séance, on en parle. Si ça révèle un patron de compensation, je te le pointe — et on peut décider ensemble si la thérapie du sport ou la Méthode Athletik™ serait la suite logique.
          </p>
        </div>
      </div>
    </section>

    <Wave from="#faf7f2" to="#2B72B5" variant={2} height={100} />

    {/* BLOC-PONT VERS LA MÉTHODE */}
    <section className="page-sec cream">
      <div className="container">
        <div className="page-sec-inner" style={{ textAlign: 'center' }}>
          <div className="ey ey--blue">Et si ça revient ?</div>
          <h2>Tes tensions reviennent <em>semaine après semaine ?</em></h2>
          <p style={{ margin: '0 auto', maxWidth: 720 }}>
            Le massage relâche les tensions — sur le moment. Tant que la cause reste, elles reviennent. <em style={{ fontStyle: 'italic', color: 'var(--orange)' }}>La Méthode Athletik™ travaille sur cette cause</em>, pour que le problème se règle au lieu de se répéter.
          </p>
          <a href="methode-vitalite.html" className="cath-cta" style={{ marginTop: 24 }}>
            Découvre la Méthode →
          </a>
        </div>
      </div>
    </section>

    <Wave from="#faf7f2" to="#2B72B5" variant={0} height={100} />

    {/* CTA */}
    <section className="page-cta" id="cta">
      <div className="container">
        <div className="page-cta-inner">
          <div>
            <div className="ey" style={{ color: 'var(--orange-soft, #f4956e)' }}>Réserver une séance</div>
            <h2>Réserve ta séance <em>en ligne.</em></h2>
            <p>Disponibilités à la clinique de Piedmont. Pour toute question avant de réserver, écris-moi.</p>
          </div>
          <div className="page-cta-card">
            <h3>Massothérapie sportive</h3>
            <div className="sub">Piedmont · Laurentides</div>
            <ul>
              <li>{Icon.check(16)}<span>Récupération musculaire ciblée</span></li>
              <li>{Icon.check(16)}<span>Réduction des tensions et douleurs</span></li>
              <li>{Icon.check(16)}<span>Amélioration de la mobilité</span></li>
              <li>{Icon.check(16)}<span>Approche personnalisée et intégrée</span></li>
            </ul>
            <a href="rendez-vous.html" className="btn btn--orange">
              Réserve maintenant
              {Icon.arrow(14)}
            </a>
          </div>
        </div>
      </div>
    </section>

    <V1Footer />
  </div>;


window.PageMasso = PageMasso;