/* ═══════════════════════════════════════════════════════════════
   Easy Softwares — Bannières illustratives des pages publiques
   Format cinématique, légende en verre dépoli, points clés.
   Responsive · RTL · prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */

/* Dans un en-tête de page, la bannière suit le sous-titre :
   l'espacement bas est déjà fourni par le padding de .page-hero. */
.page-hero .es-banner { margin-top: 2.5rem; margin-bottom: 0; }

.es-banner {
    position: relative;
    margin: 0 0 3rem;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 2px 8px rgba(7, 26, 54, .06),
        0 26px 60px -18px rgba(7, 26, 54, .32);
    background: var(--es-light, #F3F7FC);
}

/* Liseré dégradé de marque */
.es-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(23, 107, 255, .55),
        rgba(23, 195, 229, .35) 45%,
        rgba(243, 182, 58, .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

.es-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 8;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.es-banner:hover img { transform: scale(1.055); }

/* Voile dégradé : lisibilité de la légende + profondeur */
.es-banner-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(7, 26, 54, .92) 0%, rgba(7, 26, 54, .55) 26%, rgba(7, 26, 54, .06) 55%, transparent 75%),
        linear-gradient(to right, rgba(7, 26, 54, .40) 0%, transparent 45%);
}
[dir="rtl"] .es-banner-scrim {
    background:
        linear-gradient(to top, rgba(7, 26, 54, .92) 0%, rgba(7, 26, 54, .55) 26%, rgba(7, 26, 54, .06) 55%, transparent 75%),
        linear-gradient(to left, rgba(7, 26, 54, .40) 0%, transparent 45%);
}

/* Légende */
.es-banner-caption {
    position: absolute;
    z-index: 2;
    inset-inline-start: clamp(1.1rem, 3vw, 2.4rem);
    inset-inline-end: clamp(1.1rem, 3vw, 2.4rem);
    inset-block-end: clamp(1.1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    gap: .95rem;
    text-align: start;
}

.es-banner-icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--es-primary, #176BFF), var(--es-secondary, #17C3E5));
    box-shadow: 0 10px 26px rgba(23, 107, 255, .45);
}

.es-banner-text {
    margin: 0;
    color: #fff;
    font-family: var(--es-font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: clamp(.95rem, 1.55vw, 1.32rem);
    line-height: 1.45;
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(7, 26, 54, .55);
    max-width: 62ch;
}

/* Points clés — pastilles en verre dépoli, en haut de la bannière */
.es-banner-points {
    position: absolute;
    z-index: 2;
    inset-block-start: clamp(1rem, 2.4vw, 1.6rem);
    inset-inline-start: clamp(1.1rem, 3vw, 2.4rem);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.es-banner-points li {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    text-shadow: 0 1px 8px rgba(7, 26, 54, .5);
    white-space: nowrap;
}
.es-banner-points li i { font-size: .9rem; color: var(--es-accent, #F3B63A); }

/* ── Tablette ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .es-banner { border-radius: 20px; margin-bottom: 2.25rem; }
    .es-banner img { aspect-ratio: 16 / 8; }
    .es-banner-points li { font-size: .72rem; padding: .35rem .75rem; }
    .es-banner-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 13px; }
}

/* ── Mobile : la légende passe sous l'image pour rester lisible ── */
@media (max-width: 575.98px) {
    .es-banner { border-radius: 18px; margin-bottom: 2rem; }
    .es-banner img { aspect-ratio: 4 / 3; }
    .es-banner-scrim {
        background: linear-gradient(to top, rgba(7, 26, 54, .95) 0%, rgba(7, 26, 54, .62) 38%, rgba(7, 26, 54, .1) 68%, transparent 85%);
    }
    .es-banner-caption {
        inset-inline: .9rem;
        inset-block-end: .9rem;
        gap: .7rem;
    }
    .es-banner-text { font-size: .88rem; line-height: 1.4; }
    /* Un seul point clé conservé pour ne pas surcharger */
    .es-banner-points { inset-block-start: .8rem; inset-inline-start: .9rem; }
    .es-banner-points li:nth-child(n + 2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .es-banner img,
    .es-banner:hover img { transition: none; transform: none; }
}