/* ============================================================
   COMPONENT — Hero Banner (homepage)
   Photo en <img position:absolute> derrière + contenu en flow normal
   (logo + texte) + bande dégradée en fin. La hauteur de la section
   est pilotée par le contenu, jamais d'overlap.
   Frame Figma : BANNIERE (2006:2486).
   ============================================================ */

.heroBanner {
    position: relative;
    width: 100%;
    background-color: var(--color-primary-dark-blue);  /* fallback */
    overflow: hidden;
    isolation: isolate;
}

/* ----- Photo de fond (absolute derrière le contenu) ------------------- */
.heroBanner__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% - 40px);   /* laisse 40px en bas pour le gradient */
    object-fit: cover;
    object-position: center;
    z-index: -1;
    pointer-events: none;
}

/* ----- Contenu en flow normal (drive la hauteur de la section) -------- */
.heroBanner__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-10);
    padding: var(--space-10) var(--content-gutter);
    min-height: 254px;   /* 294 (Figma hors gradient) - paddings */
}

/* ----- Logo ESOP (taille fixe, ratio préservé) ------------------------ */
.heroBanner__logo {
    display: block;
    width: 200px;
    height: auto;
    max-height: 117px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ----- Bloc texte (fond blanc translucide, sized to content) ---------- */
.heroBanner__text {
    background: rgba(255, 255, 255, 0.80);
    padding: var(--space-5) var(--space-10);
    color: var(--color-primary-dark-blue);
    width: fit-content;
    /* Figma : le bloc s'étend à la largeur de son contenu (la ligne prix,
       la plus longue, ~990px+), dans la zone de contenu (viewport - gutters).
       Un cap à 880px forçait la ligne prix à passer sur 2 lignes (3 au total)
       au lieu de 2. On laisse donc fit-content aller jusqu'à 100%. */
    max-width: 100%;
}

.heroBanner__text > * {
    margin: 0;
}

.heroBanner__text > * + * {
    margin-top: var(--space-3);
}

/* Le contenu BDD est 2 <p> consécutifs :
   - Premier <p><strong>…</strong></p> = titre principal (teal, gras)
   - Second <p>…</p>                   = ligne de prix (dark blue, regular)
   On style la structure réelle au lieu de classes obsolètes (textTitle/Price). */
.heroBanner__text p {
    font-family: var(--font-family-base);
    font-size: 24px;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark-blue);
}

/* Première ligne : le <strong> contenu est en teal — fallback si <strong>
   est absent : on style le premier <p> directement. */
.heroBanner__text p:first-child,
.heroBanner__text p strong {
    color: var(--color-secondary-teal);
    font-weight: var(--font-weight-bold);
}

/* Seconde ligne (prix de souscription) : Figma = Ubuntu Medium (500).
   Le @font-face Ubuntu Medium est déclaré dans base.css ; il faut que
   Ubuntu-Medium.woff2/.ttf soient présents sur le S3 (sinon repli sur
   Regular). Reste en dark blue (la 1re ligne est teal). */
.heroBanner__text p + p {
    font-weight: var(--font-weight-medium);
}

/* Compatibilité : on garde les anciennes classes au cas où elles existent
   encore quelque part. */
.heroBanner__textTitle {
    font-family: var(--font-family-base);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-teal);
}

.heroBanner__textPrice {
    font-family: var(--font-family-base);
    font-size: 24px;
    font-weight: 500;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark-blue);
}

/* ----- Bande dégradée en bas (NEW GRADIENT BAR Figma) ----------------- */
.heroBanner__gradient {
    position: relative;
    height: 40px;
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--color-primary-dark-blue) 0%,
        var(--color-primary-blue)      30%,
        var(--color-primary-light-blue) 70%,
        var(--color-secondary-turquoise) 100%
    );
}

/* ----- Responsive ----------------------------------------------------- */
@media (max-width: 1024px) {
    .heroBanner__inner {
        padding: var(--space-6) var(--space-5);
        gap: var(--space-6);
        min-height: 180px;
    }

    .heroBanner__photo {
        height: calc(100% - 24px);
    }

    .heroBanner__logo {
        width: 140px;
        max-height: 84px;
    }

    .heroBanner__textTitle,
    .heroBanner__textPrice {
        font-size: 16px;
    }

    .heroBanner__text {
        padding: var(--space-3) var(--space-5);
        max-width: 100%;
    }

    .heroBanner__gradient {
        height: 24px;
    }
}