/* Mobiles (écrans < 600px) */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .div_box {
    flex-direction: column;
    height: auto;
    padding: 20px 0 20px 0;
  }

  h1 {
    font-size: large;
  }

  h2 {
    font-size: medium;
  }

  p {
    font-size: small;
  }

  .visuel_2 {
    width: 75%;
  }

  .box {
    width: 75%;
    height: auto;
  }

  .streaming-links {
    flex-wrap: wrap;
    gap: 20px;
    font-size: x-large;
  }

  .div_form {
    width: 90%;
  }

  header,
  footer {
    max-width: 95%;
  }

  .visuel_1 {
    max-width: 15%;
  }
}

/* Tablettes (600px à 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }

  .div_box {
    flex-direction: column;
    height: auto;
    padding: 20px 0 20px 0;

  }

  .box {
    width: 80%;
    height: auto;
  }

  .visuel_2 {
    max-width: 80%;
  }

  .streaming-links {
    gap: 30px;
  }

  .div_form {
    width: 70%;
  }

  .visuel_1 {
    max-width: 15%;
  }
}

/* Ordinateurs (>= 1025px) */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
  }

  .box {
    width: 640px;
    height: 427px;
  }

  .div_form {
    width: 50%;
  }

  .visuel_1 {
    max-width: 15%;
  }
}