/* ============================================================
   05 — PRODUIT (« Vous possédez désormais un Design Brain. »)
   Figma : OOjXOqpdlvsMfWGqmVWN6c / node 5374:25277 — 1168×840
   ============================================================ */

.produit {
  font-family: var(--font-sans);
  background: var(--color-white);
  padding-top: 98px; /* hors tokens: mesuré Figma (écart fin de Difference y=3964 → badge y=4062) */
  padding-bottom: 33px; /* hors tokens: compense le chevauchement de la pilule conclusion (-67px) pour retomber sur les 840px du node */
}

.produit__inner {
  /* contenu 1168px (--container-content) + gouttières minimales de 20px */
  max-width: calc(var(--container-content) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* — Badge « LE PRODUIT » — */
.produit__badge {
  margin: 0 0 19px; /* hors tokens: mesuré Figma */
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.produit__badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #fff1ed, #f0efff); /* hors tokens: mesuré Figma */
}

.produit__badge-label {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--color-accent-coral), var(--color-primary-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* — Titre — */
.produit__title {
  margin: 0 0 31px; /* hors tokens: mesuré Figma */
  max-width: 865px;
  text-align: center;
  color: #2d2d2d; /* hors tokens: mesuré Figma */
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* = 56/54, --text-h2--line-height fluide */
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--text-h2--font-weight);
}

/* — Intro — */
.produit__intro {
  margin: 0 0 89px; /* hors tokens: mesuré Figma */
  max-width: 593px;
  text-align: center;
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
  font-size: var(--text-body);
  line-height: 22px; /* hors tokens: mesuré Figma (token body = 24px) */
  font-weight: var(--text-body--font-weight);
}

/* — Corps : features à gauche, mockup à droite — */
.produit__body {
  display: flex;
  align-items: flex-start;
  gap: 62px; /* hors tokens: mesuré Figma */
  width: 100%;
}

.produit__features {
  list-style: none;
  margin: 0;
  padding: 25px 0 0; /* hors tokens: mesuré Figma (features y=4416 vs corps y=4391) */
  width: 361px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 48px; /* hors tokens: mesuré Figma (pas vertical de 136px) */
}

.produit__feature-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px; /* hors tokens: mesuré Figma */
  color: var(--color-ink);
  font-size: var(--text-h5);
  line-height: var(--text-h5--line-height);
  letter-spacing: var(--text-h5--letter-spacing);
  font-weight: var(--text-h5--font-weight);
}

.produit__feature-title img {
  flex-shrink: 0;
}

.produit__feature-text {
  margin: 8px 0 0;
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
}

/* — Visuel : mockup dashboard sur trame de points — */
.produit__visual {
  position: relative;
  margin: 0 0 0 auto;
  width: 745px;
  height: 511px;
  flex-shrink: 0;
  background-image: url("../assets/produit/dots-pattern.webp");
  background-size: 119px 119px;
  background-position: top left;
  background-repeat: repeat;
}

/* Ligne verticale décorative (SVG horizontal 511×2 pivoté) */
.produit__line {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 511px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(90deg);
  pointer-events: none;
}

.produit__line img {
  display: block;
  width: 100%;
  height: 100%;
}

.produit__screen {
  position: absolute;
  left: 59px;
  top: 0;
  width: 609px;
  height: 408px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 0.779px solid rgba(229, 231, 233, 0.3); /* --color-border @30% */
  box-shadow:
    0 11.69px 23.379px -11.69px rgba(203, 209, 213, 0.16),
    0 15.586px 38.965px -19.483px rgba(203, 209, 213, 0.2),
    0 17.145px 34.29px 0 rgba(203, 209, 213, 0.4); /* base --color-border-strong */
  overflow: hidden;
}

/* Capture recadrée : dimensions Figma en % du cadre */
.produit__screen-img {
  position: absolute;
  left: 0.01%;
  top: 0.04%;
  width: 201.53%;
  height: 123.24%;
  max-width: none;
}

/* — Pilule de conclusion (chevauche le bas de la trame de points) — */
.produit__conclusion {
  position: relative; /* passe au-dessus de la trame */
  margin: -67px auto 0; /* hors tokens: mesuré Figma (pilule y=4835, corps finit y=4902) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 490px;
  max-width: 100%;
  padding: 5px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  text-align: center;
}

.produit__conclusion strong {
  font-weight: 500;
}

/* ============================================================
   Responsive (maquette desktop-only → adaptation)
   ============================================================ */

@media (max-width: 1280px) {
  .produit__body {
    gap: 48px;
  }

  .produit__visual {
    width: min(745px, 100%);
    min-width: 0;
  }

  .produit__screen {
    left: min(59px, 4%);
    width: min(609px, calc(100% - 8%));
  }
}

@media (max-width: 1024px) {
  .produit {
    padding-top: 80px;
  }

  .produit__intro {
    margin-bottom: 56px;
  }

  .produit__body {
    flex-direction: column;
    align-items: center;
  }

  .produit__features {
    width: 100%;
    max-width: 593px;
    padding-top: 0;
    gap: 32px;
  }

  .produit__visual {
    width: 100%;
    height: auto;
    padding: 32px 16px;
    display: flex;
    justify-content: center;
  }

  .produit__line {
    display: none;
  }

  .produit__screen {
    position: relative;
    left: auto;
    top: auto;
    width: min(609px, 100%);
    height: auto;
    aspect-ratio: 609 / 408;
  }

  .produit__conclusion {
    margin-top: 24px;
    width: fit-content;
  }
}

@media (max-width: 768px) {
  .produit {
    padding-top: 64px;
  }

  .produit__title {
    margin-bottom: 20px;
  }

  .produit__intro {
    margin-bottom: 40px;
  }
}


/* --- retours 13/08 : pictos lucide -------------------------------- */
.produit__features .lucide {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--color-ink);
  flex: none;
}