/* ============================================
   About (Figma desktop 1:2915 · mobile 1:4088)
   Image 612×419 à gauche + badge/H2/sub + stats
   2×2 (cartes 298×85, fond lilas, radius 25)
   ============================================ */

.about {
  background: var(--c-white);
}

/* Figma 1:2916 : max-w 1400, px 64 (via .container), py 100, gap 48, items-center */
.about__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-l); /* 48 */
  padding-block: 100px;
}

/* --- Colonne image (Figma 1:2917 : 612 fixe, média 419.22, coins 25) --- */
.about__media {
  flex: 0 0 612px;
  width: 612px;
  min-width: 0;
}

.about__media img {
  width: 100%;
  height: 419px;
  object-fit: cover;
  border-radius: var(--r-media); /* 25 */
}

/* --- Colonne droite (Figma 1:2922 : flex 1, colonne, gap 48) --- */
.about__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-l); /* 48 */
}

/* Boîtes titre/sous-texte à 500px dans Figma (1:2933 / 1:2937) */
.about__content .section-head {
  max-width: 500px;
}

/* Ajustements locaux du badge (Figma : boîte icône 17px, gap 5) */
.about .badge { gap: 5px; }
.about .badge__icon { width: 17px; height: 17px; }

/* --- Grille stats 2×2 (Figma 1:2939 : cartes 298×85.4, gaps 16/16) --- */
.about__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

/* Carte stat (Figma « Desktop 1 » : fond #f2f0fa, radius 25, pad 16, gap 16) */
.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 25px;
  background: var(--c-lilac);
}

/* Icône ronde noire : 24px + padding 10 = 44px (Figma 1:2943) */
.stat-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--r-pill);
  background: var(--c-black);
  box-shadow:
    0.118px 0.683px 0.485px -0.292px rgba(0, 0, 0, 0.07),
    0.301px 1.746px 1.24px -0.583px rgba(0, 0, 0, 0.07),
    0.604px 3.501px 2.487px -0.875px rgba(0, 0, 0, 0.08),
    1.144px 6.637px 4.714px -1.167px rgba(0, 0, 0, 0.08),
    2.274px 13.192px 9.371px -1.458px rgba(0, 0, 0, 0.1),
    5px 29px 20.6px -1.75px rgba(0, 0, 0, 0.13);
}

.stat-card__icon img {
  width: 24px;
  height: 24px;
}

/* Chiffre au-dessus du label, gap 8 (Figma 1:2953) */
.stat-card__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xs); /* 8 */
}

/* Chiffre : Inter 400 23/23 noir (Figma 1:2957) */
.stat-card__num {
  font-family: var(--f-ui);
  font-size: 23px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  color: var(--c-black);
}

/* Label : Manrope 500 16/22.4/0.32 #474747 (Figma 1:2961) */
.stat-card__label {
  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);
}

/* ============ Tablette 810–1199 (pas de frame Figma —
   adaptation : mêmes 2 colonnes, image fluide 45 %) ============ */
@media (max-width: 1199px) and (min-width: 810px) {
  .about__inner {
    padding-block: 80px;
    padding-inline: 32px; /* aligné sur le hero tablette */
  }
  .about__media {
    flex: 0 0 45%;
    width: 45%;
  }
}

/* ============ Mobile ≤ 809 (Figma 1:4088 : px 16, py 64,
   contenu puis image ; cartes verticales 173×176, radius 20) ============ */
@media (max-width: 809px) {
  .about__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-l); /* 48 */
    padding-block: 64px;
  }

  /* Dans Figma mobile, l'image passe SOUS le bloc texte + stats (1:4173 en dernier) */
  .about__media {
    order: 2;
    flex: none;
    width: 100%;
  }

  .about__media img {
    height: 266px;
    border-radius: var(--r-card); /* 20 */
  }

  /* H2 mobile : 30/33 (Figma 1:4102) */
  .about .section-head__title {
    font-size: 30px;
    line-height: 33px;
  }

  /* Grille stats : gaps 12, cartes colonnes (icône en haut) */
  .about__stats { gap: 12px; }

  .stat-card {
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--r-card); /* 20 */
  }

  /* Icône : 16px + padding 10 = 36px (Figma 1:4109) */
  .stat-card__icon {
    width: 36px;
    height: 36px;
  }
  .stat-card__icon img {
    width: 16px;
    height: 16px;
  }

  /* Figma 1:4118 : pt-16 → 16 (gap carte) + 16 = 32 entre icône et chiffre */
  .stat-card__text { padding-top: 16px; }
}