/* FJ Paie & SIRH — styles spécifiques : animations, hero Excel fake, carrousels */

/* ── HERO TOP ACCENT LINE (shimmer) ───────────── */
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:4;
  background:linear-gradient(90deg,var(--teal),var(--brand-light),var(--teal));
  background-size:300% 100%;
  animation:shimmerLine 4s linear infinite;
}
@keyframes shimmerLine{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── DECORATIVE EXCEL SPREADSHEET ─────────────── */
.hero-excel{
  position:absolute;right:-55px;top:50%;
  transform:translateY(-50%) rotate(-6deg);
  width:480px;z-index:1;opacity:0.18;
  pointer-events:none;border-radius:10px;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,0.14),0 4px 16px rgba(0,0,0,0.07);
  background:#fff;font-size:10.5px;font-family:'DM Sans',sans-serif;color:#444;
  animation:excelFloat 14s ease-in-out infinite alternate;
}
@keyframes excelFloat{
  from{transform:translateY(-50%) rotate(-6deg)}
  to{transform:translateY(-48%) rotate(-5.2deg) translateX(-10px)}
}
.xl-topbar{
  background:#1D6F42;color:#fff;padding:7px 12px;font-size:10px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.xl-dots{display:flex;gap:5px}
.xl-dots span{width:9px;height:9px;border-radius:50%;opacity:0.75}
.xl-ribbon{
  background:#F3F3F3;border-bottom:1px solid #D0D0D0;
  display:flex;padding:0;
}
.xl-tab{font-size:9.5px;padding:4px 14px;border-right:1px solid #D0D0D0;color:#555}
.xl-tab.active{background:#fff;color:#1D6F42;font-weight:700;border-bottom:2px solid #1D6F42;margin-bottom:-1px}
.xl-fbar{
  background:#F8F8F8;border-bottom:1px solid #E0E0E0;
  padding:3px 10px;font-size:9.5px;color:#888;display:flex;gap:8px;align-items:center;
}
.xl-ref{width:40px;border:1px solid #B8B8B8;border-radius:2px;padding:2px 4px;text-align:center;background:#fff;font-size:9.5px}
.xl-cols{
  display:grid;grid-template-columns:28px 88px 82px 68px 68px 82px;
  background:#EBEBEB;border-bottom:2px solid #C0C0C0;
}
.xl-ch{padding:3px 4px;font-size:9.5px;color:#555;text-align:center;border-right:1px solid #C8C8C8}
.xl-ch.rn{color:#888;font-size:9px}
.xl-row{
  display:grid;grid-template-columns:28px 88px 82px 68px 68px 82px;
  border-bottom:1px solid #E8E8E8;
}
.xl-row:nth-child(even){background:#FAFAFA}
.xl-row.sel{background:#EAF5ED}
.xl-rn{font-size:9.5px;padding:4px 3px;text-align:right;color:#999;background:#F0F0F0;border-right:1px solid #C8C8C8}
.xl-row.sel .xl-rn{background:#1D6F42;color:#fff;font-weight:700}
.xl-c{padding:4px 6px;font-size:10px;border-right:1px solid #EBEBEB;overflow:hidden;white-space:nowrap}
.xl-c.hd{font-weight:700;background:#F0F0F0;font-size:9.5px;color:#333}
.xl-c.r{text-align:right;font-family:monospace;font-size:9.5px}
.xl-c.ok{color:#1D6F42;font-weight:700}
.xl-c.warn{color:#C47400}
@media(max-width:768px){
  .hero-excel{display:none}
}

/* ── EYEBROW PULSE DOT ────────────────────────── */
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}
  55%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
}

/* ── WORD CAROUSEL ────────────────────────────── */
.hero-words-slot{
  position:relative;overflow:hidden;
  height:1.5em;min-width:260px;
}
@media(max-width:768px){
  .hero-words-slot{min-width:200px}
}
.hero-word-item{
  position:absolute;top:0;left:0;
  opacity:0;transform:translateY(80%);
  color:var(--teal);font-style:italic;white-space:nowrap;
  animation:wordCycle 16s cubic-bezier(0.4,0,0.2,1) infinite;
}
.hero-word-item:nth-child(1){animation-delay:0s}
.hero-word-item:nth-child(2){animation-delay:4s}
.hero-word-item:nth-child(3){animation-delay:8s}
.hero-word-item:nth-child(4){animation-delay:12s}
@keyframes wordCycle{
  0%  {opacity:0;transform:translateY(80%)}
  7%  {opacity:1;transform:translateY(0)}
  22% {opacity:1;transform:translateY(0)}
  28% {opacity:0;transform:translateY(-80%)}
  100%{opacity:0;transform:translateY(-80%)}
}

/* ── HERO CTA SHIMMER ─────────────────────────── */
.hero-cta::after{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
  animation:shimmerBtn 4s ease-in-out infinite 2.5s;
}
@keyframes shimmerBtn{0%{left:-100%}50%,100%{left:160%}}

/* ── HERO ENTRANCE ────────────────────────────── */
@keyframes fadeUpHero{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── SCROLL PROGRESS ─────────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--teal),#4ade80,var(--teal));
  background-size:200% 100%;
  transform-origin:left center;transform:scaleX(0);
  z-index:300;pointer-events:none;
}

/* ── SCROLL-TO-TOP ────────────────────────────────── */
#scroll-top{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:150;
  width:44px;height:44px;border-radius:12px;
  background:var(--brand);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;cursor:pointer;
  box-shadow:0 4px 16px rgba(14,61,37,0.3);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity 0.3s,transform 0.3s,background 0.2s;
  border:none;
}
#scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#scroll-top:hover{background:var(--teal);box-shadow:0 8px 24px rgba(33,115,70,0.4)}
#scroll-top:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── SCROLL ANIMATIONS ───────────────────────── */
/* Spring easing — feel natural, not mechanical */
[data-animate]{
  opacity:0;transform:translateY(36px) scale(0.97);
  transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),
             transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
[data-animate].in-view{opacity:1;transform:translateY(0) scale(1)}

/* Slide from left — section titles & eyebrows */
[data-animate="left"]{
  opacity:0;transform:translateX(-32px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),
             transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-animate="left"].in-view{opacity:1;transform:translateX(0)}

/* Slide from right */
[data-animate="right"]{
  opacity:0;transform:translateX(32px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),
             transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-animate="right"].in-view{opacity:1;transform:translateX(0)}

/* Scale up — stat cards, callouts */
[data-animate="scale"]{
  opacity:0;transform:scale(0.93);
  transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1),
             transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
[data-animate="scale"].in-view{opacity:1;transform:scale(1)}

/* ── TECH STACK INFINITE CAROUSEL ─────────────── */
.tech-strip-label{
  font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gray);margin:1.75rem 0 0.6rem;display:block;
}
.tech-strip{overflow:hidden;border-top:1px solid rgba(33,115,70,0.08);border-bottom:1px solid rgba(33,115,70,0.08);padding:0.6rem 0}
.tech-strip-track{
  display:flex;gap:0.75rem;width:max-content;
  animation:techMarquee 30s linear infinite;
}
.tech-strip-track:hover{animation-play-state:paused}
@keyframes techMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tech-pill{
  display:inline-flex;align-items:center;
  padding:0.3rem 0.9rem;
  background:rgba(33,115,70,0.06);border:1px solid rgba(33,115,70,0.12);
  border-radius:20px;font-size:0.79rem;font-weight:600;color:var(--teal-mid);
  white-space:nowrap;
}

/* ── REDUCED MOTION ───────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero-excel,.eyebrow-dot,.cta-avail-dot,.hero-cta::after{animation:none}
  .hero-eyebrow,.hero-brand,.hero-tagline,.hero-sub,
  .hero-actions,.hero-stats{animation:none;opacity:1;transform:none}
  .hero-word-item{animation:none}
  .hero-word-item:first-child{opacity:1;transform:none}
  [data-animate],[data-animate="left"],[data-animate="right"],[data-animate="scale"]{
    opacity:1;transform:none;transition:none;
  }
  .tech-strip-track{animation:none}
}