/* --------------------------------------------------
   1. IMPORT DES POLICES
-------------------------------------------------- */

@font-face {
  font-family: "Urbanist";
  src: url("Urbanist-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Urbanist";
  src: url("Urbanist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Urbanist";
  src: url("Urbanist-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}



/* --------------------------------------------------
   2. RESET & BASE
-------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Urbanist", sans-serif;
  font-weight: 300;
  color: #ffffff;
  background-color: #000000;
}

/* --------------------------------------------------
   3. HERO + BACKGROUND
-------------------------------------------------- */

.hero {
  min-height: 100vh;
  padding: 48px 24px 40px;
  
  display: flex;
  flex-direction: column;          /* vertical */
  justify-content: space-between;  /* content + footer */
  align-items: center;

  background-image: url("background_light.jpg");
  background-color: white;
  background-repeat: no-repeat;

  background-size: 110% 100%;
  /* background-size: cover; */
  background-position: 0% 0%; /* mobile par défaut */
}

.hero.bg-loaded {
  background-image: url("background_big.webp");
}

.hero__content {
  max-width: 720px;          /* colonne plus étroite */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;        /* TOUT centré */
  text-align: center;
  row-gap: 48px;
}


/* --------------------------------------------------
   4. LOGO
-------------------------------------------------- */

.logo-img {
  width: 355px;
  height: auto;
  display: block;
  margin: 80px auto;
}

/* --------------------------------------------------
   5. TEXTE CENTRAL
-------------------------------------------------- */

/* Titre : 70px, line-height 104%, letter-spacing 2% (~0.02em)
   On utilise clamp pour que ça reste OK sur mobile. */
   .hero__headline {
    font-weight: 600;
    font-size: 70px;
    line-height: 73px;     /* ~104% */
    letter-spacing: 0.02em;
    margin: 185px 0 137px;   /* 1.5rem / 1.75rem */
  }
  
  /* Corps : 36px, line-height 108%, letter-spacing 3% (~0.03em)
     Idem, on clamp pour ne pas exploser sur mobile. */
  .hero__body {
    font-size: 34px;
    line-height: 39px;
    letter-spacing: 0.03em;
  
    display: flex;
    flex-direction: column;
    gap: 18px;             /* 1.1rem ≈ 18px */
    max-width: 770px;      /* 40rem → 640px */
  }
  

  .hero__bold {
    font-weight: 500
  }
  .tm {
    font-size: 18px;        /* plus petit que le texte (36px) */
    vertical-align: super;  /* le met en exposant */
    line-height: 0;         /* évite d’ajouter de la hauteur de ligne */
    margin-left: 2px;       /* petit espace après "Draw" */
    letter-spacing: 0;      /* optionnel pour annuler le tracking du paragraphe */
  }
  .hero__body p {
    margin: 0;
  }
  
  .hero__contact {
    margin-top: 28px;
  }
  
  .hero__body a {
    color: #ffffff;
    border-bottom: none !important;
    text-decoration: none !important;  
    padding-bottom: 2px;
  }
  

/* --------------------------------------------------
   FOOTER – DESKTOP (base)
-------------------------------------------------- */

.hero__footer {
  width: 100%;
  padding: 200px 64px 0px;  /* même padding que le contenu desktop */
  font-size: 14px;       /* taille desktop */
}

.footer__row--links {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer__block {
  text-align: left;
}

.footer__title {
  font-weight: 600;
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 600;
}

.footer__links {
  display: flex;
  flex-direction: column;
  font-size: 30px;
  gap: 4px;
}

.footer__links a {
  color: #ffffff;
  text-decoration: none;
}

.footer__links a:hover {
  text-decoration: underline;
}

.footer__copyright {
  margin-top: -28px;
  font-size: 25px;
  font-weight: 600;
}
/* --------------------------------------------------
   7. MEDIA QUERIES
-------------------------------------------------- */




@media (max-width: 767px) {
  .hero {
    padding: 32px 20px 24px;
    background-position: 52% 0%; /* on ajustera si besoin */
  }

  .hero__content {
    max-width: 90%;
    row-gap: 32px;
  }

  /* LOGO */
  .logo-img {
    width: 114px;
    height: auto;
    margin: 40px auto;
  }

  /* SUBHEADLINE : "10 seconds. No needle..." */
  .hero__headline {
    font-size: 30px;
    line-height: 32px;      /* léger 104–107% */
    letter-spacing: 0.02em;
    margin: 20px 0 20px;
  }

  /* TEXTE CORPS */
  .hero__body {
    font-size: 19px;
    line-height: 22px;      /* ~115% */
    letter-spacing: 0.03em;
    gap: 12px;
    max-width: 100%;
    margin-top: 70px;
  }

  .tm {
    font-size: 10px;        /* plus petit que le texte (36px) */
  }

  /* FOOTER MOBILE */
  .hero__footer {
    padding: 80px 20px 24px;
    font-size: 24px;      /* comme demandé */
  }

  .footer__row--links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer__block {
    margin-top: 40px;
  }

  .footer__title,
  .footer__links a,
  .footer__copyright {
    font-size: 24px;
  }

  .footer__copyright {
    margin-top: 40px;     /* © tout en bas comme sur ta maquette */
    font-size: 16px;
  }

  .invisible_mobile {
    display: none;
  }
}

@media (max-width: 406px) {
  .hero__content {
    max-width: 94%;
  }
}

@media (max-width: 389px) {
  .hero__content {
    max-width: 95%;
  }
}


/* TABLETTE */
@media (min-width: 768px) {
  .hero {
    padding: 64px 48px 48px;
    /* background-position: 48% 18%; */
  }

  .hero__content {
    max-width: 760px;
  }
}

/* DESKTOP (≈ 1440px) */
@media (min-width: 1200px) {
  .hero {
    padding: 72px 64px 56px;
    /* background-position: 50% 30%; */
  }

  .hero__content {
    max-width: 780px;
  }

  .hero__footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

/* GRAND ÉCRAN (iMac) */
@media (min-width: 1600px) {
  .hero {
    /* background-position: 50% 40%; */
  }
}