/* Bloc 1 : composition validée, repère de 1676 × 939 pixels.
   Le fond est photographique ; titre, phrase et bouton sont du HTML. */
.hero.hero-reference {
  --hero-u: calc(min(100vw, 1536px) / 1676);
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1676 / 939;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #080c0b;
}
@supports (width: 1cqw) {
  .hero.hero-reference { container-type: inline-size; --hero-u: calc(100cqw / 1676); }
}
.hero.hero-reference .hero-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1676 / 939;
  object-fit: contain;
  object-position: center;
  z-index: -2;
  transition: none;
}
/* La photo validée conserve ses pixels. Le fond nettoyé ne couvre que
   la zone gauche, pour retirer l'ancien lettrage avant le texte HTML. */
.hero.hero-reference .hero-clean-photo {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1676 / 939;
  object-fit: contain;
  z-index: -1;
  mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 52%, transparent 100%);
  pointer-events: none;
}
/* Le voile noir appartient déjà au fond validé : on évite de le doubler. */
.hero.hero-reference .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; background: none; z-index: -1; }
.hero.hero-reference .hero-copy { position: absolute; inset: 0; display: block; width: 100%; max-width: none; padding: 0; }
.hero.hero-reference h1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: ElSolBrush, cursive;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-size: calc(164 * var(--hero-u));
  line-height: 1;
  letter-spacing: -.035em;
  transform: none;
  text-shadow: none;
}
.hero.hero-reference .headline-line,
.hero.hero-reference .headline-word {
  position: absolute;
  display: block;
  width: max-content;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  transform: rotate(-9deg) skewX(-4deg);
  transform-origin: left center;
}
.hero.hero-reference .headline-line.first { display: contents; transform: none; }
.hero.hero-reference .headline-word.bien { left: calc(52 * var(--hero-u)); top: calc(215 * var(--hero-u)); font-size: calc(152 * var(--hero-u)); transform: rotate(-9deg) skewX(-4deg) scaleY(1.28); }
.hero.hero-reference .headline-word.plus { left: calc(365 * var(--hero-u)); top: calc(175 * var(--hero-u)); font-size: calc(140 * var(--hero-u)); transform: rotate(-9deg) skewX(-4deg); }
.hero.hero-reference .headline-line.second { left: calc(205 * var(--hero-u)); top: calc(305 * var(--hero-u)); font-size: calc(151 * var(--hero-u)); }
.hero.hero-reference .headline-line.third { left: calc(242 * var(--hero-u)); top: calc(400 * var(--hero-u)); font-size: calc(182 * var(--hero-u)); color: #fcc433; transform: rotate(-13deg) skewX(-4deg); }
.hero.hero-reference .hero-underline { position: absolute; left: calc(456 * var(--hero-u)); top: calc(505 * var(--hero-u)); width: calc(264 * var(--hero-u)); height: calc(80 * var(--hero-u)); fill: #fcc433; stroke: none; pointer-events: none; }
.hero.hero-reference .hero-copy > p {
  position: absolute;
  left: calc(137 * var(--hero-u));
  top: calc(608 * var(--hero-u));
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: ElSolTitle, Georgia, serif;
  font-weight: 700;
  font-size: calc(46 * var(--hero-u));
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #fff;
}
.hero.hero-reference .hero-copy > .button {
  position: absolute;
  left: calc(137 * var(--hero-u));
  top: calc(792 * var(--hero-u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(354 * var(--hero-u));
  height: calc(80 * var(--hero-u));
  min-height: 44px;
  margin: 0;
  padding: 0;
  gap: calc(26 * var(--hero-u));
  border-radius: calc(35 * var(--hero-u));
  background: #fdc636;
  color: #0b0d06;
  font-family: ElSolText, Arial, sans-serif;
  font-size: calc(24 * var(--hero-u));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: none;
}
.hero.hero-reference .hero-copy > .button svg { width: calc(33 * var(--hero-u)); height: calc(34 * var(--hero-u)); fill: none; stroke: currentColor; stroke-width: 2.2; }
.hero.hero-reference .hero-copy > .button:hover { background: #ffda69; transform: none; }
.hero.hero-reference .hero-copy > .button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Le soleil est le graphisme original de la référence. Seule sa zone
   décorative est affichée : aucun texte du titre n'est repris en image. */
.hero.hero-reference .sun {
  position: absolute;
  inset: auto;
  left: calc(1328 * var(--hero-u));
  top: 0;
  width: calc(270 * var(--hero-u));
  height: calc(265 * var(--hero-u));
  margin: 0;
  color: #fcc631;
  fill: none;
  stroke: currentColor;
  animation: none;
  transform: none;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(#000 92%, transparent);
  mask-composite: intersect;
}
.hero.hero-reference .sun img { position: absolute; left: calc(-1328 * var(--hero-u)); top: 0; width: calc(1676 * var(--hero-u)); height: calc(939 * var(--hero-u)); max-width: none; object-fit: fill; }
@media (max-width: 700px) {
  .hero.hero-reference { aspect-ratio: auto; overflow: hidden; background: #080c0b; padding-bottom: 27px; }
  .hero.hero-reference .hero-photo { position: relative; inset: auto; height: auto; aspect-ratio: 1676 / 939; }
  .hero.hero-reference .hero-shade { height: auto; aspect-ratio: 1676 / 939; bottom: auto; }
  .hero.hero-reference .hero-copy { position: static; display: contents; }
  .hero.hero-reference h1 { inset: 0 auto auto 0; height: auto; aspect-ratio: 1676 / 939; }
  .hero.hero-reference .hero-copy > p { position: static; margin: 20px 8.2% 18px; font-size: 24px; line-height: 1.13; }
  .hero.hero-reference .hero-copy > .button { position: relative; inset: auto; width: max-content; height: auto; min-height: 48px; margin: 0 8.2%; padding: 13px 22px; gap: 12px; border-radius: 26px; font-size: 17px; }
  .hero.hero-reference .hero-copy > .button svg { width: 22px; height: 23px; }
}