/* =========================================================
   🧱 HERO SPACER — ESPACE SOUS LE HERO
========================================================= */
.tf-hero-spacer {
  width: 100%;
  height: 0;
  margin-top: var(--hero-spacer-mt, 0);
}

/* =========================================================
   VARIABLES GLOBALES (DÉFAUT > 1929px)
========================================================= */
:root {
  /* Couleurs */
  --tf-red: #bd3535;
  --tf-dark: #46415c;
  --tf-muted: #b3b8d0;

  /* Layout Base */
  --hero-scale: 1;
  --hero-shift-y: 0px;        
  --hero-content-x: -30px;    
  --hero-img-shift-y: 0px;    
  --hero-max-width: 680px;
  --hero-desc-scale: 1;
  
  /* Typo Base (Valeurs par défaut si non écrasées) */
  --title-size: 68px;        /* Taille fluide clamp() par défaut sinon */
  --desc-width: 100%;        /* Largeur auto */

  /* Bouton Base */
  --btn-mt: 0px;
  --btn-pad-y: 14px;
  --btn-pad-x: 32px;
  --btn-font-size: 25px; 
  --icon-size: 30px;
}

/* =========================================================
   BASE STYLES
========================================================= */
.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-img-shift-y));
  display: flex;
  align-items: center;
}

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

.tf-hero-content {
  /* Largeur max du conteneur texte global */
  max-width: var(--hero-max-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* POSITIONNEMENT CONTENU : X et Y pilotés par variables */
  transform: translateX(var(--hero-content-x)) translateY(var(--hero-shift-y));
}

.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;
  /* Utilise la variable --title-size si définie dans le média query, 
     sinon utilise le calcul clamp() par défaut */
  font-size: var(--title-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;
}

.tf-hero-desc {
  /* Largeur spécifique de la description */
  width: var(--desc-width);
  max-width: 100%;
  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);
}

