/* ============================================================
   SECTION 4 — LE DÉROULÉ (4 étapes)
   Progression chromatique : du vert le plus sombre (étape 1)
   au plus lumineux (étape 4 = le résultat).

   Toutes les micro-animations internes se déclenchent quand
   scripts/reveal.js pose la classe .in sur la carte.
   ============================================================ */

.process{
  padding:66px 46px 62px;
  background:var(--panel);
  --grain-opacity:.2;
}

.process__head{ max-width:620px; margin:0 auto; text-align:center }
.process__head h2{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700; line-height:1.16; letter-spacing:-.032em;
}
.process__head h2 em{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  color:var(--brand); font-size:1.05em; letter-spacing:-.005em;
}
.process__head p{
  margin-top:14px;
  font-size:12.5px; line-height:1.75; font-weight:500;
  color:var(--ink-soft);
}

.process__grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}

/* ============================================================
   CARTE ÉTAPE
   ============================================================ */
.step{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:430px; padding:30px 24px 0;
  border-radius:20px; color:#fff;
  background:linear-gradient(168deg, var(--step-light), var(--step-base));
  box-shadow:0 18px 34px -20px rgba(6,32,21,.6);
  transition:transform .6s var(--ease-out), box-shadow .6s ease;
}
.step:nth-child(1){ --step-light:#0A3D28; --step-base:#052318 }
.step:nth-child(2){ --step-light:#0E5537; --step-base:#083322 }
.step:nth-child(3){ --step-light:#12704A; --step-base:#0A452D }
.step:nth-child(4){ --step-light:#1B8F5F; --step-base:#0D5738 }

/* liseré intérieur + halo lumineux en haut à droite */
.step::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.13) inset;
  background:radial-gradient(62% 42% at 88% -8%, rgba(124,232,166,.26), transparent 70%);
  transition:background .6s ease;
}
.step:hover::before{
  background:radial-gradient(72% 52% at 88% -8%, rgba(124,232,166,.4), transparent 74%);
}

/* reflet qui balaie la carte au survol */
.step::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(106deg, transparent 36%, rgba(255,255,255,.13) 50%, transparent 64%);
  transform:translateX(-115%);
}
.step:hover::after{
  transform:translateX(115%);
  transition:transform 1s cubic-bezier(.32,.66,.28,1);
}

.step:hover{
  transform:translateY(-10px);
  box-shadow:0 40px 56px -26px rgba(6,45,29,.75);
}

/* --- entrée de la carte : monte, se déplie et se stabilise ---
   Spécificité à 3 niveaux : .reveal.in impose transform:none,
   il faut passer au-dessus pour ajouter le scale. */
.process__grid .step.reveal{ opacity:0; transform:translateY(30px) scale(.965) }
.process__grid .step.reveal.in{
  opacity:1; transform:none;
  transition:
    opacity   .7s  ease           var(--rv, 0s),
    transform .95s var(--ease-out) var(--rv, 0s);
}

/* --- barre de progression en haut de carte --- */
.step__prog{
  position:absolute; top:0; left:0; z-index:3;
  height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--brand-soft), var(--brand-glow));
}
.step.in .step__prog{
  transform:scaleX(1);
  transition:transform 1.1s var(--ease-out) calc(var(--rv, 0s) + .25s);
}

/* --- gros chiffre fantôme en fond --- */
.step__ghost{
  position:absolute; top:-14px; right:6px; z-index:0;
  font-size:112px; font-weight:800; line-height:1;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.055);
  pointer-events:none; user-select:none;
  transition:transform .7s var(--ease-out), color .6s ease;
}
.step:hover .step__ghost{
  transform:translateY(-6px) scale(1.06);
  color:rgba(124,232,166,.11);
}

.step__num{
  position:relative; z-index:3;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:16px; padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
  font-size:10px; font-weight:700; letter-spacing:.09em;
  color:rgba(255,255,255,.92);
}
.step__num::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brand-soft);
  box-shadow:0 0 0 0 rgba(124,232,166,.55);
  animation:num-pulse 2.6s ease-out infinite;
}
@keyframes num-pulse{
  70%{ box-shadow:0 0 0 6px rgba(124,232,166,0) }
  100%{ box-shadow:0 0 0 0 rgba(124,232,166,0) }
}

