/* Hero validé : règles d’origine conservées intégralement. */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body { background: #0F1E2E; }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0;
      margin: -1px; overflow: hidden; clip-path: inset(50%);
      white-space: nowrap; border: 0;
    }
    /* La hauteur suit la photographie : aucun recadrage lié à la hauteur de fenêtre. */
    .hero {
      position: relative; width: 100%; aspect-ratio: 2650 / 1600;
      overflow: hidden; container-type: inline-size;
    }
    .hero-photo { display: block; width: 100%; height: auto; }
    /* Recoloration à l’affichage : les PNG sources restent intacts. */
    .hero-signature, .hero-citation {
      position: absolute; display: block;
      height: auto;
    }
    .hero-signature {
      filter: url(#hero-gold);
      aspect-ratio: 2038 / 772; width: 59.726%;
      left: -3.687%; top: 15.958%;
    }
    .hero-metiers {
      position: absolute; top: 47.97%; left: 9%; margin: 0;
      color: #FAF9F4; font-family: "bodoni-moda", "Bodoni Moda", Didot, serif;
      font-size: 2.63cqw; font-weight: 400; font-optical-sizing: none; font-variation-settings: "opsz" 6;
      line-height: 1.15; white-space: nowrap;
    }
    .hero-citation {
      filter: url(#hero-smoke);
      aspect-ratio: 1448 / 1086; width: 25.94%;
      left: 3.706%; top: 57.264%;
      transform-origin: top left; transform: rotate(-5.731deg);
    }
    @media (max-width: 767px) {
      .hero { aspect-ratio: 1080 / 1920; }
      .hero-signature { width: 103.563%; left: -1.798%; top: -0.0165%; }
      .hero-metiers { top: 18.45%; left: 19.7%; font-size: 4.55cqw; }
      .hero-citation {
        width: 42.904%; left: 41.667%; top: 59.635%;
        transform: rotate(-6.875deg);
      }
    }