/* Aperçu A : Lumière (clair, slider plein écran en fondu + Ken Burns) */
.hero-a { position: relative; margin-top: calc(-1 * (var(--nav-h) + 10px)); height: min(92vh, 860px); min-height: 600px; overflow: hidden; }
.hero-a .swiper, .hero-a .swiper-slide { height: 100%; }
.hero-a .swiper-slide { position: relative; overflow: hidden; background: #e9eef7; }
.hero-a .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 8s linear; }
.hero-a .swiper-slide-active .hero-bg { transform: scale(1); }
.hero-a .hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245, 247, 251, .95) 0%, rgba(245, 247, 251, .75) 38%, rgba(245, 247, 251, 0) 70%); }
.hero-a .is-dark .hero-veil { background: linear-gradient(90deg, rgba(8, 17, 48, .85) 0%, rgba(8, 17, 48, .35) 55%, transparent 80%); }
.hero-a .hero-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 90px; }
.hero-a .hero-copy { max-width: 620px; }
.hero-a .kicker { display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-a .hero-title { font-size: clamp(36px, 5.6vw, 72px); font-weight: 800; line-height: 1.04; color: var(--navy); margin: 20px 0 16px; }
.hero-a .hero-text { font-size: 19px; color: var(--muted); }
.hero-a .is-dark .hero-title, .hero-a .is-dark .hero-text { color: #fff; }
.hero-a .is-dark .kicker { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.hero-a .is-dark .btn-glass { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); }
.hero-a .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-a .hero-items { position: relative; width: 44%; height: 70%; flex: 0 0 auto; }
.hero-a .hero-items img { position: absolute; max-height: 62%; filter: drop-shadow(0 30px 30px rgba(15, 27, 61, .3)); opacity: 0; transform: translateY(40px) scale(.92); }
.hero-a .hero-items img:nth-child(1) { left: 0; bottom: 8%; }
.hero-a .hero-items img:nth-child(2) { left: 30%; top: 0; max-height: 78%; z-index: 2; }
.hero-a .hero-items img:nth-child(3) { right: 0; bottom: 4%; }
.hero-a .swiper-slide-active .hero-items img { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) calc(.25s + var(--k) * .15s), transform 1.1s var(--ease-spring) calc(.25s + var(--k) * .15s); animation: float 6s ease-in-out calc(1.4s + var(--k) * .7s) infinite; }
@keyframes float { 50% { translate: 0 -12px; } }
.hero-a .hero-controls { position: absolute; z-index: 5; left: 50%; bottom: 28px; transform: translateX(-50%); color: var(--navy); }

/* illustrations vectorielles des slides */
.hero-a .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* fond légèrement assombri : voile clair seulement sous le texte */
.hero-a .has-art .hero-veil { background: radial-gradient(70% 90% at 12% 50%, rgba(240, 244, 252, .85) 0%, rgba(240, 244, 252, .55) 45%, rgba(240, 244, 252, 0) 72%); }
.hero-a .has-art { background: #d6dff2; }
.hero-a .has-art.is-dark .hero-veil { background: linear-gradient(90deg, rgba(8, 17, 48, .7) 0%, rgba(8, 17, 48, 0) 50%); }
.art .enter, .art .bob, .art .float, .art .ring-pulse, .art .spin, .art .blink { transform-box: fill-box; transform-origin: center; }
.art .enter { opacity: 0; transform: translateY(26px) scale(.96); }
.swiper-slide-active .art .enter { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-spring) var(--d, 0s); }
.swiper-slide-active .art .bob { animation: art-bob 6s ease-in-out calc(var(--d, 0s) + 1.2s) infinite; }
.art .bob.b2 { animation-duration: 7s !important; }
.art .bob.b3 { animation-duration: 6.5s !important; }
.art .bob.b4 { animation-duration: 7.5s !important; }
.art .float { animation: art-bob 8s ease-in-out infinite; }
.art .grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.swiper-slide-active .art .grow { transform: none; transition: transform 1s var(--ease-spring) var(--d, 0s); }
.art .flow { stroke-dasharray: 2 12; animation: art-flow 1.4s linear infinite; opacity: .7; }
.art .ring-pulse { animation: art-ring 3.2s var(--ease-out) infinite; }
.art .spin { animation: art-spin 40s linear infinite; }
.art .blink { animation: art-blink 2.4s ease-in-out infinite; }
@keyframes art-bob { 50% { translate: 0 -10px; } }
@keyframes art-flow { to { stroke-dashoffset: -28; } }
@keyframes art-ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes art-spin { to { rotate: 360deg; } }
@keyframes art-blink { 50% { opacity: .25; } }

/* transitions de slide plus propres : pas de flou, mouvement court */
.hero-a .swiper-slide [data-anim] { filter: none; transform: translateY(18px); }
.hero-a .swiper-slide-active [data-anim] { transition: opacity .7s var(--ease-out) .25s, transform .8s var(--ease-out) .25s; }
.hero-a .swiper-slide-active [data-anim]:nth-child(2) { transition-delay: .35s; }
.hero-a .swiper-slide-active [data-anim]:nth-child(3) { transition-delay: .45s; }
.hero-a .swiper-slide-active [data-anim]:nth-child(4) { transition-delay: .55s; }
.hero-a .has-art .art { transform: scale(1.03); transition: transform 1.4s var(--ease-out); }
.hero-a .swiper-slide-active.has-art .art { transform: none; }

@media (max-width: 991.98px) {
  /* l'illustration passe en haut, le texte en bas */
  .hero-a .has-art { background: #e2e8f5; }
  .hero-a .has-art.is-dark { background: #0a1538; }
  .hero-a .art { width: 180%; height: 50%; left: -76%; top: calc(var(--nav-h) + 4px); }
  .hero-a .has-art .hero-veil { background: linear-gradient(180deg, transparent 40%, #e2e8f5 62%); }
  .hero-a .has-art.is-dark .hero-veil { background: linear-gradient(180deg, transparent 40%, #0a1538 62%); }
  .hero-a .has-art .hero-inner { align-items: flex-end; padding-bottom: 116px; }
  .hero-a .hero-title { font-size: clamp(32px, 8.5vw, 44px); }
  .hero-a .hero-items { display: none; }
  .hero-a .hero-veil { background: linear-gradient(180deg, rgba(245, 247, 251, .55), rgba(245, 247, 251, .92) 60%); }
  .hero-a .is-dark .hero-veil { background: rgba(8, 17, 48, .55); }
}