/* Positive Theme — hero partenaire Spiice sous l'en-tête.
   Handoff « Bannière header Spiice » (23/08/2026), valeurs reprises telles quelles :
   dégradé corail → orange, titre blanc souligné jaune, CTA pilule noire, preuve sociale,
   blob jaune + deux visuels d'app inclinés à droite. Police : Work Sans (déjà chargée),
   liberté laissée par le handoff. Variante mobile (< 720 px) non fournie : titre 28 px,
   CTA pleine largeur, visuels retirés, hauteur libre. */

.pm-sp {
  --sp-yellow: #FFD34E; --sp-ink: #12100F; --sp-cream: #FFF7EE;
  position: relative; width: 100%; max-width: 1920px; margin: 0 auto; height: 340px; overflow: hidden;
  background: linear-gradient(102deg, #FB5461 0%, #FC6459 40%, #FF8A5B 76%, #FFA463 100%);
  border-bottom: var(--pm-bd);
  font-family: var(--pm-font-body); color: #fff; box-sizing: border-box;
}
.pm-sp * { box-sizing: border-box }
.pm-sp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(64% 90% at 8% 14%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%); pointer-events: none }

.pm-sp-in {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0,1fr) clamp(360px, 30vw, 520px);
  align-items: center; gap: 24px; padding: 0 0 0 clamp(32px, 4vw, 72px);
}
.pm-sp-copy { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px }
.pm-sp-logo { display: block; height: 30px; width: auto }
.pm-sp-t { margin: 0; font-size: clamp(28px, 2.2vw, 40px); line-height: 1.14; font-weight: 800; letter-spacing: -.02em; color: #fff; text-wrap: pretty }
.pm-sp-u { position: relative; display: inline-block; padding-bottom: 2px }
.pm-sp-u svg { position: absolute; left: -6px; bottom: -3px; width: calc(100% + 12px); height: 12px; overflow: visible; display: block }

.pm-sp-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap }
.pm-sp-cta {
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 28px; border-radius: 999px;
  background: var(--sp-ink); color: #fff; font-size: 17px; font-weight: 700; white-space: nowrap; text-decoration: none;
  box-shadow: 0 12px 24px rgba(70,12,12,.26); transition: background 160ms ease, color 160ms ease;
}
.pm-sp-cta span { font-size: 16px; line-height: 1 }
.pm-sp-cta:hover, .pm-sp-cta:focus-visible { background: #fff; color: var(--sp-ink) }
.pm-sp-cta:focus-visible { outline: 3px solid var(--sp-yellow); outline-offset: 2px }

.pm-sp-proof { display: flex; align-items: center; gap: 11px }
.pm-sp-avs { display: flex }
.pm-sp-avs img, .pm-sp-more { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.95); display: block }
.pm-sp-avs img { object-fit: cover }
.pm-sp-avs img:first-child { object-position: 50% 22% }
.pm-sp-avs img + img { object-position: 50% 18% }
.pm-sp-avs img + img, .pm-sp-more { margin-left: -11px }
.pm-sp-more { background: var(--sp-yellow); color: var(--sp-ink); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center }
.pm-sp-n { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.94); line-height: 1.3; white-space: nowrap }

.pm-sp-vis { position: relative; height: 100% }
.pm-sp-blob { position: absolute; right: 90px; top: 22px; width: clamp(220px, 17vw, 300px); height: clamp(220px, 17vw, 300px); border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; background: var(--sp-yellow); opacity: .9 }
.pm-sp-s1, .pm-sp-s2 { position: absolute; object-fit: cover; border-radius: 26px; border: 5px solid var(--sp-cream); max-width: none }
.pm-sp-s1 { right: clamp(160px, 12vw, 232px); top: 26px; width: clamp(160px, 11vw, 200px); height: 330px; object-position: 50% 20%; transform: rotate(-6deg); box-shadow: 0 26px 50px rgba(80,16,16,.32) }
.pm-sp-s2 { right: 36px; top: 42px; width: clamp(156px, 11vw, 196px); height: 320px; object-position: 50% 34%; transform: rotate(6deg); box-shadow: 0 22px 44px rgba(80,16,16,.30) }

/* Tablette : la colonne texte ne tient plus dans 340 px, la hauteur suit. */
@media (max-width: 1000px) {
  .pm-sp { height: auto; min-height: 340px }
  .pm-sp-in { padding-top: 40px; padding-bottom: 30px }
  .pm-sp-vis { position: absolute; right: 0; top: 0; bottom: 0; width: clamp(360px, 30vw, 520px) }
  .pm-sp-in { grid-template-columns: minmax(0,1fr) clamp(360px, 30vw, 520px) }
}

/* Mobile : colonne unique, pas de visuels, hauteur libre. */
@media (max-width: 719px) {
  .pm-sp { height: auto }
    .pm-sp-in { display: block; padding: 34px 16px 28px }
  .pm-sp-copy { max-width: none; gap: 18px }
  .pm-sp-logo { height: 26px }
  .pm-sp-t { font-size: 28px }
  .pm-sp-row { width: 100%; gap: 16px }
  .pm-sp-cta { width: 100%; justify-content: center; height: 52px }
  .pm-sp-vis { display: none }
}