{# principes-5.html — 5 principes / statements courts numérotés.
   Différent de process-3-etapes (3 cards avec desc) et pitch-3-piliers (3 piliers + CTA card).
   Ici : 5 statements philosophiques, format "manifeste".
   Slots :
   {{EYEBROW}}
   {{H2_HTML}}                              — titre (HTML pour <span> accent)
   {{LEAD}}                                 — sous-titre court (optionnel)
   {{PRINCIPE_1}} / ... / {{PRINCIPE_5}}    — 5 statements courts (idéal 8-14 mots chacun)
#}

<section class="p5">
  <div class="p5__inner">
    <header class="p5__header">
      <span class="p5__eyebrow">{{EYEBROW}}</span>
      <h2 class="p5__h2">{{H2_HTML}}</h2>
      <p class="p5__lead">{{LEAD}}</p>
    </header>
    <ol class="p5__list">
      <li class="p5__item"><span class="p5__num">01</span><p class="p5__statement">{{PRINCIPE_1}}</p></li>
      <li class="p5__item"><span class="p5__num">02</span><p class="p5__statement">{{PRINCIPE_2}}</p></li>
      <li class="p5__item"><span class="p5__num">03</span><p class="p5__statement">{{PRINCIPE_3}}</p></li>
      <li class="p5__item"><span class="p5__num">04</span><p class="p5__statement">{{PRINCIPE_4}}</p></li>
      <li class="p5__item"><span class="p5__num">05</span><p class="p5__statement">{{PRINCIPE_5}}</p></li>
    </ol>
  </div>
</section>

<style>
  .p5 { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .p5__inner { max-width: 64rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .p5__header { text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .p5__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .p5__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.15; }
  .p5__h2 :where(span) { color: var(--color-accent, #ff2c7b); }
  .p5__lead { font-size: 1.05rem; line-height: 1.55; margin: 0; opacity: 0.8; max-width: 36rem; }
  .p5__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; counter-reset: principe; }
  .p5__item { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; padding: 1.75rem 1.5rem; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
  .p5__item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
  .p5__num { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--color-accent, #ff2c7b); line-height: 1; letter-spacing: -0.02em; min-width: 3.5rem; }
  .p5__statement { font-family: var(--font-heading, inherit); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; margin: 0; }
  @media (max-width: 600px) { .p5__item { gap: 1rem; padding: 1.25rem 0; } }
</style>