{# pitch-meres.html — Pitch Maison Mère : titre allcaps + sous-titre + grille d'items (icône MÈRES + énoncé court).
   Idéal pour présenter des piliers, des composantes de programme, des bénéfices.
   Slots :
   {{H2_HTML}}                          — titre (rendu en allcaps via le thème), <span class="pm__accent">…</span> pour l'accent
   {{SUBTITLE}}                         — sous-titre (couleur accent)
   {{ITEM_N_TITLE}} / {{ITEM_N_TEXT}}   — N = 1..6 (icône MÈRES automatique)
#}
<section class="pm">
  <svg width="0" height="0" style="position:absolute" aria-hidden="true"><symbol id="pm-ic" viewBox="0 0 37 38"><path d="M16.6483 10.417H13.3369H10.0255H6.62215H3.31075H-0.000640869V13.5775V37.4568H3.31075V13.5775H6.62215V37.4568H10.0255V13.5775H13.3369V37.4568H16.6483V13.5775V10.417Z" fill="currentColor"/><path d="M36.6082 10.417H33.2968H29.9854H26.674H23.2706H19.9592V13.5775V37.4568H23.2706V13.5775H26.674V37.4568H29.9854V13.5775H33.2968V37.4568H36.6082V13.5775V10.417Z" fill="currentColor"/><path d="M-0.000640869 5.5884L18.304 0.847656L36.6087 5.5884V8.92447L18.304 4.18373L-0.000640869 8.92447V5.5884Z" fill="currentColor"/></symbol></svg>
  <div class="pm__inner">
    <div class="pm__head">
      <h2 class="pm__h2">Ce que tu construis pendant le <span class="pm__accent">programme</span></h2>
      <p class="pm__sub">4 piliers, une méthode</p>
    </div>
    <div class="pm__grid">
      <div class="pm__item"><svg class="pm__ic"><use href="#pm-ic"/></svg><div><h3 class="pm__title">Devenir la référence sur ton sujet</h3><p>Un positionnement, un discours et un pitch clairs, pour devenir plus lisible, plus mémorable et plus facile à recommander.</p></div></div>
      <div class="pm__item"><svg class="pm__ic"><use href="#pm-ic"/></svg><div><h3 class="pm__title">Vendre à ta juste valeur</h3><p>Des offres plus simples à vendre et plus rentables, et un business qui ne dépend pas que de ta disponibilité.</p></div></div>
      <div class="pm__item"><svg class="pm__ic"><use href="#pm-ic"/></svg><div><h3 class="pm__title">Sortir des montagnes russes</h3><p>Un système qui génère des opportunités régulières : recommandations, partenariats, réseau, LinkedIn, newsletter.</p></div></div>
      <div class="pm__item"><svg class="pm__ic"><use href="#pm-ic"/></svg><div><h3 class="pm__title">Prendre ta place</h3><p>Une visibilité cohérente avec tes ambitions : réseaux sociaux, médias, presse, événements et prises de parole.</p></div></div>
    </div>
  </div>
</section>

<style>
  .pm { background: var(--color-bg, #fff); color: var(--color-text, #000); font-family: var(--font-body, system-ui, sans-serif); }
  .pm__inner { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .pm__head { text-align: center; max-width: 48rem; margin: 0 auto 2.8rem; }
  .pm__h2 { font-family: var(--font-heading, inherit); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1; margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.01em; }
  .pm__accent { color: var(--color-accent, #6e2dbd); }
  .pm__sub { font-family: var(--font-heading, inherit); color: var(--color-accent, #6e2dbd); font-size: 1.5rem; margin: 0; }
  .pm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.8rem; }
  .pm__item { display: flex; gap: 1.1rem; align-items: flex-start; }
  .pm__ic { flex: none; width: 46px; height: 46px; color: var(--color-accent, #6e2dbd); }
  .pm__title { font-family: var(--font-heading, inherit); font-weight: 400; font-size: 1.45rem; margin: 0 0 0.3rem; }
  .pm__item p { margin: 0; opacity: 0.85; line-height: 1.5; }
  @media (max-width: 700px) { .pm__grid { grid-template-columns: 1fr; } }
</style>