/* Motion design au défilement, sous le haut de page (piloté par motion.js) :
   halo de couleur qui change d'une section à l'autre, lumière qui court sur
   les traits des grilles, titres métalliques avec fin de titre qui se remplit
   de couleur, traits qui se tracent, chiffres chromés qui roulent, reflets.
   --h : teinte de la section au milieu de l'écran (bleu → violet → rose…). */

:root { --h: 232; --amb: 0; }

/* ---------------------------------------------------------------- halo de couleur */
.amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--amb); overflow: hidden; } /* pas de défilement de côté sur mobile */
.amb i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.amb i:first-child { left: -30vmax; top: calc(-20vmax + var(--ay, 0vh));
                     background: radial-gradient(closest-side, hsl(var(--h) 85% 58% / .13), hsl(var(--h) 85% 50% / .04) 55%, transparent); }
.amb i:last-child { right: -32vmax; bottom: calc(-26vmax - var(--ay, 0vh));
                    background: radial-gradient(closest-side, hsl(calc(var(--h) + 38) 85% 60% / .11), hsl(calc(var(--h) + 38) 85% 50% / .03) 55%, transparent); }


/* ---------------------------------------------------------------- apparitions */
.rv { filter: blur(10px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { filter: none; }
/* le texte d'introduction arrive juste après son titre */
.sec .lead.rv { --i: 1.5; }
/* formules : l'une après l'autre */
.plans > li.rv { transition-delay: calc(var(--i, 0) * 120ms); }
/* cartes de contact : la teinte au survol reste immédiate */
.cc.rv { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease, background .3s;
         transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s; }
/* réalisations : les deux rangées glissent en place, chacune depuis le côté d'où elle défile */
.ship .lane.rv { transition-duration: 1.2s; }
.ship .lane.rv:not(.in) { transform: translateX(56px); }
.ship .lane.rv:nth-child(2):not(.in) { transform: translateX(-56px); }

/* petite étiquette : un trait se trace devant */
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ''; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--h) 90% 72%)); transform: scaleX(0); transform-origin: left;
                  transition: transform 1s cubic-bezier(.2,.7,.2,1) .15s; }
.kicker.in::before { transform: none; }

/* ---------------------------------------------------------------- titres métalliques */
/* un reflet chromé passe sur les lettres au fil du défilement (--p) */
.sec h2, .ship .hd h4 { width: fit-content; text-wrap: balance;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, hsl(var(--h) 18% 64%) 45%, #fff 49.5%, #f6f7ff 50.5%, hsl(var(--h) 22% 52%) 55.5%, #fff 61%, #fff 100%)
              calc(100% - var(--p, .5) * 100%) 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* la fin du titre, grise, se remplit de bleu-violet en lisant (--f) */
.sec h2 span { color: transparent;
  background: linear-gradient(90deg, #8aa2ff, #a58bff 55%, #ece6ff) 0 0 / calc(var(--f, 0) * 100%) 100% no-repeat, linear-gradient(#686c78, #686c78);
  -webkit-background-clip: text; background-clip: text; }

/* ---------------------------------------------------------------- verre liquide */
/* les composants de la page (trois temps, formules, logos, contact) sont en
   verre : teinte sombre presque transparente, flou et saturation du décor ;
   dans Chrome et Edge, glass.js y ajoute la réfraction des bords. Derrière,
   des halos de la couleur de la section, qui dérivent lentement : c'est eux
   que le verre courbe et floute. Clients : pas de halo, fond noir. */
.steps > li, .plans > li, .lo, .cc {
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.015) 45%, rgba(255,255,255,.04)), rgba(10,11,18,.4);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -20px 34px -26px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.35); }
/* liseré qui accroche la lumière : blanc en haut à gauche, et la lumière du
   défilement (--rx, --ry, posés par motion.js) qui glisse le long du bord */
.steps > li::before, .plans > li::before, .lo::after, .cc::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(220px circle at var(--rx, -999px) var(--ry, -999px), hsl(var(--h) 95% 84% / .95), hsl(var(--h) 90% 70% / .25) 45%, transparent 72%),
              linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 28%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cc { transition: background .3s; }
