/* ============================================
   Process — fond lilas, cartes blanches 01→04
   (Figma 1:3013 : py 100, gap 64, en-tête 2 colonnes
    408 + 840, cartes 408×245 gap 24, carte CTA noire
    840×245, chiffres 81/64.8 #ededed)
   ============================================ */

.process {
  background: var(--c-lilac);
}

.process__inner {
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}

/* --- En-tête : badge à gauche (col. 408) + titre/sous-titre à droite --- */
.process__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.process__head-badge {
  flex: none;
  width: 408px;
}

.process__head-text {
  flex: 1;
  min-width: 0;
  gap: 12px; /* Figma : 12 entre H2 et sous-texte (16 dans le composant) */
}

/* --- Grille : 3 colonnes ; carte 04 + CTA (span 2) en rangée 2 --- */
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* --- Carte process --- */
.process-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 245px;
  padding: 24px;
  border-radius: var(--r-media);
  background: var(--c-white);
}

.process-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 48px;
}

.process-card__icon {
  display: block;
  width: 36px;
  height: 36px;
  background: var(--c-black);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.process-card__icon--1 {
  -webkit-mask-image: url("../../assets/img/process-icon-1.svg");
  mask-image: url("../../assets/img/process-icon-1.svg");
}
.process-card__icon--2 {
  -webkit-mask-image: url("../../assets/img/process-icon-2.svg");
  mask-image: url("../../assets/img/process-icon-2.svg");
}
.process-card__icon--3 {
  -webkit-mask-image: url("../../assets/img/process-icon-3.svg");
  mask-image: url("../../assets/img/process-icon-3.svg");
}
.process-card__icon--4 {
  -webkit-mask-image: url("../../assets/img/process-icon-4.svg");
  mask-image: url("../../assets/img/process-icon-4.svg");
}

.process-card__num {
  font-family: var(--f-ui);
  font-size: var(--fs-num);
  font-weight: 600;
  line-height: var(--lh-num);
  color: var(--c-gallery);
  white-space: nowrap;
}

.process-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.process-card__title {
  font-family: var(--f-heading);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 27.6px;
  letter-spacing: normal;
  color: var(--c-black);
}

.process-card__text {
  max-width: 500px;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}

/* --- Carte CTA noire (840×245, span 2 colonnes) --- */
.process-card--cta {
  grid-column: span 2;
  background: var(--c-cod);
}

.process-card__cta-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

.process-card__cta-title {
  max-width: 400px;
  font-family: var(--f-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 36px;
  letter-spacing: normal;
  color: var(--c-white);
}

.process-card__cta-sub {
  max-width: 400px;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-white);
}

/* ============ Responsive ============ */

/* Tablette 810–1199 : 2 colonnes, CTA sur toute la largeur */
@media (max-width: 1199px) and (min-width: 810px) {
  .process { --container-pad: 32px; }

  .process__head-badge { width: 220px; }

  .process__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile ≤ 809 (Figma 1:4178 : px 16, py 64, gap 48,
   1 colonne, radius 20, CTA px 16 / py 24, gap 48) */
@media (max-width: 809px) {
  .process__inner {
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 48px;
  }

  .process__head {
    flex-direction: column;
    gap: 16px;
  }

  .process__head-badge { width: auto; }

  .process__head-text { gap: 16px; }

  .process .section-head__title {
    font-size: 30px;
    line-height: 33px;
  }

  .process__grid { grid-template-columns: 1fr; }

  .process-card {
    min-height: 0;
    border-radius: 20px;
  }

  .process-card__title {
    font-size: 20px;
    line-height: 24px;
  }

  .process-card--cta {
    grid-column: auto;
    gap: 48px;
    padding: 24px 16px;
  }

  .process-card__cta-title {
    font-size: var(--fs-h4);
    line-height: 27.6px;
  }
}