/* ===========================================
   HERO ACCUEIL - Pont d'Arc animé (JS/hero-pont-darc.js)
   Assur'Invest Solutions - 05/11/2026
   Complète CSS/styles.css (.hero) sans le remplacer.
   Les !important l'emportent sur .hero de styles-mobile-fix.css.
   =========================================== */

.hero.hero--anim {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 7rem 0 !important;
    /* photo fixe : visible tout de suite, puis l'animation prend le relais */
    background: var(--color-blue, #0A3D62) url('../Asset/hero/pont-darc.jpg') 50% 45% / cover no-repeat;
}

.hero--anim .hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero--anim .hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.hero--anim .hero-canvas.is-ready { opacity: 1; }

/* Voile bleu marine : garde le titre lisible.
   Élément dédié, car styles-mobile-fix.css neutralise .hero::before */
.hero--anim .hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 80% at 50% 50%, rgba(10, 61, 98, 0.62), rgba(10, 61, 98, 0.38)),
        linear-gradient(0deg, rgba(10, 61, 98, 0.55), rgba(10, 61, 98, 0) 35%);
}

.hero--anim h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hero--anim .hero-content > p { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }

/* Mention IA discrète (AI Act art. 50) */
.hero--anim .hero-ia-note {
    position: absolute;
    right: 12px;
    bottom: 8px;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
    .hero.hero--anim {
        padding: 4rem 0 4.5rem !important;
        background-position: 60% 45%; /* cadre l'arche, comme l'animation */
    }
    .hero.hero--anim h1 { font-size: 1.75rem !important; }
}