/* ============================================================
   STEPPER — Figma 74:9034
   ------------------------------------------------------------
   Two variants of one idea — "you are at step N of 4".

   rail   desktop. A vertical column of 50px nodes joined by
          connectors, each carrying an "ÉTAPE n" overline and a
          label. Three states, three elevations:

            done      elevation success      (check + mint glow)
            current   elevation dark-high    (the deep ink pebble)
            todo      elevation secondary-2  (recessed)

   ring   mobile. A 68px gauge reading "3/4", on elevation 3.
          A 3px arc runs clockwise from noon.

       <ol class="ice-stepper" data-variant="rail">
         <li class="ice-step" data-state="done" data-step-icon="search"
             data-step-index="1" data-step-back="1.2">
           <span class="ice-step__label">
             <span class="ice-step__n">Étape 1</span>
             <span class="ice-step__name">Sujet de veille</span>
           </span>
         </li>
         <li class="ice-stepper__link"></li>
         …
       </ol>
   ============================================================ */

.ice-stepper[data-variant="rail"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);

  --_node: var(--height-l);
  inline-size: var(--_node);
}

/* --- A node ------------------------------------------------- */
.ice-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  inline-size: var(--_node);
  block-size:  var(--_node);
  border-radius: var(--radius-full);
  flex-shrink: 0;

  border: var(--_border-w, var(--border-w)) solid;
  border-color: var(--_border-lit) var(--_border-lit) var(--_border) var(--_border);
  background-image: var(--_image);
  box-shadow: var(--_shadow);
  backdrop-filter: blur(var(--_blur));
  -webkit-backdrop-filter: blur(var(--_blur));
  transition: background-image var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.ice-step > .ice-icon {
  inline-size: var(--icon-m);
  block-size:  var(--icon-m);
}

/* Done — the success elevation, carrying shadow S rather than its own. */
.ice-step[data-state="done"] {
  --_image:      var(--elev-success-glows), var(--elev-success-image);
  --_border:     var(--elev-success-border);
  --_border-lit: var(--elev-success-border-lit);
  --_border-w:   var(--elev-success-border-w);
  --_shadow:     var(--shadow-s);
  --_blur:       var(--shadow-s-blur);
  color: var(--fg-medium);
}

/* Current — the deep ink pebble. The five onboarding screens all
   draw it in dark-high, not dark-medium: the step you are on is
   the loudest thing on the page. Figma 87:18634, 26:6416, 39:471,
   40:3838. */
.ice-step[data-state="current"] {
  --_image:      var(--elev-dark-high-image);
  --_border:     var(--elev-dark-high-border);
  --_border-lit: var(--elev-dark-high-border-lit);
  --_border-w:   var(--elev-dark-high-border-w);
  --_shadow:     var(--elev-dark-high-shadow);
  --_blur:       var(--elev-dark-high-blur);
  color: var(--elev-dark-high-fg);
}

/* Todo — recessed and quiet. The secondary elevations carry a
   border width of 0, so the ring disappears with the stroke. */
.ice-step[data-state="todo"] {
  --_image:      var(--elev-secondary-2-image);
  --_border:     var(--elev-secondary-2-border);
  --_border-lit: var(--elev-secondary-2-border-lit);
  --_border-w:   var(--elev-secondary-2-border-w);
  --_shadow:     var(--elev-secondary-2-shadow);
  --_blur:       var(--elev-secondary-2-blur);
  color: var(--fg-low);
}

/* --- A step you can go back to ------------------------------
   Only the ones behind you: the current step is where you are and
   the ones ahead have not happened. ui.js writes data-step-to onto
   the done steps and takes it off again, so the rail cannot offer a
   way back to a step nobody has reached.

   The hover is the Highlight treatment the buttons and the cards
   already use — elevation 2 under the Highlight shadow — and the
   label goes to the link colour, because that is what it now is.
   Figma 89:19839.                                                */
.ice-step[data-step-to] { cursor: pointer; }

.ice-step[data-step-to]:hover {
  --_image:      var(--elev-primary-2-image);
  --_border:     var(--elev-primary-2-border);
  --_border-lit: var(--elev-primary-2-border-lit);
  --_border-w:   var(--elev-primary-2-border-w);
  --_shadow:     var(--shadow-highlight);
  --_blur:       var(--shadow-highlight-blur);
}
.ice-step[data-step-to]:hover > .ice-icon      { color: var(--fg-link); }
.ice-step[data-step-to]:hover .ice-step__name  { color: var(--fg-link); opacity: 1; }

/* --- The label block, sitting to the right ------------------ */
.ice-step__label {
  position: absolute;
  inset-inline-start: calc(var(--_node) + var(--space-16));
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  white-space: nowrap;
}

.ice-step__n {
  font-size: var(--type-caps-m-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-caps-m-leading);
  letter-spacing: var(--type-caps-m-track);
  text-transform: uppercase;
  color: var(--fg-medium);
  opacity: .6;
}

.ice-step__name {
  font-size: var(--type-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h5-leading);
  letter-spacing: var(--type-h5-track);
  color: var(--fg-high);
  opacity: .7;
}

.ice-step[data-state="current"] .ice-step__n    { opacity: .8; }
.ice-step[data-state="current"] .ice-step__name { opacity: 1; }

/* --- The connector ------------------------------------------
   3 × 32, centred under the node it follows.                    */
.ice-stepper__link {
  inline-size: 3px;
  block-size: var(--space-32);
  margin-inline-start: calc((var(--_node) - 3px) / 2);
  border-radius: var(--radius-3);
  background-color: var(--accent);
  opacity: .3;
  flex-shrink: 0;
}


/* ============================================================
   RING — the mobile gauge
   ------------------------------------------------------------
       <div class="ice-ring" style="--step:3; --steps:4">
         <span class="ice-ring__value">3</span><span class="ice-ring__total">/4</span>
       </div>

   Figma draws the arc as two boolean-subtracted shapes. A conic mask
   over a vertical gradient gets the same result, scales to any step
   count, and animates.
   ============================================================ */

.ice-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  inline-size: 68px;
  block-size:  68px;
  border-radius: var(--radius-full);
  border: var(--border-w) solid var(--elev-primary-3-border);

  font-size: var(--type-h5-size);
  line-height: var(--type-h5-leading);
  letter-spacing: var(--type-h5-track);

  background-image: var(--elev-primary-3-image);
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));

  --ring-track:    var(--ice-blue-100);
  --ring-arc-from: var(--ice-blue-500);
  --ring-arc-to:   var(--ice-blue-900);
}

/* Track and arc are the same 3px annulus, 62px across. A mask reads
   alpha only — `black` here means "opaque", not a colour, so it is
   not a palette escape. */
.ice-ring::before,
.ice-ring::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 3px));
}

.ice-ring::before { background-color: var(--ring-track); }

/* The arc: a vertical gradient, cut to the travelled fraction. */
.ice-ring::after {
  --_turn: calc(var(--step, 0) / var(--steps, 4) * 1turn);
  background-image: linear-gradient(to bottom, var(--ring-arc-from), var(--ring-arc-to));
  mask:
    radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 3px)),
    conic-gradient(from 0deg, black var(--_turn), transparent var(--_turn));
  mask-composite: intersect;
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 3px)),
    conic-gradient(from 0deg, black var(--_turn), transparent var(--_turn));
  -webkit-mask-composite: source-in;
}

.ice-ring__value { font-weight: var(--weight-semibold); color: var(--fg-high); z-index: 1; }
.ice-ring__total { font-weight: var(--weight-regular); color: var(--ice-blue-500); z-index: 1; }