/* ============================================================
   HOOP N'FIT — TELECHARGER CSS
   Styles de la page Télécharger (page-telechargement.php), chargés avec
   home.css sur cette page seulement. home.css fournit la base (.hnf-home,
   titres, badges des stores, lignes numérotées .hnf-club__item, gros prix
   .hnf-price__big) ; ici, uniquement ce qui est propre à la page, préfixé .tl-.
   ============================================================ */

/* --- haut de page : les installations à gauche, l'écran de l'app à droite --- */
.hnf-home .tl-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 60px; align-items: end; padding: 160px var(--hnf-edge) 0; background: var(--hnf-black); overflow: hidden; }
.tl-top__txt { max-width: 700px; padding-bottom: 88px; }
.tl-lead { font-size: 20px; color: var(--hnf-muted); max-width: 26em; margin-top: 22px; }
.tl-lead b { color: var(--hnf-white); font-weight: 600; }
.tl-rows { display: grid; margin-top: 44px; border-top: 1px solid var(--hnf-line); }
.tl-row { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hnf-line); }
.tl-row > b { font-family: var(--font); text-transform: uppercase; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.tl-note { color: var(--hnf-muted); font-size: 15px; line-height: 1.45; margin-top: 12px; max-width: 30em; }
.tl-qr { display: flex; align-items: center; gap: 16px; }
.tl-qr img { width: 92px; height: 92px; flex: none; background: #fff; padding: 5px; border-radius: 6px; }
.tl-qr p { color: var(--hnf-muted); font-size: 16px; max-width: 17em; }
.tl-phone { margin: 0; align-self: end; justify-self: center; }
.tl-phone img { width: 100%; max-width: 330px; height: auto; margin-bottom: -70px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }

/* --- ce qui se passe ensuite --- */
.hnf-home .tl-next { padding-block: 88px; background: var(--hnf-black2); border-top: 1px solid var(--hnf-line); }
.tl-next .hnf-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; }
.tl-next__side p:not(.hnf-eyebrow) { color: var(--hnf-muted); margin-top: 16px; max-width: 22em; }

/* --- le prix, et l'aide --- */
.hnf-home .tl-price { padding-block: 88px; background: var(--hnf-black); }
.tl-price .hnf-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: end; }
.tl-price .hnf-price__big { font-size: clamp(34px, 4.2vw, 54px); margin-top: 0; }
.tl-more { color: var(--hnf-muted); font-size: 18px; max-width: 26em; }
.tl-more + .tl-more { margin-top: 14px; }
.hnf-home .tl-more a { color: var(--hnf-white); border-bottom: 1px solid var(--orange); }

/* --- étroit --- */
@media (max-width: 900px) {
  .hnf-home .tl-top { grid-template-columns: 1fr; gap: 20px; padding: 124px 20px 0; }
  .tl-top__txt { max-width: none; padding-bottom: 0; }
  .tl-lead { font-size: 18px; }
  .tl-rows { margin-top: 32px; }
  .tl-row { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .tl-row--desktop { display: none; }
  .tl-phone img { max-width: 240px; margin: 20px auto -60px; }
  .hnf-home .tl-next { padding-block: 48px; }
  .tl-next .hnf-wrap { grid-template-columns: 1fr; gap: 20px; }
  .hnf-home .tl-price { padding-block: 48px; }
  .tl-price .hnf-wrap { grid-template-columns: 1fr; gap: 20px; }
}