/* =========================================================
   🧱 HERO SPACER — ESPACE SOUS LE HERO
   (Divi safe / responsive)
========================================================= */

.tf-hero-spacer {
  width: 100%;
  height: 80px;
  margin-top: var(--hero-spacer-mt);
}

/* =========================================================
   VARIABLES GLOBALES
========================================================= */
:root {
  --hero-space-1: 22px;
  --hero-space-2: 34px;

  --tf-red: #bd3535;
  --tf-dark: #46415c;
  --tf-muted: #b3b8d0;
}

/* =========================================================
   🟪 ULTRA-WIDE ≥ 2200px
========================================================= */
@media (min-width: 2200px) {
  .tf-hero { min-height: 998px; }
  .tf-hero-content { margin-left: 80px; }
}

/* =========================================================
   🎛 VARIABLES CENTRALES
========================================================= */
:root {
  --hero-scale: 1;
  --hero-shift-y: 0px;
  --hero-max-width: 680px;
  --hero-desc-scale: 1;
}

/* =========================================================
   🟥 HERO — BASE DESKTOP
========================================================= */
.tf-hero {
  position: relative;
  width: 100%;
  min-height: calc(760px * var(--hero-scale));

  background-color: #fff;
  background-image: url("https://true-fire.com/wp-content/uploads/2026/01/Slide-true-fire.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right calc(50% + var(--hero-shift-y));

  display: flex;
  align-items: center;
}

.tf-hero-inner {
  width: 100%;
  max-width: 1400px;
  padding-left: 100px;
}

.tf-hero-content {
  max-width: var(--hero-max-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transform: translateY(var(--hero-shift-y));
}

/* =========================================================
   TYPOGRAPHIE
========================================================= */

.tf-hero-kicker,
.tf-hero-title {
  font-family: 'BW Modelica', sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.0001em;
  word-spacing: -0.12em;
  font-size: calc(clamp(34px, 4.4vw, 68px) * var(--hero-scale));
}

.tf-hero-kicker {
  color: var(--tf-red);
  margin-bottom: 16px;
}

.tf-hero-title {
  color: var(--tf-dark);
}

.tf-hero-title + .tf-hero-title {
  margin-top: 6px;
}

/* =========================================================
   DESCRIPTION
========================================================= */
.tf-hero-desc {
  max-width: var(--hero-max-width);
  margin: 15px 0 34px;
  font-family: 'BW Modelica', sans-serif;
  font-weight: 700;
  font-size: calc(
    clamp(14px, 1.6vw, 20px)
    * var(--hero-scale)
    * var(--hero-desc-scale)
  );
  line-height: 1.45;
  color: var(--tf-muted);
}

/* =========================================================
   CTA
========================================================= */
.tf-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px * var(--hero-scale)) calc(32px * var(--hero-scale));
  font-family: 'BW Modelica', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(clamp(14px, 1.6vw, 25px) * var(--hero-scale));
  color: #fff;
  background-color: var(--tf-red);
  border: 2px solid var(--tf-red);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.tf-hero-btn:hover {
  background: transparent;
  color: var(--tf-red);
}

.tf-hero-btn-icon {
  width: calc(30px * var(--hero-scale));
  height: calc(30px * var(--hero-scale));
  fill: currentColor;
}

/* =========================================================
   🧠 BREAKPOINTS — VARIABLES ONLY
========================================================= */

@media (max-width: 1920px) {
  :root {
    --hero-shift-y: 32px;
  }
}

@media (max-width: 1669px) {
  :root {
    --hero-shift-y: -32px;
    --hero-spacer-mt: -200px;
  }
}

@media (max-width: 1540px) {
  :root {
    --hero-scale: 0.9;
    --hero-shift-y: 12px;
    --hero-max-width: 520px;
    --hero-desc-scale: 0.92;
    --hero-spacer-mt: -110px;
  }
}

@media (max-width: 1366px) {
  :root {
    --hero-shift-y: -32px;
    --hero-spacer-mt: -180px;
  }
}

@media (max-width: 1280px) {
  :root {
    --hero-scale: 0.85;
    --hero-shift-y: -42px;
    --hero-max-width: 460px;
  }
}

@media (max-width: 1078px) {
  :root {
    --hero-scale: 0.85;
    --hero-shift-y: -42px;
    --hero-max-width: 460px;
    --hero-spacer-mt: -240px;
  }
      .tf-hero-content {
    transform: translateX(-30px) translateY(-70px);
  }
}

@media (max-width: 1033px) {
  :root {
    --hero-scale: 0.82;
    --hero-shift-y: -80px;
    --hero-max-width: 340px;
    --hero-desc-scale: 1.2;
  }
    .tf-hero-btn {
    margin-top: -15px !important;
    padding: 8px 18px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 977px) {
  :root {
    --hero-scale: 0.89;
    --hero-shift-y: -130px;
    --hero-max-width: 320px;
    --hero-spacer-mt: -340px;
  }
    .tf-hero-content {
    transform: translateX(-30px) translateY(-150px);
  }

  .tf-hero-btn-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 894px) {
  :root {
    --hero-scale: 0.89;
    --hero-shift-y: -150px;
    --hero-max-width: 300px;
    --hero-spacer-mt: -380px;
  }
    .tf-hero-content {
    transform: translateX(-30px) translateY(-180px);
  }
      .tf-hero-btn {
    margin-top: -15px !important;
    padding: 8px 18px !important;
    font-size: 16px !important;
  }

}

@media (max-width: 864px) {
  :root {
    --hero-scale: 0.89;
    --hero-shift-y: -140px;
    --hero-max-width: 290px;
  }
}

@media (max-width: 830px) {
  :root {
    --hero-scale: 0.89;
    --hero-shift-y: -150px;
    --hero-max-width: 270px;
    --hero-desc-scale: 1.1;
    --hero-spacer-mt: -400px;
  }
    .tf-hero-content {
    transform: translateX(-30px) translateY(-180px);
  }
      .tf-hero-btn {
    margin-top: -15px !important;
    padding: 8px 18px !important;
    font-size: 16px !important;
  }

}

@media (max-width: 768px) {
  :root {
    --hero-scale: 0.80;
    --hero-shift-y: -140px;
    --hero-max-width: 240px;
    --hero-spacer-mt: -360px;
  }

  .tf-hero-content {
    transform: translateX(-20px) translateY(-150px);
  }
      .tf-hero-btn {
    margin-top: -15px !important;
    padding: 8px 18px !important;
    font-size: 16px !important;
  }

}

@media (max-width: 680px) {

  :root {
    --hero-scale: 0.90;
    --hero-shift-y: -10px;
    --hero-max-width: 400px;
    --hero-spacer-mt: -320px;
  }

  .tf-hero-content {
    transform: translateX(-40px) translateY(-170px);
  }
    .tf-hero-btn {
    margin-top: 20px !important;
    padding: 8px 18px !important;
    font-size: 20px !important;
  }

}

@media (max-width: 580px) {

  :root {
    --hero-scale: 0.90;
    --hero-shift-y: -20px;
    --hero-max-width: 400px;
    --hero-spacer-mt: -330px;
  }

  .tf-hero-content {
    transform: translateX(-40px) translateY(-170px);
  }

  .tf-hero-btn {
    margin-top: 40px !important;
    padding: 8px 18px !important;
    font-size: 20px !important;
  }
}

@media (max-width: 480px) {

  :root {
    --hero-scale: 0.90;
    --hero-shift-y: -50px;
    --hero-max-width: 320px;
    --hero-spacer-mt: -360px;
  }

  .tf-hero-content {
    transform: translateX(-50px) translateY(-170px);
  }

  .tf-hero-btn {
    margin-top: 20px !important;
    padding: 8px 18px !important;
    font-size: 20px !important;
  }
}

@media (max-width: 440px) {

  :root {
    --hero-scale: 0.90;
    --hero-shift-y: -50px;
    --hero-max-width: 340px;
    --hero-spacer-mt: -360px;
  }

  .tf-hero-content {
    transform: translateX(-70px) translateY(-170px);
  }

  .tf-hero-btn-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 390px) {

  :root {
    --hero-scale: 0.90;
    --hero-shift-y: -50px;
    --hero-max-width: 360px;
    --hero-spacer-mt: -360px;
  }

  .tf-hero-content {
    transform: translateX(-70px) translateY(-170px);
  }

  .tf-hero-btn-icon {
    width: 19px !important;
    height: 19px !important;
  }
  .tf-hero-btn {
        margin-top: 10px !important;
        padding: 6px 18px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 345px) {

  :root {
    --hero-scale: 0.85;
    --hero-shift-y: -40px;
    --hero-max-width: 330px;
    --hero-spacer-mt: -360px;
    --hero-desc-scale: 1.0;
  }

  .tf-hero-content {
    transform: translateX(-70px) translateY(-150px);
  }

  .tf-hero-btn {
    margin-top: 10px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
  }

  .tf-hero-btn-icon {
    width: 18px !important;
    height: 18px !important;
  }
}