/* Grille calée sur le conteneur du site : les deux colonnes centrales font la largeur du site,
   les colonnes extérieures permettent à l'image de déborder jusqu'au bord de l'écran. */
.hr2 {
  --hr2-w: min(100% - 40px, var(--fx-site-width, 1280px));
  --hr2-a: calc(var(--hr2-w) * var(--hr2-split, 55) / 100);
  --hr2-b: calc(var(--hr2-w) - var(--hr2-a));
  display: grid; grid-template-columns: minmax(20px, 1fr) minmax(0, var(--hr2-a)) minmax(0, var(--hr2-b)) minmax(20px, 1fr);
  background: var(--hr2-bg); color: var(--hr2-title-color); overflow: hidden;
}
.hr2-img-left {
  grid-template-columns: minmax(20px, 1fr) minmax(0, var(--hr2-b)) minmax(0, var(--hr2-a)) minmax(20px, 1fr);
}
.hr2-rule { border-bottom: 1px solid var(--hr2-border); }

.hr2-text {
  grid-column: 2; grid-row: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 48px;
}
/* L'espace avec l'image est porté par les enfants : la marge interne reste celle du réglage « padding ». */
.hr2-text > * { margin-inline-end: var(--hr2-gap, 64px); }
.hr2-img-left .hr2-text { grid-column: 3; }
.hr2-img-left .hr2-text > * { margin-inline: var(--hr2-gap, 64px) 0; }
.hr2-noimg .hr2-text, .hr2-img-left.hr2-noimg .hr2-text { grid-column: 2 / 4; }
.hr2-noimg .hr2-text > * { margin-inline: 0; }
.hr2-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: var(--hr2-valign, end); }

.hr2-bleed .hr2-text { padding: var(--hr2-pad, 72px 0); }
.hr2-framed, .hr2-noimg { padding: var(--hr2-pad, 72px 0); }

.hr2-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--hr2-text-color); }
.hr2-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.hr2-crumbs a { color: inherit; text-decoration: none; }
.hr2-crumbs a:hover { color: var(--hr2-accent); }
.hr2-crumbs [aria-current] { color: var(--hr2-title-color); font-weight: 600; }

.hr2-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font-family: var(--fx-font-accent); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--hr2-accent);
}
.hr2-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.hr2-title {
  font-family: var(--hr2-title-font); font-weight: var(--hr2-title-weight);
  font-size: clamp(46px, 8vw, var(--hr2-title-size, 104px)); line-height: .94;
  letter-spacing: var(--hr2-title-tracking, -.035em); text-transform: var(--hr2-title-case, none);
  color: var(--hr2-title-color); overflow-wrap: anywhere; hyphens: auto;
}
.fx-body .hr2-title { line-height: .94; }
.hr2-intro {
  margin-top: 30px; max-width: 40ch; padding-left: 20px; border-left: 3px solid var(--hr2-accent);
  font-family: var(--hr2-text-font); font-size: var(--hr2-text-size, 21px); line-height: var(--hr2-lh, 1.5); color: var(--hr2-text-color);
}
.hr2-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding-bottom: 6px;
  font-weight: 600; font-size: 15px; text-decoration: none; color: var(--hr2-title-color);
  border-bottom: 2px solid var(--hr2-accent); transition: gap .2s;
}
.hr2-cta:hover { gap: 16px; }

.hr2-media { grid-row: 1; grid-column: 3 / 5; position: relative; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.hr2-img-left .hr2-media { grid-column: 1 / 3; }
.hr2-framed .hr2-media { grid-column: 3; }
.hr2-framed.hr2-img-left .hr2-media { grid-column: 2; }
.hr2-frame {
  position: relative; flex: 1 0 auto; aspect-ratio: var(--hr2-ratio, 4 / 5);
  border-radius: var(--hr2-img-radius, 0); overflow: hidden; background: color-mix(in srgb, var(--hr2-accent) 18%, var(--hr2-bg));
}
.hr2-bleed .hr2-frame { border-radius: 0; }
.hr2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hr2-img-pos, center); }
.hr2-tint .hr2-img { filter: grayscale(1) contrast(1.08); }
.hr2-tint .hr2-frame::after { content: ""; position: absolute; inset: 0; background: var(--hr2-accent); mix-blend-mode: multiply; opacity: .72; }
.hr2-caption {
  margin-top: 10px; font-family: var(--fx-font-accent); font-size: 11.5px; letter-spacing: .06em; color: var(--hr2-text-color);
}
.hr2-bleed .hr2-caption { position: absolute; left: 16px; bottom: 14px; margin: 0; padding: 5px 10px; background: var(--hr2-bg); color: var(--hr2-title-color); }

/* Aplat d'accent : décalé derrière l'image encadrée, bande verticale sur l'image à fond perdu. */
.hr2-shape.hr2-framed .hr2-media::before {
  content: ""; position: absolute; z-index: 0; inset: 28px -28px -28px 28px; background: var(--hr2-accent); border-radius: var(--hr2-img-radius, 0);
}
.hr2-shape.hr2-framed.hr2-img-left .hr2-media::before { inset: 28px 28px -28px -28px; }
.hr2-shape.hr2-framed .hr2-frame { z-index: 1; }
.hr2-framed .hr2-caption { position: relative; z-index: 1; }
.hr2-shape.hr2-framed .hr2-caption { align-self: flex-start; margin: 12px 0 0 12px; padding: 5px 10px; background: var(--hr2-bg); color: var(--hr2-title-color); }
.hr2-shape.hr2-bleed .hr2-frame::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 14px; background: var(--hr2-accent);
}
.hr2-shape.hr2-bleed.hr2-img-left .hr2-frame::before { left: auto; right: 0; }

@media (max-width: 980px) {
  .hr2, .hr2-img-left { grid-template-columns: 20px minmax(0, 1fr) 20px; }
  .hr2-text, .hr2-img-left .hr2-text, .hr2-noimg .hr2-text, .hr2-img-left.hr2-noimg .hr2-text { grid-column: 2; gap: 32px; }
  .hr2 .hr2-text > *, .hr2-img-left .hr2-text > * { margin-inline: 0; }
  .hr2-bleed .hr2-text { padding: 56px 0 40px; }
  .hr2-media, .hr2-img-left .hr2-media { grid-column: 1 / -1; grid-row: 2; }
  .hr2-framed .hr2-media, .hr2-framed.hr2-img-left .hr2-media { grid-column: 2; margin-top: 40px; }
  .hr2-frame { aspect-ratio: 16 / 9; min-height: 0; }
  .hr2-shape.hr2-framed .hr2-media::before, .hr2-shape.hr2-framed.hr2-img-left .hr2-media::before { inset: 16px -12px -16px 16px; }
  .hr2-shape.hr2-bleed .hr2-frame::before { width: auto; height: 8px; right: 0; bottom: auto; }
  .hr2-intro { max-width: 60ch; }
}
@media (max-width: 620px) {
  .hr2-framed, .hr2-noimg { padding-block: 48px; }
  .hr2-bleed .hr2-text { padding: 40px 0 32px; }
  .hr2-title { font-size: clamp(40px, 13vw, 64px); }
  .hr2-intro { font-size: 17px; margin-top: 22px; padding-left: 14px; }
  .hr2-frame { aspect-ratio: 4 / 3; }
}