.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media screen and (min-width: 800px) {
  .infos, .intro, .Résumer, 
  .apropos, .realisateur, .form{
    font-size: 16px;
    padding-left: 200px;
    padding-right: 200px;
  }
  .merci__texte{
    font-size: 25px;
  }
}

@media screen and (max-width : 800px){
  .infos, .intro, .Résumer, 
  .apropos, .realisateur, .form{
    font-size: 14px;
    padding-left: 75px;
    padding-right: 75px;
  }
  .merci__texte{
    font-size: 18px;
  }
}
nav, footer{
  background-color: rgb(122, 122, 122);
  margin: 0px;
  padding: 0px;
  text-align: center;
}

h1{
  margin: 0px;
  font-family: 'Tektur', sans-serif;
}

body{
  margin: 0px;
  padding: 0px;
  background-color: rgb(43, 42, 42);
  font-family: 'Tektur', sans-serif;
}

.grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 150px);
  gap: 2%;
}

.bouton{
  grid-column: 4 / 6;
  grid-row: 3;
  font-family: 'Tektur', sans-serif;
}

.infos{
  grid-column: 4 / 6;
  grid-row: 2;
  margin: 0%;
  padding: 0%;
  font-family: 'Tektur', sans-serif;
  color: white;
}

.titre{
  grid-column: 4;
  grid-row: 1;
  margin-top: 70px;
  font-family: 'Tektur', sans-serif;
  color: white;
  font-size:larger
}

.bouton__acheter, .bouton__télécharger{
  font-family: 'Tektur', sans-serif;
  width: 100px;
}

P, h2, h3{
  font-family: 'Tektur', sans-serif;
  color: white;
  margin-left: 15px;
  margin-right: 15px;
}

.image__film{
  width: 300px;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.image__réalisateur{
  width: 300px;
}

.realisateur, .Résumer, .apropos, .intro{
  display: block;
  text-align: center;
}
.form{
  color: white;
  text-align: center;
  background-color: rgb(197, 197, 197);
}

.form__group{
  display: block;
  margin-bottom: 10px;
}

.form__email{
  margin-bottom: 10px;
}

.form__rue{
  display: block;
  margin-bottom: 10px;
}

.submit{
  width: 250px;
  height: 30px;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.label__prenom,.label__nom, .label__email, .label__tel,
.label__rue, .label__code, .label__pays, .label__numéro, 
.label__date, .label__chiffre{
  display: block;
}

input{
  height: 25px;
  width: auto;
}

.merci{
  text-align: center;
  font-size: 20px;
  margin-left: 150px;
  margin-right: 150px;
}

.merci__image{
  width: 500px;
}

.reading-progress {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgb(122, 122, 122);
  height: 10px;
}

.reading-progress__bar {
  width: 0%;
  background-color: white;
  height: 10px;
}

a {
  color: rgb(154, 49, 49);
}

a :visited{
  color: green;
}