/* ============================================================
   09 — OFFRE « Déployez votre Design Brain. » — FOND SOMBRE
   (retours 13/08 : l'inversion claire v2 était une anomalie)
   Figma v2 : OOjXOqpdlvsMfWGqmVWN6c / node 7206:9412 (1612×1112, bleed ±86px)
   + fond node 7206:9413 (CLAIR : blanc + glow coral→violet bas, bg-glow-v2.svg).
   ⚠ Anomalie maquette v2 : textes restés blancs sur ce fond clair dans Figma →
   interprétation lisible ici (encre neutral-950 / ink-soft), cf. commentaire HTML.
   ============================================================ */

.offre {
  position: relative;
  overflow: hidden; /* gère le bleed des logos (frame 1612 > 1440) */
  background: var(--color-neutral-950); /* retour 13/08 : fond sombre confirmé */
  color: var(--color-white);
  padding: 127px clamp(20px, 8.33vw, 120px) 44px;
}

/* Halo dégradé plein cadre (SVG décoratif au-dessus du fond #111) */
.offre__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.offre__container {
  position: relative;
  max-width: 1005px; /* hors tokens: mesuré Figma (panneau 590 + gap 54 + colonne 361) */
  margin-inline: auto;
}

/* ---------- Header ---------- */

.offre__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Pilule eyebrow : anneau sombre + remplissage dégradé clair + texte dégradé */
.offre__eyebrow {
  margin: 0;
  display: inline-flex;
  padding: 2px;
  background: var(--color-neutral-950);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border à 50% */
  border-radius: 70px; /* hors tokens: mesuré Figma (proche --radius-pill) */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05); /* v2 : halo blanc 20% invisible sur fond clair → ombre douce sombre (équiv. eyebrows sections claires) */
}

.offre__eyebrow-fill {
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  height: 28px;
  border-radius: 70px;
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%); /* hors tokens: mesuré Figma */
}

.offre__eyebrow-text {
  font-family: var(--font-sans);
  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;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.offre__title {
  margin: 19px 0 0;
  max-width: 865px;
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* 56/54 */
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--text-h2--font-weight);
  color: var(--color-white); /* retour 13/08 : fond sombre → blanc */
}

.offre__subtitle {
  margin: 32px 0 0;
  max-width: 689px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8); /* retour 13/08 : fond sombre */
}

/* ---------- Contenu : panneau pricing + bénéfices ---------- */

.offre__content {
  margin-top: 63px;
  display: flex;
  align-items: flex-start;
  gap: 54px;
}

/* Panneau « glass » autour de la card */
.offre__panel {
  flex: 0 1 590px;
  padding: 14px 15px;
  border: 1px solid rgba(229, 231, 233, 0.5); /* v2 : blanc 30% invisible sur fond clair → --color-border @50% */
  border-radius: var(--radius-xl);
  background: linear-gradient(to left, rgba(255, 241, 237, 0.1), rgba(240, 239, 254, 0.1)); /* hors tokens: mesuré Figma */
}

.offre__pricing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 28px 28px;
  background: var(--color-white);
  border: 1px solid #e6ddce; /* hors tokens: mesuré Figma */
  border-radius: var(--radius-lg);
  color: var(--color-neutral-950);
}

.offre__brand {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 34px; /* hors tokens: mesuré Figma */
  font-weight: 800;
  line-height: normal;
  background: linear-gradient(90deg, #fc774d 0%, #6a5efc 100%); /* hors tokens: mesuré Figma (proche coral/primary) */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.offre__items {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offre__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6ddce; /* hors tokens: mesuré Figma */
  font-size: var(--text-tiny);
  line-height: normal;
}

.offre__item dt {
  font-family: var(--font-sans);
  font-weight: 500;
  color: #1b1815; /* hors tokens: mesuré Figma */
}

.offre__item dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  text-align: right;
  color: rgba(17, 17, 17, 0.7); /* --color-neutral-950 à 70% */
  white-space: nowrap;
}

.offre__total {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: normal;
  font-weight: 400;
  color: var(--color-neutral-950);
}

.offre__total s {
  font-weight: 600;
}

.offre__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.offre__price-amount {
  font-family: var(--font-sans);
  font-size: 34px; /* hors tokens: mesuré Figma */
  font-weight: 800;
  line-height: normal;
  color: #1b1815; /* hors tokens: mesuré Figma */
}

.offre__price-terms {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: normal;
  font-weight: 400;
  color: var(--color-neutral-950);
}

