/* ============================================================
   NEXAS — hero-flow.css
   Animation Project Control Flow (page d'accueil uniquement)
   ============================================================ */

/* ===== Hero — Project Control Flow animation ===== */
.hero-flow{
  position:absolute; right:80px; top:50%;
  transform:translateY(-50%);
  width:720px; height:440px; z-index:-1;
  pointer-events:auto;
}
@media (max-width: 1280px){
  .hero-flow{ right:64px; width:640px; height:400px; }
}
@media (max-width: 1100px){
  .hero-flow{ right:48px; width:560px; height:360px; }
}
.hero-flow .flow-wrap{position:relative;width:100%;height:100%}
.hero-flow .flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.hero-flow .track{
  fill:none;stroke:url(#nxBrandGrad);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation: nxTrace 6s linear 2.3s forwards;
}
.hero-flow .track-glow{
  fill:none;stroke:rgba(22,135,199,.07);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation: nxTrace 6s linear 2.3s forwards;
}

.hero-flow .node{ opacity:0; transform-box:fill-box; transform-origin:center; }
.hero-flow .node .step{
  font-family:var(--font-body);font-size:17px;font-weight:600;letter-spacing:.18em;fill:#94a3b8;
}
.hero-flow .node .label{
  font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.02em;fill:var(--ink-900,#0b1f33);
}
.hero-flow .node .desc{
  font-family:var(--font-body);font-size:18px;fill:var(--ink-600,#64748b);
}
.hero-flow .n1{ animation: nxNodeIn 1.0s cubic-bezier(.2,.7,.2,1) 2.6s forwards }
.hero-flow .n2{ animation: nxNodeIn 1.0s cubic-bezier(.2,.7,.2,1) 4.5s forwards }
.hero-flow .n3{ animation: nxNodeIn 1.0s cubic-bezier(.2,.7,.2,1) 6.3s forwards }
.hero-flow .n4{ animation: nxNodeIn 1.0s cubic-bezier(.2,.7,.2,1) 8.1s forwards }
/* micro-interaction : halo pulsé (façon badge "Disponible") quand la bille traverse */
.hero-flow .node .dot{ transform-box: fill-box; transform-origin: center; }
.hero-flow .node .ring{ transform-box: fill-box; transform-origin: center; }
.hero-flow .n1 .dot { animation: nxDotPop1 18s ease-in-out 8.5s infinite }
.hero-flow .n2 .dot { animation: nxDotPop2 18s ease-in-out 8.5s infinite }
.hero-flow .n3 .dot { animation: nxDotPop3 18s ease-in-out 8.5s infinite }
.hero-flow .n4 .dot { animation: nxDotPop4 18s ease-in-out 8.5s infinite }
.hero-flow .n1 .mark .ring:first-of-type{ animation: nxHalo1 18s ease-out 8.5s infinite }
.hero-flow .n2 .mark .ring:first-of-type{ animation: nxHalo2 18s ease-out 8.5s infinite }
.hero-flow .n3 .mark .ring:first-of-type{ animation: nxHalo3 18s ease-out 8.5s infinite }
.hero-flow .n4 .mark .ring:first-of-type{ animation: nxHalo4 18s ease-out 8.5s infinite }

.hero-flow .pulse{
  fill:#fff;
  filter: drop-shadow(0 0 6px rgba(22,135,199,.85));
  offset-path: path('M 60 240 L 825 240');
  animation: nxPulse 18s linear 8.5s infinite;
  opacity:0;
}

/* logo zones */
.hero-flow .logo-zone{
  position:absolute;left:0;right:0;
  display:flex;justify-content:center;align-items:center;gap:18px;
  pointer-events:none;height:80px;
}
.hero-flow .logo-zone.top   { top: 4%; }
.hero-flow .logo-zone.bottom{ bottom: 4%; }
.hero-flow .lbadge{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  width:128px;height:58px;background:#fff;
  border:1px solid var(--border,#e6ebf2);border-radius:12px;
  box-shadow:0 12px 28px -16px rgba(11,31,51,.18), 0 1px 0 rgba(255,255,255,.7) inset;
  opacity:0;transform:translateY(8px) scale(.96);
  animation: nxLogoCycle 32s ease-in-out infinite;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  position:relative;
}
.hero-flow .lbadge:hover{
  border-color:var(--nexas-blue,#1687c7);
  box-shadow:0 16px 36px -16px rgba(22,135,199,.4);
  transform:translateY(-3px) scale(1);
}
.hero-flow .lbadge img{ max-width:78%;max-height:62%;object-fit:contain;display:block; }
.hero-flow .lbadge .tip{
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#0b1f33;color:#e9eef5;
  font-family:var(--font-body);font-size:11.5px;line-height:1.4;
  padding:9px 12px;border-radius:8px;width:200px;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 16px 32px -16px rgba(11,31,51,.5);z-index:10;
}
.hero-flow .lbadge .tip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#0b1f33;
}
.hero-flow .lbadge:hover .tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.hero-flow .lbadge.bottom .tip{ bottom:auto;top:calc(100% + 10px) }
.hero-flow .lbadge.bottom .tip::after{ top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#0b1f33 }
.hero-flow .lb-1{ animation-delay: 3.0s }
.hero-flow .lb-2{ animation-delay: 9.5s }
.hero-flow .lb-3{ animation-delay: 16.0s }
.hero-flow .lb-4{ animation-delay: 22.5s }
.hero-flow .lb-5{ animation-delay: 29.0s }

/* hotspots */
.hero-flow .ms-tip{
  position:absolute;transform:translate(-50%, -100%) translateY(-14px);
  background:#0b1f33;color:#e9eef5;
  font-family:var(--font-body);font-size:11.5px;line-height:1.4;
  padding:9px 12px;border-radius:8px;width:190px;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 16px 32px -16px rgba(11,31,51,.5);z-index:9;
}
.hero-flow .ms-tip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#0b1f33;
}
.hero-flow .ms-hot{
  position:absolute;width:60px;height:60px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:transparent;border:0;padding:0;margin:0;outline:none;
  cursor:pointer;z-index:8;-webkit-appearance:none;appearance:none;
}
.hero-flow .ms-hot:focus-visible{box-shadow:0 0 0 3px rgba(22,135,199,.35)}
.hero-flow .ms-hot:hover + .ms-tip,
.hero-flow .ms-hot:focus + .ms-tip{ opacity:1; transform:translate(-50%,-100%) translateY(-18px) }

@keyframes nxTrace { to { stroke-dashoffset:0 } }
/* Tracé calibré : la ligne atteint chaque node pile au moment de son apparition.
   Délai 2.3s + durée 3.1s → fin à 5.4s, en phase avec n1=3.3s, n2=4.0s, n3=4.7s, n4=5.4s.
   Path 60→825 (pathLength=1000) ; nodes à 5.2 / 36 / 66.7 / 97.4 % */
@keyframes nxTraceCal {
  0%    { stroke-dashoffset: 1000 }
  32.3% { stroke-dashoffset: 948 }
  54.8% { stroke-dashoffset: 640 }
  77.4% { stroke-dashoffset: 333 }
  100%  { stroke-dashoffset: 0 }
}
@keyframes nxNodeIn {
  0%   { opacity:0; transform:scale(.5) translateY(6px) }
  55%  { opacity:1; transform:scale(1.05) translateY(0) }
  100% { opacity:1; transform:scale(1) translateY(0) }
}
@keyframes nxPulse{
  0%{ offset-distance:0%; opacity:0 }
  8%{ opacity:.9 }
  92%{ opacity:.9 }
  100%{ offset-distance:100%; opacity:0 }
}
/* bandeaux transverses — entrée staggered + marche continue des tirets vers la pastille */
.hero-flow .umbrella{ opacity:1; }
.hero-flow .umb-bottom > *{ opacity:0; }
.hero-flow .umb-label{
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.16em;
}

/* 1. Crochets verticaux + lignes pointillées : fade in, puis tirets en marche vers la pastille */
.hero-flow .umb-bottom line{ animation: nxUmbFade .5s ease-out 8.3s forwards; }
.hero-flow .umb-bottom line[x1="100"][y1="365"]{
  animation: nxUmbFade .5s ease-out 8.3s forwards,
             nxMarchToPill 5s linear 9s infinite;
}
.hero-flow .umb-bottom line[x1="568"][y1="365"]{
  animation: nxUmbFade .5s ease-out 8.3s forwards,
             nxMarchFromPill 5s linear 9s infinite;
}

/* 2. Pastille : pop-scale avec léger halo vert, puis respiration douce continue */
.hero-flow .umb-bottom rect{
  transform-box: fill-box; transform-origin: center;
  transform: scale(.7);
  animation: nxUmbPill .85s cubic-bezier(.34,1.5,.6,1) 8.7s forwards,
             nxUmbPillGlow 3.6s ease-in-out 9.7s infinite;
}

/* 3. Texte : fade-in en dernier */
.hero-flow .umb-bottom text{
  animation: nxUmbFade .5s ease-out 9.1s forwards;
}

@keyframes nxUmbFade{ to { opacity:1 } }
@keyframes nxMarchToPill   { to { stroke-dashoffset: -49 } }
@keyframes nxMarchFromPill { to { stroke-dashoffset:  49 } }
@keyframes nxUmbPill{
  0%   { transform: scale(.7);  opacity:0; }
  55%  { transform: scale(1.06);opacity:1; filter: drop-shadow(0 0 10px rgba(69,173,78,.55)); }
  100% { transform: scale(1);   opacity:1; filter: drop-shadow(0 0 0 rgba(69,173,78,0)); }
}
@keyframes nxUmbPillGlow{
  0%,100% { filter: drop-shadow(0 0 0 rgba(69,173,78,0)) }
  50%     { filter: drop-shadow(0 0 6px rgba(69,173,78,.4)) }
}

/* sync : pulse façon badge "Disponible" — léger pop du dot + halo qui s'élargit
   Path 60→825 (765px). Nodes à x=100,335,570,805 → 5.2% / 36% / 66.7% / 97.4% */
@keyframes nxDotPop1 { 0%,3%,9%,100% { transform: scale(1); } 5.2%  { transform: scale(1.18); } }
@keyframes nxDotPop2 { 0%,34%,40%,100%{ transform: scale(1); } 36%   { transform: scale(1.18); } }
@keyframes nxDotPop3 { 0%,64%,70%,100%{ transform: scale(1); } 66.7% { transform: scale(1.18); } }
@keyframes nxDotPop4 { 0%,95%,99%,100%{ transform: scale(1); } 97.4% { transform: scale(1.18); } }

@keyframes nxHalo1 {
  0%,3%,100% { transform: scale(1); opacity:.35 }
  5.2%       { transform: scale(1); opacity:.55 }
  11%        { transform: scale(2.0); opacity:0 }
}
@keyframes nxHalo2 {
  0%,34%,100%{ transform: scale(1); opacity:.35 }
  36%        { transform: scale(1); opacity:.55 }
  42%        { transform: scale(2.0); opacity:0 }
}
@keyframes nxHalo3 {
  0%,64%,100%{ transform: scale(1); opacity:.35 }
  66.7%      { transform: scale(1); opacity:.55 }
  72.5%      { transform: scale(2.0); opacity:0 }
}
@keyframes nxHalo4 {
  0%,95%,100%{ transform: scale(1); opacity:.35 }
  97.4%      { transform: scale(1); opacity:.55 }
  99.8%      { transform: scale(2.0); opacity:0 }
}

@keyframes nxLogoCycle{
  0%,1%   { opacity:0; transform:translateY(8px) scale(.96) }
  5%,38%  { opacity:1; transform:translateY(0) scale(1) }
  44%,100%{ opacity:0; transform:translateY(-8px) scale(.96) }
}

/* ===== MOBILE: hide the desktop SVG, show the animated vertical version ===== */
@media (max-width: 960px){
  .hero-flow{ display:none; }
}

/* ===== Version mobile (verticale, HTML pur, animée) ===== */
.flow-mobile{ display:none; }
@media (max-width: 960px){
  .flow-mobile{
    display:block;margin:36px 0 8px;padding:24px 22px 22px;
    border:1px solid var(--border,#e6ebf2);border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);
    box-shadow:0 14px 36px -22px rgba(11,31,51,.18);
  }
  .fm-umbrella{
    display:flex;justify-content:center;
  }
  .fm-umbrella .pill{
    font-family:var(--font-body);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;background:#fff;
  }
  .fm-umbrella.top    .pill{ color:var(--nexas-blue,#1687c7);  border:1px solid #cde6f4; }
  .fm-umbrella.bottom .pill{ color:var(--nexas-green,#45ad4e); border:1px solid #d0ecd2; }

  .fm-track{
    position:relative;margin:18px 0;padding:8px 0 8px 28px;
  }
  .fm-track::before{
    content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;
    background:linear-gradient(180deg,#7a8892 0%,#1687c7 35%,#45ad4e 100%);
    border-radius:2px;opacity:.85;
  }
  .fm-step{
    position:relative;padding:10px 0;
  }
  .fm-step + .fm-step{ margin-top:4px; }
  .fm-mark{
    position:absolute;left:-22px;top:14px;
    width:14px;height:14px;border-radius:50%;
    background:#fff;border:2.5px solid;
    box-shadow:0 0 0 4px #fff;
  }
  .fm-mark.grey  { border-color:#7a8892; background:#7a8892; }
  .fm-mark.blue  { border-color:var(--nexas-blue,#1687c7);  background:var(--nexas-blue,#1687c7); }
  .fm-mark.green { border-color:var(--nexas-green,#45ad4e); background:var(--nexas-green,#45ad4e); }
  .fm-num{
    font-family:var(--font-body);font-size:12px;font-weight:600;
    letter-spacing:.18em;color:#94a3b8;margin-bottom:2px;
  }
  .fm-num.livre{ color:var(--nexas-green,#45ad4e); }
  .fm-label{
    font-family:var(--font-display);font-size:16px;font-weight:700;
    letter-spacing:.01em;color:var(--ink-900,#0b1f33);margin-bottom:2px;
  }
  .fm-desc{
    font-family:var(--font-body);font-size:13px;color:var(--ink-600,#64748b);
  }

  .fm-logos{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
    padding-top:18px;margin-top:14px;border-top:1px dashed rgba(15,23,42,.08);
  }
  .fm-logos .lbox{
    display:flex;align-items:center;justify-content:center;
    width:96px;height:42px;background:#fff;
    border:1px solid var(--border,#e6ebf2);border-radius:10px;
  }
  .fm-logos .lbox img{ max-width:78%;max-height:62%;object-fit:contain;display:block; }

  /* ===== ANIMATIONS ===== */
  /* The vertical gradient line draws itself top→bottom */
  .fm-track::before{
    transform-origin: top;
    transform: scaleY(0);
    animation: fmTrace 2.4s .3s cubic-bezier(.4,0,.2,1) forwards;
  }
  /* A pulse dot travels down the line, looping */
  .fm-track::after{
    content:""; position:absolute;
    left:11px; top:14px; width:6px; height:6px;
    margin-left:-2px; border-radius:50%;
    background:var(--nexas-blue,#1687c7);
    box-shadow:0 0 12px rgba(22,135,199,.55);
    opacity:0;
    animation: fmPulse 4.5s 2.8s ease-in-out infinite;
    z-index:1;
  }
  /* Each step fades in sequentially */
  .fm-step{
    opacity:0; transform:translateY(8px);
    animation: fmStepIn .8s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .fm-step:nth-child(1){ animation-delay:.6s; }
  .fm-step:nth-child(2){ animation-delay:1.2s; }
  .fm-step:nth-child(3){ animation-delay:1.8s; }
  .fm-step:nth-child(4){ animation-delay:2.4s; }
  /* Final green dot keeps a soft halo */
  .fm-step:nth-child(4) .fm-mark{
    animation: fmMarkPulse 2.4s 3s ease-out infinite;
  }
  /* Umbrella + logos fade in once the pipeline is drawn */
  .fm-umbrella{ opacity:0; animation: fmFadeIn .7s ease-out 3s forwards; }
  .fm-logos{    opacity:0; animation: fmFadeIn .7s ease-out 3.3s forwards; }
  .fm-logos .lbox{ opacity:0; animation: fmFadeIn .5s ease-out forwards; }
  .fm-logos .lbox:nth-child(1){ animation-delay:3.4s; }
  .fm-logos .lbox:nth-child(2){ animation-delay:3.55s; }
  .fm-logos .lbox:nth-child(3){ animation-delay:3.7s; }
  .fm-logos .lbox:nth-child(4){ animation-delay:3.85s; }
  .fm-logos .lbox:nth-child(5){ animation-delay:4s; }
}

/* keyframes (mobile pipeline) */
@keyframes fmTrace   { to { transform: scaleY(1); } }
@keyframes fmStepIn  { to { opacity:1; transform: translateY(0); } }
@keyframes fmFadeIn  { to { opacity:1; } }
@keyframes fmPulse   {
  0%   { opacity:0; top:14px; }
  8%   { opacity:1; }
  85%  { opacity:1; top:calc(100% - 14px); }
  100% { opacity:0; top:calc(100% - 14px); }
}
@keyframes fmMarkPulse{
  0%,100% { box-shadow:0 0 0 4px #fff, 0 0 0 0 rgba(69,173,78,.55); }
  50%     { box-shadow:0 0 0 4px #fff, 0 0 0 10px rgba(69,173,78,0); }
}

/* Reduced motion : neutralise toutes les animations */
@media (prefers-reduced-motion: reduce){
  .flow-mobile *{ animation:none !important; }
  .hero-flow .track{stroke-dashoffset:0;animation:none}
  .hero-flow .node{opacity:1 !important;transform:none !important;animation:none !important}
  .hero-flow .pulse{display:none}
  .hero-flow .lbadge{opacity:1 !important;transform:none !important;animation:none !important}
  .hero-flow .umbrella{opacity:1 !important;animation:none !important}
}