/* ============================================================
   SignalOS — Comment ça marche v2 · scrollytelling
   complète v3/v3b/v4.css
   ============================================================ */

/* ─────────────────────────────────────────────
   HERO — titre en lignes masquées + rail
   ───────────────────────────────────────────── */
.hlw { display: block; overflow: hidden; }
.hli { display: inline-block; transform: translateY(112%); transition: transform 0.9s cubic-bezier(.16,1,.3,1); }
.hlw:nth-child(2) .hli { transition-delay: 0.12s; }
html.ccm-go .hli { transform: none; }
@media (prefers-reduced-motion: reduce) { .hli { transform: none !important; } }

.ccm-rail { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 30px; }
.ccm-rail .rs { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; color: var(--v3-mut);
  background: var(--v3-card); border: 1px solid var(--v3-line); backdrop-filter: blur(10px); border-radius: 100px; padding: 7px 14px 7px 7px; white-space: nowrap;
  transition: all 0.25s; cursor: pointer; text-decoration: none; }
.ccm-rail .rs i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 0.66rem; background: var(--v3-hair); color: var(--v3-mut); transition: all 0.25s; }
.ccm-rail .rs:hover, .ccm-rail .rs.hot { color: var(--v3-ink); border-color: rgba(232,25,60,0.4); }
.ccm-rail .rs:hover i, .ccm-rail .rs.hot i { background: linear-gradient(135deg, var(--red-2), var(--red)); color: #fff; }
.ccm-rail .ra { color: var(--v3-dim); font-size: 0.72rem; }

/* ─────────────────────────────────────────────
   DOCK DE PROGRESSION (desktop)
   ───────────────────────────────────────────── */
.ccm-dock { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s; }
.ccm-dock.show { opacity: 1; pointer-events: auto; }
.dk { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 5px 8px; border-radius: 100px; }
.dk i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 0.62rem; color: var(--v3-dim);
  background: var(--v3-card); border: 1px solid var(--v3-line); backdrop-filter: blur(10px); transition: all 0.3s; }
.dk span { font-size: 0.7rem; font-weight: 700; color: var(--v3-mut); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s; white-space: nowrap; }
.ccm-dock:hover .dk span { opacity: 1; transform: none; }
.dk.on i { background: linear-gradient(135deg, var(--red-2), var(--red)); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(232,25,60,0.6); transform: scale(1.12); }
.dk.done i { color: var(--red); border-color: rgba(232,25,60,0.4); }
@media (max-width: 1240px) { .ccm-dock { display: none; } }

/* ─────────────────────────────────────────────
   COLONNE VERTÉBRALE + ÉTAPES
   ───────────────────────────────────────────── */
.ccm-steps { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 150px; position: relative; }
/* spine retirée (glitch visuel au scroll) */
.spine { display: none !important; }
.spine-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, var(--red-2), var(--red));
  transform: scaleY(var(--sp, 0)); transform-origin: 50% 0; }
.spine-dot { position: absolute; left: 50%; top: calc(var(--sp, 0) * 100%); transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(232,25,60,0.18), 0 0 14px var(--red); }
@media (max-width: 1020px) { .spine { display: none; } }

.ccm-step { position: relative; }
/* numéro géant en parallaxe */
.ccm-step::before { content: attr(data-num); position: absolute; top: -84px; z-index: 0; pointer-events: none;
  font-family: var(--display); font-weight: 800; font-size: clamp(7rem, 14vw, 12rem); line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232,25,60,0.22);
  transform: translateY(calc(var(--pll, 0) * 1px)); }
html[data-theme="light"] .ccm-step::before { -webkit-text-stroke-color: rgba(232,25,60,0.18); }
.ccm-step:nth-child(odd)  { }
.ccm-step[data-side="l"]::before { left: -20px; }
.ccm-step[data-side="r"]::before { right: -20px; }
.ccm-step > * { position: relative; z-index: 1; }

/* révélation orchestrée */
.ccm-step .f-copy > * { opacity: 0; transform: translateY(26px); filter: blur(7px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1), filter 0.7s; }
.ccm-step.in .f-copy > * { opacity: 1; transform: none; filter: none; }
.ccm-step.in .f-copy > *:nth-child(1) { transition-delay: 0.05s; }
.ccm-step.in .f-copy > *:nth-child(2) { transition-delay: 0.13s; }
.ccm-step.in .f-copy > *:nth-child(3) { transition-delay: 0.21s; }
.ccm-step.in .f-copy > *:nth-child(4) { transition-delay: 0.29s; }
.ccm-step.in .f-copy > *:nth-child(5) { transition-delay: 0.37s; }
.ccm-step .f-ui { opacity: 0; transform: translateY(46px) scale(0.94) rotate(1.6deg); transform-origin: 50% 100%;
  transition: opacity 0.85s cubic-bezier(.2,.7,.3,1) 0.15s, transform 0.85s cubic-bezier(.2,.7,.3,1) 0.15s; }