/* Encart garantie */
.offre__guarantee {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: #eeecff; /* hors tokens: mesuré Figma */
  border-radius: 10px; /* hors tokens: mesuré Figma */
}

.offre__guarantee-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: normal;
  font-weight: 600;
  color: var(--color-primary-vivid);
}

.offre__guarantee-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px; /* hors tokens: mesuré Figma */
  line-height: normal;
  font-weight: 400;
  color: #5c564d; /* hors tokens: mesuré Figma */
}

.offre__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px; /* hors tokens: mesuré Figma */
  line-height: normal;
  font-weight: 400;
  color: rgba(17, 17, 17, 0.7); /* --color-neutral-950 à 70% */
}

.offre__note strong {
  font-weight: 500;
}

/* ---------- CTA ---------- */

.offre__ctas {
  margin-top: 12px; /* retour 13/08 : respiration au-dessus des boutons */
  display: flex;
  flex-wrap: nowrap; /* retour 13/08 : boutons côte à côte */
  gap: 10px;
}

.offre__cta {
  white-space: nowrap; /* retour 13/08 : côte à côte, sans repli */
  display: inline-flex;
  align-items: center;
  justify-content: center; /* compact */
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
  height: 46px;
  font-size: 13px; /* retour 13/08 : compact pour tenir à deux */
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 600;
  text-decoration: none;
}

.offre__cta--primary {
  width: auto; /* retour 13/08 */
  padding: 0 13px 0 22px;
  color: var(--color-white);
  background: linear-gradient(90deg, #2d2d2d 0%, #000000 52.4%, #2d2d2d 100%); /* hors tokens: mesuré Figma */
  box-shadow:
    inset 0 2px 0 0 rgba(255, 255, 255, 0.16),
    0 8px 4px -8px rgba(88, 88, 88, 0.24),
    0 8px 16px -16px rgba(51, 51, 51, 0.28),
    0 4px 12px 0 rgba(126, 126, 126, 0.16),
    0 8px 16px 0 rgba(134, 134, 134, 0.16);
}

.offre__cta--ghost {
  width: auto; /* retour 13/08 */
  padding: 0 11px 0 19px;
  color: var(--color-neutral-950);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* ---------- Bénéfices ---------- */

.offre__benefits {
  flex: 0 1 361px;
  padding-top: 31px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.offre__benefit-title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: var(--text-h5);
  line-height: 26px; /* hors tokens: mesuré Figma (21/26 sur titres 2 lignes) */
  letter-spacing: var(--text-h5--letter-spacing);
  font-weight: var(--text-h5--font-weight);
  color: var(--color-white); /* retour 13/08 : fond sombre → blanc */
}

.offre__benefit-text {
  margin: 0;
  max-width: 361px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7); /* retour 13/08 : fond sombre */
}

/* ---------- Logos (rangée en bleed : 1593px > frame 1440) ---------- */

.offre__logos {
  position: relative;
  margin-top: 28px;
  height: 100px;
  display: flex;
  justify-content: center;
  overflow: hidden; /* rangée non wrappée : logos de bord rognés comme dans la maquette */
  /* full-bleed : annule le padding latéral de la section */
  margin-inline: calc(-1 * clamp(20px, 8.33vw, 120px));
}

/* Même géométrie que .hero__logos-row (cellules 240×100, logo 200 max) */
.offre__logos-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offre__logos-row li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 100px;
}

/* Blanchiment sur fond sombre : invert(1) passe les tracés sombres en clair
   et les fonds blancs en noir ; mix-blend-mode: screen laisse ensuite le noir
   totalement transparent. Marche aussi bien pour les SVG nettoyés (fond
   transparent) que pour les bitmaps qui gardent un fond blanc incrusté. */
.offre__logos-row img {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 64px;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* ---------- Responsive ---------- */

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

  .offre__content {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .offre__panel {
    flex-basis: auto;
    width: min(100%, 590px);
  }

  .offre__benefits {
    flex-basis: auto;
    width: min(100%, 590px);
    padding-top: 0;
  }

  .offre__logos-row li {
    width: 180px;
  }
}

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

  .offre__pricing {
    padding: 20px 20px 24px;
  }

  .offre__ctas {
    flex-direction: column;
  }

  .offre__cta--primary,
  .offre__cta--ghost {
    width: 100%;
    max-width: 320px;
  }

  .offre__benefit-title br {
    display: none;
  }

  .offre__logos {
    height: 72px;
  }

  .offre__logos-row li {
    width: 140px;
    height: 72px;
  }
}