.step__title{
  position:relative; z-index:3;
  font-size:18.5px; font-weight:700; letter-spacing:-.028em; line-height:1.24;
}
.step__meta{
  position:relative; z-index:3;
  margin-top:6px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--brand-glow);
}
.step__desc{
  position:relative; z-index:3;
  margin-top:12px;
  font-size:12px; line-height:1.65; font-weight:500;
  color:rgba(255,255,255,.74);
}

/* la mention "on vous dit oui ou non" : elle doit se voir */
.step__note{
  position:relative; z-index:3;
  margin-top:14px; padding:11px 13px;
  border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;
  font-size:11.5px; line-height:1.6; font-weight:500;
  color:rgba(255,255,255,.9);
  overflow:hidden;
}
/* le filet vert se dessine de haut en bas */
.step__note::before{
  content:""; position:absolute; left:0; top:0;
  width:2px; height:100%;
  background:var(--brand-soft);
  transform:scaleY(0); transform-origin:top;
}
.step.in .step__note::before{
  transform:scaleY(1);
  transition:transform .7s var(--ease-out) calc(var(--rv, 0s) + .5s);
}

/* ============================================================
   MINI-INTERFACE — HTML/CSS pur, volontairement rognée en bas
   ============================================================ */
.step__ui{
  position:relative; z-index:3;
  margin:22px -2px 0; padding:13px;
  border-radius:14px 14px 0 0;
  background:rgba(255,255,255,.97);
  color:#12211a;
  box-shadow:0 -3px 24px rgba(0,0,0,.22);
  transform:rotate(-.7deg);
  transition:transform .6s var(--ease-out), box-shadow .6s ease;
}
.step:hover .step__ui{
  transform:rotate(0deg) translateY(-8px);
  box-shadow:0 -6px 34px rgba(0,0,0,.3);
}

.ui__row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10.5px; font-weight:700; letter-spacing:-.01em;
}
.ui__row span{ font-weight:600; color:#7d837e }
.ui__label{
  margin:12px 0 7px;
  font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#9aa09b;
}

/* --- créneaux horaires --- */
.ui__slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px }
.ui__slot{
  padding:6px 0; border-radius:7px;
  background:#f1f2f0; color:#4c534e;
  font-size:9.5px; font-weight:600; text-align:center;
  opacity:0; transform:translateY(6px);
}
.step.in .ui__slot{
  opacity:1; transform:none;
  transition:opacity .45s ease var(--d), transform .55s var(--ease-out) var(--d);
}
.ui__slot:nth-child(1){ --d:.55s } .ui__slot:nth-child(2){ --d:.62s }
.ui__slot:nth-child(3){ --d:.69s } .ui__slot:nth-child(4){ --d:.76s }
.ui__slot:nth-child(5){ --d:.83s } .ui__slot:nth-child(6){ --d:.90s }

.ui__slot--on{
  background:var(--brand); color:#fff;
  box-shadow:0 0 0 0 rgba(9,73,47,.4);
}
.step.in .ui__slot--on{ animation:slot-pick 2.8s ease-out 1.3s infinite }
@keyframes slot-pick{
  0%,100%{ box-shadow:0 0 0 0 rgba(9,73,47,.35) }
  40%{ box-shadow:0 0 0 5px rgba(9,73,47,0) }
}