.tf-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--btn-mt);
  padding: calc(var(--btn-pad-y) * var(--hero-scale)) calc(var(--btn-pad-x) * var(--hero-scale));
  font-family: 'BW Modelica', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: max(13px, calc(clamp(14px, 1.6vw, var(--btn-font-size)) * 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(var(--icon-size) * var(--hero-scale));
  height: calc(var(--icon-size) * var(--hero-scale));
  fill: currentColor;
}


/* =========================================================
   🖥 MEDIA QUERIES & CONTROLES
========================================================= */

@media (min-width: 2200px) {
  .tf-hero { min-height: 998px; }
  .tf-hero-content { margin-left: 80px; }
}

/* =========================================================
   👉 TON ÉCRAN CIBLE (≤ 1929px) - PANNEAU DE CONTRÔLE
========================================================= */
@media (max-width: 1929px) {
  :root {
    /* --- 1. GLOBAL --- */
    --hero-scale: 1;             /* Zoom global (1 = 100%, 0.9 = 90%) */
    --hero-spacer-mt: -150px;      /* Remonte le bloc suivant sous le hero */

    /* --- 2. POSITIONNEMENT (Haut/Bas/Gauche/Droite) --- */
    --hero-content-x: -50px;     /* Décalage horizontal du texte */
    --hero-shift-y: -132px;       /* Position verticale du texte (Négatif = Monte) */
    --hero-img-shift-y: -100px;   /* Position verticale de l'IMAGE (Négatif = Monte) */

    /* --- 3. CONTENU & TYPO --- */
    --hero-max-width: 680px;     /* Largeur max du bloc texte global */
    --title-size: 50px;          /* Taille forcée des titres */
    --desc-width: 550px;         /* Largeur forcée de la description */
    --hero-desc-scale: 0.85;        /* Échelle du texte de description */

    /* --- 4. BOUTON --- */
    --btn-mt: 17px;               /* Marge au-dessus du bouton */
    --btn-pad-y: 13px;           /* Padding vertical */
    --btn-pad-x: 19px;           /* Padding horizontal */
    --btn-font-size: 25px;       /* Taille police bouton */
    --icon-size: 30px;           /* Taille icône */
  }
}

/* =========================================================
   AUTRES RÉSOLUTIONS (Variables standards)
========================================================= */



@media (max-width: 1200px) {
  :root {
    /* --- 1. GLOBAL --- */
    --hero-scale: 0.78;             /* Zoom global (1 = 100%, 0.9 = 90%) */
    --hero-spacer-mt: -3px;      /* Remonte le bloc suivant sous le hero */

    /* --- 2. POSITIONNEMENT (Haut/Bas/Gauche/Droite) --- */
    --hero-content-x: -72px;     /* Décalage horizontal du texte */
    --hero-shift-y: -118px;       /* Position verticale du texte (Négatif = Monte) */
    --hero-img-shift-y: -100px;   /* Position verticale de l'IMAGE (Négatif = Monte) */

    /* --- 3. CONTENU & TYPO --- */
    --hero-max-width: 680px;     /* Largeur max du bloc texte global */
    --title-size: 41px;          /* Taille forcée des titres */
    --desc-width: 350px;         /* Largeur forcée de la description */
    --hero-desc-scale: 0.85;        /* Échelle du texte de description */

    /* --- 4. BOUTON --- */
    --btn-mt: -1px;               /* Marge au-dessus du bouton */
    --btn-pad-y: 13px;           /* Padding vertical */
    --btn-pad-x: 19px;           /* Padding horizontal */
    --btn-font-size: 25px;       /* Taille police bouton */
    --icon-size: 30px;           /* Taille icône */
  }
}


@media (max-width: 920px) {
  :root {
    /* --- 1. GLOBAL --- */
    --hero-scale: 0.78;             /* Zoom global (1 = 100%, 0.9 = 90%) */
    --hero-spacer-mt: -3px;      /* Remonte le bloc suivant sous le hero */

    /* --- 2. POSITIONNEMENT (Haut/Bas/Gauche/Droite) --- */
    --hero-content-x: -80px;     /* Décalage horizontal du texte */
    --hero-shift-y: -132px;       /* Position verticale du texte (Négatif = Monte) */
    --hero-img-shift-y: -100px;   /* Position verticale de l'IMAGE (Négatif = Monte) */

    /* --- 3. CONTENU & TYPO --- */
    --hero-max-width: 680px;     /* Largeur max du bloc texte global */
    --title-size: 34px;          /* Taille forcée des titres */
    --desc-width: 350px;         /* Largeur forcée de la description */
    --hero-desc-scale: 0.99;        /* Échelle du texte de description */

    /* --- 4. BOUTON --- */
    --btn-mt: -1px;               /* Marge au-dessus du bouton */
    --btn-pad-y: 13px;           /* Padding vertical */
    --btn-pad-x: 19px;           /* Padding horizontal */
    --btn-font-size: 25px;       /* Taille police bouton */
    --icon-size: 30px;           /* Taille icône */
  }
}

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

@media (max-width: 680px) {
  :root {
    --hero-scale: 0.90;
    --hero-shift-y: -170px;
    --hero-max-width: 400px;
    --hero-spacer-mt: -320px;
    --hero-content-x: -40px;
    
    --btn-mt: 20px;
    --btn-pad-y: 8px;
    --btn-pad-x: 18px;
    --btn-font-size: 20px;
  }
}

@media (max-width: 580px) {
  :root {
    --hero-shift-y: -170px;
    --hero-max-width: 400px;
    --hero-spacer-mt: -330px;
    --btn-mt: 40px;
  }
}

@media (max-width: 480px) {
  :root {
    --hero-shift-y: -170px;
    --hero-max-width: 320px;
    --hero-spacer-mt: -360px;
    --hero-content-x: -50px;
    --btn-mt: 20px;
  }
}

@media (max-width: 440px) {
  :root {
    --hero-max-width: 340px;
    --hero-content-x: -70px;
    --icon-size: 20px;
  }
}

@media (max-width: 390px) {
  :root {
    --hero-max-width: 360px;
    --btn-mt: 10px;
    --btn-pad-y: 6px;
    --btn-font-size: 18px;
    --icon-size: 21px;
  }
}

@media (max-width: 345px) {
  :root {
    --hero-scale: 0.85;
    --hero-shift-y: -150px;
    --hero-max-width: 330px;
    --hero-desc-scale: 1.0;
    
    --btn-mt: 10px;
    --btn-pad-y: 8px;
    --btn-font-size: 13px;
    --icon-size: 21px;
  }
}


/* =========================================================
   TF FEATURES GRID
========================================================= */

.tf-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

.tf-feature {
  text-align: center;
  padding: 30px 20px;
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.tf-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.tf-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
}

.tf-feature-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--tf-red);
  stroke-width: 3;
  fill: none;
}

.tf-feature h3 {
  font-family: 'BW Modelica', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--tf-dark);
  margin-bottom: 12px;
}

.tf-feature p {
  font-size: 15px;
  line-height: 1.6;
  color: #6b6f85;
}

/* Mobile */
@media (max-width: 768px) {
  .tf-features {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 20px;
  }
}