.hero-section {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.hero-media,
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-media { z-index: -2; }

.hero-media img {
    object-fit: cover;
    object-position: center 18%;
    transform: scale(1.06) translateX(-2%);
}

.hero-overlay {
    min-height: 100svh;
    display: flex;
    align-items: end;
    padding: clamp(34px, 5vh, 56px) clamp(24px, 7vw, 116px);
    color: var(--white);
    background: linear-gradient(90deg, rgba(7, 15, 11, .9) 0%, rgba(7, 15, 11, .54) 46%, rgba(7, 15, 11, .12) 78%);
}

.hero-text { width: min(100%, 720px); }

.seo-text {
    width: 100%;
    padding: 0;
    text-align: left;
}

.seo-text h1 {
    max-width: 7ch;
    margin: 0;
    color: var(--white);
    font-size: clamp(3.5rem, 7.2vw, 6.8rem);
    font-weight: 800;
    line-height: .86;
    white-space: nowrap;
}

.hero-subtitle {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
}

.hero-area {
    max-width: 32rem;
    margin: .45rem 0 0;
    font-size: clamp(.9rem, 1.5vw, 1.05rem);
    line-height: 1.45;
}

.hero-word {
    display: block;
}

.hero-word--accent {
    color: #efa56f;
}

.hero-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-28px);
    animation: heroLetterReveal .62s cubic-bezier(.2, .78, .2, 1) forwards;
    animation-delay: calc(.12s + var(--letter-index) * 55ms);
    will-change: transform, opacity;
}

.hero-letter:nth-child(even) {
    transform: translateY(28px);
}

@keyframes heroLetterReveal {
    72% {
        opacity: 1;
        transform: translateY(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero-section,
    .hero-overlay { min-height: 86svh; }

    .hero-media img { object-position: 27% 22%; transform: scale(1.02) translateX(1%); }

    .hero-overlay {
        padding: 120px 24px 48px;
        background: linear-gradient(0deg, rgba(7, 15, 11, .94) 0%, rgba(7, 15, 11, .34) 72%, rgba(7, 15, 11, .12) 100%);
    }

    .seo-text h1 { max-width: 100%; font-size: clamp(3.5rem, 17vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-letter {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Copyright RZU Informatique */