/* Component: hero (slides du [hero_slider] — moteur partagé avec assets/css/slider.css) */
.rc-hero {
    --rc-hero-banner-bg: var(--color-secondary);

    /* `.rc-hero__visual` remplit tout le slide en position absolute plutôt
       que via flex-grow : `.rc-hero__slide` (= `.rc-slider__slide`, déjà
       position:relative dans slider.css) est la seule hauteur fiable de la
       chaîne — un flex-grow sur un enfant dont le contenu est lui-même en
       position absolute (donc sans hauteur intrinsèque) ne se résout pas de
       façon fiable et donnait 0px de hauteur. */
    .rc-hero__visual {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: var(--color-primary);

        /* Spécificité (3 classes) volontairement plus élevée que la règle
           générique `.rc-slider__slide img` (slider.css) qu'il faut ici
           court-circuiter pour le logo (contain, pas cover). */
        .rc-hero__bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Voile d'assombrissement entre l'image et le logo — lisibilité du
           logo/texte quel que soit le contraste de la photo. */
        .rc-hero__scrim {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 100%);
            pointer-events: none;
        }

        .rc-hero__logo {
            position: absolute;
            inset: 0;
            margin: auto;
            width: auto;
            height: auto;
            max-width: min(95%, 46rem);
            max-height: 60%;
            object-fit: contain;
            z-index: 1;
            pointer-events: none;
        }
    }

    /* Ancré en bas du slide (hauteur = contenu, jamais 0) plutôt que dans le
       flux flex — évite la même dépendance fragile que ci-dessus. Le fond
       opaque du bandeau recouvre le bas de l'image, ce qui reproduit
       visuellement la maquette (bandeau collé au bas du visuel). */
    .rc-hero__banner {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        margin: 0;
        padding: var(--s-medium) var(--s-large);
        background: var(--rc-hero-banner-bg, var(--color-secondary));
        text-align: center;
    }

    .rc-hero__banner-text {
        font-family: var(--font-body);
        font-size: var(--fs-h4);
        color: var(--color-primary);
        line-height: 1.3;

        p {
            margin: 0;
        }

        strong,
        b {
            font-weight: 700;
        }
    }

    @media (max-width: 700px) {
        .rc-hero__visual .rc-hero__logo {
            max-width: 55%;
            max-height: 28%;
        }

        .rc-hero__banner {
            padding: var(--s-small) var(--s-medium);
        }

        .rc-hero__banner-text {
            font-size: var(--fs-lead);
        }
    }
}