/* global React */
/* Page À propos — Catherine */

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

    <section className="page-hero-split">
      <div className="phs-txt">
        <h1>26 ans <em>à voir plus loin que la douleur...</em></h1>
        <p>Thérapeute du sport, fondatrice d'Académie Athletik et créatrice du Programme Athletik<sup className="tm">MC</sup>. Coureuse, cycliste, skieuse. Je comprends ton mode de vie parce que c'est le mien aussi.</p>
      </div>
      <div className="phs-pic">
        <img src="assets/apropos-hero-foret.jpg" alt="Catherine Martin en course en sentier" style={{ objectPosition: 'center 30%' }} />
      </div>
    </section>

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

    {/* BIO LONGUE — photo + texte */}
    <section className="page-sec beige">
      <div className="container">
        <div className="cath-grid" data-frame="F">
          <div className="cath-photo-wrap">
            <div className="cath-decor" style={{ display: 'none' }}></div>
            <div className="cath-photo">
              <img src="assets/catherine-bio-portrait.jpg" alt="Catherine Martin" />
            </div>
            <div className="cath-badge">
              <div className="num">26</div>
              <div className="lbl">ans d'expérience</div>
            </div>
          </div>
          <div className="cath-txt">
            <h2>Voir la confiance revenir <em>dans le regard de quelqu'un</em> qui pensait avoir tout essayé.</h2>
            <p>
              Depuis plus de 26 ans, j'accompagne des personnes actives à comprendre leur corps, corriger la source de leurs limitations et retrouver un corps sur lequel elles peuvent compter.
            </p>
            <p>
              Quand je te demande comment était ta dernière sortie, ce n'est pas une formule de politesse — je sais ce que ça représente, et ce que ça fait quand le corps ne suit plus.
            </p>
            <div className="cath-quote">
              « Je ne traite pas des dossiers. J'accompagne des personnes — avec leur histoire, leur sport, leurs objectifs, leur vie. »
            </div>
            <p>
Au fil de ces années, j'ai accompagné des athlètes à tous les niveaux de la compétition — du secondaire au cégep, de l'universitaire à l'équipe nationale.
          </p>
            <div className="cath-creds">
              <div className="cath-cred">CTSQ</div>
              <div className="cath-cred">ACTS</div>
              <div className="cath-cred">APMSQ</div>
              <div className="cath-cred">ESL</div>
            </div>
          </div>
        </div>
      </div>
    </section>

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

    {/* APPROCHE DIFFÉRENCIANTE */}
    <section className="page-sec cream">
      <div className="container">
        <div className="page-sec-inner">
          <h2>Ce qui rend mon travail <em>différent.</em></h2>
          <p style={{ maxWidth: 720 }}>
            Je ne travaille pas seulement <em style={{ fontStyle: 'italic' }}>sur</em> le corps : je travaille <em style={{ fontStyle: 'italic', color: 'var(--orange)' }}>avec</em> lui — et avec tout ce qui le gouverne.
          </p>
          <p style={{ maxWidth: 720 }}>Après 26 ans de pratique et plusieurs formations complémentaires, j'ai arrêté de croire qu'on règle durablement une douleur en ne regardant que l'endroit où elle se manifeste. Une douleur tenace cache rarement un simple problème de tissu. Elle vient de plus loin : de la commande du mouvement, des compensations accumulées, d'un système nerveux réactif. C'est là que tout se joue.

        </p>
          <p style={{ maxWidth: 720, marginTop: 24, fontStyle: 'italic', color: 'var(--dark)' }}>Mon travail intègre quatre niveaux rarement réunis :</p>
          <div className="cards-3" style={{ gridTemplateColumns: '1fr 1fr', marginTop: 24 }}>
            <div className="card-num">
              <div className="n">01</div>
              <h3>Le corps physique</h3>
              <p>Évaluation fonctionnelle, travail manuel, réadaptation par le mouvement. La base solide.</p>
            </div>
            <div className="card-num">
              <div className="n">02</div>
              <h3>Les fascias et la respiration</h3>
              <p>Les tensions profondes que les muscles n'expliquent pas toujours, et le souffle comme outil de régulation.</p>
            </div>
            <div className="card-num">
              <div className="n">03</div>
              <h3>Le contrôle moteur et les compensations</h3>
              <p>Ton corps a appris à contourner le problème depuis des années. On reprogramme les patrons de mouvement pour le résoudre vraiment.</p>
            </div>
            <div className="card-num">
              <div className="n">04</div>
              <h3>Le système nerveux</h3>
              <p>Parce qu'une douleur qui persiste n'est pas toujours un problème de tissu. C'est parfois un système nerveux qui protège encore, qui n'a pas reçu le signal que c'est sécuritaire de bouger autrement.</p>
            </div>
          </div>
          <div className="tagline-box" style={{ marginTop: 36 }}>
            Ce n'est pas de la magie. C'est de la cohérence — traiter l'humain complet plutôt que de passer d'un professionnel à l'autre en espérant que quelqu'un trouve une solution rapide.
          </div>
        </div>
      </div>
    </section>

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

    {/* CTA */}
    <section className="page-cta" id="cta">
      <div className="container">
        <div className="page-cta-head">
          <div className="ey" style={{ color: 'var(--orange-soft, #f4956e)' }}>Travaillons ensemble</div>
          <h2>Prêt à comprendre ton corps <em>et à en reprendre le contrôle ?</em></h2>
        </div>
        <div className="page-cta-cards">
          <div className="page-cta-card">
            <h3>Prendre rendez-vous</h3>
            <ul>
              <li>{Icon.check(16)}<span>Évaluation complète dès la première séance</span></li>
              <li>{Icon.check(16)}<span>Plan d'intervention personnalisé</span></li>
              <li>{Icon.check(16)}<span>Retour au sport sécuritaire et durable</span></li>
            </ul>
            <a href="rendez-vous.html" className="btn btn--orange">
              Prendre rendez-vous
              {Icon.arrow(14)}
            </a>
          </div>
          <div className="page-cta-card">
            <h3>Appel découverte</h3>
            <ul>
              <li>{Icon.check(16)}<span>On clarifie ta situation</span></li>
              <li>{Icon.check(16)}<span>On définit ensemble la bonne direction</span></li>
              <li>{Icon.check(16)}<span>Sans pression, sans engagement</span></li>
            </ul>
            <a href="rendez-vous.html" className="btn btn--orange">
              Réserve ton appel découverte
              {Icon.arrow(14)}
            </a>
          </div>
        </div>
      </div>
    </section>

    <V1Footer />
  </div>;

window.PageApropos = PageApropos;