/* --- répartition du budget --- */
.ui__split{ display:flex; align-items:center; gap:8px; margin-top:7px }
.ui__split b{ flex:0 0 44px; font-size:9.5px; font-weight:700 }
.ui__bar{ flex:1; height:6px; border-radius:99px; background:#eceeec; overflow:hidden }
.ui__bar i{
  display:block; height:100%; width:0;
  border-radius:99px; background:var(--brand);
}
/* la largeur cible est portée par --w en HTML */
.step.in .ui__bar i{
  width:var(--w);
  transition:width 1.15s var(--ease-out) calc(var(--d, 0s) + .5s);
}
.ui__split:nth-of-type(1) .ui__bar i{ --d:0s }
.ui__split:nth-of-type(2) .ui__bar i{ --d:.14s }
.ui__split span{ flex:0 0 26px; font-size:9.5px; font-weight:700; color:#6d736e; text-align:right }

/* --- checklist du setup --- */
.ui__check{
  display:flex; align-items:center; gap:8px;
  padding:6.5px 0;
  font-size:10px; font-weight:600; color:#2c3630;
  border-bottom:1px solid #f0f1ef;
  opacity:0; transform:translateX(-8px);
}
.ui__check:last-child{ border-bottom:0 }
.step.in .ui__check{
  opacity:1; transform:none;
  transition:opacity .45s ease var(--d), transform .55s var(--ease-out) var(--d);
}
.ui__check:nth-of-type(1){ --d:.55s } .ui__check:nth-of-type(2){ --d:.70s }
.ui__check:nth-of-type(3){ --d:.85s } .ui__check:nth-of-type(4){ --d:1s }

.ui__tick{
  flex:0 0 15px; display:grid; place-items:center;
  width:15px; height:15px; border-radius:50%;
  background:var(--brand);
}
.ui__tick svg{ width:8px; height:8px; stroke:#fff; stroke-width:3.4; fill:none }
/* le trait de la coche se dessine */
.ui__tick path{ stroke-dasharray:22; stroke-dashoffset:22 }
.step.in .ui__tick path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .4s ease calc(var(--d) + .2s);
}

/* --- leads entrants --- */
.ui__lead{
  display:flex; gap:8px; align-items:flex-start;
  padding:7.5px 0;
  border-bottom:1px solid #f0f1ef;
  opacity:0; transform:translateX(12px);
}
.ui__lead:last-child{ border-bottom:0 }
.step.in .ui__lead{
  opacity:1; transform:none;
  transition:opacity .5s ease var(--d), transform .6s var(--ease-out) var(--d);
}
.ui__lead:nth-of-type(1){ --d:.6s } .ui__lead:nth-of-type(2){ --d:.82s }
.ui__lead:nth-of-type(3){ --d:1.04s }

.ui__dot{
  flex:0 0 7px; width:7px; height:7px; margin-top:4px;
  border-radius:50%; background:var(--brand-soft);
}
.step.in .ui__dot{ animation:lead-ping 2.4s ease-out infinite }
@keyframes lead-ping{
  0%{ box-shadow:0 0 0 0 rgba(62,207,142,.55) }
  70%,100%{ box-shadow:0 0 0 6px rgba(62,207,142,0) }
}
.ui__lead div{ flex:1; min-width:0 }
.ui__lead b{ display:block; font-size:10px; font-weight:700 }
.ui__lead p{ margin-top:2px; font-size:9.5px; font-weight:500; color:#7d837e }
.ui__lead i{ font-size:8.5px; font-style:normal; font-weight:600; color:#a3a8a3; white-space:nowrap }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1060px){
  .process__grid{ grid-template-columns:repeat(2, 1fr); gap:16px }
  .step{ min-height:400px }
}
@media (max-width:820px){
  .process{ padding:52px 26px 48px; border-radius:24px }
  .process__grid{ margin-top:40px }
}
@media (max-width:700px){
  .process__grid{ grid-template-columns:1fr; gap:14px }
  .step{ min-height:0; padding:28px 20px 0 }
  .step__ghost{ font-size:92px }
  .step__ui{ margin-top:20px }
}
@media (max-width:640px){
  .process{ padding:42px 16px 38px; border-radius:22px }
  .process__head p{ font-size:11.5px }
}

/* animations décoratives coupées si l'utilisateur les refuse */
@media (prefers-reduced-motion:reduce){
  .step__num::before,
  .step.in .ui__slot--on,
  .step.in .ui__dot{ animation:none }
  .step.in .ui__bar i{ width:var(--w) }
}