.process{
    /* pilotent l'empilement des cartes (scopés, pas de :root global) */
    --stack-top:80px;      /* position de la 1re carte quand elle se fige */
    --stack-offset:84px;   /* décalage vertical entre 2 cartes empilées */

    max-width: 1400px;
    margin:0 auto;
    padding:80px 32px 160px;
  }

  .process__title{
    font-weight:var(--fw-heading);
    text-transform:uppercase;
    letter-spacing:-.01em;
    line-height:1.02;
    font-size:clamp(2rem,5.5vw,4rem);
    margin-bottom:16px;
  }

  .process__intro{
    font-weight:var(--fw-body);
    font-size:1.05rem;
    line-height:1.6;
    color:var(--text-dim);
    max-width:56ch;
    margin-bottom:48px;
  }

  /* ---------- Empilement ---------- */
  .cards{
    display:flex;
    flex-direction:column;
    gap:40px;
  }

  /* espace de fin : une fois la 6e carte figée, les 6 étapes restent
     verrouillées empilées pendant ce scroll, puis tout repart normalement */
  .cards__spacer{
    min-height:45vh;
    pointer-events:none;
  }

  .card{
    position:sticky;
    top:calc(var(--stack-top) + (var(--i) - 1) * var(--stack-offset));
    min-height:320px;
    border-radius:var(--radius);
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    /* glassmorphism charte : le flou reprend ce qui se trouve derrière (carte précédente / fond) */
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);
    backdrop-filter:blur(var(--glass-blur)) saturate(120%);
    box-shadow:0 -1px 0 rgba(0, 0, 0, 0.349), 0 30px 60px -30px rgba(0,0,0,.9);
    overflow:hidden;
    display:grid;
    grid-template-columns:280px 1fr;
    transition:transform .3s ease;
  }

  /* ---------- Visuel gauche ---------- */
  .card__media{
    position:relative;
    background:var(--creme);         /* fallback si l'image n'existe pas encore */
    overflow:hidden;
  }
  .card__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- Contenu droite ---------- */
  .card__body{
    padding:24px 40px 40px;
    display:flex;
    flex-direction:column;
  }

  .card__head{
    display:flex;
    align-items:baseline;
    gap:28px;
  }
  .card__num{
    font-weight:300;
    font-size:clamp(2rem,4vw,2.9rem);
    line-height:1;
    letter-spacing:.02em;
    color:var(--white);
    flex-shrink:0;
    min-width:1.6em;
  }
  .card__title{
    font-weight:500;
    font-size:clamp(1.35rem,3vw,2.2rem);
    line-height:1.1;
    letter-spacing:-.01em;
  }

  .card__details{
    margin-top:26px;
    padding-left:76px; /* aligné sous le titre, pas sous le numéro */
    max-width:640px;
  }
  .card__lead{
    font-weight:500;
    font-size:1.02rem;
    color:var(--white);
    margin-bottom:10px;
  }
  .card__desc{
    font-weight:var(--fw-body);
    font-size:.95rem;
    line-height:1.6;
    color:var(--text-dim);
    margin-bottom:16px;
  }
  .card__reassure{
    font-size:.9rem;
    line-height:1.5;
    color:var(--white);
    padding:12px 16px;
    border-left:2px solid rgba(255,255,250,.35);
    background:rgba(255,255,250,.04);
    border-radius:4px;
  }
  .card__reassure strong{font-weight:600;}

  /* ---------- Responsive ---------- */
  @media (max-width:760px){
    .process{--stack-offset:60px;--stack-top:64px; padding:48px 16px 90px;}
    .card{
      grid-template-columns:1fr;   /* image en haut, contenu dessous */
      min-height:0;
    }
    .card__media{height:190px;}

    /* numéro + titre superposés tout en haut, SUR l'image :
       c'est cette bande qui reste visible quand les cartes s'empilent */
    .card__head{
      position:absolute;
      top:0;left:0;right:0;
      z-index:3;
      align-items:center;
      gap:14px;
      padding:16px 18px;
      background:linear-gradient(to bottom,
        rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%);
    }
    .card__num{font-size:1.5rem;min-width:auto;}
    .card__title{font-size:1.15rem;}

    .card__body{padding:16px 20px 26px;}
    .card__details{
      padding-left:0;
      margin-top:2px;
    }
    .cards{gap:22px;}
    .cards__spacer{min-height:38vh;}
  }

  @media (prefers-reduced-motion:reduce){
    .card{position:relative;top:auto!important;}
  }