.cc:hover { background: linear-gradient(150deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, rgba(255,255,255,.06)), rgba(10,11,18,.32); }

/* halos derrière le verre */
.steps, .plans, .cards { position: relative; isolation: isolate; }
.steps::before, .steps::after, .plans::before, .plans::after, .cards::before, .cards::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; animation: orb 19s ease-in-out infinite alternate; }
.steps::before, .plans::before, .cards::before {
  width: 46%; aspect-ratio: 1; left: 4%; top: 6%; background: radial-gradient(closest-side, hsl(var(--h) 90% 60% / .5), hsl(var(--h) 90% 55% / .14) 55%, transparent); }
.steps::after, .plans::after, .cards::after {
  width: 40%; aspect-ratio: 1; right: 6%; bottom: 2%; animation-duration: 23s; animation-direction: alternate-reverse;
  background: radial-gradient(closest-side, hsl(calc(var(--h) + 50) 90% 62% / .42), hsl(calc(var(--h) + 50) 90% 55% / .12) 55%, transparent); }
.cards::before { width: 80%; left: -10%; top: -20%; }
.plans::before { left: 30%; top: 0; width: 42%; }
.plans::after { right: -4%; bottom: -8%; }
.cards::after { width: 70%; }
@keyframes orb { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, 10%) scale(1.15); } }

/* trait du pied de page : il se trace depuis le centre, avec un point de lumière */
.fc { border-bottom: 0; position: relative; }
.fc::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; transform: scaleX(var(--d, 0));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 14%, hsl(var(--h) 95% 80% / calc(.25 + .75 * (1 - var(--d, 0)))) 50%, rgba(255,255,255,.14) 86%, transparent); }
.fc::after { bottom: 0; }

/* ---------------------------------------------------------------- chiffres */
/* étapes 01, 02, 03 : grands chiffres chromés qui roulent à l'apparition */
.steps header b { display: inline-flex; font-size: 46px; font-weight: 600; letter-spacing: -.04em; line-height: 1; height: 1em; color: transparent;
  background: linear-gradient(180deg, #fff 0%, #c9cfdc 42%, #f4f6fb 56%, hsl(var(--h) 18% 50%) 100%); -webkit-background-clip: text; background-clip: text; }
.steps header b.odo { background: none; }
.steps .dg { display: block; height: 1em; overflow: hidden; }
.steps .dg > span { display: block; line-height: 1em; color: transparent; transform: translateY(0); transition: transform 1.6s cubic-bezier(.16,.8,.2,1) var(--t, 0s);
  background: linear-gradient(180deg, #fff 0%, #c9cfdc 42%, #f4f6fb 56%, hsl(var(--h) 18% 50%) 100%) 0 0 / 100% 1em repeat-y; -webkit-background-clip: text; background-clip: text; }
.steps.in .dg > span { transform: translateY(calc(var(--v) * -1em)); }

/* ---------------------------------------------------------------- reflets */
/* un reflet traverse chaque colonne une fois, quand elle apparaît */
.steps > li::after { content: ''; position: absolute; inset: -30% -80%; pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.07) 50%, transparent 56%); transform: translateX(-60%); }
.steps.in > li::after { transform: translateX(60%); transition: transform 2s cubic-bezier(.2,.7,.2,1) calc(var(--c, 0) * 160ms + .3s); }

/* approche : dans chaque colonne, les savoir-faire arrivent l'un après
   l'autre et leur trait se trace de gauche à droite */
.steps ul li { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--c, 0) * 160ms + var(--r, 0) * 90ms + .45s); }
.steps ul li::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: inherit; }
.steps.in ul li { opacity: 1; transform: none; }
.steps.in ul li::before { transform: none; }

/* version allégée : les halos derrière le verre ne bougent pas (sinon le flou du
   verre est recalculé en continu) */
.lite .steps::before, .lite .steps::after, .lite .plans::before, .lite .plans::after, .lite .cards::before, .lite .cards::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { filter: none; }
  .steps::before, .steps::after, .plans::before, .plans::after, .cards::before, .cards::after { animation: none; }
  .steps ul li { opacity: 1; transform: none; }
  .steps ul li::before { transform: none; }
}