/* Reset */
*{
  box-sizing: border-box;
}

body{
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fffaf2;
  color: #000;
  overflow-x: hidden;
}

/* Fond avec opacité */
.background{
  position: fixed;
  inset: 0;
  background-image: url("background.png");
  background-size: cover;
  background-position: right center;
  opacity: 0.25;          /* 👈 réglage ici */
  z-index: -1;
}

/* Layout principal */
.hero{
  min-height: 100vh;
  padding: 80px 40px;
}

/* Colonne alignée */
.content{
  max-width: 720px;
  margin-left: 120px;   /* ton décalage horizontal actuel */
  margin-top: 120px;    /* ← AJOUT : décalage vertical */
}



/* Logo */
.logo{
  max-width: 220px;
  margin-bottom: 32px;
}

/* Titre */
h1{
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.08;
  margin: 0 0 32px 0;
  font-weight: 800;
}

/* Couleurs */
.pink{ color:#ff6ec7; }
.green{ color:#b7e300; }
.blue{ color:#1488ff; }
.red{ color:#ff2b2b; }

/* Infos */
.infos{
  font-size: 18px;
  margin-bottom: 32px;
}

.infos p{
  margin: 6px 0;
}

/* Boutons */
.actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn{
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
}

.btn.primary{
  background:#1488ff;
  color:#fff;
}

.btn.secondary{
  background:#1488ff;
  color:#fff;
}

/* Mobile */
@media (max-width: 600px){
  .hero{
    padding: 48px 20px;
  }

  .logo{
    max-width: 180px;
  }

  h1{
    font-size: 32px;
  }
}

@media (max-width: 600px){
  .content{
    margin-top: 40px;
    margin-left: 0;
  }
}