/* How it works Introduction Section */
.how-it-works-intro {
   background: #fff;
   padding: 88px 0 44px 0;
  
   text-align: center;
 }

.how-it-works-intro__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.how-it-works-intro__title {
  font-size: 48px;
  font-weight: 800;
  color: #000000;
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.how-it-works-intro__subtitle {
  font-size: 20px;
  color: #000000;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* How it works Section */
.how-it-works { background: #fff; padding: 40px 0; color: #0f172a; }
.howit__container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
/* séparateur entre sections */
/* Séparateurs entre conteneurs de sections injectées */
.how-it-works-mount { display: block; }
.how-it-works-mount + .how-it-works-mount { border-top: 1px solid #e5e7eb; box-shadow: inset 0 1px 0 rgba(0,0,0,0.02); }
/* Réduire le top padding uniquement pour la première session sous l’intro */
.how-it-works-mount:first-of-type .how-it-works { padding-top: 24px; }
.howit__header { text-align: center; margin-bottom: 16px; }
.howit__title { font-size: 28px; font-weight: 800; color: #111827; }
.howit__subtitle { max-width: 760px; margin: 12px auto 0; color: #6b7280; font-size: 16px; }

/* Layout 2 colonnes */
.howit__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; margin-top: 16px; }
.howit__header--left { text-align: left; margin-bottom: 16px; }
.howit__content .howit__timeline { margin: 20px 0 0; max-width: 100%; }
.howit__media { position: relative; border-radius: 16px; overflow: hidden; background: #f3f4f6; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); aspect-ratio: 16 / 10; }
.howit__media img, .howit__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Accents / Variantes visuelles */
.how-it-works--accent-1 .howit__title { color: #3B82F6; }
.how-it-works--accent-2 .howit__title { color: #3B82F6; }
.how-it-works--accent-3 .howit__title { color: #3B82F6; }
.how-it-works--accent-4 .howit__title { color: #3B82F6; }

/* Spécifique Glamzn: donner plus d’espace à la vidéo */
.how-it-works--accent-1 .howit__grid {
  grid-template-columns: 0.7fr 1.3fr;
}
.how-it-works--accent-1 .howit__media {
  aspect-ratio: 16 / 9;
}

/* Timeline */
.howit__timeline { position: relative; max-width: 980px; margin: 36px auto 0; height: 2px; background: #e5e7eb; }
.howit__timeline::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%); }
.howit__dot { position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 9999px; background: #fff; border: 1px solid #e5e7eb; color: #9ca3af; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.howit__dot:nth-child(1) { left: 0; transform: translateX(-50%); }
.howit__dot:nth-child(2) { left: 50%; transform: translateX(-50%); }
.howit__dot:nth-child(3) { right: 0; transform: translateX(50%); }

/* Steps */
.howit__steps { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; align-items: start; }
.howit__step { min-width: 0; }
.howit__step-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; line-height: 1.3; word-wrap: break-word; }
.howit__step-desc { color: #6b7280; font-size: 14px; line-height: 1.6; word-wrap: break-word; hyphens: auto; }

/* Responsive */
@media (max-width: 1024px) {
  .how-it-works { padding: 32px 0; }
  /* 1re session plus proche du titre sur tablette */
  .how-it-works-mount:first-of-type .how-it-works { padding-top: 12px; }
  .howit__steps { gap: 24px; }
  .howit__step-title { font-size: 17px; }
  .howit__step-desc { font-size: 13px; }
  /* Introduction responsive */
  .how-it-works-intro__title { font-size: 40px; }
  .how-it-works-intro__subtitle { font-size: 18px; }
}

@media (max-width: 900px) {
  .howit__steps { gap: 20px; }
  .howit__step-title { font-size: 16px; }
  .howit__step-desc { font-size: 13px; line-height: 1.5; }
}

@media (max-width: 768px) {
  .how-it-works { padding: 6px 0; }
  .howit__title { font-size: 24px; }
  .howit__timeline { display: none; }
  .howit__steps { grid-template-columns: 1fr; gap: 20px; }
  .howit__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 6px; }
  .howit__header--left { text-align: center; }
  .howit__header { margin-bottom: 10px; }
  /* 1re session plus proche du titre sur mobile */
  .how-it-works-mount:first-of-type .how-it-works { padding-top: 4px; }
  
  /* Introduction responsive mobile optimisée */
  .how-it-works-intro {
    background: #fff;
    padding: 40px 0 10px 0;
  }
  
  .how-it-works-intro__container { padding: 0 14px; }
  .how-it-works-intro__title {
    font-size: clamp(22px, 6.5vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    text-wrap: balance;
  }
  .how-it-works-intro__subtitle {
    font-size: clamp(14px, 4.2vw, 15.5px);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 4px;
    color: #111827;
    text-wrap: pretty;
  }
  
  /* Container plus serré sur mobile */
  .howit__container { padding: 0 16px; }
  
  /* Grille et espacements resserrés */
  .howit__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 6px; }
  .howit__steps { grid-template-columns: 1fr; gap: 16px; }
  
  /* Sous-titre plus compact et lisible */
  .howit__subtitle { font-size: 14.5px; line-height: 1.6; }
  
  /* Média (vidéo) optimisé pour mobile */
  .howit__media { aspect-ratio: 16 / 9; max-width: 620px; margin: 0 auto; border-radius: 12px; }
  .howit__media .howit__video { width: 100%; height: 100%; object-fit: cover; }
  .howit__media { border-radius: 10px; }
  /* Forcer l’empilement pour la section Glamzn (Créer des vidéos Shorts) sur mobile */
  .how-it-works--accent-1 .howit__grid { grid-template-columns: 1fr; gap: 14px; }
  .how-it-works--accent-1 .howit__header--left { text-align: center; }
  .how-it-works--accent-1 .howit__media { max-width: 620px; margin: 0 auto; }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .howit__title { font-size: 22px; }
  .howit__media { border-radius: 10px; }
}

@media (max-width: 360px) {
  .how-it-works-intro__container { padding: 0 12px; }
  .how-it-works-intro__title { font-size: clamp(20px, 7vw, 24px); }
  .how-it-works-intro__subtitle { font-size: 14px; }
}