/* EasyVola — images, arrière-plans et animations (chargé après style.css) */
.ico3d { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.svc-ico { background: none; width: 72px; height: 72px; border-radius: 0; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.svc-tile .svc-ico { width: 88px; height: 88px; }
.detail-head .svc-ico { width: 46px; height: 46px; background: none; }
.summary li .ico3d { width: 30px; height: 30px; flex: none; }
.recap-item h3 .ico3d { width: 34px; height: 34px; flex: none; }

/* En-tête */
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(15, 30, 69, .1); }

/* Hero : photo + voile dégradé */
.hero { position: relative; overflow: hidden; isolation: isolate; background: #0d1b47; }
.hero-bg { position: absolute; inset: -4%; z-index: -1; background: url(../assets/img/hero.webp) 80% center / cover no-repeat; animation: drift 28s ease-in-out infinite alternate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(13, 27, 71, .82) 0%, rgba(22, 44, 110, .5) 50%, rgba(30, 58, 138, .12) 100%); }
@keyframes drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); } }
.hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-side { position: relative; animation: rise .8s .2s cubic-bezier(.2, .7, .2, 1) both; }
.float { position: absolute; z-index: 2; width: 92px; height: 92px; padding: 12px; object-fit: contain; background: #fff; border-radius: 24px; box-shadow: 0 14px 34px rgba(5, 12, 40, .35); animation: bob 5.5s ease-in-out infinite; display: none; }
.float.f1 { top: -44px; left: -56px; --r: -8deg; }
.float.f2 { bottom: 34px; left: -66px; --r: 6deg; animation-delay: -1.8s; width: 80px; height: 80px; }
.float.f3 { top: -34px; right: -26px; --r: 9deg; animation-delay: -3.4s; width: 76px; height: 76px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 3deg)); } }
@media (min-width: 1100px) { .float { display: block; } }

/* Sections sur fond de ciel */
.section-sky { position: relative; background:
  radial-gradient(900px 380px at 12% 0%, rgba(37, 99, 235, .10), transparent 70%),
  radial-gradient(700px 340px at 92% 100%, rgba(234, 88, 12, .09), transparent 70%),
  linear-gradient(180deg, #f5f8ff, #edf3ff); }

/* Cartes de service */
.svc-tile { justify-items: start; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.svc-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: #b9cdf3; }
.svc-tile:hover .svc-ico, .svc-card:hover .svc-ico { transform: scale(1.1) rotate(-4deg); }
.svc-card:has(input:checked) .svc-ico { animation: pop .38s cubic-bezier(.34, 1.56, .64, 1); }
.svc-card:has(input:checked) .tick { animation: pop .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* Comment ça marche */
.how-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.how-photo { position: relative; margin: 0; }
.how-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-2); }
.how-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: -26px; display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-2); font-size: .92rem; color: var(--muted); animation: bob 6s ease-in-out infinite; }
.how-photo figcaption img { width: 52px; height: 52px; flex: none; }
.how-photo figcaption strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1rem; }
@media (min-width: 900px) { .how-photo figcaption { left: auto; right: -24px; max-width: 320px; } }
.steps-col { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.steps-col li { position: relative; display: flex; gap: 16px; padding: 14px; border-radius: 16px; }
.steps-col li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 33px; top: 58px; bottom: -10px; width: 2px; background: linear-gradient(var(--navy), var(--border)); }
.steps-col .step-num { flex: none; position: relative; z-index: 1; }
.steps-col h3 { font-size: 1.1rem; margin-bottom: 4px; }
.steps-col p { color: var(--muted); }

/* Packs */
.pack-top { display: flex; gap: 14px; align-items: center; }
.pack-ico { width: 64px; height: 64px; flex: none; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.pack { transition: transform .25s ease, border-color .18s ease, box-shadow .25s ease; }
.pack:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.pack:hover .pack-ico { transform: scale(1.12) rotate(-6deg); }
.pack.featured .pack-badge { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 58, 138, .4); } 50% { box-shadow: 0 0 0 8px rgba(30, 58, 138, 0); } }

/* Bouton principal : reflet */
.btn-cta { position: relative; overflow: hidden; }
.btn-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(194, 65, 12, .36); }

/* Bandeau final : photo */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding: 76px 0; }
.cta-bg { position: absolute; inset: -4%; z-index: -1; background: url(../assets/img/cta.webp) center / cover no-repeat; animation: drift 24s ease-in-out infinite alternate; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 24, 56, .88), rgba(12, 24, 56, .45)); }

/* Assistant et suivi */
#view-wizard, #view-track { background:
  radial-gradient(800px 320px at 0% 0%, rgba(37, 99, 235, .09), transparent 70%),
  radial-gradient(600px 300px at 100% 12%, rgba(234, 88, 12, .07), transparent 70%); }
.detail { animation: rise .4s ease-out both; }
.detail:nth-child(2) { animation-delay: .05s; }
.detail:nth-child(3) { animation-delay: .1s; }
.detail:nth-child(4) { animation-delay: .15s; }
.track-art { width: 96px; height: 96px; mix-blend-mode: multiply; animation: bob 5s ease-in-out infinite; margin-bottom: 8px; }

/* Confirmation */
.confirm-art { position: relative; width: 200px; height: 96px; margin: 0 auto 12px; }
.confirm-art .confirm-ico { position: absolute; left: 50%; top: 14px; margin: 0 0 0 -34px; animation: pop .5s .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.confirm-plane { position: absolute; width: 64px; height: 64px; right: 0; top: 0; animation: fly 1.1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fly { from { opacity: 0; transform: translate(-190px, 60px) rotate(-18deg) scale(.6); } to { opacity: 1; transform: translate(0, 0) rotate(8deg) scale(1); } }
.timeline li { animation: rise .45s ease-out both; }
.timeline li:nth-child(1) { animation-delay: .5s; }
.timeline li:nth-child(2) { animation-delay: .62s; }
.timeline li:nth-child(3) { animation-delay: .74s; }
.timeline li:nth-child(4) { animation-delay: .86s; }
.timeline li.current .dot { animation: ring 1.8s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .45); } 100% { box-shadow: 0 0 0 12px rgba(194, 65, 12, 0); } }

/* Apparition au défilement */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease-out var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
.svc-tile[data-reveal].in:hover, .pack[data-reveal].in:hover { transform: translateY(-6px); transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .hero-bg, .cta-bg, .float, .how-photo figcaption, .track-art, .btn-cta::after { animation: none !important; }
}

/* Logo EasyVola (image) */
.logo img { display: block; height: 44px; width: auto; }
.logo-light img { height: 48px; }
@media (max-width: 480px) { .site-header .logo img { height: 32px; } }

/* Vidéo de présentation */
.promo { background: linear-gradient(180deg, #edf3ff, #f5f8ff); }
.promo-frame { max-width: 960px; margin-inline: auto; border-radius: 22px; overflow: hidden; background: #0c1838; box-shadow: var(--shadow-2); border: 1px solid var(--border); }
.promo-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #f5f8ff; }