/* inner-motion.css — Animations pages internes */
/* ASYNC — media="print" onload="this.media='all'" */

/* --- Mouvement reduit --- */
@media (prefers-reduced-motion:reduce){.motion-reveal,.motion-reveal-left,.motion-reveal-right{opacity:1!important;transform:none!important;transition:none!important}}

/* --- Reveals directionnels --- */
.motion-reveal{opacity:0;transform:translateY(30px);transition:opacity var(--dur-normal) var(--ease-out-expo),transform var(--dur-normal) var(--ease-out-expo)}
.motion-reveal.in-view{opacity:1;transform:translateY(0)}
.motion-reveal-left{opacity:0;transform:translateX(-40px);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.motion-reveal-right{opacity:0;transform:translateX(40px);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.motion-reveal-left.in-view,.motion-reveal-right.in-view{opacity:1;transform:translateX(0)}

/* --- Stagger delays --- */
.stagger-1{transition-delay:.1s}
.stagger-2{transition-delay:.2s}
.stagger-3{transition-delay:.3s}
.stagger-4{transition-delay:.4s}
.stagger-5{transition-delay:.5s}

/* --- Hero pages internes (gradient + orbes) --- */
.hero--page{background:var(--gradient-hero);color:#fff;padding-block:80px 60px;position:relative;overflow:hidden}
.hero--page::before{content:'';position:absolute;top:-30%;right:-15%;width:600px;height:600px;background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:innerOrbFloat 18s ease-in-out infinite alternate}
.hero--page::after{content:'';position:absolute;bottom:-25%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(219,234,254,.06) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:innerOrbFloat 14s ease-in-out infinite alternate-reverse}
@keyframes innerOrbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-20px) scale(1.08)}}
.hero--page .container{position:relative;z-index:1}

/* Animation entree hero pages */
.hero--page .hero-enter{opacity:0;transform:translateY(30px);animation:innerHeroEnter var(--dur-slow) var(--ease-out-expo) forwards}
.hero--page .hero-enter:first-child{animation-delay:.1s}
.hero--page .hero-enter:nth-child(2){animation-delay:250ms}
.hero--page .hero-enter:nth-child(3){animation-delay:.4s}
.hero--page .hero-enter:nth-child(4){animation-delay:550ms}
.hero--page .hero-enter:nth-child(5){animation-delay:.7s}
.hero--page .hero-enter:nth-child(6){animation-delay:850ms}
@keyframes innerHeroEnter{to{opacity:1;transform:translateY(0)}}

/* Hero inner content */
.hero--page .hero__inner{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;min-width:0}
.hero--page .hero__content{min-width:0;overflow:hidden}
.hero--page .hero__title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:#fff;margin-bottom:16px}
.hero--page .hero__subtitle{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.82);line-height:1.6;margin-bottom:24px;max-width:700px}
.hero--page .hero__subtitle a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hero--page .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero--page .hero__badges{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:0}
.hero--page .hero__badge{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:rgba(255,255,255,.8);font-weight:500}

/* Breadcrumb dans hero */
.hero--page .breadcrumb,.hero--page .breadcrumb a,.hero--page .breadcrumb__item{color:rgba(255,255,255,.7)}
.hero--page .breadcrumb a:hover{color:#fff}

/* --- Eyebrow pill glassmorphism --- */
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);padding:6px 16px;border-radius:999px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;margin-bottom:20px}

/* --- Boutons motion pages internes --- */
.btn-motion--blue{background:var(--color-primary);color:#fff;box-shadow:0 4px 20px rgba(37,99,235,.3)}
.btn-motion--blue:hover{box-shadow:0 8px 30px rgba(37,99,235,.4);color:#fff}

/* --- CTA section motion (fond dark + glow) --- */
.cta-section--motion{padding:100px 0;background:#0F172A;position:relative;overflow:hidden}
.cta-section--motion::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.2) 0%,transparent 70%);animation:ctaMotionGlow 6s ease-in-out infinite alternate}
@keyframes ctaMotionGlow{from{transform:translate(-50%,-50%) scale(1);opacity:.6}to{transform:translate(-50%,-50%) scale(1.3);opacity:1}}

/* --- Content sections --- */
.content-section{padding:80px 0}
.content-section--alt{background:var(--color-bg-alt)}
.content-section--energy{background:var(--color-bg-energy)}
.content-section__body{max-width:800px;margin:0 auto}
.content-section__body h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--color-text);margin-bottom:16px}
.content-section__body h3{font-size:clamp(1.125rem,2vw,1.5rem);font-weight:700;color:var(--color-text);margin-bottom:12px}
.content-section__body p,.content-section__body li{color:var(--color-text-body);line-height:1.7;font-size:1rem}
.content-section__body p{margin-bottom:16px}
.content-section__body a{color:var(--color-primary);font-weight:600}

/* --- Section tag et intro (pages internes) --- */
.section-tag{display:inline-block;background:var(--color-primary-light);color:var(--color-primary-dark);font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.section-intro{text-align:center;max-width:650px;margin:0 auto 56px}
.section-intro h2{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:700;color:var(--color-text);margin-bottom:12px}
.section-intro p{color:var(--color-text-muted);font-size:1.0625rem;line-height:1.6}

/* --- Marquee interne --- */
.inner-marquee{padding:16px 0;background:var(--color-bg-alt);overflow:hidden;border-bottom:1px solid var(--color-border)}
.inner-marquee .marquee-track{display:flex;gap:48px;width:max-content;animation:innerMarquee 30s linear infinite}
@keyframes innerMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Info cards --- */
.info-card{background:var(--color-bg-energy);border:1px solid var(--color-primary-light);border-radius:var(--radius-lg);padding:24px;margin:24px 0}
.info-card--warning{background:#fff7ed;border-color:#fed7aa}
.info-card--dark{background:#0F172A;border-color:#1e293b;color:#e2e8f0}
.info-card__title{font-weight:700;font-size:1rem;margin-bottom:8px}

/* --- Checklists --- */
.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;color:var(--color-text-body);line-height:1.5}
.checklist li svg{flex-shrink:0;margin-top:2px}

/* --- FAQ section --- */
.faq-section{padding:80px 0;background:var(--color-bg-alt)}

/* --- Responsive pages internes --- */
@media (max-width:640px){
.hero--page{padding-block:60px 40px}
.hero--page .hero__actions{flex-direction:column}
.hero--page .hero__actions .btn-motion{width:100%;justify-content:center}
.hero--page .hero__badges{display:none}
.content-section{padding:48px 0}
.cta-section--motion{padding:60px 0}
}