/* Toisé — sections sombres : « Le problème » et « Comment ça marche ».
   Même palette (encre #061b31, l’indigo passe à #7389ff pour rester lisible) : on ré-encre les jetons
   dans .sec--dark et tous les composants suivent. Les maquettes produit (.on-light) restent claires. */

:root { --night: #061b31; --indigo-fill: #533afd; }

.sec--dark {
  --ink: #ffffff;
  --slate: #839bc8;
  --steel: rgba(229, 237, 245, .72);
  --smoke: #5b7299;
  --frost: rgba(255, 255, 255, .12);
  --mist: rgba(255, 255, 255, .04);
  --wash: rgba(115, 137, 255, .16);
  --lilac: rgba(115, 137, 255, .36);
  --lavender: rgba(115, 137, 255, .55);
  --indigo: #7389ff;
  position: relative; isolation: isolate; color: #fff;
}
.sec--dark ::selection { background: rgba(115, 137, 255, .4); color: #fff; }

/* les maquettes produit et les cartes restent des surfaces claires posées sur le fond sombre */
.on-light,
.sec--dark .pain {
  --ink: #061b31; --slate: #64748d; --steel: #50617a; --smoke: #839bc8; --frost: #e5edf5; --mist: #f8fafd;
  --wash: #e8e9ff; --lilac: #d6d9fc; --lavender: #b9b9f9; --indigo: #533afd;
  color: var(--ink);
}

/* fond : se déploie du cadre vers le plein écran quand la section arrive (--dp piloté par le scroll) */
.sec--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -2; background: var(--night);
  clip-path: inset(0 calc((1 - var(--dp, 1)) * 3.5vw) round calc((1 - var(--dp, 1)) * 4px));
}

/* grille fixe (calque collant de la hauteur de l’écran) : le contenu défile devant elle */
.glow {
  position: sticky; top: 0; z-index: -1; pointer-events: none; overflow: hidden;
  height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
}
.glow i, .glow::after { position: absolute; inset: 0; display: block; }
.glow i { background-size: 64px 64px; background-position: center top; }
.glow__grid {
  background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
.glow__lit {
  background-image: linear-gradient(to right, rgba(115, 137, 255, .6) 1px, transparent 1px), linear-gradient(to bottom, rgba(115, 137, 255, .6) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(300px circle at var(--gx, 72%) var(--gy, 32%), #000, transparent 72%);
  mask-image: radial-gradient(300px circle at var(--gx, 72%) var(--gy, 32%), #000, transparent 72%);
}
.glow::after { content: ''; background: radial-gradient(640px circle at var(--gx, 72%) var(--gy, 32%), rgba(115, 137, 255, .13), transparent 70%); }

/* espacements : le calque collant doit couvrir toute la hauteur, l’air est donc porté par le contenu */
.sec--dark.sec { padding-bottom: 0; }
.marquee + .sec.sec--dark { padding-top: 0; }
.sec--dark.sec > .container { padding-block: var(--sec); }
.how.sec--dark > .container { padding-top: var(--sec); }
.how.sec--dark > .container > .rule { display: none; }
.how.sec--dark::after { content: ''; display: block; height: var(--sec); }
.sec--dark + .sec { padding-top: var(--sec); }
.sec--dark + .sec > .container > .rule { display: none; }

/* composants dont le fond était codé en blanc */
.sec--dark .pains { border-color: transparent; }
.sec--dark .pain { background: #fff; }
.sec--dark .pain:hover { background: var(--mist); }
.sec--dark .step__num { background: transparent; }
.sec--dark .step.is-active .step__num,
.sec--dark .step.is-done .step__num { background: var(--indigo-fill); border-color: var(--indigo-fill); color: #fff; }

/* navigation : passe en verre sombre quand elle survole une section sombre */
.nav.is-dark .logo { --logo-a: #ffffff; --logo-b: #7389ff; }   /* variante « -white » du kit */
.nav.is-dark .logo,
.nav.is-dark .nav__links a,
.nav.is-dark .nav__login { color: #fff; }
.nav.is-dark .nav__links a[aria-current='true'],
.nav.is-dark .nav__login:hover { color: var(--indigo-hover); }
.nav.is-dark.is-scrolled { background: rgba(6, 27, 49, .72); border-bottom-color: rgba(255, 255, 255, .12); }
.nav.is-dark .nav__pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.nav.is-dark .nav__burger span { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sec--dark .step .step__num { background: var(--indigo-fill); border-color: var(--indigo-fill); }
  .sec--dark::before { clip-path: none; }
}