/**
 * Section Hero SaaS
 * Hero section pour SaaS avec badge, social proof et mockup phone
 * Mobile-first responsive design
 */

/* Section uses .section-padding utility class from _utility.css */

.s-hero-saas {
  width: 100%;
}

/* Background wrapper avec le dégradé violet - Mobile first */

.s-hero-saas__bg {
  overflow: hidden;
  padding: 0.9375rem 0.9375rem 0;
  border-radius: 1.25rem;
  background: linear-gradient(315deg, rgb(117 115 255 / 0.15) 0%, rgb(117 115 255 / 0.05) 100%);
}

@media all and (min-width: 769px) {

.s-hero-saas__bg {
    padding: 1.875rem 1.875rem 0;
    border-radius: 1.875rem
}
  }

@media all and (min-width: 1025px) {

.s-hero-saas__bg {
    padding: 3.125rem 1.875rem 0;
    border-radius: 2.5rem
}
  }

/* Layout interne - mobile first: column, desktop: row */

.s-hero-saas__bg .section-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
}

@media all and (min-width: 1025px) {

.s-hero-saas__bg .section-inner {
    flex-direction: row
}
  }

/* Colonne gauche : contenu texte - mobile: 100%, desktop: 600px */

.s-hero-saas__content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  width: 100%;
  gap: 1.875rem;
}

@media all and (min-width: 1025px) {

.s-hero-saas__content {
    width: 37.5rem
}
  }

/* Colonne droite : media - VISIBLE sur mobile (330x292), flex sur desktop */

.s-hero-saas__media {
  display: block;
  overflow: hidden;
  width: 20.625rem;
  height: 18.25rem;
  margin: 0 auto;
}

@media all and (min-width: 1025px) {

.s-hero-saas__media {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0
}
  }

.s-hero-saas__media-image {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Text group wrapper (badge + title + subtitle) - Mobile first gaps */

.s-hero-saas__text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: flex-start;
  gap: 0.9375rem;
}

@media all and (min-width: 769px) {

.s-hero-saas__text-group {
    gap: 1.875rem
}
  }

/* Titre - Mobile: 32px → Tablet: 40px → Desktop: 50px */

.s-hero-saas__title {
  align-self: stretch;
  color: var(--color-greyscale-2);
  font-family: Inter;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.75rem;
}

@media all and (min-width: 769px) {

.s-hero-saas__title {
    font-size: 2.5rem;
    line-height: 3.375rem
}
  }

@media all and (min-width: 1201px) {

.s-hero-saas__title {
    font-size: 3.125rem;
    line-height: 4rem
}
  }

/* Sous-titre - Mobile: 16px → Tablet: 18px → Desktop: 20px */

.s-hero-saas__subtitle {
  align-self: stretch;
  color: var(--color-greyscale-2);
  font-family: Inter;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
}

@media all and (min-width: 769px) {

.s-hero-saas__subtitle {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5rem
}
  }

@media all and (min-width: 1201px) {

.s-hero-saas__subtitle {
    font-size: 1.25rem;
    line-height: 1.625rem
}
  }

.s-hero-saas__cta-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.625rem;
  border-radius: 0.9375rem;
  outline: 0.0625rem rgb(117 115 255 / 0.2) solid;
  outline-offset: -0.0625rem;
  background: rgb(117 115 255 / 0.1);
  gap: 0.9375rem;
}

/* CTA Buttons pixel-perfect styling */

.s-hero-saas__cta-group .a-btn--solid {
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 14.375rem;
  padding: 0.9375rem 1.875rem;
  color: white;
  border-radius: 0.625rem;
  background: #7573ff;
  font-family: Inter;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
}

.s-hero-saas__cta-group .a-btn--border {
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  padding: 0.9375rem 1.875rem;
  color: #313243;
  border-radius: 0.625rem;
  outline: 0.125rem #7573ff solid;
  outline-offset: -0.125rem;
  background: transparent;
  font-family: Inter;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
}

/* Social Proof */

.s-hero-saas__social-proof {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  gap: 0.625rem;
}

.s-hero-saas__social-proof-content {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
}

.s-hero-saas__social-proof-text {
  align-self: stretch;
  color: #313243;
  font-family: Inter;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
}

/* Star icon styling */

.s-hero-saas__star-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #313243;
}

/* Badge styles */

.s-hero-saas__badge-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 0.625rem;
  outline: 0.0625rem #deddfd solid;
  outline-offset: -0.0625rem;
  background: white;
  gap: 0.625rem;
}

.s-hero-saas__badge-text {
  color: #7573ff;
  font-family: Inter;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
}

/* ============================================
   VARIANTE LAB
   ============================================ */

/* Appliquer le gradient gris et styles pour la variante lab */

.s-hero-saas--lab .s-hero-saas__bg {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: flex-start;
  padding: 3.75rem 1.875rem;
  border-radius: 0.9375rem;
  background: linear-gradient(134deg, #ececff 0%, #f8f8f8 100%);
  gap: 1.875rem;
}

/* Ratio texte/image selon Figma : texte flex: 1, image sans flex (auto) */

.s-hero-saas--lab .s-hero-saas__content {
  flex: 1 1 0;
  width: auto;
  min-width: 18.75rem;
}

.s-hero-saas--lab .s-hero-saas__media {
  flex: 0 0 auto;
  width: auto;
  max-width: 50%;
}

/* Badge fond foncé */

.s-hero-saas--lab .s-hero-saas__badge-container {
  min-width: 3rem;
  padding: 0.9375rem;
  border-radius: 0.625rem;
  outline: none;
  background: #313243;
}

.s-hero-saas--lab .s-hero-saas__badge-text {
  text-align: center;
  color: white;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.s-hero-saas--lab .s-hero-saas__subtitle {
  color: #313243;
  font-size: 1rem;
  line-height: 1.375rem;
}

/* Responsive pour variante lab - mobile first */

.s-hero-saas--lab .s-hero-saas__bg {
  flex-direction: column;
  padding: 3.75rem 0.9375rem;
}

@media all and (min-width: 1025px) {

.s-hero-saas--lab .s-hero-saas__bg {
    flex-direction: row;
    padding: 3.75rem 1.875rem
}
  }

.s-hero-saas--lab .s-hero-saas__content {
  width: 100%;
}

@media all and (min-width: 1025px) {

.s-hero-saas--lab .s-hero-saas__content {
    width: auto
}
  }