/* ===== Hero Content (page) — image plein cadre + carte texte (migration fidèle) ===== */
.hero-page { position: relative; background-color: var(--noir-onyx); min-height: 92vh; padding: 8rem 6rem 4rem; overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.hero-page__bg { position: absolute; inset: 0; z-index: 0; }
.hero-page__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-page__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(31,31,31,0.35) 0%, rgba(31,31,31,0.15) 45%, rgba(31,31,31,0) 70%); }

.hero-page__inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 560px) 1fr; align-items: end; gap: 2rem; }
.hero-page__card { position: relative; background-color: var(--blanc-ivoire); border-radius: 24px; padding: 2.5rem 2.5rem 2.75rem; display: flex; flex-direction: column; gap: 1.25rem; margin-left: -1rem; }

.hero-page__crumb { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-corps); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--noir-onyx); flex-wrap: wrap; }
.hero-page__crumb a { color: var(--noir-onyx); opacity: 0.5; text-decoration: none; transition: opacity 0.2s ease; }
.hero-page__crumb a:hover { opacity: 1; }
.hero-page__crumb .breadcrumb_last, .hero-page__crumb-current { color: var(--bleu-cobalt); font-weight: 600; }

.hero-page__title { font-family: var(--font-titre); font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; font-weight: 400; color: var(--noir-onyx); margin: 0; letter-spacing: -0.01em; }
.hero-page__title-mark { color: var(--bleu-cobalt); font-weight: 400; }
.hero-page__desc { color: var(--noir-onyx); max-width: 460px; }
.hero-page__cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }

@media (max-width: 1024px) {
    .hero-page { padding: 7rem 2rem 3rem; min-height: auto; }
    .hero-page__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero-page__card { margin-left: 0; padding: 2rem; }
}
@media (max-width: 640px) {
    .hero-page { padding: 6rem 1.25rem 2.5rem; }
    .hero-page__card { padding: 1.5rem; border-radius: 18px; }
}