/* =========================================================================
   HOMEPAGE "UNE SEULE ÉQUIPE" STEPPER - inc/platform-steps.php
   Front page only, loaded after style.css.

   style.css still carries three older generations of .pgrid-* rules (disc
   carousel, scale-based disc, measured rail). Every rule here is prefixed
   with "html body .pgrid .pgrid-stage[data-pgrid]" so it outranks all of
   them (and the light-theme variants) without !important.

   Geometry, all in CSS on Elementor's own elements:
     [ 24px marker column | label column ]  per row, labels left-aligned
     marker centre   x = --ps-col / 2
                     y = --ps-pad + --ps-lh / 2   (first line of the title)
     rail segment k  = ::before (track) / ::after (fill) of node k, from its
                       marker centre down 100% of the row, i.e. exactly to
                       the next marker centre whatever the row height.
   ========================================================================= */

html body .pgrid .pgrid-stage[data-pgrid]{
  --ps-col:24px;
  --ps-gap:14px;
  --ps-pad:clamp(10px,1vw,14px);
  --ps-lh:24px;
  --ps-dot:12px;
  --ps-t:240ms;
  --ps-ease:cubic-bezier(.2,.7,.2,1);
  --ps-track:rgba(10,13,17,.14);
  --ps-on:var(--accent,#0B4FE0);
  display:grid;
  grid-template-columns:minmax(232px,308px) minmax(0,1fr);
  gap:clamp(26px,3.6vw,64px);
  align-items:center;
  min-height:0;
}
/* the dot field never lined up with the rail and showed through it */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-dots{display:none}
/* the injected rail of the previous version, in case a cached page has one */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-rail{display:none}

/* ---- the list --------------------------------------------------------- */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-nodes{
  position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;gap:0;
  width:100%;margin:0;padding:0;list-style:none;align-self:center;
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node{
  position:relative;display:block;flex:none;width:100%;min-width:0;
  margin:0;padding:0;transform:none;
}

/* rail: one segment per gap, track + fill */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node:not(:last-child)::before,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node:not(:last-child)::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:calc(var(--ps-col) / 2 - 1px);width:2px;
  top:calc(var(--ps-pad) + var(--ps-lh) / 2);height:100%;
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node:not(:last-child)::before{background:var(--ps-track)}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node:not(:last-child)::after{
  background:var(--ps-on);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--ps-seg-dur,var(--ps-t)) var(--ps-seg-ease,var(--ps-ease)) var(--ps-seg-delay,0ms);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-done:not(:last-child)::after{transform:scaleY(1)}

/* ---- a row ------------------------------------------------------------ */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-hit{
  all:unset;box-sizing:border-box;position:relative;z-index:1;
  display:grid;grid-template-columns:var(--ps-col) minmax(0,1fr);column-gap:var(--ps-gap);
  align-items:start;justify-items:start;
  width:100%;min-height:0;padding:var(--ps-pad) 0;
  text-align:left;cursor:pointer;border:0;background:none;border-radius:8px;transform:none;
  -webkit-tap-highlight-color:transparent;
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-hit:focus-visible{outline:2px solid var(--ps-on);outline-offset:2px}

/* marker: centred in its column, on the first line of the title */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-disc,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-disc{
  position:relative;top:auto;left:auto;justify-self:center;
  width:var(--ps-dot);height:var(--ps-dot);
  margin:calc(var(--ps-lh) / 2 - var(--ps-dot) / 2) 0 0;
  border-radius:50%;will-change:auto;
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-disc{
  background:#fff;box-shadow:inset 0 0 0 2px var(--ps-track);transform:none;
  transition:background-color var(--ps-t) var(--ps-ease),box-shadow var(--ps-t) var(--ps-ease),transform var(--ps-t) var(--ps-ease);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-done .pgrid-disc{box-shadow:inset 0 0 0 2px var(--ps-on)}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-disc,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-hit:hover .pgrid-disc{
  background:var(--ps-on);box-shadow:inset 0 0 0 2px var(--ps-on);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-disc{
  transform:scale(1.34);
  transition:background-color var(--ps-t) var(--ps-ease),box-shadow var(--ps-t) var(--ps-ease),transform var(--ps-t) var(--ps-ease);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-disc::after,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-disc::after{content:none;animation:none}

/* labels: one column, title then sub-line; the sub-line row opens with
   grid-template-rows, so the old one closes while the new one opens and the
   list keeps its height */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-body,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-body{
  display:grid;grid-template-rows:auto 0fr;row-gap:0;justify-items:start;align-items:stretch;align-content:start;
  width:100%;min-width:0;max-width:none;margin:0;text-align:left;transform:none;
  transition:grid-template-rows var(--ps-t) var(--ps-ease);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-body{grid-template-rows:auto 1fr}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-ic{display:none}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-title,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-title{
  font-family:var(--f-display);font-size:clamp(15px,1.2vw,17px);font-weight:500;
  line-height:var(--ps-lh);white-space:normal;
  transition:color var(--ps-t) var(--ps-ease);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-title{color:var(--ink-3)}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-title,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-hit:hover .pgrid-title{color:var(--ink)}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-sub,
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-sub{
  display:block;min-height:0;max-height:none;overflow:hidden;margin:0;padding:0;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);transform:none;
  transition:opacity var(--ps-t) var(--ps-ease);
}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-sub{opacity:0}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-sub{opacity:1}

/* ---- the scene -------------------------------------------------------- */
/* In the markup from the first byte; the viewBox gives the SVG its height
   before anything paints. */
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-scene{display:block;position:relative;z-index:2;width:100%;min-width:0}
html body .pgrid .pgrid-stage[data-pgrid] .pgrid-scene svg{display:block;width:100%;height:auto;overflow:visible}

html body .pgrid .pgrid-stage[data-pgrid] .pgs-o{stroke:#93A6C3;stroke-width:1.6;transition:stroke var(--ps-t) var(--ps-ease)}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-d{stroke:#B3C2D8;stroke-width:1.4}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-a{stroke:#7FA2E4;stroke-width:1.5}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-room{opacity:.75}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-shelf{fill:#E6EDF8;stroke:#C9D5E6;stroke-width:1.2}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-leaf{fill:#D6E2F6}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-stem{stroke:#C4D3EA;stroke-width:2}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-bar{stroke:#AFC0D8;stroke-width:5}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-led{fill:#5B8DEF}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-icon{stroke:#3F74E0;stroke-width:1.8}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-tick{stroke:#1F5BD8;stroke-width:1.8}
html body .pgrid .pgrid-stage[data-pgrid] text.pgs-247{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.02em;fill:#1F5BD8}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-online{fill:#34C27A;stroke:#fff;stroke-width:2}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-cable{stroke:#5B8DEF;stroke-width:2;stroke-dasharray:10 8}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-signal-bg{stroke:#B9D0F8;stroke-width:2;stroke-dasharray:4 6}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-signal{stroke:#3F74E0;stroke-width:2.6;stroke-dasharray:22 300;stroke-dashoffset:22}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-sweep{stroke:#5B8DEF;stroke-width:2;opacity:0}

/* which layer is lit - same duration as the list, no delay */
html body .pgrid .pgrid-stage[data-pgrid][data-cap="0"] .pgs-dev .pgs-o{stroke:#5B8DEF}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-layer{opacity:0;transition:opacity var(--ps-t) var(--ps-ease)}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="1"] .pgs-inst,
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-maint,
html body .pgrid .pgrid-stage[data-pgrid][data-cap="3"] .pgs-sup{opacity:1}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-ui-sale,
html body .pgrid .pgrid-stage[data-pgrid] .pgs-ui-diag{transition:opacity var(--ps-t) var(--ps-ease)}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-ui-sale{opacity:1}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-ui-diag{opacity:0}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-ui-sale{opacity:0}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-ui-diag{opacity:1}

/* the loop inside each step starts with the step (short lead-ins only) */
html body .pgrid .pgrid-stage[data-pgrid] :is(.pgs-paper,.pgs-card,.pgs-prog,.pgs-gear,.pgs-bubble,.pgs-online){transform-box:fill-box}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="0"] .pgs-paper{animation:pgs-feed 5s cubic-bezier(.5,0,.2,1) 0s infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="0"] .pgs-card{animation:pgs-insert 5s cubic-bezier(.5,0,.2,1) .15s infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="0"] .pgs-printer .pgs-led{animation:pgs-blink 2.4s ease-in-out infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="0"] .pgs-tap{animation:pgs-blink 2.4s ease-in-out .3s infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="1"] .pgs-cable{animation:pgs-flow 1.2s linear infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="1"] .pgs-inst .pgs-led{animation:pgs-blink 1.6s ease-in-out infinite}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-prog{transform-origin:left center;transform:scaleX(0)}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-prog{animation:pgs-fill 1.4s cubic-bezier(.4,0,.2,1) 0s forwards}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-row{opacity:0}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-row{animation:pgs-pop .3s var(--ps-ease) forwards;animation-delay:calc(.25s + var(--i) * .3s)}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-gear{transform-origin:center}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-gear{animation:pgs-spin 6s linear infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="2"] .pgs-sweep{animation:pgs-sweep 2.6s cubic-bezier(.5,0,.5,1) 0s infinite}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="3"] .pgs-signal{animation:pgs-send 2.4s cubic-bezier(.5,0,.5,1) 0s infinite}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-online{transform-origin:center}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="3"] .pgs-online{animation:pgs-pulse 1.8s ease-in-out infinite}
html body .pgrid .pgrid-stage[data-pgrid] .pgs-bubble{transform-origin:12px 30px;opacity:0}
html body .pgrid .pgrid-stage[data-pgrid][data-cap="3"] .pgs-bubble{animation:pgs-reply 3.2s var(--ps-ease) .35s infinite}

/* off screen or in a hidden tab (set by the script): loops stop */
html body .pgrid .pgrid-stage[data-pgrid].is-idle .pgrid-scene *{animation-play-state:paused}

/* ---- phones and small tablets ----------------------------------------- */
/* One column: the scene on top (scaled down, still readable), the stepper
   under it with the same rail, so a tap changes the picture in view. */
@media (max-width:820px){
  html body .pgrid .pgrid-stage[data-pgrid]{
    --ps-pad:11px;--ps-lh:22px;
    grid-template-columns:minmax(0,1fr);gap:18px;
  }
  html body .pgrid .pgrid-stage[data-pgrid] .pgrid-scene{order:-1;max-width:560px;margin:0 auto}
  html body .pgrid .pgrid-stage[data-pgrid] .pgrid-title,
  html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-title{font-size:16px}
  html body .pgrid .pgrid-stage[data-pgrid] .pgrid-sub,
  html body .pgrid .pgrid-stage[data-pgrid] .pgrid-node.is-active .pgrid-sub{font-size:13.5px}
}

/* ---- reduced motion: static --------------------------------------------- */
/* No autoplay (the script does not arm it), no transitions, no loops; a
   click still switches the step, instantly. */
@media (prefers-reduced-motion:reduce){
  html body .pgrid .pgrid-stage[data-pgrid] *,
  html body .pgrid .pgrid-stage[data-pgrid] *::before,
  html body .pgrid .pgrid-stage[data-pgrid] *::after{transition:none!important;animation:none!important}
  html body .pgrid .pgrid-stage[data-pgrid] .pgs-prog{transform:none}
  html body .pgrid .pgrid-stage[data-pgrid] .pgs-row,
  html body .pgrid .pgrid-stage[data-pgrid] .pgs-bubble{opacity:1}
  html body .pgrid .pgrid-stage[data-pgrid] .pgs-sweep{opacity:0}
}

/* section heading: eyebrow + title centred above the stepper and scene */
.pgrid > .pgrid-head{margin-left:auto;margin-right:auto;text-align:center}
.pgrid > .pgrid-head .eyebrow{display:block;text-align:center}