/* ============================================================
   Hero — Figma 8:2849 · 1920 × 1510,63
   Section : bg navy · px 30 · pt 160 · pb 60 · conteneur 1140 · gap 51
   ============================================================ */
.hero {
  position: relative;
  background: var(--c-navy);
  color: var(--c-white);
  padding-top: 160px;
  padding-bottom: 60px;
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-51);
}

/* ---------- Bloc de titre : 1140 × 393, déborde de 30 de chaque côté ---------- */
.hero__titles {
  position: relative;
  width: calc(100% + 60px);
  margin-inline: -30px;
}

.hero__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: 31px;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-lead);
  color: var(--c-blue-pale);
}
.hero__heart {
  width: 24px;
  height: 21px;
  background-color: var(--c-red);
  -webkit-mask: url('../../assets/masks/coeur.png') no-repeat center / contain;
          mask: url('../../assets/masks/coeur.png') no-repeat center / contain;
}

/* H1 : 3 lignes de 115, à partir de y 48 */
.hero__h1 {
  margin-top: 17px;
  text-align: center;
  color: var(--c-white);
}
.hero__line { display: block; }
.hero__line--2 { display: block; }
.hero__violet { color: var(--c-violet); }
.hero__orange { color: var(--c-orange); }

/* La ligne 2 réserve la place de la photo intercalée */
.hero__line--2 .hero__orange { margin-left: 150px; }

/* ---------- Décors ---------- */
.hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__st { position: absolute; }

/* Positions relevées au getBoundingClientRect sur le live, ramenées à
   l'origine du bloc de titre (x 148,5 · y 160 pour un viewport de 1497). */
.hero__st--1      { left: 130.9px; top: 27.6px;  width: 36px;    height: 36px; }
.hero__st--2      { left: 152.1px; top: 26.5px;  width: 152.1px; height: 152.1px; }
.hero__st--3      { left: 840.1px; top: 131.6px; width: 36px;    height: 36px; }
.hero__st--4      { left: 752.7px; top: 35.3px;  width: 48.7px;  height: 48.7px; }
.hero__st--5      { left: 180px;   top: 162.6px; width: 36px;    height: 36px; }
.hero__st--6      { left: 989px;   top: 238.1px; width: 36px;    height: 36px; }
.hero__st--7      { left: 400px;   top: 277.6px; width: 44px;    height: 20.6px; }
.hero__st--8      { left: 641.3px; top: 301.1px; width: 22px;    height: 22px; }
.hero__st--smiley { left: 821.2px; top: -43.8px; width: 183.7px; height: 183.9px; }

/* Photo détourée sur rectangle jaune, avec étiquette pivotée */
.hero__photo {
  position: absolute;
  left: 576.7px;
  top: 111.6px;
  width: 144.4px;
  height: 169.3px;
}
.hero__photo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30px;
  width: 139px;
  height: 140px;
  background: var(--c-lime);
}
.hero__photo-img { position: absolute; left: 12px; top: 6px; width: 144px; height: 169px; }
.hero__photo-label {
  position: absolute;
  left: 41px;
  top: 48px;
  writing-mode: vertical-rl;
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: 900;
  line-height: 22px;
  color: var(--c-white);
  text-shadow: 0 1px 3px rgba(5, 26, 47, 0.5);
}
.hero__photo-ic { position: absolute; left: -18px; top: 35px; width: 28px; height: 28px; }

/* ---------- Accroche ---------- */
/* Bloc de 39 de haut sur le live */
.hero__accroche {
  height: 39px;
  font-family: var(--f-sans);
  font-size: 32px;
  font-weight: 500;
  line-height: 38.4px;
  color: #f97316;
  text-align: center;
}

/* ---------- Marquee des logos clients : piste 1094, −100 px/s ---------- */
.hero__clients { width: 1094px; max-width: 100%; height: 80px; }
.hero__clients-track { gap: 75px; }
.hero__clients-track li { display: flex; align-items: center; flex-shrink: 0; }
.hero__clients-track img { width: auto; max-height: 79px; object-fit: contain; }

/* ---------- Pitch + bouton : bloc 604, centré ---------- */
.hero__pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  min-height: 207px;
  width: 604px;
  max-width: 100%;
}
.hero__pitch-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 34px;
  color: var(--c-blue-pale);
  text-align: center;
}

/* ---------- Bande basse : 420 à gauche, 488 à droite ---------- */
.hero__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-24);
  width: 100%;
  min-height: 368px;
}

.hero__bottom-left { position: relative; width: 420px; flex-shrink: 0; padding-top: 86px; }

.hero__tags { position: absolute; left: 73px; top: 0; width: 205px; height: 104px; }
.hero__tags .tag { position: absolute; }
.hero__tag-1 { left: 3px;  top: 0px;  transform: rotate(-4deg); }
.hero__tag-2 { left: 0;    top: 38px; transform: rotate(3deg); }
.hero__tag-3 { left: 69px; top: 57px; transform: rotate(-6deg); }

.hero__claim {
  font-family: var(--f-sans);
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: var(--lh-h6);
  text-transform: uppercase;
}
.hero__claim strong { font-weight: 500; color: var(--c-white); }

.hero__bottom-right { width: 488px; flex-shrink: 0; padding-top: 60px; }
.hero__cards { display: flex; gap: var(--sp-24); --enc-color: var(--c-navy); }
.hero__note {
  margin-top: var(--sp-24);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-blue-pale);
}

/* ---------- Arche de transition ----------
   Figma : 249,59 × 124,8 dans un cadre de 1920, soit 13 % de la largeur.
   Le live donne 195 × 97 à 1497 : même ratio. On la dimensionne donc
   en pourcentage, jamais en pixels fixes. */
.hero__arche {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13vw;
  min-width: 140px;
  max-width: 250px;
  aspect-ratio: 2 / 1;
  background-color: var(--c-white);
  -webkit-mask: url('../../assets/masks/arche.svg') no-repeat bottom center / 100% 100%;
          mask: url('../../assets/masks/arche.svg') no-repeat bottom center / 100% 100%;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
  .hero__titles { width: 100%; margin-inline: 0; }
  .hero__deco { display: none; }
  .hero__line--2 .hero__orange { margin-left: 0; }
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 48px; }
  .hero__bottom-left,
  .hero__bottom-right { width: 100%; padding-top: 0; }
  .hero__tags { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
  .hero__tags .tag { position: static; transform: none; }
}

@media (max-width: 991px) {
  .hero { padding-top: 130px; }
  .hero__accroche { font-size: 24px; line-height: 30px; }
  .hero__clients { width: 100%; }
  .hero__clients-track { gap: 48px; }
}

@media (max-width: 767px) {
  .hero { padding-top: 120px; padding-bottom: 40px; }
  .hero__inner { gap: 32px; }
  .hero__accroche { font-size: 20px; line-height: 26px; }
  .hero__clients { height: 60px; }
  .hero__clients-track { gap: 32px; }
  .hero__clients-track img { max-height: 56px; }
  .hero__pitch { width: 100%; }
  .hero__btn { width: 100%; }
  .hero__cards { flex-direction: column; }
  .stat-card { width: 100%; }
  .hero__arche { min-width: 110px; }
}