{# hero-split-diagonal.html — Hero plein écran "split diagonal" (principe).
   Portrait N&B à gauche sur fond noir, panneau rouge en diagonale à droite, gros titre condensé par-dessus.
   Slots :
   {{PORTRAIT_SRC}} / {{PORTRAIT_ALT}}    — portrait plein cadre (passé en N&B via CSS)
   {{H1_HTML}}                            — titre condensé (HTML ; <span class="hsd__accent"> pour l'accent)
   {{QUOTE}} / {{QUOTE_AUTHOR}} / {{QUOTE_ROLE}}  — citation bas-gauche (laisser vide pour masquer)
#}

<section class="hsd">
  <img class="hsd__photo" src="{{PORTRAIT_SRC}}" alt="{{PORTRAIT_ALT}}" loading="eager">
  <div class="hsd__shade"></div>
  <div class="hsd__panel"></div>

  <h1 class="hsd__title">{{H1_HTML}}</h1>

  <figure class="hsd__quote">
    <blockquote>{{QUOTE}}</blockquote>
    <figcaption><strong>{{QUOTE_AUTHOR}}</strong><span>{{QUOTE_ROLE}}</span></figcaption>
  </figure>
</section>

<style>
  .hsd { position: relative; min-height: 88vh; overflow: hidden; background: var(--color-black, #000);
         color: var(--color-white, #f5f5f5); font-family: var(--font-heading, 'Archivo Narrow', system-ui, sans-serif); }
  .hsd__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                filter: grayscale(1) contrast(1.05) brightness(.82); }
  .hsd__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 58%); }
  .hsd__panel { position: absolute; inset: 0; clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
                background: var(--gradient-signature, linear-gradient(135deg, #ff0000, #ff3333 40%, #ff6b35)); }
  .hsd__title { position: absolute; z-index: 3; right: 2.25rem; top: 20%; width: 58%; margin: 0; text-align: left;
                text-transform: uppercase; font-weight: 800; line-height: .92; letter-spacing: -0.01em;
                font-size: clamp(2.6rem, 6.2vw, 6rem); }
  .hsd__accent { color: var(--color-black, #000); }
  .hsd__quote { position: absolute; z-index: 3; left: 2.25rem; bottom: 2.25rem; max-width: 38%; margin: 0; }
  .hsd__quote blockquote { margin: 0 0 .6rem; font-style: italic; font-size: 1.15rem; line-height: 1.35;
                           font-family: var(--font-body, system-ui, sans-serif); }
  .hsd__quote figcaption { display: flex; flex-direction: column; }
  .hsd__quote strong { text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; }
  .hsd__quote span { font-size: .85rem; opacity: .7; font-family: var(--font-body, system-ui, sans-serif); }
  @media (max-width: 820px) {
    .hsd__panel { clip-path: polygon(0 64%, 100% 40%, 100% 100%, 0 100%); }
    .hsd__title { width: auto; left: 1.5rem; right: 1.5rem; top: 18%; text-align: left; }
    .hsd__quote { max-width: 70%; bottom: 2rem; }
  }
</style>