.ccm-step.rev .f-ui { transform: translateY(46px) scale(0.94) rotate(-1.6deg); }
.ccm-step.in .f-ui { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ccm-step .f-copy > *, .ccm-step .f-ui { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* carte visuelle : halo + hover 3D */
.ccm-step .f-ui { perspective: 1100px; }
.ccm-step .f-ui-card, .ccm-step .dash { transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s; will-change: transform; }
.step-k { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.step-k .sn { font-family: var(--display); font-weight: 800; font-size: 0.8rem; color: #fff;
  background: linear-gradient(135deg, var(--red-2), var(--red)); border-radius: 100px; padding: 5px 14px;
  box-shadow: 0 8px 20px -6px rgba(232,25,60,0.6); }
.step-k .sl { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--red); }
.reassure2 { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; background: rgba(232,25,60,0.05);
  border: 1px dashed rgba(232,25,60,0.35); border-radius: 14px; padding: 13px 16px; font-size: 0.8rem; color: var(--v3-mut); line-height: 1.6; text-align: left; }
.reassure2 strong { color: var(--v3-ink); }

/* ─────────────────────────────────────────────
   VISUELS D'ÉTAPES
   ───────────────────────────────────────────── */
.sec-rows { display: flex; flex-direction: column; gap: 8px; }
.sec-row { display: flex; align-items: center; gap: 11px; background: var(--v3-dash-card); border: 1px solid var(--v3-hair);
  border-radius: 12px; padding: 11px 13px; opacity: 0; transform: translateX(-14px); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2,.7,.3,1); }
.sec-rows.go .sec-row { opacity: 1; transform: none; }
.sec-row .si { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
  background: var(--v3-solid); border: 1px solid var(--v3-hair); }
.sec-row .sb { flex: 1; min-width: 0; }
.sec-row .sb b { display: block; font-size: 0.78rem; color: var(--v3-ink); font-weight: 700; }
.sec-row .sb span { font-size: 0.68rem; color: var(--v3-dim); }
.sec-row .st { font-size: 0.66rem; font-weight: 800; border-radius: 100px; padding: 4px 11px; white-space: nowrap; }
.sec-row .st.ok { color: #16a34a; background: rgba(22,163,74,0.1); }
html:not([data-theme="light"]) .sec-row .st.ok { color: #4ade80; background: rgba(74,222,128,0.12); }
.sec-row .st.lock { color: var(--v3-dim); background: var(--v3-hair); }
.sec-done { margin-top: 10px; text-align: center; font-size: 0.76rem; font-weight: 700; color: #16a34a;
  background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.25); border-radius: 12px; padding: 10px;
  opacity: 0; transform: translateY(6px) scale(0.97); transition: opacity 0.4s 0.7s, transform 0.4s 0.7s cubic-bezier(.2,.9,.3,1.4); }
html:not([data-theme="light"]) .sec-done { color: #4ade80; }
.sec-done.go { opacity: 1; transform: none; }

.eng-note { margin-top: 12px; display: flex; align-items: center; gap: 9px; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--red);
  background: rgba(232,25,60,0.06); border: 1px solid rgba(232,25,60,0.25); border-radius: 100px; padding: 8px 16px; }

.md-acts { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.md-act { display: flex; align-items: center; gap: 9px; font-size: 0.74rem; color: var(--v3-mut);
  background: var(--v3-dash-card); border: 1px solid var(--v3-hair); border-radius: 10px; padding: 9px 12px; }
.md-act b { color: var(--v3-ink); font-weight: 700; filter: blur(2.2px); user-select: none; -webkit-user-select: none; }
.md-act .t { margin-left: auto; font-size: 0.64rem; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pf-grid : cascade */
.ccm-step .pf-card { opacity: 0; transform: translateY(16px) scale(0.94); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2,.8,.3,1.2); }
.ccm-step.in .pf-card { opacity: 1; transform: none; }
.ccm-step.in .pf-card:nth-child(1) { transition-delay: 0.35s; } .ccm-step.in .pf-card:nth-child(2) { transition-delay: 0.43s; }
.ccm-step.in .pf-card:nth-child(3) { transition-delay: 0.51s; } .ccm-step.in .pf-card:nth-child(4) { transition-delay: 0.59s; }
.ccm-step.in .pf-card:nth-child(5) { transition-delay: 0.67s; }
.ccm-step .pf-more { opacity: 0; transition: opacity 0.5s 0.78s; }
.ccm-step.in .pf-more { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ccm-step .pf-card, .ccm-step .pf-more { opacity: 1 !important; transform: none !important; } }

/* ─────────────────────────────────────────────
   BENTO 3 SIGNAUX — spotlight + cascade
   ───────────────────────────────────────────── */
.sig-bento .vb { position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1), border-color 0.32s; }
.sig-bento.in .vb { opacity: 1; transform: none; }
.sig-bento.in .vb:nth-child(2) { transition-delay: 0.12s; }
.sig-bento.in .vb:nth-child(3) { transition-delay: 0.24s; }
.sig-bento .vb::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 20%), rgba(232,25,60,0.09), transparent 65%); }
.sig-bento .vb:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sig-bento .vb { opacity: 1 !important; transform: none !important; } }

/* ── perf ── */
.sig-bento, .v3-faq, .v3-ctasec, footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }

@media (max-width: 720px) {
  .ccm-steps { gap: 92px; }
  .ccm-step::before { top: -58px; font-size: 5.4rem; }
  .ccm-rail .rs { font-size: 0.7rem; padding: 6px 11px 6px 6px; }
  .ccm-rail .rs i { width: 19px; height: 19px; font-size: 0.6rem; }
  .ccm-rail .ra { display: none; }
  .reassure2 { margin-left: auto; margin-right: auto; }
}